移动端库（zepto、swiper）和框架（bootstrap）
2019-10-29 本文已影响0人
jxvl假装
移动端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端和移动端的滑动效果插件（库），一般用来触屏焦点图、触屏整屏滚动等效果。
详情暂略
框架之：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
按钮样式类：
- 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 声明响应式图片，是一个样式类，直接加给图片即可
