起步
在IE中运行最新的兼容模式
初始化移动浏览显示:让视口的宽度=设备屏幕宽度，初始缩放比例为1
IE版本低于IE9
编译css和js文件
- 在bootstrap目录下，运行npm install
- 执行grunt dist
以后定制bootstrap时用。
栅格系统
如果给12个column设置
.col-md-1。则在电脑上，它们会依次排开；而在手机和平板上，会从上往下堆叠。
==
某些列可能会出现比别的列高的情况：如下所示
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
效果如下：
列排序
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
列排序跟列偏移不同：列排序时，元素会脱离文档流。
排版
在 HTML 4.01 中不赞成使用 u 标签。
在 HTML 5 中不支持 u 标签。
对齐
- .text-left
- .text-right
- .text-center
- .text-justify 段落中超出屏幕部分文字自动换行
- .text-nowrap 段落中超出屏幕部分文字不换行
辅助类
sr-only:除了屏幕阅读器外，其他设备上隐藏元素
三角符号
下三角变为上三角
.test-caret .caret{
border-top:0;
border-bottom:4px dashed;
}
导航条内的浮动
.navbar-left .navbar-right
内容块居中
.center-block
显示或隐藏
.show .hidden 只对块级元素起作用
.invisible 不改变display属性
按钮
.btn-lg .btn-sm .btn-xs 四种
表单
单选和多选框： 都有固定的样式。
.checkbox .radio .checkbox-inline .radio-inline
禁用状态
为input button添加disabled属性，为a添加.disabled
fieldset设置disabled，里面的a链接功能不受影响
添加额外的图标
//这四个元素要放在同一级
(success)
表格
六种表格
条纹状.table-striped,
边框.table-bordered
鼠标悬停.table-hover
紧缩.table-condensed
响应.table-responsive
响应式工具
visible | block | inline | inline-block
xs
sm
md
lg
.hidden-xs .hidden-sm .hidden-md .hidden-lg
打印类先不看
使用less
学习less的相关知识
variables.less less变量
使用autoprefixer.js添加前缀
常用的mixin
- 清除浮动
- 水平居中
- 尺寸助手
- 调整大小的文本域
- 截断文本
现在还用不到customization，所以不用学会less的源码
使用bootstrap中less的方式：Less: Beyond Basics with the Bootstrap Mixins Library
目录结构
style.less文件夹
@import "less/mixins/center-block.less";
p {
.center-block();
}
实例精选
入门级模板
组件
导航条
以上是最简形式：1、.navbar-header；2、.navbar-collapse内添加导航内容
使用时 需要注意的地方：1、修改#navbar；2、作为body的直接子元素
特殊情况
- 导航条内所包含元素溢出：减少元素；通过响应工具类隐藏；修改@grid-float-breakpoint，默认值是768px；自己重写相关媒体查询，覆盖原来的代码
- 依赖 JavaScript ，collapse插件
- 必须使用
将导航条内放置品牌标志的地方替换为 img 元素即可展示自己的品牌图标
导航条内包含表单
导航条内包含button，需要添加.navbar-btn
导航条内包含文本：
非导航链接：.navbar-link
组件排列：.navbar-left .navbar-right
不能向右对齐多个组件
固定在顶部：.navbar-fixed-top
需要为body设置padding-top
固定在底部
静止在顶部：会随着页面向下滚动而消失：.navbar-static-top
反色导航条：.navbar-inverse
巨幕
Hello, world!
...
与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container
元素的外面，并在组件内部添加一个 .container
元素。
...
页头
.page-header
支持 h1 标签内内嵌 small 元素的默认效果`
缩略图
自定义内容:.caption
标签
New
.label-primary等其他可用的变体
徽章
4
不包含任何内容时，可自动消失
下拉菜单
对齐: .dropdown-menu-left .dropdown-menu-right
在下拉菜单中添加标题:
在下拉菜单中添加分割线:
禁用的菜单项:
方法：$('.dropdown-toggle').dropdown('toggle')
事件：跟modal一样
bootstrap这种组件支持data和js两种调用方式：一般情况下可以使用data，如果点击之后又后续操作的话，需要使用js。
导航
1
...
...
...
胶囊：.nav-pills
堆叠：.nav-stacked
两端对齐：.nav-justified
方法：$('#myTabs li:eq(2) a').tab('show')
事件：跟modal一样
警告框
Warning! Better check yourself, you're not looking too good.
可关闭的警告框
警告框中的链接
.success .info .warning .danger
进度条
不加提示数字：span.sr-only
在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性
min-width: 2em;
min-width: 2em; width: 2%;
不同的情景：给div.progress-bar添加.progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger
列表组
加入徽章：4
在文字前后都行
全是链接的列表组
全是按钮的列表组
被禁用的条目：给.list-group-item添加.disabled
不同情景：给.list-group-item添加.list-group-item-success .list-group-item-info .list-group-item-warning .list-group-item-danger
自定义内容：有专门的header和text
面板
Panel title
Panel content
由三部分组成
.heading .body .footer
有四种情景
面板内可添加表格、列表组，作为.panel的直接子元素。
well
...
调整大小：.well-lg .well-sm
轮播
要把fonts添加到css下
需要修改id
方法
.carousel({ interval: 2000})
.carousel('cycle')
.carousel('pause')
.carousel(number)
.carousel('prev')
.carousel('next')
事件
`slide.bs.carousel`当调用 slide 实例方法时立即触发该事件。
`slid.bs.carousel`当轮播完成幻灯片过渡效果时触发该事件。
页脚
html
css
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.container .text-muted {
margin: 20px 0;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}