bootStrap常用CSS样式及标签笔记

常用类:
abbr 文本缩写标签,示例:<abbr title="Phone">P</abbr>
address 联系信息标签
blockquote 引用标签

.container 居中容器
.container-fluid 全屏容器

.visible-xs、 .visible-sm、 .visible-md、 .visible-lg 在对应的屏幕下不显示,但占位
.hidden-xs、 .hidden-sm、 .hidden-md、 .hidden-lg 在对应的屏幕下隐藏
.clearfix 清除浮动

code 标签,用于内联代码。
pre 标签,用于块级代码。
.pre-scrollable 使pre元素可滚动

网格类:
.row 行(一行均分成12列,每列的padding: 15px)
.col-xs- 超小设备时占据列数
.col-sm- 小型设备时占据列数
.col-md- 中型设备时占据列数
.col-lg- 大型设备时占据列数
.col-xs-offset- 超小设备时列的左外边距
.col-sm-offset- 小型设备时列的左外边距
.col-md-offset- 中型设备时列的左外边距
.col-lg-offset- 大型设备时列的左外边距
.col-xs-push- 超小设备时向右推边距
.col-sm-push- 小型设备时向右推边距
.col-md-push- 中型设备时向右推边距
.col-lg-push- 大型设备时向右推边距
.col-xs-pull- 超小设备时向左拉边距
.col-sm-pull- 小型设备时向左拉边距
.col-md-pull- 中型设备时向左拉边距
.col-lg-pull- 大型设备时向左拉边距


文字类:
h1、h2、h3、h4、h5、h6
small、 .small 文本大小为父文本大小的85%。比如:<h1><small>...<small></h1> 与 <h3><small>...<small></h3> 下的字体大小是不同的
em 斜体
strong 粗体
.lead 使段落突出显示,示例: <p class="lead">...</p>


.text-primary 字体内置样式:浅蓝色
.text-success 字体内置样式:绿色
.text-danger 字体内置样式:暗红色
.text-warning 字体内置样式:浅红色
.text-info 字体内置样式:深蓝色


.text-left 文本左对齐
.text-right 文本右对齐
.text-center 文本居中对齐
.text-justify 文本两端对齐
.text-muted 文本减弱显示
.text-nowrap 段落中超出屏幕部份不换行
.text-lowercase 文本英文全部小写
.text-uppercase 文本英文全部大写
.text-capitalize 英文单词首字母大写
.text-hide 隐藏容器内所有文本(其它元素显示,比如图片等)
.initialism 使字体相对变小




.blockquote-reverse 引用右对齐

.pull-left、 .pull-right 文本向左或向右推


列表类:
ol、ul、dl

ol是有序列表,默认序号为1,2,3...
ul是无序列表,默认序号是小圆点
dl中dt、dd默认宽度100%; dt默认是粗体

UL标签样式:
.list-unstyled 去掉小圆点。
.list-inline 内联li项目,同时去掉小圆点
.list-group-item-success 使背景色为success色,同样式可应用于li中
.list-group-item-danger 使背景色为danger色,同样式可应用于li中
.list-group-item-info 使背景色为info色,同样式可应用于li中
.list-group-item-warning 使背景色为warning色,同样式可应用于li中
.list-group-item 使ul标签加上边框,可应用于li中,使其加边框

DL标签样式:
.dl-horizontal 使dt与dd横向排列



表格类:
table、caption、thead、tbody、th、tr、td

table标签样式:
.table 无边框,th粗体、粗底边线条。td顶部边线条。
.table-striped 与 .table 一起使用。隔行显示灰色背景样式表格。
.table-bordered 与 .table 一起使用。给表格加边框。
.table-hover 与 .table 一起使用。移上去显示背景色
.table-condensed 与 .table 一起使用。使表格更紧凑。(行高变低了)
.table-responsive 与 .table 一起使用。响应式表格。


tr、th、td标签样式:
.active 将悬停的颜色应用在行或者单元格上
.success 将success应用在单元格上
.info 将info应用在单元格上
.warning 将warning应用在单元格上
.danger 将danger应用在单元格上

猜你喜欢

转载自www.cnblogs.com/wm218/p/10597444.html