1.Bootstrap

1.简介

1 什么是 bootstrap?

bootstrap 是当下最流行的前端框架（界面工具集);

特点是灵活简单、代码优雅、美观大方；

目的在于让 web 开发更加迅速、敏捷；

由 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 年发起的，并利用业余时间完成了第一个版本的开发。

2 什么是框架？

库 lib library

写的更少做的更多提供一套较为便捷的操作方式；

将一套功能体系封装到一个单独的文件中的东西；

Bootstrap 提供一套前端需要的界面工具集合。

3 为什么使用 Bootstarp？

生态圈火，不断地更新迭代；
提供一套美观大方的界面组件；
响应式界面，移动设备优先；
让我们的 Web 开发更简单，更快捷

注意:

使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式

Bootstrap 不是 BootStrap！这是一个词，不是合成词，其含义为：n. 引导指令,引导程序

官网：http://www.bootcss.com/

github 地址： https://github.com/twbs/bootstrap

2.Bootstrap 初体验

Boostrap 依赖 Jquery

1.项目集成 BootStrap

2.Bootstrap 初体验

视口 viewport：可以说是一个虚拟的窗口，默认是 980px

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--设置编码 gbk gb2312 utf-8-->
    <meta charset="utf-8">
    <!--
       告诉IE浏览器以最新的 解析器  去解析当前的页面，
            content="IE=edge"中的edge代表是最新的解析器,也可以说是IE-11。
            content="IE=10" 代表指定使用IE-10的解析器
    -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
        兼容移动设备
        	视口：虚拟的窗口，默认是980px
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>01-Bootstrap基本模板</title>

    <!-- 引入Bootstrap -->
    <link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet">

    <!--
       如果IE浏览器版本小于9，将使用下面两个库()：
           html5shiv：让版本小于9的IE浏览器，也能够使用h5的标签
           respond： 让版本小于9的IE浏览器，也能够使用C3的样式
    -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>
<body>

<h1>你好，世界！</h1>

<!-- Bootstrap这个个框架依赖jQuery; jquery从1.9版本以后不再兼任ie9以下浏览器（推荐1.9.1） -->
<script src="jquery/jquery-3.2.0.js"></script>
<script src="bootstrap/dist/js/bootstrap.js"></script>

</body>
</html>

####3.最简单的使用

组件：button , button -group , input , progress , 字体图标

    <!--按钮-->
    <button class="btn btn-default">普通按钮</button>
    <button class="btn btn-success">成功</button>
    <button class="btn btn-danger">危险</button>


    <!--按钮组-->
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-success">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>

    <div class="btn-toolbar" role="toolbar" aria-label="...">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">4</button>
            <button type="button" class="btn btn-default">5</button>
            <button type="button" class="btn btn-default">5</button>
        </div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">6</button>
            <button type="button" class="btn btn-default">7</button>
            <button type="button" class="btn btn-default">8</button>
        </div>
    </div>

    <!--文本框-->
    <div class="input-group" style="width: 300px">
        <span class="input-group-addon" id="basic-addon1" style="width: 100px">@ @ </span>
        <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>
    <div class="input-group" style="width: 300px">
        <span class="input-group-addon" id="basic-addon3" style="width: 100px">@</span>
        <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
        <span class="input-group-addon" id="basic-addon2">@example.com</span>
    </div>


    <!--进度条-->
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
            40%
        </div>
    </div>

4.视口 ViewPort

什么是视口？窗口

每个网页默认都会有一个视口，视口其实是一个虚拟的窗口 ，默认的尺寸是 980 像素;
为了兼容移动设备，一般让网页视口的宽度和设备的宽度的比例为 1:1 , 并且不允许用户缩放网页;

<!-- 
viewport: 视口
width=device-width ： 视口的宽 等于 设备的宽
user-scalable ： 不允许网页进行缩放
initial-scale ：初始化缩放为1
maximum-scale=1.0 ： 最大缩放为1
minimum-scale=1.0 ： 最小缩放为1
-->
<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

5.Bootstrap 常用的组件

1.面板

<div class="panel panel-danger">
        <div class="panel-heading">
            今天天气很好!
        </div>
        <div class="panel-body">
            风和日丽!
        </div>
        <div class="panel-footer">
            2019-10-21
        </div>
    </div>

2.徽章

<span class="badge" style="background-color: red">10</span>
 <div class="badge" style="background-color: red">20</div>
<button type="button" class="btn btn-danger">
    <span class="badge" style="background-color: red">30</span>
</button>
 <a href="">input
     <span class="badge" style="background-color: red">23</span>
     </a>

3.模态框

    <!--弹出模态框
    data-target="#myModel" 指定弹出的目标 (值是: 选择器)
    data-toggle="model"    以模态框的方式弹出
    data-dismiss="modal"   以模态框的方式消失
    -->
    <button class="btn btn-success" data-toggle="modal" data-target="#myModal">立即登录</button>
    <!--模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">欢迎登陆考试中心</h4>
                </div>
                <div class="modal-body">
                    <div>
                        用户名:<input type="text" placeholder="请输入用户名">
                    </div>
                    <div>
                        密&nbsp;&nbsp;&nbsp;码:<input type="password" placeholder="请输入密码">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">登录</button>
                </div>
            </div><
        </div>
    </div>

1.显示或者隐藏模态框方式一( 添加属性 )：

   //调出模态框:
   //data-target="#myModal"   指定弹出的目标（值是：选择器）
   //data-toggle="modal"      指定以模态框的方式弹出
   //data-dismiss="modal"     指定以模态框的方式消失
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

2.显示或者隐藏模态框方式二 ( 调用 js 代码 )：

$('#myModal').modal('show'); // 通过js代码显示模态框

3.监听模态框的显示和隐藏

$('#myModal').on('show.bs.modal', function (e) {
  console.log('模态框显示时回调');
})

$('#myModal').on('hidden.bs.modal', function (e) {
   console.log('模态框隐藏时回调');
})

2.Bootstrap 小案例

1 新建项目

使用 bootstrap 与 Jquery 框架技术 ;

其中 boostrap 依赖 Jquery

2 BootStrap 页面的简单配置

1.配置 : 网页的宽等于设备的宽

2.初始化网页的缩放比例为 1

3 实现导航条组件

注意: 导航条组件的 nav 默认的高度是 50px 并且 margin-bottom:20px

<!--导航条-->
<!--
    data-toggle="collapse"　指定以折叠的方式切换目标
    data-target="#nav_content"  指定要折叠的目标
    
    data-toggle="modal"　   指定以模态框的方式打开目标
    data-toggle="dropdown"  指定以下拉的方式打开目标
    
    role: 是用来增强语义性，没有什么其它功能，可以删除。
    sr-only 和 aria-xx : 是屏幕阅读辅助，兼容残障人使用的设备-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <!--品牌 和 一个移动端展示的按钮-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

                    data-target="#nav_content" aria-expanded="false">

                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img src="./img/header_logo.png" alt="" style="width: 100px">
            </a>
        </div>
        <!--导航条的内容-->
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="nav_content">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">蛋糕</a></li>
                <li><a href="#">下午茶</a></li>
                <li><a href="#">精选食材</a></li>
                <li><a href="#">最新活动</a></li>
                <li><a href="#">企业专区</a></li>
                <li><a href="#">会员中心</a></li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="">注册</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

4 设计导航条样式

添加 .navbar-fixed-top 类可以让导航条固定在浏览器的顶部

注意:固定的导航条会遮住页面上的其他的内容，可给 <body> 设计 padding
导航条包含一个 .container 或者 .container-fluid 容器，从而让导航条居中显示或者自适应显示
添加 .navbar-inverse 可以改变导航栏显示的背景颜色

5 实现轮播图（js 插件）和样式

<!--
  以下容器就是整个轮播图组件的整体，
  注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图
  bootstrap.js会自动为当前元素添加图片轮播的特效
-->
<!--广告轮播图-->
<div id="sz-banner" class="carousel slide" data-ride="carousel">
    <!-- 点 -->
    <!-- ol标签是图片轮播的控制点 -->
    <ol class="carousel-indicators">
        <!--
         每一个li就是一个单独的控制点
           data-target属性就是指定当前控制点控制的是哪一个轮播图，其目的是如果界面上有多个轮播图，便于区分到底控制哪一个
           data-slide-to属性是指当前的li元素绑定的是第几个轮播项
         注意，默认必须给其中某个li加上active，展示的时候就是焦点项目
        -->
        <li data-target="#sz-banner" data-slide-to="0" class="active"></li>
        <li data-target="#sz-banner" data-slide-to="1"></li>
        <li data-target="#sz-banner" data-slide-to="2"></li>
        <li data-target="#sz-banner" data-slide-to="3"></li>
    </ol>

    <!-- 内容 -->
    <!--
    .carousel-inner是所有轮播项的容器盒子，
    注意role="listbox"代表当前div是一个列表盒子，作用就是给当前div添加一个语义
  -->
    <div class="carousel-inner" role="listbox">
        <!-- 每一个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点 -->
        <div class="item active">
            <!-- 轮播项目中展示的图片 -->
            <img src="./img/banner1.jpg" alt="...">
            <!-- 标题或说明性文字，如果不需要，直接删除当前div.carousel-caption -->
            <div class="carousel-caption">
            </div>
        </div>
        <div class="item">
            <img src="./img/banner2.jpg" alt="...">
            <div class="carousel-caption">
            </div>
        </div>
        <div class="item">
            <img src="./img/banner3.jpg" alt="...">
            <div class="carousel-caption">
            </div>
        </div>
        <div class="item">
            <img src="./img/banner4.jpg" alt="...">
            <div class="carousel-caption">
            </div>
        </div>
    </div>

    <!-- 控制器 上一张 -->
    <!-- 图片轮播上左右两个控制按钮，分别点击可以滚动到上一张和下一张 -->
    <!-- 此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID -->
    <!-- 另外a链接中的data-slide="prev"代表点击该链接会滚到上一张，如果设置为next的话则相反 -->
    <a class="left carousel-control" href="#sz-banner" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <!--下一张-->
    <a class="right carousel-control" href="#sz-banner" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

6 栅格布局(一)

1.*container 响应式容器类

定义一个固定宽度且有居中的版心
container 是具备响应式的能力
宽度有四个档位 1170 970 750 100%

主要作用

在随时可能的宽度变化(响应式)中提供宽度限制。当页面宽度变化，container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比，所以他们的值不需要变化。

提供一个水平方向的 padding，使其内部的内容不会接触到浏览器的边界，大小为 15px

1.原生 JS 实现 container 响应式布局原理-resize

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            height: 30px;
            background-color: red;
            margin:  0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
    </div>
    <!--
        四个档位 1170 970 750 100%
    -->
<script>
  
    window.onload=function () {
        //1.拿到container标签
        var container = document.querySelector('.container');

        windowChange();

        //2.监听窗口发生改变...
        window.addEventListener('resize',windowChange)
        
        function windowChange() {
            //3.拿到口的宽度
            var windowWidth=window.innerWidth; //width + padding
            
            if(windowWidth>=1170){
                container.style.width=1170+'px';
            }else if(windowWidth>=970){
                container.style.width=970+'px';
            }else if(windowWidth>=750){
                container.style.width=750+'px';
            }else{
                //...
                container.style.width='100%';
            }
        }
    }
</script>
</body>
</html>

2.媒体查询实现 container 响应式布局原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .container{
            height: 30px;
            background-color: red;
            margin:  0 auto;
        }

        /*... 750*/
        @media  (max-width: 750px){
            .container{
                width: 100%;
            }

        }

        @media  (min-width: 750px) and (max-width: 970px){
            .container{
                width: 750px;
            }
        }

        @media  (min-width: 970px) and (max-width: 1170px){
            .container{
                width: 970px;
            }
        }

        @media  (min-width: 1170px) {
            .container{
                width: 1170px;
            }
        }

    </style>
</head>
<body>

    <div class="container">

    </div>

    <!--
        四个档位 1170 970 750 100%
    -->
</body>
</html>

2.row 类

row 类代表一行，一般都是与 container 类一起结合使用。

并且在栅格系统中，所有“列（column）必须放在 ” .row 内;

总结：

container 左右 padding 15px ; row 左右 margin 左右-15px , 为什么要这么折腾呢?

1.row 中嵌套的是 column, column 左右 padding 15px ;

2.在进行多层嵌套时，column 可以充当 container 容器，省了一层嵌套。

附加注意 : column 除了左右有 padding 15px 默认还有一个相对定位。

3.栅 shan 格系统

所有“列（column）必须放在 ” .row 内; 并且 .row 一般放在 .container 内

Bootstrap中的栅格系统就是将一行划分为12列
我们通过col-*-*的类名控制某个元素在某种屏幕的情况下展示几列
col-md-6 在中等屏幕下 占1/2
col-xs-12 在超小屏幕下 占全部

4.col--类

在某种屏幕尺寸下控制列的占比

col-xs-[列数]：在超小屏幕下展示几份
col-sm-[列数]：在小屏幕下展示几份
col-md-[列数]：在中等屏幕下展示几份
col-lg-[列数]：在大屏幕下展示几份
__xs__ : 超小屏幕 手机 (<768px)  
__sm__ : 小屏幕 平板 (≥768px) 
__md__ : 中等屏幕 桌面显示器 (≥992px) 
__lg__ : 大屏幕 大桌面显示器 (≥1200px)

该布局代码：

<!--中间的栅栏布局-->
<div id="main">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
        </div>
    </div>
</div>

7 栅格布局（二）

1.每一个 item 布局的代码：

<!--栅格布局-->
<div id="main">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col-sm-6">
        <img src="./img/cake1.jpg" alt="">
        <h3>90蛋糕</h3>
        <button class="btn btn-success">立即购买</button>
      </div>
      <div class="col-md-4 col-sm-6">
        <img src="./img/cake2.jpg" alt="">
        <h3>樱桃芝士蛋糕</h3>
        <button class="btn btn-success">立即购买</button>
      </div>
      <div class="col-md-4 col-sm-6">
        <img src="./img/cake3.jpg" alt="">
        <h3>牛油果低脂蛋糕</h3>
        <button class="btn btn-success">立即购买</button>
      </div>
    </div>
  </div>
</div>

8 栅格布局样式

body {
    padding-top: 50px;    
}

#main {
	padding: 20px;
}

/*水平居中*/
#main .container-fluid .row .col-md-4 {
	text-align: center;
}

/*图片大小*/
#main .container-fluid .row .col-md-4 img {
	width: 180px;
}

#main .container-fluid .row .col-md-4 h3 {
    font-size: 15px;
    font-weight: bolder;
}

9 标签添栅格布局

该布局的代码：

<!--底部的tabBar-->
    <div id="tabBar">
        <!-- Nav tabs -->
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="nine">
                <div class="row">
                    <div class="col-md-8">.col-md-8</div>
                    <div class="col-md-4">.col-md-4</div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="Cherry">
                <div class="row">
                    <div class="col-md-4">.col-md-4</div>
                    <div class="col-md-8">.col-md-8</div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="Avocado">
                <div class="row">
                    <div class="col-md-8">.col-md-8</div>
                    <div class="col-md-4">.col-md-4</div>
                </div>
            </div>
        </div>
    </div>

10 标签栅格布局的完善

该布局对应的代码：

    <div id="tabBar">
    <!-- 标签选项卡 -->
    <!-- data-toggle="tab" ： 面板切换的方式。 （modal , tab , dropdown ,collapse..）-->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#nine" aria-controls="home" role="tab" data-toggle="tab">70蛋糕</a></li>
        <li role="presentation"><a href="#Cherry" aria-controls="profile" role="tab" data-toggle="tab">樱桃芝士蛋糕</a></li>
        <li role="presentation"><a href="#Avocado" aria-controls="messages" role="tab" data-toggle="tab">牛油果低脂蛋糕</a></li>
    </ul>
    <!-- 标签面板 -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="nine">
            <div class="row">
                <div class="col-md-8">
                    <h2>回归|70蛋糕</h2>
                    <p class="lead" >收起散落在路上的珍贵点滴，每个年代都有属于自己的童年记忆，
                        70的淡定、80的率性、90的不羁??
                        思绪总是在不曾提起的故事里静静流淌，掠过往事，找寻简单的快乐。</p>
                </div>
                <div class="col-md-4">
                    <img class="img-responsive" src="./img/cake1.jpg" alt="">
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="Cherry">
            <div class="row">
                <div class="col-md-4">
                    <img class="img-responsive" src="./img/cake2.jpg" alt="">
                </div>
                <div class="col-md-8">
                    <h2>桃芝|樱桃芝士蛋糕</h2>
                    <p class="lead">有种美好本在人生际遇之处，
                        那些初次的余香，俨如口中混合着的丝缕酸甜，
                        就像樱桃和百利甜一样，成了没人遗忘的天生一对。</p>
                </div>

            </div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="Avocado">
            <div class="row">
                <div class="col-md-8">
                    <h2>初心|牛油果低脂蛋糕</h2>
                    <p class="lead">牛油果的清香弥漫在口腔，和着乳清奶酪咀嚼，
                        仿佛热带的阳光，洒满心房，也惊叹牛油果的神奇，
                        包容所有的味道，升华所有的味觉，伟大的感动，总在不言中。</p>
                </div>
                <div class="col-md-4">
                    <img class="img-responsive" src="./img/cake3.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

11 标签栅格布局的样式

1.设计字体样式

/*图片距离顶部*/
#tabBar .tab-content .tab-pane .row .col-md-4 {
	margin-top: 50px;
}

/*字体距离顶部*/
#tabBar .tab-content .tab-pane .row .col-md-8 {
	margin-top: 100px;
}
/*h2 字体颜色*/
#tabBar .tab-content .tab-pane .row .col-md-8 h2{
	color:  red;
}

2.自适应布局

/*自适应布局--> 其中screen and 可以省略*/
@media screen and (max-width: 650px) {
    /**字体距离顶部*/
    #tabBar .tab-content .tab-pane .row .col-md-8 {
        margin-top: 40px;
    }
}

12 响应式小工具

<div class="topbar hidden-xs hidden-sm"></div>
//  或者
<div class="topbar visible-md visible-lg"></div>

hidden-xx : 在某种屏幕下隐藏( display : ‘none’ )

visible-xx-xxx : 在某种屏幕尺寸下显示

visible-md-xx：指的是中等屏幕可见，不是中等屏幕以上

visible-md-block visible-lg-block == hidden-sm hidden-xs

1. *探究-响应式工具 hidden

根据 hidden-xxx 的特点，我们可以通过媒体查询的方式探究探究：

<!--
.hidden-xs  < 768
.hidden-sm  [768, 992)
.hidden-md  [992, 1200)
.hidden-lg  >= 1200
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 20px auto;
        }
		//screen and 是可以省略的
        @media screen and (max-width: 768px){
            .hidden-xs{
                display: none;
            }
        }

        @media screen and (min-width: 768px) and (max-width: 992px){
            .hidden-sm{
                display: none;
            }
        }

        @media screen and (min-width: 992px) and (max-width: 1200px){
            .hidden-md{
                display: none;
            }
        }

        @media screen and (min-width: 1200px){
            .hidden-lg{
                display: none;
            }
        }
    </style>
</head>

<!--
.hidden-xs  < 768
.hidden-sm  [768, 992)
.hidden-md  [992, 1200)
.hidden-lg  >= 1200
-->

<body>
    <div class="container hidden-sm ">
    </div>
</body>
</html>

2 *探究-响应式工具 visible

2.根据 visible-xxx 的特点，我们可以通过媒体查询的方式探究探究：

<!--
    .visible-xs-block
    .visible-xs-inline
    .visible-xs-inline-block
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 20px auto;
            display: none;
        }

        @media screen and (max-width: 768px){
            .visible-xs-block{
                display: block;
            }
            .visible-xs-inline{
                display: inline;
            }
            .visible-xs-inline-block{
                display: inline-block;
            }
        }

        @media screen and (min-width: 768px) and (max-width: 992px){
            .visible-sm-block{
                display: block;
            }
            .visible-sm-inline{
                display: inline;
            }
            .visible-sm-inline-block{
                display: inline-block;
            }
        }

        @media screen and (min-width: 992px) and (max-width: 1200px){
            .visible-md-block{
                display: block;
            }
            .visible-md-inline{
                display: inline;
            }
            .visible-md-inline-block{
                display: inline-block;
            }
        }

        @media screen and (min-width: 1200px){
            .visible-lg-block{
                display: block;
            }
            .visible-lg-inline{
                display: inline;
            }
            .visible-lg-inline-block{
                display: inline-block;
            }
        }
    </style>
</head>
<!--
    .visible-xs-block
    .visible-xs-inline
    .visible-xs-inline-block
-->

<body>
    <div class="container visible-xs-block">

    </div>
    <p>我是p</p>
</body>
</html>

1.Bootstrap

1.Bootstrap

1.简介

2.Bootstrap 初体验

1.项目集成 BootStrap

2.Bootstrap 初体验

4.视口 ViewPort

5.Bootstrap 常用的组件

2.Bootstrap 小案例

1 新建项目

2 BootStrap 页面的简单配置

3 实现导航条组件

4 设计导航条样式

5 实现轮播图（js 插件）和样式

6 栅格布局(一)

1.*container 响应式容器类

1.原生 JS 实现 container 响应式布局原理-resize

2.媒体查询实现 container 响应式布局原理

2.row 类

3.栅 shan 格系统

4.col--类

7 栅格布局（二）

1.每一个 item 布局的代码：

8 栅格布局样式

9 标签添栅格布局

10 标签栅格布局的完善

11 标签栅格布局的样式

12 响应式小工具

1. *探究-响应式工具 hidden

2 *探究-响应式工具 visible

相关帖子

Bootstrap 入门

easyui elementui 和 bootstrop 什么区别？

主机排行网重大更新，移动端自适应

bootstarp table 获取 Long 类型主键丢失

Thymeleaf 引用 WebJars

Bootstrap 的模态框居中显示

前端组兼容性范围

欢迎来到这里！

1.Bootstrap

1.Bootstrap

1.简介

2.Bootstrap 初体验

1.项目集成 BootStrap

2.Bootstrap 初体验

4.视口 ViewPort

5.Bootstrap 常用的组件

2.Bootstrap 小案例

1 新建项目

2 BootStrap 页面的简单配置

3 实现导航条组件

4 设计导航条样式

5 实现 轮播图 （js 插件）和 样式

6 栅格布局(一)

1.*container 响应式容器类

1.原生 JS 实现 container 响应式布局原理-resize

2.媒体查询实现 container 响应式布局原理

2.row 类

3.栅 shan 格系统

4.col-**-**类

7 栅格布局（二）

1.每一个 item 布局的代码：

8 栅格布局样式

9 标签添栅格布局

10 标签栅格布局的完善

11 标签栅格布局的样式

12 响应式小工具

1. *探究-响应式工具 hidden

2 *探究-响应式工具 visible

相关帖子

Bootstrap 入门

easyui elementui 和 bootstrop 什么区别？

主机排行网重大更新，移动端自适应

bootstarp table 获取 Long 类型主键丢失

Thymeleaf 引用 WebJars

Bootstrap 的模态框居中显示

前端组兼容性范围

欢迎来到这里！

5 实现轮播图（js 插件）和样式

4.col--类