1.字体
text-lefttext-centertext-righttext-lowercase 小写text-uppercase 大写text-capitalize 首字母大写
2.表格
.table.table-bordered.table-striped.table-hover.table-condensed
3.颜色
denger 红色waring infosuccessactive
4.表格
form-controlform-group div里面组件form-inline 水平排版
5.输入
placeholder 提示input-lg 更大input-sm 更小sr-only 取消提示control-label has-success
.input-group 控件组.input-group-addon 防止额外内容图标
6.按钮
btnbtn-defaultbtn-successbtn-primarybtn-infobtn-warningbtn-dangerbtn-linkactive 按下状态(选中状态)btn-block 全屏状态(和父元素一样大)disableda标签也可以变成按钮
7.图片
img-rounded 圆角img-circle 圆形img-thumbnail 带边框的圆角
8.不同浏览器支持
meta name=viewport width height user-scalable initial-scale=1(代表1倍) maximum-scale minimun-scale
.test{}@media (only 只为屏幕发生改变) screen and(链接) (max-width:900px) and(min-width:500px){ .test{ }}
9.栅格
栅格分成12等份col-lg-3 col-md-4 col-sm-6 col-xs-12占超大屏列(宽度)的1/4 中等屏的1/3 小屏的1/2 手机端全屏显示(宽度)col-lg-offset-3超大屏幕的时候偏移1/4
10.单位
单位px 屏幕分辨率的长度单位em 字体尺寸(会继承父元素的字体大小 IE不支持)rem: 与em类似,相对于HTML根节点的字体单位,HTML默认字体大小16px1. rem会继承根元素字体大小2.1rem = 10px = html{font-size:62.5%}3.几乎所有浏览器都支持了
11.图标(字体图标)
复制图标库(http://getbootstrap.com/components/ 也可用国产的)中的图标class="glyphicon glyphicon-asterisk"可以添加样式.glyphicon-asterisk{color:green;font-size:100px}
12.下拉菜单
下拉菜单.dropdown 控制组件为下拉dropdown-toggle下拉菜单data-toggle指以什么事件触发,常用的如modal,popover,tooltips等,data-target指事件的目标,一起使用就是代表data-target所指的元素以data-toggle指定的形式显示data-dismiss 关闭某个元素.dropdown-menu-right 代替.pull-right右对齐divider 分割线下拉框的下标
13.导航栏
.nav .nav-tabs 可切换的导航.nav-pills 胶囊导航.nav-justifiled 导航垂直
14.分页
分页.pagination 父元素中添加分页pagination-lg 变大pagination-sm 变小.pager 翻页区域.previous 链接左对齐.next 链接右对齐
15.进度条
进度条.progress.progress-bar.progress-bar-success 颜色.progress-bar-striped 进度条颜色渐变(花纹)
16.列表
列表list-grouplist-group-item 列表项active disabledbadge 提示未读消息的下标list-group-item-info 颜色
17.面板
面板.panel .panel-default .panel-primary 蓝色。。。。.panel-heading 面板头部(面板是干什么的).panel-body 面板内容.panel-footer 面板注脚
18.插件
插件data 控制页面交互$(document).off('.data-api')解除属性绑定modal 模态框是覆盖在父窗体上的子窗体modal-dialogmodal-contentmodal-headermodal-bodymodal-footer