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

作者: 东邪_黄药师 | 来源:发表于2019-05-27 22:33 被阅读0次

day05-移动web开发－bootstrap（响应式开发）
Bootstrap
Bootstrap
初识BootStrap
Bootstrap4 学习笔记一
快速掌握-bootstrap
Web工具&框架
响应式布局---bootstrap框架
HTML移动端开发
网页设计太麻烦？15款免费优质Bootstrap UI工具包助你

设备的划分：

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;
}

day05-移动web开发－bootstrap（响应式开发）
设备的划分：媒体查询：使用媒体查询能针对不同屏幕区间设置不同的布局和样式怎么使用媒体查询：关于媒体查询 @me...
Bootstrap
Bootstrap开篇 Bootstrap是Twitter公司推出的,专门用于开发响应式布局,移动设备优先的WEB...
Bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项...
初识BootStrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项...
Bootstrap4 学习笔记一
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstr...
快速掌握-bootstrap
笔记-bootstrap 是什么 bootstrap 前端开发框架，可以快速的搭建 web 页面。框架分为响应式...
Web工具&框架
快速开发工具 bootstrap 响应式布局，移动设备优先bootstrap官网 Swiper 移动端滑动效果 S...
响应式布局---bootstrap框架
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进...
HTML移动端开发
移动端开发流程详解(建议使用Bootstrap响应式布局) 头部代码 Foo
网页设计太麻烦？15款免费优质Bootstrap UI工具包助你
Bootstrap作为针对响应式设计和移动优先的前端web开发，是当下最流行的设计框架之一。使用免费的Boots...

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

设备的划分：

媒体查询：

关于bootstrap基本模版：

normalize&reset区别:

基本样式-container:

栅格系统：

栅格系统-扩展功能:

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

响应式工具-bootstrap(demo):

自定义字体图标：

导航条:

collapse组件(切换):

轮播图：

轮播图pc:

轮播图（wap）：

轮播图(响应式):

轮播图动态获取：

媒体查询-扩展:

标签页(demo):

image.png

解决换行和滑动的问题：

阴影效果：

悬浮式导航：

相关文章

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

Bootstrap

Bootstrap

初识BootStrap

Bootstrap4 学习笔记一

快速掌握-bootstrap

Web工具&框架

响应式布局---bootstrap框架

HTML移动端开发

网页设计太麻烦？15款免费优质Bootstrap UI工具包助你

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读