赵乾舟 发表于 2022-5-7 13:35:06

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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
页: [1]
查看完整版本: bootstrap常用类名