BootStrap教程从入门到精通
Bootstarp
引入bootstarp:（包含文件bootstarp和jq）：注意：min.js先引入
或者：
一.栅格
1.系统在多种屏幕设备上的工作
在大于等于设定的屏幕大小时，平铺；在小于设定的屏幕大小时堆叠
1.超小屏幕设备手机 <768px col-xs- 2.小屏设备平板 >=768px -col-sm-
3.中等屏幕设备桌面 >=992px col-md- 4.大屏幕设备桌面 >=1200px col-lg-
2.一行分为12列，超过12溢出在下一行
例:：
3.同时适应多屏幕设备:
例：
4.解决某些列过高问题：加入
5.列偏移：
6.列嵌套：
7.列排序：
二.文本
1.p标签
1.标题标签h1-h6,以及副标题标签
2.文本对齐:
Left aligned text.
Center aligned text.
Right aligned text.
3.强调颜色;
111111
无色22222
天蓝色33333
绿色44444
深蓝色55555
黄色66666
红色浅灰色文本（白色背景上看不清楚）。
白色文本（白色背景上看不清楚）。
dark深灰色
2.span标签
Default
Primary
Success
Info
Warning
Danger
3.缩略语、引用
1.缩略语：把长句缩略成短句，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上
中华人民共和国">中国
2.引用：例：名人名言
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
4.列表
1.无样式列表：
- 22222222222222222
2.内联列表：将所有内容放在一列：
- 111111
3.水平排列：
- 1111
- 1111111
7.块级帮助文本：自己独占一行或多行的块级帮助文本。
8.静态控件
将一行纯文本放置于label的同一行，为元素添加.form-control-static
5.徽章
对齐方式： 42
结合导航：
6.缩略图
1.图片缩略
...
2.栅格系统的图像、视频、文本
7.警告框
1.普通警告框
2.可以关闭的警告框
Warning! Best check yo self, you're not looking too good.
3.带链接的警告框
8.进度条
1. 进度条
class="sr-only">40% Complete (success)
class="sr-only">20% Complete
class="sr-only">60% Complete (warning)
class="sr-only">80% Complete
颜色：不写默认蓝色，progress-bar-success绿色，*-info青，*-warning深黄，*-danger红色
进度效果：默认无
2. progress-striped 条纹
class="sr-only">40% Complete (success)
3. progress-striped active 运动条纹
class="sr-only">45% Complete
4.堆叠效果
class="sr-only">35% Complete (success) class="sr-only">20% Complete (warning) class="sr-only">10% Complete (danger)
9.媒体列表
10.列表组
a).基本案例
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
b).加入徽章
-
14
Cras justo odio
c).链接条目
d).定制内容
11.面板
1.普通面板
2.栏目+表格
... class="table">
3.栏目+文章+表格
文章
| 123 | 456 |
| 111 | 222 |
4. 带列表组的面板
... class="list-group">
12.超大屏幕
宽度100%显示
13.折叠内容
简单：
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
三.表格
1.基本案例：每两行中间带一条细线
| 111 | 222 |
| 111 | 222 |
2.条纹状表格：隔行换色，单数行灰色，偶数行无色，两行之间有细线
| 111 | 222 |
| 111 | 222 |
3.带边框的表格：
| 111 | 222 |
| 111 | 222 |
4.鼠标悬停：悬停后灰色
| 111 | 222 |
| 111 | 222 |
5.紧缩表格：表格更小，更紧凑
| 111 | 222 |
| 111 | 222 |
6.状态class
.active鼠标悬停的颜色，灰色 .success标识成功或积极的动作，绿色
.warning标识警告或需要注意，黄色 .danger标识危险或潜在的带来负面影响的动作，红色
例如：行上加：
列上加：
7.响应式表格：
在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失
四.表单
1. 基本案例:
2.内联表单
表单左对齐显示，宽口小于768px时,表单折叠，注意：一定要为每个输入要空间laber，并加class=”sr-only”
3.水平排列的表单
4.表单控件
默认宽度100%，获取焦点有蓝色边框。大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。
例：
5.文本域
row设置行高：
6.checkbox和radio
默认堆叠
例：
一行显示：.checkbox-inline
例：
7.Select
单选下拉：
多选下拉：
下拉按钮：颜色default、primary、success、info、warning、danger
Action
上弹菜单：大小：btn-xs btn-sm btn-md btn-lg
分裂式下拉菜单
禁用下拉按钮：
Dropdown
8.禁用文本框
9.表单校验
//绿色
//棕色
//红色
10.控件尺寸
通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。
五.按钮
1.按钮颜色
//默认灰色按钮
//蓝色
//绿色
//蓝色
//深黄
//红色
//按钮转链接
2.按钮尺寸
btn-lg大 btn-md中等(默认) btn-sm小 btn-xs超小
例：
3.加载按钮
Loading state
4.按钮充满父元素
例：
5.活动状态
按钮点击被压下，边框颜色深，内置阴影
6.链接转按钮
7.禁用链接
8.禁用
9.单选按钮
1
2
3
10.按钮组
a).
b).并排按钮组：
c).按钮组尺寸
d).按钮组下拉框组合：
Dropdown
竖直排列：
两端对齐，100%显示： 1. 2.响应式图片： 3.关闭按钮： 4.快速浮动： 注：导航条中用.navbar-left 或 .navbar-right。 5.清除浮动： 6.显示、隐藏： 7.块级元素在不同屏幕上的显示(其它尺寸的屏幕隐藏) 显示：.visible-xs <768px .visible-sm 768px-992px .visible-md 992px-1200px .visible-lg >=1200px 隐藏：.hidden-xs .hidden-sm .hidden-md .hidden-lg Bootstrap 提供了 glyphicons-halflings.png 和 glyphicons-halflings-white.png 两个图标文件，它们的效果完全相同。不同的是，前者是白底黑色图标，后者是黑底白色图标。 每个图标都需要依附于一个 标签，并且赋予唯一的一个类（class）。任何需要使用图标的地方，只需给 标签添加以 .icon- 为前缀的类即可。比如，要使用搜索图标，就给 标签添加 .icon-search 类,例如： 用户 家 icon-home 、购物车：icon-shopping-cart 上传下载链接： icon-open icon-save icon-link 搜索： icon-search 分享 icon-share icon-share-alt 刷新： icon-refresh 加载： icon-repeat 发送： icon-send 上下左右单箭头：icon--arrow-up icon-arrow-down iconicon-arrow-left icon-arrow-right 上下左右尖角号： icon-chevron-up icon-chevron-down icon-chevron-left icon-chevron-right 快进、快退： icon-forward icon-backward 上一首、下一首： icon-fast-forward icon-fast-backward 播放、暂停、停止： icon-play icon-pause icon-stop 声音大小： icon-volume-up icon-volume-down 静音： icon-volume-off 闹钟： icon-bell 耳机： icon-headphones 手机电话： icon-phone-alt icon-phone 条形码 icon-barcode 二维码 icon-qrcode 书icon-book 书签 icon-bookmark 相机、录像机 ： icon-camera icon-facetime-video 音乐、电影： icon-music icon-film 列表、定位： icon-list icon-map-marker 放大缩小： icon-zoom-in icon-zoom-out 警告：icon-warning-sign 修理：icon-wrench 回形针icon-paperclip Pills 可以竖直堆叠。只要加上.nav-stacked。 禁用链接 对任何导航（包括标签页，pills，或列表，加入disabled使链接为灰色且没有鼠标悬停效果。 1.表单 2.按钮 3.文本 1.固定定位上部 2.固定定位下部 3.静止在上部： 4.静止在下部： 12分页和翻页 1.分页.active是当前页 禁止点击： 尺寸： 2.翻页 两边对齐 可选禁用 2. <div class="container" style="padding: 100px 50px 10px;" > <button type="button" class="btn btn-default popover-show" title="Popover title" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容 —— show 方法"> 左侧的 Popover button> <button type="button" class="btn btn-primary popover-hide" title="Popover title" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容 —— hide 方法"> 顶部的 Popover button> <button type="button" class="btn btn-success popover-destroy" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容 —— destroy 方法"> 底部的 Popover button> <button type="button" class="btn btn-warning popover-toggle" title="Popover title" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容 —— toggle 方法"> 右侧的 Popover button><br><br><br><br><br><br> <p class="popover-options"> <a href="#" type="button" class="btn btn-warning" title=" $(function () { $('.popover-show').popover('show');}); $(function () { $('.popover-hide').popover('hide');}); $(function () { $('.popover-destroy').popover('destroy');}); $(function () { $('.popover-toggle').popover('toggle');}); $(function () { $(".popover-options a").popover({html : true });}); script> div> ... ... class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> class="glyphicon glyphicon-chevron-left"> class="right carousel-control" href="#carousel-example-generic" data-slide="next"> class="glyphicon glyphicon-chevron-right"> 2. 轮播切换时间：$(function(){ $('.carousel').carousel({ interval:200 }); }); 从左到右循环各帧:.carousel('cycle') 停止轮播:.carousel('pause') 将轮播定位到指定的帧上（帧下标以0开始，类似数组）:.carousel(number) 返回到上一帧:.carousel('prev') 转到下一帧:.carousel('next') 六.图片
圆角矩形
圆
带内空白的矩形
七.图标
八．导航
1.细线导航
2.胶囊导航
3.面包屑导航
4.堆叠胶囊导航
5.两端对齐细线导航
6.两端对齐胶囊导航
7.带下拉框的细线导航
8.带下拉菜单的胶囊导航
9.默认导航条
10.导航添加
10.导航位置
11.反色导航条
...
...
...
九.js插件
1.弹框
Title
" data-container="body" data-toggle="popover" data-content=" Popover 中的一些内容 —— options 方法
"> Popover a> p> <script>2.模态框(弹框)
3.轮播图
class="carousel-indicators">
src="..." alt="...">
10.特效
1.滚动监听
2.导航
3.轮播
4.form、缩略图、折叠
5.面板
6.表格
7.输入框、搜索框、单复选框、下拉选框
