1. 下载bootstrap
引用 CSS 和 JS 文件,引用js之前要先引用jquery
2. button
可加的class样式有
1. <button class="btn">提交</button>
2. <button class="btn-primary">提交</button>
3. 上面两个一起用<button class="btn-primary btn">提交</button>
4. <button class="btn-block">提交</button> //让button占一整行宽
3. form
可加的class样式有
//可在input里加
<input class="form-control" type="text">
4. 提醒事项
登陆成功,正在跳转
<div class="alert alert-success">登陆成功</div>
5. 栏栅系统(响应式布局)
bootstrap默认每一行是12列
<div class=container> //自动居中
<div class=row> //一行分成12份
<div class=col-md-1>1</div> //这两个分别占1份和11份
<div class=col-md-11>11</div>
</div>
<div class=row> //第二行
<div class="col-md-9 col-md-offset-3">9</div> //这样这个div会往右边对齐,因为第二个class代表往右偏3格
</div>
<div class=row> //第三行
<div class="col-xs-6 col-md-1 col-sm-3">6</div>
//在屏幕宽度很小的时候(手机)占6份
//中等(电脑)的时候占1份
//小(ipad)的时候占3份
//超大屏(col-lg-12)
</div>
</div>
6. 秘诀
直接复制官网的html代码,复杂css组件,js组件,定制bootstrap可以自己改样式、颜色
7. 小技巧
靠右:不写col-md-...
,直接写pull-right
8. 主题
下载的文件里有bootstrap.theme.css