移动端库（zepto、swiper）和框架（bootstrap）

作者: jxvl假装 | 来源:发表于2019-10-29 00:13 被阅读0次

移动端库（zepto、swiper）和框架（bootstrap）
JS基础----Zepto
Web工具&框架
前端框架
移动web开发
八、了解express
jQuery 知识点
2017.12.5-学习笔记：前端零碎知识点整理复习
【移动端】Zepto框架简介
jquery和zepto有什么区别?

移动端js事件

移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：

touchstart 手指放到屏幕上时触发
touchmove 手指在屏幕上滑动时触发
touchend 手指离开屏幕时触发
touchcancel 系统取消touch事件时触发，比较少用

移动端一般有三种操作，点击、滑动，拖动，这三种操作一般是组合使用上面的几个事件来完成，所以上面的四个事件很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库

移动端的库

zeptojs

Zepto是一个轻量级的针对现代高级浏览器的javascript库，它与jquery有着类似的api。zepto的一些功能是专门针对移动端浏览器的，它的最初目标是在移动端提供一个精简的类似jquery的js库。基本可以当做jquery用

官网：http://zeptojs.com
zepto中文api：http://www.css88.com/doc/zeptojs_api/

简单案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/zepto.min.js"></script>
    <script type="text/javascript">
        $(function(){
            alert( $('#div1').html() ); //基本当作jquery使用
        })
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
</body>
</html>

swiper

swipter.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件（库），一般用来触屏焦点图、触屏整屏滚动等效果。

中文网址：http://www.swiper.com.cn

详情暂略

框架之：bootstrap

简单、直观、强悍的前端开发框架，让web开发更迅速、简单。是目前很受欢迎的前代理人框架之一。bootstrap是基于html、css、javascript的，让书写代码更容易。移动优先，响应式（同时适配pc端、手机、平板）布局开发。基于jquery

ps：对于移动端，往往有个视口的问题，所以需要设置

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

由于js的阻塞加载，官网上的做法是将js的加载放在文件的尾部，但是由于在实际开发中往往是把头部独立出去供所有页面共享，所以还是写在文件开头部分

官网上面有很多现成的模板，可以直接去copy，非常好用

bootstrap中文网址：http://www.bootcss.com/

下载bootstrap

在这里插入图片描述

我们使用的通常是dist中的文件，其中的fonts是可用的字体图标（把图标当成字来用+）

容器

bootstrap的容器有两种：

contrainer-fluid 流体容器（宽度100%），有15px的padding
container 响应式容器（宽度按照查询的区间来变化的）
- 1170
- 970
- 750
- 100%

bootstrap响应式查询区间

大于1200，宽度就为1170
大于992，小于1200，宽度为970
大于768，小于992，宽度750
小于768的时候，宽度100%

ps：其实就是写好的样式，直接用即可

用法示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bootstrap文档</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        .container-fluid,.container{
            height:50px;
            border:1px solid #000;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="container-fluid">流体容器</div>
    <br><br><br>
    <div class="container">响应式容器</div>
</body>
</html>

核心：栅格系统\

基本使用

bootstap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：

col-lg- 大于1200排成一行，小于1200分别占一行
col-md- 大于992排成一行，小于1200分别占一行
col-sm- 大于768排成一行，小于768分别占一行
col-xs- 始终排成一行

最后的-跟数字，且必须能被12整除，eg：col-lg-4，表示这个标签占所在行的4/12

以上内容必须包含在row样式类的标签中

ps：row的左右有-15px的margin，以平衡container的15px的padding

用法示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bootstrap文档</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        div[class*='col-']{
            /*为了便于区分，给所有的col-加自定义样式*/
            /*中括号是属性选择器*/
            /*表示含有col-样式的就匹配*/
            height:50px;
            background-color:gold;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <h2>栅格系统</h2>
        </div>
    </div>

    <div class="container">     
        <div class="row">   
            <!-- row是固定写法 -->

            <!-- 这一行按照3-4-2-3划分，其和必须是12等分，如果超过12等分，就换行 -->
            <div class="col-lg-3">col-lg-3</div>
            <div class="col-lg-4">col-lg-4</div>
            <div class="col-lg-2">col-lg-2</div>
            <div class="col-lg-3">col-lg-3</div>
        </div>
        <br><br>
        <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>
        <br><br>
        <div class="row">
            <div class="col-sm-3">col-sm-3</div>
            <div class="col-sm-3">col-sm-3</div>
            <div class="col-sm-3">col-sm-3</div>
            <div class="col-sm-3">col-sm-3</div>
        </div>
        <br><br>
        <div class="row">
            <div class="col-xs-5">col-xs-5</div>
            <div class="col-xs-3">col-xs-3</div>
            <div class="col-xs-2">col-xs-2</div>
            <div class="col-xs-2">col-xs-2</div>
        </div>
    </div>
</body>
</html>

如果每行的分数超过12，自动换行，如果不足12，左对齐，右空出

可以同时使用多个col-标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bootstrap文档</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">     
         div[class*='col-']{
            background-color:gold;
            border:1px solid #000;
        } 
        .box{
            height:200px;
            max-width:240px;    
            /*最大宽度*/
            background-color:cyan;
            border:1px solid #000;
            margin:20px auto;
            /*相对于容器水平居中*/
        }   
    </style>
</head>
<body>
    <div class="container">     
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
            <!-- 可以同时适配多个样式，当尺寸不同的时候，自动采用 -->
            <!-- 当lg和md的时候，4个排成一行，再小的时候，两个排成一行 -->
            <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
            <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
            <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
        </div>      
    </div>
</body>
</html>

列偏移

col-lg-offset-n
col-md-offset-
col-sm-offset-
col-xs-offset-

其中n为要偏移的份数（每行按12等分划分的）

用法见下面的偏移、中间留白与隐藏类的综合应用

bootstrap隐藏类

即：满足了某种条件，就可以将栅格隐藏掉。应用情景：某装饰图片在大图时可以显示出来，而小图时希望将其隐藏掉

分别当其为xs、sm、mg、lg的时候隐藏：

hidden-xs
hidden-sm
hidden-md
hidden-lg

列偏移（以及利用列偏移实现中间留白）以及隐藏类的应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bootstrap文档</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">     
        div[class*='col-']{
            background-color:gold;
            border:1px solid #000;
            height:50px;
        }
    
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
        <h2>栅格偏移</h2>
        </div>
    </div>

    <div class="container">     
        <div class="row">
            <!-- 栅格偏移 -->
            <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">col-lg-5  col-lg-offset-1</div>
            <!-- 因为这一行没有占到12分，为了还是使其居中，让第一个偏移一等分 -->
            <div class="col-lg-5 col-md-5">col-lg-5</div>       
        </div>
        <br><br><br>
        <div class="row">
            <!-- 利用偏移实现栅格留空 -->
            <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1"></div>
            <!-- 在两部分之间空一等分出来，每一个占4分，都偏移1分 -->
            <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1"></div>
        </div>
        <br><br><br>
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6">3</div>
            <div class="col-lg-3 col-md-4 hidden-md col-sm-6 hidden-xs">4</div>
            <!-- 最后一个在xs的时候隐藏 -->
        </div>      
    </div>
</body>
</html>

bootstrap按钮

ps：对于bootstrap中的样式，有很多都是已经写好的，要用的时候直接加在class里面即可（可以多看官方文档以有个大概了解），通常是用a标签和input标签创建

声明按钮：

按钮样式类：

btn-default 默认按钮样式
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link
btn-lg/md/xs 大/中/小按钮
btn-block 宽度是父级宽度100%的按钮，通常移动端会用到
active 当鼠标悬停在该按钮上面时会有响应的效果
disabled 当鼠标悬停在上面时，就不会再变成“手”，即不可点
btn-group 定义按钮组，该标签内可以放多个按钮，内部按钮之间没有margin，且各自的圆角消失，仿佛成了一个按钮，但是仍然是分开点击
btn-group-justified让按钮组占一行

注意：如果用input做group-justified，按钮可能会“缩”在一起，如下：

在这里插入图片描述

为此，可以在按钮组内的每个按钮外面再加一层按钮组

按钮的用法示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bootstrap文档</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
        <h2>按钮</h2>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <!-- 按钮的使用 -->
            <input type="button" name="" value="按钮" class="btn btn-primary">
            <!-- 可以用input和a标签创建按钮 -->
            <!-- 要使其为按钮，采用btn样式即可 -->
            <div class="btn active btn-default">这是一个div按钮</div>
            <a href="#" class="btn btn-success">a标签按钮</a>
            <a href="#" class="btn btn-info">a标签按钮</a>
            <a href="#" class="btn btn-warning">a标签按钮</a>
            <a href="#" class="btn btn-danger">a标签按钮</a>
            <a href="#" class="btn btn-link">a标签按钮</a>
            <a href="#" class="btn btn-danger active">a标签按钮</a>
            <a href="#" class="btn btn-danger disabled">a标签按钮</a>
        </div>
        <br><br>
        <div class="row">
            <!-- 不同尺寸的按钮 -->
            <a href="#" class="btn btn-success btn-lg">大按钮</a>
            <a href="#" class="btn btn-info btn-md">中等按钮</a>
            <a href="#" class="btn btn-warning btn-xs">小按钮</a>
            <a href="#" class="btn btn-danger">一般的按钮</a>
        </div>
        <br><br>
        <div class="row">
            <a href="#" class="btn btn-primary btn-block">宽度是100%的按钮</a>
        </div>
        <br><br>
        <div class="row">
            <div class="btn-group">
                <!-- 按钮组 -->
                <a href="#" class="btn btn-primary">步骤一</a>
                <a href="#" class="btn btn-primary">步骤二</a>
                <a href="#" class="btn btn-default">步骤三</a>
            </div>
        </div>
        <br><br>
        <div class="row">
            <div class="btn-group btn-group-justified">
                <!-- 行按钮组占一行 -->
                <a href="#" class="btn btn-primary">步骤一</a>
                <a href="#" class="btn btn-primary">步骤二</a>
                <a href="#" class="btn btn-default">步骤三</a>
            </div>
        </div>
        <br><br>
        <div class="row">
            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <!-- 为了避免这三个按钮“缩”在一起，在外层包一层btn-group -->
                    <input type="button" name="" value="步骤一" class="btn btn-primary">
                </div>
                <div class="btn-group">
                <input type="button" name="" value="步骤二" class="btn btn-primary">
                </div>
                <div class="btn-group">
                <input type="button" name="" value="步骤三" class="btn btn-default">
                </div>
            </div>
        </div>
        <br><br>
        <div class="row">

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

效果图：

在这里插入图片描述

bootstrap表单

声明表单：

form 声明一个表单域（是一个标签），默认是每个标签占一行

表单样式类：

form-inline 内联表单域，可以多个表单排列在一行
form-horizontal 水平排列表单域，需要结合栅格使用
form-group 表单组，包括表单文字和表单控件
form-control 文本输入框，下拉列表控件样式
checkbox checkbox-inline 多选框样式
radio raio-inline 单选框样式
input-group 表单控件组
input-group-addon 表单控件组物件样式
input-group-btn 表单控件组物件为按钮的样式
form-group-lg 大尺寸的表单，加到form-group后面即可
form-group-sm 小尺寸表单，加到form-group后面即可

使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <h2>表单</h2>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <form action="" role="form">
            <!-- role=form是无障碍设置项，针对盲人的，实际开发中有时写有时不写 -->
            <!-- 默认是每个表单占一行 -->
                <div class="form-group">
                    <label for="input01">用户名：</label>
                    <input type="text" name="" value="请输入用户名" class="form-control" id="input01">
                </div>  
                <div class="form-group">
                    <label for="pwd">密码：</label>
                    <input type="password" name="" class="form-control" id="pwd">
                </div>
            </form>

            <br><br>
            <form action="" class="form-inline">
                <!-- 内联表单，可以排列在一行 -->
                <div class="form-group">
                    <label for="input02">用户名：</label>
                    <input type="text" name="" value="请输入用户名" class="form-control" id="input02">
                </div>  
                <div class="form-group">
                    <label for="pwd2">密码：</label>
                    <input type="password" name="" class="form-control" id="pwd2">
                </div>
            </form>

            <br><br>
            <form action="" class="form-horizontal">
                <!-- 水平排列的表单 -->
                <div class="form-group form-group-lg">
                    <!-- 设置表单为大尺寸 -->
                    <label for="input03" class="col-xs-2">用户名：</label>
                    <!-- 需要结合栅格使用 -->
                    <div class="col-xs-10">
                        <!-- input的外面需要套div指定栅格 -->
                        <input type="text" name="" value="请输入用户名" class="form-control" id="input03">
                    </div>
                </div>  
                <div class="form-group form-group-sm">
                    <!-- 设置表单为小尺寸 -->
                    <label for="pwd3" class="col-xs-2">密码：</label>
                    <div class="col-xs-10">
                        <input type="password" name="" class="form-control" id="pwd3">
                    </div>
                </div>
            </form>

            <br><br>
            <!-- 表单控件组 -->
            <form action="">
                <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input type="text" class="form-control">
                </div>
                <br><br>

                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <input type="button" value="搜索" name="" class="btn btn-primary">
                        <!-- 搜索的按钮也可以直接使用<button class="btn btn-primary"></button> -->
                    </span>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

效果图：

在这里插入图片描述

字体图标

本质是字体，但是看起来是图标，也可以对其设置大小。

使用：直接使用样式的类名即可

注意：字体文件夹要和css文件夹在同一级目录下

示例：

<form action="">
    <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
            <!-- 使用字体图标 -->
            <button class="btn btn-primary">
                <span class="glyphicon glyphicon-search"></span>
                <!-- class直接使用字体名，然后因为是字体，还可以轻易地改大小和颜色 -->
            </button>
        </span>
    </div>
</form>

效果图：

在这里插入图片描述

导航条

注意：导航条的写法是用导航条把container包进去，因为导航条一般是左右顶格的

导航条样式类：

navbar 声明导航条

样式类：

navbar-default 声明默认的导航条样式（灰色）
navbar-inverse 声明反白的导航条样式（黑色）
navbar-static-top 去掉导航条的圆角
navbar-fixed-top 固定到顶部的导航条
navbar-fixed-bottom 固定到底部的导航条
navbar-header 申明logo的容器
navbar-brand 针对logo等固定内容的样式
nav navbar-nav 定义导航条中的菜单
navbar-form 定义导航条中的表单
navbar-btn 定义导航条中的按钮
navbar-text 定义导航条中的文本
navbar-left 菜单靠左
navbar-right 菜单靠右

案例：导航栏及其在屏幕缩放时候的显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="navbar navbar-default navbar-static-top">
        <!-- navbar包container -->
        <div class="container">

            <!-- 定义logo -->
            <div class="navbar-header">
                <!-- 导航条头部 -->
                <button class="navbar-toggle" data-toggle='collapse' data-target='#mymenu'>
                    <!-- 当屏幕缩小时显示出来，然后控制菜单的显示和隐藏 -->
                    <!-- bootstrap里面，牵涉到data这种东西，一般都是要做效果的 -->
                    <!-- data***部分是让点击时能够切换导航栏的显示和隐藏，data-toggle表示效果，data-target表示控制对象 -->
                    <span class="icon-bar"></span>
                    <!-- 横杠的效果 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">LOGO</a>
            </div>

            <div class="collapse navbar-collapse" id="mymenu">
                <!-- 屏幕缩小时隐藏导航栏 -->
                <!-- 定义菜单 -->
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <!-- 注意：active是写在li里面，而不是a -->
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">解决方案</a></li>
                </ul>

                <!-- 定义菜单里面的表单 -->
                <form action="" class="navbar-form navbar-right">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

效果图：

在这里插入图片描述

模态框（弹框）

modal 声明一个模态框
modal-dialog 定义模态框尺寸
modal-lg 定义大尺寸模态框
modal-sm 定义小尺寸模态框（尺寸需要在modal-dialog处添加，即第二层）
modal-header
modal-body
modal-footer

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn01').click(function(){
                // $('#modal02').modal('show');//或用下一种写法以避免点击空白处弹窗也消失的问题
                $('#modal02').modal({
                    show:true,
                    backdrop:false, //点击背景时是否隐藏
                })
            })
            $('#shutoff').click(function(){
                $('#modal02').modal('hide');
            })
        })
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <button class="btn btn-primary" data-toggle="modal" data-target='#modal01'>弹出模态框</button>
            <!-- 表示控制的对象是一个modal，其id为modal01 -->
            <button class="btn btn-primary" id="btn01">JS控制的弹框</button>
        </div>
    </div>

    <!-- 模态框是三层结构 -->
    <div class="modal fade" id="modal01">
        <!-- fade是设置模态框的显隐效果 -->
        <div class="modal-dialog modal-lg">
            <!-- modal-lg是控制其尺寸，表示采用大的modal，注意，要写在第二层里面，而不是最外层 -->
            <!-- 中等的不加，小的加modal-sm -->
            <div class="modal-content">
                <div class="modal-header">
                    提示弹框
                </div>
                <div class="modal-body">
                    <p>文字内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" data-dismiss='modal'>确定</button>
                    <button class="btn btn-default" data-dismiss='modal'>取消</button>
                    <!-- data-dismise是让点击取消的时候模态框消失 -->
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal02">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    提示弹框
                </div>
                <div class="modal-body">
                    <p>JS控制的弹窗</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn btn-default" id="shutoff">取消</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

效果图：

在这里插入图片描述

路径导航

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <ol class="breadcrumb">
                <!-- breadcrumb：面包屑，通常导航都用这个名字 -->
                <li><a href="#">首页</a></li>
                <li><a href="#">产品列表</a></li>
                <li class="active">水果</li>
            </ol>
        </div>
    </div>
</body>
</html>

效果图：

在这里插入图片描述

下拉菜单

dropdown-toggle
dropdown-menu

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="dropdown">
                <div class="btn btn-primary dropdown-toggle" data-toggle='dropdown'>下拉菜单
                    <!-- 注意：没有toggle-target，因为他们是一体的 -->
                    <span class="caret"></span>
                    <!-- 这是向下的小箭头 -->
                </div>
                <ul class="dropdown-menu">
                    <li><a href="#">菜单一</a></li>
                    <li><a href="#">菜单二</a></li>
                    <li><a href="#">菜单三</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

效果图：

在这里插入图片描述

巨幕

样式里面包容器，通常是将巨幕设置为背景

<div class=jumbotron>
    <div class="container">
    ...
    </div>
</div>

图片的响应式

img-responsive 声明响应式图片，是一个样式类，直接加给图片即可

移动端库（zepto、swiper）和框架（bootstrap）
移动端js事件移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件...
JS基础----Zepto
Zepto：是轻量级的，最初是为移动端开发的库，是jQuery的轻量级替代品。用于移动端的框架，有着...
Web工具&框架
快速开发工具 bootstrap 响应式布局，移动设备优先bootstrap官网 Swiper 移动端滑动效果 S...
前端框架
如果是纯移动端的话，zepto加frozenui加seajs挺好的。感觉bootstrap的响应式不适合纯移动端开...
移动web开发
1. Zepto库和JQ区别 Zepto相对jQuery更加轻量，主要用在移动端，jQuery也有对应的jQuer...
八、了解express
简介 Express框架是后台的Node框架,所以和 jquery、 zepto、yui、 bootstrap都不...
jQuery 知识点
jQuery 和Zepto ? Zepto 类库体积小，且实现了触摸屏交互事件，更适合于移动端。 jQuery 体...
2017.12.5-学习笔记：前端零碎知识点整理复习
前言：最近写了一个后台管理系统的页面和一个移动端商城的页面，后台用了bootstrap框架，移动端用了mui框架。...
【移动端】Zepto框架简介
Zepto不提供移动适配的解决 Zepto的API大量参考jQuery，目的的是提供更轻量级的下载速度更快的更适用...
jquery和zepto有什么区别?
1.Zepto中没有原型定义extend方法,但是jquery有 2.Zepto最初是移动端开发的库,是jquer...

移动端库（zepto、swiper）和框架（bootstrap）

移动端js事件

移动端的库

zeptojs

swiper

框架之：bootstrap

容器

核心：栅格系统\

基本使用

列偏移

bootstrap隐藏类

bootstrap按钮

bootstrap表单

字体图标

导航条

模态框（弹框）

路径导航

下拉菜单

巨幕

图片的响应式

相关文章

移动端库（zepto、swiper）和框架（bootstrap）

JS基础----Zepto

Web工具&框架

前端框架

移动web开发

八、了解express

jQuery 知识点

2017.12.5-学习笔记：前端零碎知识点整理复习

【移动端】Zepto框架简介

jquery和zepto有什么区别?

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读