为了方便快速开发,小结常用bootstrap类名,熟练记忆。
栅格类:
col-xs/sm/md/lg-*
列,占据母元素的几份表单<form>
form-inline
行内表单
form-group
表单组
form-control
表单控件
has-warning/error/success
显示状态按钮
btn
基本样式
btn-default/primary/success/info/warning/danger
其他按钮样式
btn-lg/md/sm/xs
按钮大小
btn-block
块级按钮,拉伸至父元素100%的宽度按钮组
btn-group
按钮组,里面放置一系列button
btn-toolbar
按钮工具栏,里面放置几组btn-group
btn-group-xs/sm/md/lg
按钮组的大小样式
btn-group-vertical
垂直按钮组导航
nav
基本导航
nav-tabs
标签式导航菜单
nav-pills
胶囊式导航菜单
nav-stacked
胶囊垂直对方
nav-justified
导航自适应
导航栏
navbar
导航栏基本样式
navbar-default
默认样式
navbar-header
导航栏头
navbar-brand
导航栏头里面的导航牌
nav navbar-nav
为了向导航栏添加链接,只需要在无序列表添加这两个类
navbar-left/right
左/右对齐
navbar-form
导航中的form表单面板
panel
基础面板
panel-default/primary/success/info/warning/danger
其他面板
panel-heading
面板头部
panel-title
面板标题
panel-body
面板内容
panel-footer
面板脚注表格
table
表格基本样式(只有横向分隔线)
table-striped
条纹表格
table-bordered
边框
table-hover
悬停
table-condensed
更加紧凑
active/success/info/warning/danger
来改变tr/th/td背景颜色
table-responsive
响应式表格
- 其他:
container
容器
row
行
small
小
text-muted
文本静音
well
上下左右有个padding
pagination
分页
pager
翻页
disabled
禁用
active
活跃
breadcrumb
面包屑
label
标签
label-success/info/warning/danger
标签其他样式
badge
徽章
alert
弹出提示
alert-success/info/warning/danger
其他弹出样式
list-group
列表组
list-group-item
列表项