前端知识之 bootstrap
01.1 介绍
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为4.4。 注意，Bootstrap有三个大版本分别是 v2、v3和v4，我们这里学习最常用的v3。
使用Bootstrap的好处：
01.2 下载
bootstap英文官方: https://getbootstrap.com/
bootstrap中文官网：http://www.bootcss.com/
下载地址: http://v3.bootcss.com/getting-started/#download
注意： Bootstrap提供了三种不同的方式供我们下载，我们不需要使用Bootstrap的源码 和 sass项目，只需要下载生产环境的Bootstrap即可。
下载完成以后的目录如下：
bootstrap/dist/ ├── css/ │ ├── bootstrap.css # Bootstrap 核心css文件[未压缩，建议在开发阶段使用] │ ├── bootstrap.min.css # Bootstrap 核心css文件[压缩版，建议在生产阶段使用] │ ├── bootstrap-theme.css # Bootstrap 附带的主题样式，用不上可以删掉 │ └── bootstrap-theme.min.css # Bootstrap 附带的主题样式，用不上可以删掉 ├── js/ │ ├── bootstrap.js # Bootstrap 核心js文件[未压缩，建议在开发阶段使用] │ └── bootstrap.min.js # Bootstrap 核心js文件[压缩版，建议在生产阶段使用] └── fonts/ # fonts目录中主要存放的是图标字体，附带主题使用的
扩展
我们也可以使用Bootstrap中文网提供的免费CDN加速服务：
<!-- Bootstrap核心css文件 --> <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery。务必在引入Bootstrap之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Bootstrap核心js 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
01.3 bootstrap的引入和使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>你好，bootstrap！</h1> </body> </html>
01.3.1 viewport
viewport，中文翻译可以叫做"视口"或"视区"，大家都知道移动设备的屏幕一般都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以980像素的浏览器标准加载网页，然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。他有以下几个属性
width 控制 viewport 的大小，一般为了自适应设置为device-width height 一般为了自适应设置为device-height target-densitydpi 设备的默认缩放比例。可以设置如下： low-dpi 使用ldpi作为目标 dpi。中等像素密度和高像素密度设备相应放大 medium-dpi 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density. device-dpi 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。 high-dpi 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小 initial-scale 初始缩放，如果设置初始缩放为"1.0"，那么web页面在展现的时候就会以target density分辨率的1:1来展现 maximum-scale 最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。 user-scalable 是否允许调整缩放。即用户是否能对页面进行缩放。如果设置为yes则允许用户对页面进行缩放，反之为no。 常见viewport设置： <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
02. 栅格系统的原理和使用
02.1响应式设计
响应式设计是Ethan Marcotte在2010年5月份提出的一个概念，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动设备浏览网页而诞生的。
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
02.2 栅格系统[Grid System ]的介绍
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统提供的class样式类会自动在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。
02.3 栅格系统[Grid System ]的使用
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，会自动占据全部视口（viewport）的容器。
03. bootstrap的全局样式
03.1 排版样式
标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
页面主体
Bootstrap 将全局 font-size 设置为14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高（即10px）的底部外边距（margin）
文本对齐
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p>
列表
a. 内联列表。通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。 <ul class="list-inline"></ul> b. 水平排列的描述， <dl class="dl-horizontal"></dl >
情境背景色
<p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p>
03.2 表格样式
03.2.1 table
普通表格 <table class="table"></table> 条纹状表格 <table class="table table-striped"></table> 带边框的表格 <table class="table table-bordered"></table> 鼠标悬停 <table class="table table-hover"></table> 响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失 <div class="table-responsive"> <table class="table"></table> </div>
03.2.2 tr
<tr class="active">...</tr> #鼠标悬停在行或单元格上时所设置的颜色 <tr class="success">...</tr> #标识成功或积极的动作 <tr class="warning">...</tr> #标识警告或需要用户注意 <tr class="danger">...</tr> #标识危险或潜在的带来负面影响的动作 <tr class="info">...</tr> #标识普通的提示信息或动作
03.3 表单样式
所有设置了.form-control 类的<input>、<textarea> 和<select> 元素都将被默认设置宽度属性为 100%;。 将 label 元素和前面提到的控件包裹在.form-group 中可以获得最好的排列。
<input type="text" class="form-control" placeholder="Text input"> <textarea class="form-control" rows="3"></textarea> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
03.4 按钮样式
<button type="button" class="btn btn-default">（默认样式）Default</button> <button type="button" class="btn btn-primary">（首选项）Primary</button> <button type="button" class="btn btn-success">（成功）Success</button> <button type="button" class="btn btn-info">（一般信息）Info</button> <button type="button" class="btn btn-warning">（警告）Warning</button> <button type="button" class="btn btn-danger">（危险）Danger</button> <button type="button" class="btn btn-link">（链接）Link</button>
. 使用 .btn-lg、.btn-sm 或.btn-xs 就可以获得不同尺寸的按钮
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button> <button type="button" class="btn btn-primary">（默认尺寸）Default button</button> <button type="button" class="btn btn-default">（默认尺寸）Default button</button> <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button> <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
04. 组件
字体图标
Glyphicons 字体图标，包括250多个来自 Glyphicon Halflings 的字体图标。使用时只需要找到对应图标下的class样式即可。
<span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
下拉菜单
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu4"> <li><a href="#">Regular link</a></li> <li class="disabled"><a href="#">Disabled link</a></li> <li role="separator" class="divider"></li> <li><a href="#">Another link</a></li> </ul> </div>
按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
导航
Bootstrap 中的导航组件都依赖同一个 .nav类，状态类也是共用的。改变修饰类就可以改变样式
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#">QiYuan</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li> <li><a href="#">Abouts</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Catetorys <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Catetory 1</a></li> <li role="separator" class="divider"></li> <li><a href="#">Catetory 2</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
分页
<ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> <li><a href="#">2 </a></li> <li><a href="#">3 </a></li> <li><a href="#" aria-label="Previous"><span aria-hidden="true">»</span></a></li> </ul>
可关闭的警告框
<div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
进度条
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 60%">60%</div>
有动画效果的进度条
<div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style=" 45%"> 45% </div> </div>
模态框
<!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> </div> <div class="modal-body"> hello, welcome to QiYuan! </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> <!-- Small modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> </div> <div class="modal-body"> hello, welcome to QiYuan! </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>
选项卡
<div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" 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 role="tabpanel" class="tab-pane active" id="home">Home Content</div> <div role="tabpanel" class="tab-pane" id="profile">Profile Content</div> <div role="tabpanel" class="tab-pane" id="messages">Messages Content</div> <div role="tabpanel" class="tab-pane" id="settings">Settings Content</div> </div> </div>
提示框
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 左侧 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 顶部 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 底部 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 右侧 </button> <script type="text/javascript"> $(function () { // 提示框必须要手动初始化 $('[data-toggle="popover"]').popover() }) </script>
警告框
<div class="alert alert-warning alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Holy guacamole!</strong> Hello, Welcome QiYuan. </div> <div class="alert alert-danger alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>Oh snap! You got an error!</h4> <p class="h1">404! error!</p> <p> <button type="button" class="btn btn-danger">Take this action</button> <button type="button" class="btn btn-default">Or do this</button> </p> </div>
手风琴效果
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Collapsible Group Item #1 Content </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Collapsible Group Item #2 Content </div> </div> </div> </div>
轮播图
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <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> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="holder.js/1386x400" width="100%" alt="..."> <div class="carousel-caption"> Img #1 Content </div> </div> <div class="item"> <img src="holder.js/1386x400" width="100%" alt="..."> <div class="carousel-caption"> Img #2 Content </div> </div> <div class="item"> <img src="holder.js/1386x400" width="100%" alt="..."> <div class="carousel-caption"> Img #3 Content </div> </div> </div> </div>