为了方便快速开发,小结常用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列表项









网友评论