bootstrap常用类名

赵乾舟

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

作者：深度剖析JavaScript
链接：https://www.jianshu.com/p/004b70c93860
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。