Bootstrap中的常用类名

阚乐湛
2023-12-01

1.栅格类:

  • col-xs/sm/md/lg-* 列,占据母元素的几份

2.表单

  • form-inline 行内表单
  • form-group 表单组
  • form-control 表单控件
  • has-warning/error/success 显示状态

3.按钮

  • btn基本样式
  • btn-default/primary/success/info/warning/danger 其他按钮样式
  • btn-lg/md/sm/xs 按钮大小
  • btn-block 块级按钮,拉伸至父元素100%的宽度

4.按钮组

  • btn-group 按钮组,里面放置一系列button
  • btn-toolbar 按钮工具栏,里面放置几组btn-group
  • btn-group-xs/sm/md/lg 按钮组的大小样式
  • btn-group-vertical 垂直按钮组

5.导航

  • nav 基本导航
  • nav-tabs 标签式导航菜单
  • nav-pills 胶囊式导航菜单
  • nav-stacked胶囊垂直对方
  • nav-justified 导航自适应

6.导航栏

  • navbar 导航栏基本样式
  • navbar-default 默认样式
  • navbar-header 导航栏头
  • navbar-brand 导航栏头里面的导航牌
  • nav navbar-nav 为了向导航栏添加链接,只需要在无序列表添加这两个类
  • navbar-left/right左/右对齐
  • navbar-form 导航中的form表单

7.面板

  • panel 基础面板
  • panel-default/primary/success/info/warning/danger 其他面板
  • panel-heading 面板头部
  • panel-title 面板标题
  • panel-body 面板内容
  • panel-footer 面板脚注

8.表格

  • table 表格基本样式(只有横向分隔线)
  • table-striped 条纹表格
  • table-bordered 边框
  • table-hover 悬停
  • table-condensed 更加紧凑
  • active/success/info/warning/danger 来改变tr/th/td背景颜色
  • table-responsive 响应式表格

9.其他

  • 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 列表项
 类似资料: