bootstrap CSS#
一、容器
.container 包裹其他元素
div.row 必须放在.container里面
二、文本对齐方式:
text-center text-left text-right
三、块标签对齐方式:
pull-left pull-right center-block
四、栅格系统:
.col-xs-2 .col-sm-2 .col-md-2 .col-lg-2
偏离 .col-xs-offset-2
五、排版样式 :
h1 .page-header
small
p .leader
着重
斜体
六、文字的颜色(带有样式滑动效果)：
text-muted 柔和色
text-primary 浅蓝色
text-success 深绿色
text-info 深蓝色
text-warning 浅黄色
text-danger 红色
七、缩略语：
缩写
八、列表：
.list-group-item 列表项目
或者使用
九、自定义列表：
十、代码：
```
十一、表格： 十二、表单： 或者 十三、显示和隐藏： 十四、按钮： 十五、img图片： 十六、响应式图片： 十六、向下箭头： 十七、下拉菜单： 禁用菜单项 十八、按钮组： 十九、按钮工具栏： 二十、按钮组尺寸 按钮组和下拉菜单嵌套 两端对齐的按钮组 (只适用于 向上弹出式菜单 输入框组 二十一、输入框组尺寸： 二十二、将单选框或复选框放入输入框组： 带有下拉菜单的输入框组 分段按钮 二十三：标签页(选项页)： 二十四、胶囊式标签页： 二十五、堆叠式选项卡(竖向 只能和胶囊式标签页配合)： 两端对齐的导航(可用于tabs和pills) 禁用的链接(标签) 导航条中的文本 导航条中的链接 面包屑导航 ( 默认分页(上一页123456下一页) 激活状态(当前页) 翻页 禁用状态 标签 徽章 大屏幕 页面标题(灰色小线条) 缩略图 定制内容 将 警告框 可关闭的警告框 警告框中的链接 进度条 进度条颜色 列表组 链接列表 面板 因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，我们为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的。比如： 这其中就区分了IE7和IE6向下的浏览器对CSS的执行，达到兼容的目的。同时，首行默认的css.css还能与其他非IE浏览器实现兼容。
.table 表格样式 (后面的样式必须基于此样式)
.table-bordered 加边框的表格
.table-striped 条纹表格(隔行换色效果)
.table-hover 鼠标经过效果
.table-condensed 紧缩表格(让表格变得紧凑)
.table-responsive 响应式表格(将div.table-responsive包裹table)
( 也适用) .active 灰色
.danger 红色
.warning 浅黄色
.success 浅绿色
.form-group 用于包裹一组表单控件(如: 用户名为一组 密码为一组)
.has-success 绿色
.has-error 红色
.has-warning 黄色
.form-control (用于text password textarea select)
.input-sm 小
.input-md 中等大小(默认)
.input-lg 大
.control-label
.help-block 灰色文字(用于提示)
多选框 用div.checkbox包裹label label包裹input[type=checkbox]
div.form-group下直接用label.checkbox包裹input[type=checkbox]
单选框 div.checkbox改成div.radio 或者 label.checkbox改成label.radio
水平多选框 div.checkbox 改成 div.checkbox-inline 或者 label.checkbox改成label.checkbox-inline
水平单选框 div.radio改成div.radio-inline 或者label.radio改成label.radio-inline
表单占位 input标签中添加属性 placeholder="要显示的内容"
内联表单 form.form-inline
水平表单 form.horizontal
再把div.form-group中的元素使用div栅格系统控制
静态控件 p.form-control-static
表单禁用 input标签添加disabled属性
.show 显示
.hidden 隐藏
.sr-only 隐藏
用于button(兼容性好) input[type=button submit reset] a标签
.btn 基础样式
.btn-default 灰色
.btn-primary 蓝色
.btn-success 绿色
.btn-info 浅蓝色
.btn-warning 黄色
.btn-danger 红色
.btn-link 类似a标签样式的按钮
.btn-xs 最小
.btn-sm 小按钮
.btn-md 中等大小(默认)
.btn-lg 大按钮
按钮变成块元素 .btn-block
按钮的活动状态 .active
按钮的禁用状态 .disabled
.img-rounded 圆角矩形 (IE8不支持圆角)
.img-circle 椭圆
.img-thumbnail 缩略图
.img-responsive 根据浏览器窗口大小调整
关闭按钮 (位于父容器的右上角)
span.close ×
span.caret
lyphicons图标 用于span
.glyphicon 基本样式
.glyphicon-align-left
下拉菜单项右对齐
ui.dropdown-menu pull-right
ul.dropdown-menu下的li加上.disabled样式
用带有.btn-group的div包裹所有按钮
用带有.btn-toolbar的div包裹div.btn-group
.btn-group-lg
.btn-group-md
.btn-group-sm
.btn-group-xs
使用btn-group的话 用于下拉的按钮必须加上dropdown-toggle
按钮组垂直排列
.btn-group-verticala元素,不适用于button元素)
div.btn-group btn-group-justifed
div.btn-group加上.dropup样式
用div.input-group包裹span.input-group-addon和input.form-control可以有多个
给div.input-group加上.input-group-lg md sm
将让span.input-group-addon中
将让span.input-group-addon中
下拉菜单组这一块不用加div.btn-group
这一块不用加div.btn-group
用ul.nav nav-tabs包裹li li.active表示当前选中的选项卡
ul.nav nav-pills
li li.active表示当前选中的选项卡
ul.nav nav-pills加上 .nav-stacked
ul.nav nav-pills加上 .nav-justified
li.disableds
带下拉菜单的导航
导航条
使导航条固定在顶部 在div.navbar加上.navbar-fixed-top (需要为body设置padding)
使导航条固定在底部 在div.navbar加上.navbar-fixed-bottom
导航条静止在顶部(默认) div.navbar加上.navbar-static-top
反色导航条
div.navbar navbar-inverse
导航条按钮
button.btn btn-primary navbar-btn
p.navbar-text
a.navbar-linkul和ol都适用)
ol.breadcrumb
li li加上.active表示当前页面
ul.pagination li.active
禁用状态 li.disabledui.pager li.disabledspan.label
颜色 label-default
label-primary
label-info
label-success
label-warning
label-dangerspan.badge (建议放置于a标签内)div.jumbotron
此时建议将div.container放置于div.jumbotron中
h1.page-headera.thumbnail中放置img标签div.caption放置于div.thumbnail里面
div.alert
警告框颜色 alert-success info warning danger
将button.close (需要加上属性 data-dismiss='alert')放到div.alert中
div.alert中放入a.alert-linkdiv.progress progress-bar-success info warning danger
条纹进度条 div.progress加上progress-striped样式
激活的进度条 div.progress progress-striped active
进度条堆叠 将多个div.progress-bar放入div.progress
ul.list-group
li.list-group-item {.active}
在此可以使用徽章(加上span.badge)
也可以使用标签(加上span.label label-info pull-right)
div.list-group
a.list-group-item
也可以用上面列表组的方法实现(li中添加a标签)
div.panel panel-default (其他颜色primary success info warning danger)
{div.panel-heading} 面板标题
div.panel-body 面板内容
{div.panel-footer} 面板底部Well墙 div.well 灰色圆角背景
well尺寸 div.well well-sm
div.well well-lg判断IE浏览器版本加载不同样式表##
##
##
##
注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。
这也是所谓的css hack技术…你可能感兴趣的:(bootstrap)