Bootsrtap 常用

 

类名	含义	给哪个标签
container	必写，开始搞事情	给最大的父元素
row	行，可多可	div，可再次嵌套到col-md-n中
col-xs-n	超小屏幕 手机 (<768px)(单位：一个栅格)
col-sm-n	小屏幕 平板 (≥768px)
col-md-n	中等屏幕 桌面显示器 (≥992px)
col-lg-n	大屏幕 大桌面显示器 (≥1200px)
col-mg-offset-n	表示往右偏移的距离
col-mg-push-n	控制元素向右移动
col-mg-pull-n	控制元素向右移动
pull-left	左浮动
pull-right	右浮动
caret	三角形(向下)
btn	变为按钮样式
clearfix	清除浮动
h1~h6	对应 36 30 24 18 14 12 px
lead	主题
list-unstyled	清除样式	ol，ul
list-inline	行内块元素分布	ul
table	给表格变化整体样式	table
table-striped	隔行变色
table-bordered	带边框
table-hover	添加鼠标经过效果
active	选中/激活状态	td
success	表示提示（绿色）
info	表示信息（蓝色）
warning	警告（淡黄色）
danger	危险/报错（淡粉色）
form-group	表示分组	给包着label和input的盒子
form-control	变为一整行（100%宽）	input
btn / btn-default	实心 / 幽灵	按钮或input的按钮
form-inline	内联表单	给form，配合form-group和form-control使用
form-horizontal	水平排列
sr-only	类似删除
has-success	校验	form-group
has-warning
has-error
glyphicon 和 glyphicon-ok一起	成功提示（勾）	给一个span，这个span一般紧跟在input后面
glyphicon 和 glyphicon-sign一起	警告提示（叹号）
glyphicon 和 glyphicon-remove一起	错误提示（叉）
btn	变为按钮默认的默认样式	按钮
btn-default	默认
btn-primary	首选项
btn-success	成功
btn-info	表示信息
btn-warning	警告
btn-danger	危险/报错
btn-link	表示链接
btn-active	激活状态
btn-xs 等	用于控制大小
btn-block	变为块级
disabled	警告
img-rounded	带有圆角	img图像
img-circle	变为椭圆，正圆需要高宽相等
img-thumbnail	带有一个有点好看的边框
text-primary	淡蓝色	文本
text-muted	淡灰色
text- success	成功提示
text-danger	危险
text- warning	警告/危险
glyphicon	基类	字体图标
input-group	图标+input	组合起来
input-group-addon包裹字体图标
input
字体图标
glphyicon	基类	一般用于span
input +   input-group-addon{   glphyicon } +   input	图标+input
以下需要 bootstrap.js // bootstrap.js // jQuery
下拉菜单
dropdown	基类	大容器（含标题和下拉内容）
dropdown-toggle	标题	一般用于 a
data-toggle="dropdown"		dropdown-toggle
caret	三角形	跟着标题的字即可 span
dropdown-menu	下拉内容容器	ul
divider	子菜单的横向分割	li
按钮组
btn-group	基类	容器
btn btn-default	幽灵	<button type="button"></button> 或 <a type="button" ></a>
btn btn-info	蓝色
btn btn-success	绿色
按钮式下拉菜单
btn-group	基类	容器
btn ...   dropdown-toggle   data-toggle="dropdown"	下拉按钮	<button type="button"></button> 或 <a type="button" ></a>
caret	小三角	span
dropdown-menu	下拉内容容器	ul
divider	子菜单的横向分割	li
按钮+input
input-group	基类	容器
input-group-addon	按钮/图	span，可放 input 前/后
form-control	输入框	input
导航
nav	基类，默认垂直排列	容器，一般直接给 ul
nav nav-tabs	水平排列，tabs标签式
nav nav-pills	水平排列，pills胶囊式
nav nav-pills nav-justified	水平排列，胶囊式，占满宽度
active	激活状态	li
导航+下拉菜单(导航同上)
dropdown	基类	li
dropdown-toggle	标题	一般用于 li 中的 a
data-toggle="dropdown"
caret	小三角	span 紧跟 a 中的文本
drop-down-menu	下拉内容容器	li 中的 ul
divider	下拉子元素水平分割线	li 中的 ul 中的 li
标签
label	主属性，默认状态	一般用于 span
label label-default
label label-primary
label label-success
label label-info
label label-warning
label label-danger
分页
pagination	基类	容器 一般直接给 ul
<span>&laquo;</span>	左箭头，类似<<	写到 ul 中的 li 中的 a 中
<span>&raquo;</span>	右箭头，类似>>
数字 1 2 3 ...
disabled	禁用状态	ul 中的 li
active	激活状态/当前页
徽章
badge	基类	一般用于 span ，紧跟文本后面
可紧跟 btn 中的文本，他会根据 btn btn-success 等的样式来改变颜色
缩略图
thumbnail	基类	给a，div 包着 a ，a 包着 img
警告条
alert	基类	p，span，a 等都可
alert alert-success
alert alert-info
alert alert-warning
alert alert-danger
进度条
progress	基类	容器，一般用于 div
progress-bar	进度条	容器中的 div
aira-valuenow="0~100"	当前进度
aira-valuemin="0"	最小值
aira-valuemax="100"	最大值
style="wiidth: 0~100%"	当前进度
0~100%	当前进度	容器中的 div 的文本内容

 

转载于:https://www.cnblogs.com/blueDr/p/8433579.html