day05-移动web开发－bootstrap（响应式开发）

设备的划分：

image.png

媒体查询：

使用媒体查询能针对不同屏幕区间设置不同的布局和样式
怎么使用媒体查询：关于媒体查询 @media
语法： @media screen and (max-width: 768px) and (min-width: 320px){属性样式}
demo：
响应式容器：

在超小屏设备的时候 768px以下当前容器的宽度100% 背景蓝色
在小屏设备的时候 768px-992px 当前容器的宽度750px 背景绿色
在中屏设备的时候 992px-1200px 当前容器的宽度970px 背景红色
在大屏设备的时候 1200px以上当前容器的宽度1170px 背景黄色

       body{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 1000px;
            margin: 0 auto;
            height: 1000px;
            background: pink;
        }
        <div class="container"></div>

方案如下：

 @media screen and (max-width: 768px) {
            /*1. 在超小屏设备的时候 768px以下      当前容器的宽度100%     背景蓝色*/
            .container{
                width: 100%;
                background: blue;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px){
            /*2. 在小屏设备的时候   768px-992px    当前容器的宽度750px    背景绿色*/
            .container{
                width: 750px;
                background: green;
            }
        }
        @media screen and (min-width: 992px) and (max-width: 1200px){
            /*3. 在中屏设备的时候   992px-1200px   当前容器的宽度970px    背景红色*/
            .container{
                width: 970px;
                background: red;
            }
        }
        @media screen and (min-width: 1200px){
            /*4. 在大屏设备的时候   1200px以上      当前容器的宽度1170px   背景黄色*/
            .container{
                width: 1170px;
                background: yellow;
            }
        }

关于bootstrap基本模版：

<!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--TODO-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>



<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

normalize&reset区别:

共同点：都是重置样式库，增强浏览器的表现一致性
不同点：
举个例子：ul
reset.css list-style:none ---因为需求
normalize.css 不会重置ul样式 ---本身已经在每个浏览器表现一致的元素
一句话：都是增强浏览器的表现一致性但是normalize不会重置已经一致的元素

基本样式-container:

<style>
        .container{
            height: 100px;
            background: pink;
        }
        .container-fluid{
            height: 100px;
            background: hotpink;
        }
    </style>
 <!--响应式布局容器-->
    <div class="container">

    </div>
    <!--流式布局容器-->
    <div class="container-fluid">
  </div>

效果.png

栅格系统：

栅格系统：其实就是行和列的布局，网格状布局
行：row
container容器默认有15px的左右内间距 .row 填充父容器的15px的左右内间距 margin-left,margin-right -15px拉伸

360截图18750824131055.png

列：col-- 不确定（参数）
col：列样式
第一个：屏幕的大小
大屏设备 lg 大屏设备以上生效包含本身
中屏设备 md 中屏设备以上生效包含本身
小屏设备 sm 小屏设备以上生效包含本身
超小屏设备 xs 超小屏设备以上生效包含本身
第二个*：每一行的分等份，默认分成12等份，数字代表的是占多少份

<div class="container">
  <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
    </div>
</div>

demo:
大屏设备让div平均分成6等份
中屏设备让div平均分成4等份
小屏设备让div平均分成3等份
超小屏设备让div平均分成2等份

<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    </div>
</div>

栅格系统-扩展功能:

<div class="container">
    <div class="row">
        <!--栅格嵌套-->
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
        </div>
        <!--列的偏移-->
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-3"></div>
                <div class="col-xs-6 col-xs-offset-1"></div>
            </div>
        </div>
        <!--列的排序-->
        <div class="col-xs-4">
            <div class="row">
                <!--
                push 往后推
                pull 往前拉
                -->
                <div class="col-xs-3 col-xs-push-9">col-xs-3</div>
                <div class="col-xs-9 col-xs-pull-3">col-xs-9</div>
            </div>
        </div>
    </div>
</div>

响应式工具(媒体查询demo):

大屏设备显示
中屏设备隐藏
小屏设备显示
超小屏设备隐藏

 <style>
        @media screen and (min-width: 1200px){
            .box{
                display: block;
            }
        }
        @media screen and (min-width: 992px) and (max-width: 1200px){
            .box{
                display: none;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px){
            .box{
                display: block;
            }
        }
        @media screen and (max-width: 768px){
            .box{
                display: none;
            }
        }
    </style>

响应式工具-bootstrap(demo):

大屏设备显示
中屏设备隐藏
小屏设备显示
超小屏设备隐藏
visible-lg 大屏显示其他隐藏
visible-md
visible-sm
visible-xs
3.2版本以后建议使用hidden
hidden-lg
hidden-md
hidden-sm
hidden-xs

 <style>
        .container{
            height: 100px;
            background: pink;
        }
        .container-fluid{
            height: 100px;
            background: hotpink;
        }
    </style>
//显示
<div class="box visible-lg visible-sm">内容</div>
//隐藏
<div class="box hidden-md hidden-xs">内容</div>

自定义字体图标：

1.通过@font-face定义自己的字体

@font-face{}

2.申明自己的字体名称

 font-family: 'wjs';

3.引入字体文件（约束某一段字符代码什么图案）

src:
    url(../fonts/MiFie-Web-Font.svg) format('svg'),
    url(../fonts/MiFie-Web-Font.eot) format('embedded-opentype'),
    url(../fonts/MiFie-Web-Font.ttf) format('truetype'),
    url(../fonts/MiFie-Web-Font.woff) format('woff');

4.怎么使用维护性更好

.wjs_icon{
    font-family: wjs;
}
.wjs_icon_phone::before{
    content: "\e908";
}
.wjs_icon_tel::before{
    content: "\e909";
}

导航条:

<!-- navbar 导航模块  navbar-default 默认样式  -->
<nav class="navbar navbar-default">
    <!-- 导航的内容容器 -->
    <div class="container">
        <!-- 包含 商标区域 和 切换按钮（在移动端显示） -->
        <div class="navbar-header">
            <!--切换按钮-->
            <!--
            类名：                  collapsed  样式
            属性：
            data-toggle="collapse"  申明是什么组件=折叠组件
            data-target="#bs-example-navbar-collapse-1" 控制的目标元素=选择器
            其他：
            aria-expanded="false"  aria-* 代表提供给屏幕阅读器使用的（盲人阅读器）
            class="sr-only" screen read only  代表提供给屏幕阅读器使用的（盲人阅读器）
            -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--商标区域-->
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- 导航连接  表单  其他内容  被切换 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!--默认的导航-->
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <!--右对齐的导航-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>

collapse组件(切换):

<button data-toggle="collapse" data-target=".box">切换</button>
<a href=".box" data-toggle="collapse" >切换</a>
<div class="box">
    内容<br>
    内容<br>
    内容<br>
    内容<br>
    内容<br>
</div>

轮播图：

<!-- carousel 轮播图的模块  slide是否加上滑动效果 -->
<!-- data-ride="carousel" 初始化轮播图属性-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
   <!-- 点盒子 -->
   <ol class="carousel-indicators">
       <!--
           data-target="#carousel-example-generic" 控制目标轮播图
           data-slide-to="0" 控制的是轮播图当中的第几张 （索引）
           class="active" 当前选中的点
       -->
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
       <li data-target="#carousel-example-generic" data-slide-to="1"></li>
       <li data-target="#carousel-example-generic" data-slide-to="2"></li>
   </ol>
   <!-- 图片盒子 -->
   <!-- role="listbox" 提供给屏幕阅读器使用 -->
   <div class="carousel-inner">
       <!--需要轮播的容器-->
       <div class="item active">
           <!--图片-->
           <img src="..." alt="...">
           <!--说明-->
           <div class="carousel-caption">
               ...
           </div>
       </div>
       <div class="item">
           <img src="..." alt="...">
           <div class="carousel-caption">
               ...
           </div>
       </div>
       ...
   </div>

   <!-- 上一张下一张按钮 -->
   <!--
    data-slide="prev"
    data-slide="next"
    href="#carousel-example-generic"   控制目标轮播图
   -->
   <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
       <span class="glyphicon glyphicon-chevron-left"></span>
   </a>
   <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right"></span>
   </a>
</div>

轮播图pc:

需求：高度固定，图片居中，容器铺满

<style>
        .pc_imgBox{
            display: block;
            height: 600px;
            width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_01_2000x410.jpg)"></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_03_2000x410.jpg)"></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_04_2000x410.jpg)"></a>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

轮播图（wap）：

宽度自适应，高度自动变化

 <style>
        .m_imgBox{
            display: block;
            width: 100%;
        }
        .m_imgBox img{
            display: block;
            width: 100%;
        }
    </style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <a href="#" class="m_imgBox"><img src="../images/slide_01_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="m_imgBox"><img src="../images/slide_02_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="m_imgBox"><img src="../images/slide_03_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="m_imgBox"><img src="../images/slide_04_640x340.jpg" alt=""></a>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

轮播图(响应式):

 <style>
        .pc_imgBox{
            display: block;
            height: 400px;
            width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .m_imgBox{
            display: block;
            width: 100%;
        }
        .m_imgBox img{
            display: block;
            width: 100%;
        }
    </style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_01_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_01_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_02_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_03_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_03_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_04_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_04_640x340.jpg" alt=""></a>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

轮播图动态获取：

1.获取轮播图数据

 var getData = function (callback) {
        /*缓存了数据*/
        if(window.data){
            callback && callback(window.data);
        }else {
            /*1.获取轮播图数据*/
            $.ajax({
                type:'get',
                url:'js/data.json',
                /*强制转换后台返回的数据为json对象*/
                /*强制转换不成功程序报错，不会执行success,执行error回调*/
                dataType:'json',
                data:'',
                success:function (data) {
                    window.data = data;
                    callback && callback(window.data);
                }
            });
        }
    }

2.根据数据动态渲染根据当前设备屏幕宽度判断

var render = function () {
        getData(function (data) {
            /*2.根据数据动态渲染  根据当前设备  屏幕宽度判断 */
            var isMobile = $(window).width() < 768 ? true : false;
            //console.log(isMobile);

            
            /*2.1 准备数据*/
            /*2.2 把数据转换成html格式的字符串*/
            /*使用模版引擎：那些html静态内容需要编程动态的*/
            /*发现：点容器  图片容器  新建模版*/
            /*开始使用*/
            /*<% console.log(list); %> 模版引擎内不可使用外部变量 */
            var pointHtml = template('pointTemplate',{list:data});
            //console.log(pointHtml);
            var imageHtml = template('imageTemplate',{list:data,isMobile:isMobile});
            //console.log(imageHtml);
            /*2.3 把字符渲染页面当中*/
            $('.carousel-indicators').html(pointHtml);
            $('.carousel-inner').html(imageHtml);
        });
    }

3.测试功能页面尺寸发生改变事件

 $(window).on('resize',function () {
        render();
        /*通过js主动触发某个事件*/
    }).trigger('resize')

4.移动端手势切换

 var startX = 0;
    var distanceX = 0;
    var isMove = false;
    
    /*originalEvent 代表js原生事件*/
    $('.wjs_banner').on('touchstart',function (e) {
        startX = e.originalEvent.touches[0].clientX;
    }).on('touchmove',function (e) {
        var moveX = e.originalEvent.touches[0].clientX;
        distanceX = moveX - startX;
        isMove = true;
    }).on('touchend',function (e) {
        /*距离足够 50px 一定要滑动过*/
        if(isMove && Math.abs(distanceX) > 50){
            /*手势*/
            /*左滑手势*/
            if(distanceX < 0){
                //console.log('next');
                $('.carousel').carousel('next');
            }
            /*右滑手势*/
            else {
                //console.log('prev');
                $('.carousel').carousel('prev');
            }
        }
        startX = 0;
        distanceX = 0;
        isMove = false;
    });

媒体查询-扩展:

响应式容器：

在超小屏设备的时候 768px以下当前容器的宽度100% 背景蓝色
在小屏设备的时候 768px-992px 当前容器的宽度750px 背景绿色
在中屏设备的时候 992px-1200px 当前容器的宽度970px 背景红色
在大屏设备的时候 1200px以上当前容器的宽度1170px 背景黄色

    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 100%;
            margin: 0 auto;
            height: 1000px;
            background: blue;
        }


        @media (min-width: 768px) {
            .container{
                width: 750px;
                background: green;
            }
        }

        @media (min-width: 992px) {
            .container{
                width: 970px;
                background: red;
            }
        }

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


    </style>
</head>
<body>

<div class="container"></div>
</body>

标签页(demo):

<div>
    <!-- 页签 -->
    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>
    <!--内容-->
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="home">1</div>
        <div role="tabpanel" class="tab-pane" id="profile">2</div>
        <div role="tabpanel" class="tab-pane" id="messages">3</div>
        <div role="tabpanel" class="tab-pane" id="settings">4</div>
    </div>

</div>

image.png

解决换行和滑动的问题：

var initMobileTab = function () {
    /*1.解决换行问题*/
    var $navTabs = $('.wjs_product .nav-tabs');
    var width = 0;
    $navTabs.find('li').each(function (i, item) {
        var $currLi = $(this);//$(item);
        /*
        * width()  内容
        * innerWidth() 内容+内边距
        * outerWidth() 内容+内边距+边框
        * outerWidth(true) 内容+内边距+边框+外边距
        * */
        var liWidth = $currLi.outerWidth(true);
        width += liWidth;
    });
    console.log(width);
    $navTabs.width(width);

    /*2.修改结构使之区域滑动的结构*/
    //加一个父容器给 .nav-tabs 叫  .nav-tabs-parent

    /*3.自己实现滑动效果 或者 使用iscroll */
    new IScroll($('.nav-tabs-parent')[0],{
        scrollX:true,
        scrollY:false,
        click:true
    });
}

阴影效果：

<style>
        .box{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            box-shadow: 0 0 10px 10px hotpink inset;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

image.png

悬浮式导航：

data-spy="affix" data-offset-top="200"

<nav class="navbar wjs_nav" data-spy="affix" data-offset-top="200">
</nav>

css要设置top定位的值

.wjs_nav {
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid #ccc;
    background: #fff;
    
     width: 100%;
    border-radius: 0;
    top: 0;
    z-index: 9999;
}

最后编辑于：2019.05.29 18:36:17

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,142评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,298评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,068评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,081评论 1赞 291
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,099评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,071评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,990评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,832评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,274评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,488评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,649评论 1赞 347
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,378评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,979评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,625评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,796评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,643评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,545评论 2赞 352

day05-移动web开发－bootstrap（响应式开发）

设备的划分：

媒体查询：

关于bootstrap基本模版：

normalize&reset区别:

基本样式-container:

栅格系统：

栅格系统-扩展功能:

响应式工具(媒体查询demo):

响应式工具-bootstrap(demo):

自定义字体图标：

导航条:

collapse组件(切换):

轮播图：

轮播图pc:

轮播图（wap）：

轮播图(响应式):

轮播图动态获取：

媒体查询-扩展:

标签页(demo):

image.png

解决换行和滑动的问题：

阴影效果：

悬浮式导航：

推荐阅读更多精彩内容