Bootstrap基础 学习笔记
学完html，css，js，css3，html5之后就开始学Bootstrap了
Bootstrap是什么？
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。它提供了一系列全局CSS样式，组件，js插件等等，支持栅格，响应式，css预编译等等。所以我们就只要使用他们写好样式的类就可以了，真的是简单方便明了。
基本模板
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link href="css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<h1>你好，世界！h1>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">script>
<script src="js/bootstrap.min.js">script>
body>
html>就这么简单，真的很棒，节省了好多时间吖，只是里面的属性和样式，还是要自己好好理解，好好修改的，有时候修改样式也很麻烦，如果不对它非常熟悉的话~哈哈，我还是很喜欢用框架的~
用的编辑器是brackets，功能强大，可以帮助我们快速打代码
按下tab键自动补全
！：head部分
c：注释
meta:vp： <meta name="viewport" content="width=device-width, initial-scale=1.0">
meta:compat： <meta http-equiv="X-UA-Compatible" content="IE=edge">
ctrl+E 查看元素的css
等等，好多好棒的快捷键
Bootstrap基础：排版
role属性的作用
<body role="document">role的作用是描述一个非标准的tag的实际作用。
比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。
role是一个html5的属性，role=”form”告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单，在button中role=”button”就是
告诉设备，这是个按钮，可以点击。本质上是增强语义性，增强组件的可访问性、可用性和可交
html 里面的 role 本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。
role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button
role原来是WAI-ARIA（the Accessible Rich Internet Applications Suite），
可帮助访问Web内容和Web应用有困难的用户进行访问的方法（比如用静态的(screen-reading technologies)浏览器浏览用Ajax技术制作的动态网页）， 用途是帮助残疾人，尤其是需要依靠屏幕阅读器和不能使用鼠标的用户。应用role属性可以设计出更加友好的网站应用。
html5里面添加这个属性作为做辅助作用。（来自知乎）
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">这是远程导入服务器中的bootstrap.min,css样式，你也可以下载到本地然后引入，比如
<script src="css/bootstrap.min.css">script>标题
h1-h6 可以作为类，也可以作为标签。
h1-h6,
h1:36px，
h2:30px,
h3:24px,
h4:18px,
逐渐减少6px，h5除外
h5为14px，
h6:12px。
谷歌无法渲染出14px以下的字体
粗体斜体
粗体就是给文本加粗，在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可以使用和标签让文本直接加粗。
/源码查看bootstrap.css文件第55行~第58行/
b,strong {
font-weight: bold; /*文本加粗*/
}斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签或来实现。
一般是展现给爬虫看的（偏重语义），是展现给用户的（偏重视觉效果）。
定义列表与水平定义列表
对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。
<dl>
<dt>W3cplusdt>
<dd>一个致力于推广国内前端行业的技术博客dd>
<dt>慕课网dt>
<dd>一个真心在做教育的网站dd>
dl水平定义列表就像内联列表一样，Bootstrap可以给
-
添加类名“.dl-horizontal”给定义列表实现水平显示效果。
/ 源码请查看bootstrap.css文件第608行~第621行/
代码解释
//此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;//将dt设置了一个左浮动
width: 160px;//设置了一个宽度为160px
overflow: hidden;//超出隐藏
clear: left;//清除浮动
text-align: right;//文本右对齐
text-overflow: ellipsis;//省略号
white-space: nowrap;//强制在同一行显示
}
.dl-horizontal dd {
margin-left: 180px;//将dd设置一个margin-left的值为180px，达到水平的效果
}
}<dl class="dl-horizontal">
<dt>W3cplusdt>
<dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文dd>
<dt>慕课网dt>
<dd>一个专业的，真心实意在做培训的网站dd>
<dt>我来测试一个标题，我来测试一个标题dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果dd>
dl>
标签：代码
你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
<pre class="pre-scrollable">
<ol>
<li>....li>
<li>....li>
<li>....li>
<li>....li>
<li>....li>
<li>....li>
<li>....li>
<li>....li>
<li>....li>
<li>....li>
<li>....li>
<li>....li>
<li>....li>
<li>....li>
ol>
pre>
<pre>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
pre>
第一个是省略号
第二个是ul-li标签
- ....
- ....
- ....
- ....
- ....
- ....
- ....
- ....
- ....
- ....
- ....
- ....
- ....
- ....
- ...
- ...
- ...
表格
.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格
英文要好啊 啊 啊啊 啊
直接加类名
~~
<h1>鼠标悬浮高亮的表格h1>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>表格标题th>
<th>表格标题th>
<th>表格标题th>
tr>
thead>
<tbody>
<tr>
<td>表格单元格td>
<td>表格单元格td>
<td>表格单元格td>
tr>
<tr>
<td>表格单元格td>
<td>表格单元格td>
<td>表格单元格td>
tr>
<tr>
<td>表格单元格td>
<td>表格单元格td>
<td>表格单元格td>
tr>
<tr>
<td>表格单元格td>
<td>表格单元格td>
<td>表格单元格td>
tr>
tbody>
table>鼠标悬浮高亮的表格
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
table {
border-collapse: collapse;
border-spacing: 0;
} 关键是这句border-collapse: collapse;为表格设置为合并边框。。<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>表格标题th>
<th>表格标题th>
<th>表格标题th>
tr>
thead>
<tbody>
<tr>
<td>表格单元格td>
<td>表格单元格td>
<td>表格单元格td>
tr>
<tr>
<td>表格单元格td>
<td>表格单元格td>
<td>表格单元格td>
tr>
<tr>
<td>表格单元格td>
<td>表格单元格td>
<td>表格单元格td>
tr>
<tr>
<td>表格单元格td>
<td>表格单元格td>
<td>表格单元格td>
tr>
tbody>
<tfoot>
<tr>
<td>foottd>
<td>foottd>
<td>foottd>
tr>
tfoot>
table>
table-hover,table-striped,对<tfoot>标签都不管用啊啊啊啊啊.table-bordered {
border: 1px solid #ddd;/*整个表格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #ddd; /*每个单元格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;/*表头底部边框*/
}
因为table已经设置了border-collapse:collapse;这个css属性让表格边框合并了，所以td之间的宽度由2px变为1px;合并了。Bootstrap基础：表单
sr的作用
sr就是screen reader，盲人看不见页面的效果（placeholder里的文字），sr会把里面的文字念出来，这样就知道后面要输的是用户名还是密码了
.sr-only是 除了屏幕阅读器外，其他设备上隐藏该元素，这个是用于屏幕阅读器的，帮助残障人士更好的访问网站。
<label class="sr-only" for="exampleInputEmail2">Email addresslabel>表单控件
<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
label>
div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
label>
div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
label>
div>
form>专为input元素服务，为其定义标记。
for属性规定label与哪个表单元素绑定
label和表单控件绑定方式又两种：
1、将表单控件作为label的内容，这样就是隐士绑定。
此时不需要for属性，绑定的控件也不需要id属性。
隐式绑定：
<label>Date of Birth: type="text" name="DofB" />label>2、为标签下的for属性命名一个目标表单的id，这就是显示绑定。
显式绑定：
"text" name="SocSecNum" id="SSN" />Bootstrap框架中表单控件（text、 file、radio和checkbox控件）的焦点状态删除了outline的默认样式，重新添加阴影效果。
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}要让控件在焦点状态下有上面样式效果，需要给控件添加类名“form-control”：
class="form-group">
多标签支持
一般制作按钮除了使用标签元素之外，还可以使用和标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。
<button class="btn btn-default" type="button">我是button标签写出来的button>
<a href="##" class="btn btn-default">我是a标签写出来的a>
<input class="btn btn-default" type="submit" value="我是input标签写出来的">
<span class="btn btn-default">我是span标签写出来的span>
<div class="btn btn-default">我是div标签写出来的div>
<p>虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。p>button，a 和 input做的按钮点击后有外边框阴影,div,span做的按钮则没有,不知道大家是不是这样的~
HTML 标签的 type 属性
定义和用法
type 属性规定按钮的类型。
提示：请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。
语法
submit 该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。
button 该按钮是可点击的按钮（Internet Explorer 的默认值）。
reset 该按钮是重置按钮（清除表单数据）。
按钮状态
悬浮时，鼠标不在按钮上方，按钮颜色较浅，就像上面蒙了一层白色塑料膜；焦点状态下，鼠标处于按钮上方，按钮颜色较深，就像白色塑料膜被拿去了；点击时，按钮颜色变深（焦点状态），且按钮四周出现黑色“蚁行线”（就像有蚂蚁绕着按钮在转圈）
按钮状态——禁用状态
和input等表单控件一样，在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity的值从100%调整为65%。
在Bootstrap框架中，要禁用按钮有两种实现方式：
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”
在3.1.1版本中，无论是用disabled类还是disabled属性的方法，链接行为都被禁止了
图像
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<img width="50%" alt="140x140" src="http://placehold.it/140x140">
<div>默认图片div>
div>
<div class="col-sm-4">
<div >
<img class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
div>
<div>圆角图片div>
div>
<div class="col-sm-4">
<img class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<div>圆形图片div>
div>
<div class="row">
<div class="col-sm-4">
<img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<div>缩略图div>
div>
<div class="col-sm-4">
<img class="img-responsive" width="50%" alt="140x140" src="http://placehold.it/140x140" />
<div>响应式图片div>
div>
<div class="col-sm-4">
<img class="img-responsive" alt="140x140" src="http://placehold.it/140x140" style="width:50%" />
<div>响应式图片div>
div>
div>
div>
div>
body>
html>由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）
如果你用css样式修改了图片的大小，那么 .img-responsive 里面的max-width: 100%;height: auto;这个就没用了，因为你给图片设置了固定宽度，他的宽高就不会随着它父级容器的宽度变化了，
可以通过设置图片的标签img的宽度width来控制一下图片的宽度 高度height的话一般不用设置，这样图片显示不至于失真，设置宽度的时候最好是根据浏览器的宽度之类的来设置，如果指定大小px的话 不同显示器显示可能会出现问题，，通过百分比设置
网格系统
列排序和列偏移
<div class="row">
<div class="col-md-4 col-md-push-8">.col-md-4div>
<div class="col-md-8 col-md-pull-4">.col-md-8div>
div><div class="row">
<div class="col-md-4">.col-md-4div>
<div class="col-md-2 col-md-offset-4">.col-md-offset-4div>
<div class="col-md-2">.col-md-2div>
div>offset是通过设置margin-left,它只能向右偏移，不能交换位置，一行加起来不能超过12
push,pull是通过设置right,left实现定位效果，改变位置，一列加起来不能超过12
aria前缀
有aria前缀的都是无障碍阅读，即方便屏幕阅读器获取内容，当input聚焦时aria-label就会获取与之相关联的label的内容，当label中的内容在其他元素中出现过，则使用aira-lebelledby来获取相关的值
<div class="dropdown">
<button class="btn btn-default dropdown-tooggle" id="dropdownMenu2" type="button" data-toggle="dropdown">
选择你喜欢的水果
<span class="caret">span>
button>
<ul class="dropdown-menu" role="menu" arialabelladby="dropdownMenu2">
<Li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果a>
Li>
<Li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉a>Li>
<Li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃子a>Li>
<Li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">葡萄a>Li>
ul>
div>Bootstrap组件
超出隐藏
text-overflow:ellipsis;//省略号
overflow:hidden;//隐藏
white-space:pre;//不换行
按钮下拉菜单和下拉菜单
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>组合式下拉菜单title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
head>
<body>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
按钮下拉菜单
<span class="caret">span>button>
<ul class="dropdown-menu">
<li><a href="##">按钮下拉菜单项a>li>
<li><a href="##">按钮下拉菜单项a>li>
<li><a href="##">按钮下拉菜单项a>li>
<li><a href="##">按钮下拉菜单项a>li>
ul>
div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret">span>
button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项a>li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项a>li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项a>li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项a>li>
ul>
div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script>
body>
html>.btn-group 元素是内联元素
.dropdown 元素是块状元素
按钮的向下向上三角形
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>按钮的向下向上三角形title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
head>
<body>
<div class="btn-group dropup">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret">span>button>
<ul class="dropdown-menu">
<li><a href="##">按钮下拉菜单项a>li>
<li><a href="##">按钮下拉菜单项a>li>
<li><a href="##">按钮下拉菜单项a>li>
<li><a href="##">按钮下拉菜单项a>li>
ul>
div>
<div class="btn-group leftright">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
校园招聘
<span class="caret">span>
button>
<ul class="dropdown-menu">
<li><a href="##">技术组a>li>
<li><a href="##">摄制组a>li>
<li><a href="##">营销组a>li>
<li><a href="##">策划组a>li>
ul>
div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script>
body>
html>body{margin:100px;padding:100px;}
.leftright .caret{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-left: 4px solid;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.leftright .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
right: auto;
left: 100%;
}用css画三角形
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;1.实现普通下拉菜单：
.dropdown>button.dropdown-toggle[data-toggle=”dropdown”]+ul.dropdown-menu;
2.按钮下拉菜单：
把.dropdown换成.btn-group即可。
3.下拉菜单变上拉菜单：
.dropdown.dropup或.btn-group.dropup
4.下拉菜单通过绝对定位实现，可通过设置top,bottom,left,right改变下拉菜单出现的位置。
5.dropdown-header,li.divider,li.active,li.disabled
三级菜单
/*嵌套菜单样式*/
.dropdown-submenu{
position:relative;
}
.dropdown-submenu>.dropdown-menu{
/*嵌套菜单位置*/
top:0;
left:100%;
/*将left的值换成负值可使嵌套菜单向右展开*/
margin-top:-6px;
margin-left:-1px;
}
.dropdown-submenu:hover>.dropdown-menu{
display:block;
}
<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="##">CSS3a>li>
<li><a href="##">Sassa>li>
<li><a href="##">jQuerya>li>
<li class="dropdown-submenu">
<a href="##">嵌套选项1
<span class="caret2">span>
a>
<ul class="dropdown-menu">
<li>
<a href="##">C#a>
li>
<li class="dropdown-submenu">
<a href="##">嵌套选项2
<span class="caret2">span>
a>
<ul class="dropdown-menu">
<li>
<a href="##">SQLa>
li>
ul>
li>
<li>
<a href="##">VBa>
li>
ul>
li>
<li><a href="##">Responsivea>li>
ul>
li>
<li><a href="##">关于我们a>li>
ul>
通过浏览器调试工具，不难发现，点击有二级导航的菜单项，会自动添加“open”类名，再次点击就会删除添加的“open”类名：
简单点来说，就是依靠这个类名来控制二级导航显示与否，并且设置了背景色和边框：
所以简单的嵌套并不能实现三级菜单，还需要设置显隐状态
面包屑
<ol class="breadcrumb">
<li><a href="#">首页a>li>
<li><a href="#">我的书a>li>
<li class="active">《图解CSS3》li>
ol> .breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb> li {
display: inline-block;
}
.breadcrumb> li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
.breadcrumb> .active {
color: #999;
}看来不错吧！作者是使用li+li:before实现li与li之间的分隔符，所以这种方案在IE低版本就惨了（不支持）。
content: “/\00a0”插入unicode格式 的斜杠
一般面包屑导航的前几级菜单可以跳转过去 而最后一级菜单是当前所在页面 不需要跳转 所以不加
导航总结：
1.导航.nav无默认样式。导航基本样式只有.nav-tabs,.nav-pills,需和.nav同时使用。float：left
2.垂直导航：.nav-stacked.float:none;
3.自适应导航：.nav-justified. “.nav-justified>li{display:tabled-cell};ul{width:100%;}”
4.导航分割线：.nav-divider
5.li.active,li.disabled需li>a，样式作用于a。
6.面包屑导航：ul.breadcrumb,li.active里无a才有效果。
导航与导航条
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>基本导航条title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
head>
<body>
<h4>基础导航条h4>
<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>
<h4>导航基础样式h4>
<ul class="nav nav-tabs">
<li class="active"><a href="##">Homea>li>
<li><a href="##">CSS3a>li>
<li><a href="##">Sassa>li>
<li><a href="##">jQuerya>li>
<li><a href="##">Responsivea>li>
ul>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script>
body>
html>基础导航条(自适应)
div.navbar .navbar-default>ul.nav navbar-nav>li
导航基础样式（非自适应）
ul.nav nav-tabs>li
disabled属性只有表单标签才有，如果你想禁用a标签的，可以试试加 href=”javascript:void(0)”
响应式导航条
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>响应式导航条title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
body{padding:50px 0 0 0;}
style>
head>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a href="##" class="navbar-brand">慕课网a>
div>
<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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script>
body>
html>响应式导航条就是在基本导航条的基础上，header部分加一个按钮，控制下面的ul标签的显隐~~~
警示框–可关闭的警示框
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>警示框--可关闭的警示框title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" >
head>
<body>
<h4>全屏观看h4>
<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×button>
恭喜您操作成功！
div>
<div class="alert alert-info alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×button>
请输入正确的密码
div>
<div class="alert alert-warning alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×button>
您已操作失败两次，还有最后一次机会
div>
<div class="alert alert-danger alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×button>
对不起，您输入的密码有误
div>
<div class="alert alert-test alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×button>
该节编程练习不验证代码，你可以各种尝试，或继续学习<span class="alert-link">下一节span>吧。
div>
<h2>下面是代码部区h2>
<div class="alert alert-info alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×button>
请修改相应信息div>
<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×button>
谢谢，操作成功！div>
<div class="alert alert-warning alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×button>
您已操作失败两次，还有最后一次机会div>
<div class="alert alert-danger alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×button>
对不起，您刚才的操作失败div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script>
body>
html>只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：
1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
2、在button标签中加入class=”close”类，实现警示框关闭按钮的样式。
3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss=”alert””（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。
×乘号
列表组–基础列表组
<ul class="list-group">
<li class="list-group-item">揭开CSS3的面纱li>
<li class="list-group-item">CSS3选择器li>
<li class="list-group-item">CSS3边框li>
<li class="list-group-item">CSS3背景li>
<li class="list-group-item">CSS3文本li>
ul>基础列表组
ul.list-group
li.list-group-item
Bootstrap支持的js插件
Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。
一次性导入：
Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。
具体使用如下（或见右侧代码编辑器28-29行）：
<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js">script>特别声明：jQuery版本库也可以加载你本地的jQuery版本。
单独导入：
为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：
☑ 动画过渡（Transitions）:对应的插件文件“transition.js”
☑ 模态弹窗（Modal）:对应的插件文件“modal.js”
☑ 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”
☑ 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”
☑ 选项卡（Tab）：对应的插件文件“tab.js”
☑ 提示框（Tooltips）：对应的插件文件“tooltop.js”
☑ 弹出框（Popover）：对应的插件文件“popover.js”
☑ 警告框（Alert）：对应的插件文件“alert.js”
☑ 按钮（Buttons）：对应的插件文件“button.js”
☑ 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”
☑ 图片轮播Carousel：对应的插件文件“carousel.js”
☑ 自动定位浮标Affix：对应的插件文件“affix.js”
上述单独插件的下载可到github去下载（https://github.com/twbs/bootstrap）。
模块弹出框
<html>
<head>
<meta http-equiv="Content-Type" content="text-html;content=utf-8">
<title>导入JavaScript插件title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
head>
<body>
<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">Closespan>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>
div>
div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js">script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js">script>
<script>
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
});
script>
body>
html><script>
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
});
script>我在这解释下$和jQuery这两个，在平常的页面情况下$和jQuery是可以通用的。为什么有的页面不用$呢而用jQuery，那是因为和后台语言产生冲突了，比如说是python语言，前端获取数据就是用$获取的，如果页面有$，那python就默认认为是要获取数据，则页面一定会报错。
所以我建议竟然用到jQuery的地方大家都用字母，牵扯到数据和正则的话再用$
<meta http-equiv="Content-Type" content="text-html;content=utf-8">http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部.
标签元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。所以不一定是固定的
toggle以模态模式(modal)打开target
toggle 开关 触发器 data-toggle=”modal”
target 目标 #id .class
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发button>
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">href触发 href=”#mymodal-link” data-toggle=”modal”
data-target触发 data-target=”#mymodal-data” data-toggle=”modal”
可以在模态窗上加 fade类 看淡入淡出
JavaScript触发时的参数设置
<html>
<head>
<meta charset="utf-8">
<title>JavaScript触发时的参数设置（二）title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
head>
<body>
<button class="btn btn-primary" type="button">点击我button>
<div class="modal" id="mymodal" tabindex="-1">
<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">Closespan>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>
div>
div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script>
<script>
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle")({
keyboard:false
});
});
});
script>
body>
html>使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。
比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：
$(function(){
$(".btn").click(function(){
$("#mymodal").modal({
keyboard:false
});
});
});