一篇梳理bootstrap 常用类名

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

为了方便快速开发，小结常用bootstrap类名，熟练记忆。

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 列表项