bootstrap入门
一、bootstrap是什么
bootstrap是一个封装了前端三剑客的前端框架
更多技术请参考 bootstrap官网于 w3cschool 菜鸟教程等
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
二、搭建环境
1.离线环境
http://v3.bootcss.com/ 中下载生产环境的zip文件，进行解压。（实际上，官网为我们提供了在线i引入的链接(类比jQuery)）
//其中： fonts是字体文件夹
CSS是包含css的(文件夹内有压缩(-min名称的)与未压缩)，我们推荐使用压缩的
JS文件是包含的一些JS文件，其中需要注意的是，从官网很容易看出是依赖jQuery的，我们按照官网的地址去下载对应的jQuery:
我们打开这个网址，右键另存为，保存这个jQuery（文件名等不要作改动），放到js文件夹中即可！
我们在页面中做如下引入便可：
<!doctype html>
<html lang="en">
<head>
<!--设置移动设备优先，屏幕和设备尺寸一致，1：1比例，禁止缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-
scalable=no">
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入外部的css文件-->
<link rel="stylesheet" href="bootstrap\css\bootstrap.min.css">
<!-- 先引入jQuery，再引入js-->
<script src="bootstrap\js\jqueryj.min.js"> </script>
<script src="bootstrap\js\bootstrap.min.js"> </script>
</head>
<body>
<div></div>
<h1 class="page-header">产品展示</h1>
<h3 class="page-header">详情页面</h3>
</body>
</html>
2.在线环境
直接前往官网查看最新的引入方式（会实时的更新）
三、常用布局
可以参见：http://caibaojian.com/bootstrap/base-css.html
1.布局容器
<div class="container"> 固定宽度：1170px
</div>
<div class="container"> 宽度：100%
</div>
2.排版的标签
1.标题：
h1-h6
<div class="container-fluid" style="background: #ffffff">
<h1 class="page-header">产品展示</h1>
<h3 class="page-header">详情页面</h3>
</div>
字体样式等都已经定义好了
page-header ——设置页头
<em>——加粗（或<strong>）
<small>——设置小一号的副标题
<big>——设置大一号的副标题
<del>——设置删除线
此小段演示代码：
<body style="background: gray;">
<div class="container-fluid" style="background: #ffffff">
<h1 class="page-header">产品展示</h1>
<h3 class="page-header">详情<big>副标题</big>页面<small>副标题</small></h3>
<p>
对HTML基本元素进行样式定义，并利用可扩展的class增强其展示效果.<del>已废弃</del>
</p>
</div>
</body>
演示效果：
//注意下面的水平线等
2.文本对齐方式：
text-left——左对齐
text-center——居中对齐
text-right——右对齐
例如：
<h1 class="page-header text-center">产品展示</h1>
<h3 class="page-header text-right">详情页面<small>副标题</small></h3>
3.字母大小写变换：
text-uppercase——字母都变大写
text-lowercase——字母都变小写
text-capitalize——首字母大写
例如：
<p class="text-lowercase">
对HTML基本元素进行样式定义，并利用可扩展的class增强其展示效果.<del>已废弃</del>
</p>
<p class="text-capitalize">
对HTML基本元素进行样式定义，并利用可扩展的class增强其展示效果.<del>已废弃</del>
</p>
4.列表标签
list-unstyled——去掉列表前面的符号和格式
list-inline——列表由纵向变横向
例如：
<h2>列表</h2>
<ul class="list-unstyled list-inline">
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
自定义列表
dl-horizontal——设置变为横向排列
代码风格
见官方文档的介绍
5.表格标签
.table——表格的一个基类，其他的样式都是基于此基类（.表示css的类选择器）
.-table-bordered——加外边框
.table-hover——鼠标悬停效果
.table-striped——斑马线效果（隔行变色）
.table-condensed——padding值减半，表格更加紧凑
例如：
<table class="table table-bordered table-hover table-striped table-condensed">
<tr>
<td>编号</td>
<td>名称</td>
</tr>
<tr>
<td>1001</td>
<td>小西瓜</td>
</tr>
<tr>
<td>1002</td>
<td>大菠萝</td>
</tr>
</table>
效果：
响应式表格：
给上述table添加一个父元素：
.table-responsive
<div class="table-responsive">
状态类：
详细请参见官网 全局CSS样式：http://v3.bootcss.com/css/#tables
例如：
<tr class="active">
<td>编号</td>
<td>名称</td>
</tr>
<tr class="danger">
<td>1001</td>
<td>小西瓜</td>
</tr>
<tr class="info">
<td>1002</td>
<td>大菠萝</td>
</tr>
效果：
更多效果，请参见上文的官网的全局CSS样式处
6.响应式图片
img-responsive
例如：
<img src="images/2.jpg" class="img-responsive">
设置图片形状（例如给图片外边加圆角矩形框）——更多实例，请参见上文官网处
img-thumbnail
<img src="images/a.jpg" class="img-responsive img-thumbnail">
7,栅格系统
通常，栅格系统是和响应式图片一起使用，并且，它必须放入容器中！
浏览器最多自动分成12份（超出自动换行），通过一系列的行和列来组成
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
<div class="row">
<div class="col-md-4">col-1</div>
<div class="col-md-4">col-2</div>
<div class="col-md-4">col-3</div>
</div>
其中，md是中等的简写
有了上面的样式，我们把内容 col-1等换成第六点的图片(可以改为响应式)，即可完成！
更多如响应式的请参见官网文档：栅格参数
栅格系统偏移与排列待补充
8.辅助类
字体颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
效果可以参见官网，背景颜色不再赘述
三角符号
<span class="caret"></span>
//即使用了bootstrap，之前的样式也需要适当地添加 9.表单
前面看到的表单控件都正常的大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。
不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">
输入框变圆角：form-control
表单控件加上类form-control后，效果为：
-
-
宽度为100%
-
设置边框为浅灰色
-
控件具有4px的圆角
-
设置阴影效果，元素得到焦点时，阴影和边框效果会发生变化
-
设置placeholder的颜色为#999
-
例如（div盒子为隔行分开）：
<!--使得标签和输入框关联-->
<div class="form-group">
<label for="emial">邮箱</label>
<input type="emial" name="cemail" id="cemail" class="form-control" />
</div>
<div class="form-group">
<label for="pwd">密码</label>
<input type="password" name="pwd" id="pwd" class="form-control" /></div>
在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名
<div class="form-group has-success">
很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：
<div class="form-group has-success has-feedback">
平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。
下拉框
给select 加 .form-control
复选框 <!-- 复选框-->
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" name="hobby"/>吃饭</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby"/>睡觉</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby"/>打豆豆</label>
</div>
禁止选择（加属性）： <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" disabled="" />打豆豆</label>
单个复选框
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
从上面的示例，我们可以得知：
1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
单选框
<div class="form-group">
<label class="radio-inline"><input type="radio" name="sex" value="男">男</label>
<label class="radio-inline"><input type="radio" name="sex" value="女">女</label>
</div>
禁止类同上文
输入框组
详细的请参见：bootstrap的组件部分
效果演示：
响应式表单
给表单加 .form-horizontal ，结合栅格系统，实现响应式表单：<form class="form-horizontal">
按钮
.btn是按钮样式的基类，以下为基本样式
强烈建议使用button或a标签来制作按钮
激活：（鼠标悬停时点亮，离开时熄灭）
<button class="btn btn-success active">按钮激活</button>
按钮大小：
按钮组：给父元素（父盒子）
<!--按钮组-->
<div class="btn-group">
<button class="btn btn-primary">按钮组1</button>
<button class="btn btn-primary">按钮组2</button>
<button class="btn btn-primary">按钮组3</button>
</div>
10.缩略图
暂不演示，见官网文档，和栅格系统一起使用
11.下拉菜单
演示效果：
12.标签页
（属于组件->导航->标签页）
.nav 是标签类的一个基类
纵向等效果见官网文档，（active是默认激活项）
13.导航
二级导航：
<ul class="nav nav-pills">
<li class="active"><a href="##">首页</a></li>
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
…
</ul>
</li>
<li><a href="##">关于我们</a></li>
</ul>
面包屑导航：见文档路径导航
导航条：
<div class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
而导航条的颜色都是通过“.navbar-default”来进行控制
导航栏标题与二级导航：
<!--加入导航条标题--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">慕课网</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li> <li><a href="##">系列教程</a></li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">关于我们</a></li> </ul> </div> <!--导航条状态及二级菜单--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">慕课网</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> <li><a href="##">JavaScript</a></li> <li class="disabled"><a href="##">PHP</a></li> </ul> </li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">关于我们</a></li> </ul> </div>
导航栏遮住内容解决办法1：（第二种是直接把导航栏放在内容之前）
<style>
body{
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
</style>
响应式导航栏：
<!--代码--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 --> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 --> <a href="##" class="navbar-brand">慕课网</a> </div> <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 --> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li> <li><a href="##">系列教程</a></li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">关于我们</a></li> </ul> </div> </div>
14.分页
1、通过“pagination-lg”让分页导航变大；
2、通过“pagination-sm”让分页导航变小
标签的new样式：（右上角出现new）
<h3>今日更新<span class="label label-primary" style="vertical-align:super; font-size:8px;">New</span></h3>
进度条：
基础版
<div class="progress">
<div class="progress-bar" style="width:40%"></div>
</div>
彩色版见官网
媒体对象：
媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：
☑ 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
☑ 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
☑ 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
☑ 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选
通过多个li定义列表：
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src=" " alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Header</h4>
<div>…</div>
</div>
</li>
<li class="media">…</li>
<li class="media">…</li>
</ul>
js插件
模态框：（基于jQuery的操作）
<!--模态框--> <button class="btn btn-primary" type="button">点击我 </button> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>即将爆炸</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">剪线</button> <button type="button" class="btn btn-primary">逃跑</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </body> <script> $(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); }); </script>
改用触发器触发（而不是js）
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；
2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。
如何通过按钮关闭模态框：
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
//模态框需设置为fade才有过滤效果
collapse 手风琴
注意点：
data-parent="#accordion"必须要，不然点击另一个触发器的时候，本来的触发器的内容不会消失
这里的触发也是和上面的一样有两种形式：声明式属性、js
简易版的架构实现：
<div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title">标题一</h4> </div> <div class="panel-collapse"> <div class="panel-body">折叠区内容...</div> </div> </div> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title">标题二</h4> </div> <div class="panel-collapse"> <div class="panel-body">折叠区内容...</div> </div> </div> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title">标题三</h4> </div> <div class="panel-collapse"> <div class="panel-body">折叠区内容...</div> </div> </div> </div>
再将标题和内容绑定：
<div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">标题一</a></h4> </div> <div class="panel-collapse" id="panel1"> <div class="panel-body">折叠区内容...</div> </div
再设置内容是否可见（第一个可见追加一个in）
<div class="panel-collapse collapse" id="panel1">
配置声明式触发：
<h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4>
<a>时，因为有href,data-toggle可以去掉
配置一个打开时关闭其他：
<h4 class="panel-title">
<a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>
</h4>
carouser 图片轮播
一个轮播图片主要包括三个部分：
☑ 轮播的图片
☑ 轮播图片的计数器
☑ 轮播图片的控制器
设计轮播图片的容器
<div id="slidershow" class="carousel"></div>
设计轮播图片计数器
<ol class="carousel-indicators">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
...
</ol>
//在 Bootstrap 框架中，轮播图片计数器，都是以圆点向大家呈现
设计轮播图片播放区
<div class="carousel-inner"> <div class="item active"> <a href="##"><img src="1.jpg" alt="风景1"></a> </div> <div class="item"> <a href="##"><img src="2.jpg" alt="风景2"></a> </div> <div class="item"> <a href="##"><img src="3.jpg" alt="风景3"></a> </div> </div>
设计轮播图片控制器
//这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片：
放出轮播代码：
<div id="slidershow" class="carousel">
<ol class="carousel-indicators">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
<!-- 设置轮播图片 -->
<div class="carousel-inner">
<div class="item active">
<a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
<div class="carousel-caption">
<h3>图片标题1</h3>
<p>描述内容1...</p>
</div>
</div>
<div class="item">
<a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
<div class="carousel-caption">
<h3>图片标题2</h3>
<p>描述内容2...</p>
</div>
</div>
<div class="item">
<a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
<div class="carousel-caption">
<h3>图片标题3</h3>
<p>描述内容3...</p>
</div>
</div>
<!-- 设置轮播图片控制器 -->
<a class="left carousel-control" href="" >
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
//应对拉伸整个页面，给父元素包裹div加一个width就行了，
参见：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap的js插件</title> <!-- 引入外部的css文件--> <link rel="stylesheet" href="bootstrap\css\bootstrap.min.css"> <!-- 先引入jQuery，再引入js--> <script src="bootstrap\js\jquery.min.js"> </script> <script src="bootstrap\js\bootstrap.min.js"> </script> </head> <body> <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1" data-toggle="collapse" >标题一</a></h4> </div> <div class="panel-collapse collapse in" id="panel1"> <div class="panel-body">折叠区内容...</div> </div> </div> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel2" data-toggle="collapse" >标题二</a></h4> </div> <div class="panel-collapse collapse" id="panel2"> <div class="panel-body">折叠区内容...</div> </div> </div> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel3" data-toggle="collapse" >标题三</a></h4> </div> <div class="panel-collapse collapse" id="panel3"> <div class="panel-body">折叠区内容...</div> </div> </div> </div> <div style="width: 200px"> <div id="slidershow" class="carousel" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0">1</li> <li data-target="#slidershow" data-slide-to="1">2</li> <li data-target="#slidershow" data-slide-to="2">3</li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="1.jpg" alt="风景1"> </div> <div class="item"> <img src="2.jpg" alt="风景2"> </div> <div class="item"> <img src="3.jpg" alt="风景3"> </div> </div> <a class="left carousel-control" href="#slidershow" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"> </span> </a> </div> </div> </body> </html>
通过js进行轮播：
$(function(){
$("#slidershow").carousel({
interval:2000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
});
//或者通过类名调用
设计的时候，注意从整体的页面结构开始，从整体到局部
