响应式布局(Bootstrap框架)

什么是响应式布局?

响应式布局,指的是一个网站能够兼容多个终端,而不是为了一个终端做一个特定的版本,如下图所示:

响应式开发

1.1、响应式开发原理

响应式开发原理,指的就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。

设备划分尺寸区间
超小屏幕(手机)<768px
小屏设备(平板)>=768px ~ <992px
中等屏幕(桌面显示器)>=992px ~ <1200px
宽屏设备(大桌面显示器)>= 1200px

1.2、响应式布局容器

响应式需要一个父级作为布局容器,来配合子级元素的大小和布局变化的效果。

它的原理就是在不同的屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。

常规响应式的尺寸划分

屏幕类型宽度值
超小屏幕(手机,小于768px)设置宽度为100%
小屏幕(平板,大于等于768px)设置宽度为750px
中等屏幕(桌面显示器,大于等于992px)宽度设置为970px
大屏幕(大桌面显示器,大于等于1200px)宽度设置为1170px

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>

    <style>

        .root-container {
            height: 100px;
            margin: 0 auto;
            background: red;
        }

        /*
        1、超小屏幕(手机,小于768px) 设置宽度为100%
        max-width: 767px 表示<=767px
        */
        @media screen and (max-width: 767px){

            .root-container {
                width: 100%;
            }

        }

        /*

        2、小屏幕(平板,大于等于768px) 设置宽度为750px
        min-width: 768px 表示 >= 768px
        */
        @media screen and (min-width: 768px) {

            .root-container {
                width: 750px;
            }

        }

        /*

        3、中等屏幕(桌面显示器,大于等于992px) 宽度设置为970px
        min-width: 992px 表示 >= 992px
        */
        @media screen and (min-width: 992px){

            .root-container {
                width: 970px;
            }

        }


        /*
        4、大屏幕(大桌面显示器,大于等于1200px)宽度设置为1170px
        min-width: 1200px 表示 >= 1200px
        */
        @media screen and (min-width: 1200px){

            .root-container {
                width: 1170px;
            }

        }




    </style>
</head>
<body>
    <!--
    通过媒体查询来检测当前屏幕不同的宽度,然后来改变容器的大小即可
    -->
    <!-- 响应式开发里面,首先需要一个布局容器 -->
    <div class="root-container">


    </div>



    <table border="1" style="margin-top: 20px">
        <thead>
            <th colspan="2">常规响应式的尺寸划分</th>
        </thead>
        <tbody>
            <tr><td>屏幕类型</td><td>宽度值</td></tr>
            <tr><td>超小屏幕(手机,小于768px)</td><td>设置宽度为100%</td></tr>
            <tr><td>小屏幕(平板,大于等于768px)</td><td>设置宽度为750px</td></tr>
            <tr><td>中等屏幕(桌面显示器,大于等于992px)</td><td>宽度设置为970px</td></tr>
            <tr><td>大屏幕(大桌面显示器,大于等于1200px)</td><td>宽度设置为1170px</td></tr>
        </tbody>
    </table>

</body>
</html>

示例图:

案例:响应式导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式导航</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .root-container {
            width: 750px;
            margin: 0 auto;
        }

        .root-container ul {
            height: 100%;
        }
        .root-container ul li {
            width: 12.5%;
            height: 50px;
            float: left;
            list-style: none;
            text-align: center;
            line-height: 50px;
            color: white;
            background: darkblue;
        }

        .root-container ul li:hover {
            background: darkcyan;
            color: darkblue;
        }



        /*
        max-width: 767px 表示<=767像素(<768px)
        */
        @media screen and (max-width: 767px) {
            .root-container {
                width: 100%;
            }
            .root-container ul li {
                width: 33.33%;
            }
        }

    </style>
</head>
<body>

<!--
需求分析:
1、当屏幕大于等于768px时,我们给布局root-container的宽度设置为750px
2、root-container 里面包含8个小盒子,每个盒子的宽度为 12.5% (100/8 = 12.5),高度为50像素,浮动显示
3、当屏幕的宽度小于 768像素时,root-container的宽度为100%
4、此时里面有8个li,宽度修改为33.33%,这样一行就只能显示3个li标签,剩余部分换行显示
-->

    <div class="root-container">
        <ul>
            <li>导航一</li>
            <li>导航二</li>
            <li>导航三</li>
            <li>导航四</li>
            <li>导航五</li>
            <li>导航六</li>
            <li>导航七</li>
            <li>导航八</li>
        </ul>

    </div>
</body>
</html>

效果图:

Bootstrap前端开发框架

Bootstrap简介

Bootstrap来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和Javascript的,它简洁灵活,使用web 开发更加快捷。

中文官网:https://www.bootcss.com/

官网:https://getbootstrap.com/

推荐:https://v3.bootcss.com/

Bootstrap通过CDN的方式引入并使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 第一步、引入bootstrap相关链接 -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>

    <!-- 第二步、使用bootstrap中的组件 -->
    <div class="alert alert-success" role="alert">这是警告框</div>
</body>
</html>

效果图:

Bootstrap组件介绍

Bootstrap布局容器

Bootstrap需要为页面内容和栅格系统包裹一个布局容器,而Bootstrap预先定义好了这个类,类名为 .container

1、container类选择器

.container 是响应式的布局容器,它的宽度是固定的 ,具体类型和宽度如下:

类型宽度
大屏(>=1200px)宽度定位1170px
中屏(>=992px)宽度定位970px
小屏(>=768px)宽度定位750px
超小屏宽度定位100%

示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 第一步、引入bootstrap相关链接 -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>

    <!-- 第二步、使用bootstrap中的布局容器(.container) -->
    <div class="container">
        我是Bootstrap中的布局容器
    </div>

</body>
</html>

效果图 :

container类选择器默认的样式如下:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

2、container-fluid类选择器

.container-fluid是流式布局容器,它的宽度是100%,也就是百分比布局,它会占据全部视口(viewport)容器,该类选择器适合做移动端开发。

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 第一步、引入bootstrap相关链接 -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <style>
        .container {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }
    </style>
</head>
<body>

    <!-- 第二步、使用bootstrap中的流体布局容器(.ontainer-fluid) -->
    <div class="container-fluid">
        我是Bootstrap中的流体布局容器
    </div>

</body>
</html>

效果图如下:

Bootstrap栅格系统

栅格系统,也称 “网格系统”,它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注