发布于 由admin

响应式布局（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

发表评论

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