Bootstrap常用类名总结

来源:互联网 发布:js分页思路 编辑:程序博客网 时间:2024/05/21 00:53

网格系统
基础类col-xs- ,col-sm- ,col-md- ,col-lg
偏移列 col-xs-offset-
列排序 col-md-push- col-md-pull-

排版
突出显示 lead
小文本 small
左对齐 text-left
居中对齐 text-center
右对齐 text-right
元素浮动到左边 pull-left
元素浮动到右边 pull-right
清除浮动 clearfix
超出屏幕部分文字自动换行 text-justify
超出屏幕部分不换行 text-nowrap
文本小写 text-lowercase
文本大写 text-uppercase
设定单词首字母大写 text-capitalize
列表项放置同一行list-inline
文本强调色(text-muted,text-primary,text-success,text-info,text-warning,text-danger)
背景强调色(bg-primary,bg-success,bg-info,bg-warning,bg-danger)
强制显示 show
强制隐藏 hidden
下拉功能插入符 caret

表格
基础类 table
条纹表格 table-striped
边框表格 table-bordered
悬停表格 table-hover
紧凑表格 table-condensed
响应式表格 table-responsive

表单
基础类 form-group
基础类 form-control
内联表单 form-inline
水平表单 form-horizontal
水平标签 control-label
静态控件 form-control-static
输入成功 has-success
输入警告 has-warning
输入错误 has-error
表单控件大小 input-lg,input-sm..(div->col-lg-)
表单帮助文本 help-block(应用在input下方的标签,如span)
前置内容 input-group-addon
输入框组的大小 input-group-lg input-group-sm

按钮
基础类 btn
白底-默认按钮 btn-default
深蓝色底-原始按钮 btn-primary
绿色底-成功按钮 btn-success
天蓝色底-信息按钮 btn-info
黄色底-谨慎操作按钮(警告按钮) btn-warning
红色底-危险动作按钮 btn-danger
链接外观按钮 btn-link
按钮大小 btn-lg,btn-sm,btn-xs
块级按钮 btn-block
按钮被点击 active
按钮被禁用 disabled

图片
圆角图片 img-rounded
圆形图片 img-circle
图片添加灰色边框 img-thumbnail
响应式图片 img-responsive

字体图标
基础类 glyphicon
home图标 glyphicon-home
用户头像图标 glyphicon-user
勾 图标 glyphicon-ok
叉 图标 glyphicon-remove
垃圾箱 glyphicon-trash
下载图标 glyphicon-download-alt
更多字体图标

下拉菜单
基础类 dropdown
基础类 dropdown-menu
对齐 pull-left
下拉菜单标题 dropdown-header
菜单向上弹出 dropup
分割线 divider

按钮组
基础类 btn-group
按钮工具栏 btn-toolbar
按钮的大小 btn-group-lg (sm,xs)
垂直按钮组 btn-vertical

导航元素
基础类 nav
默认导航菜单 nav-tabs
胶囊式导航菜单 nav-pills
垂直导航菜单 nav-stacked
菜单两端对齐 nav-justified

导航栏
基础类 navbar
默认导航栏 navbar-default
标题 navbar-header
文本强调 navbar-brand
响应式导航栏 collapse,navbar-collapse
导航栏表单 navbar-form
导航栏中的按钮 nvbar-btn
导航栏中的文本 nvabr-text
组件对齐方式 navbar-left navbar-right
导航栏固定在页面顶部 navbar-fixed-top
固定到底部 navbar-fixed-bottom
固定到静态的顶部 navbar-sttic-top
反色导航 nvbar-inverse
面包屑导航 breadcrumb (用于ol)

分页
基础类 pagination
大小 pagination-lg,pagination-sm
使用状态 active disabled

翻页
基础类 paper
向左对齐 previous
向右对齐 next
颜色变淡 disabled

标签
基础类 label
外观修饰 label-default,label-primary,label-success,label-info,label-warning,label-danger
徽章 badge

页面标题
基础类 page-header

缩略图
基础类 thumbnail

警告
基础类 alert
修饰类 alert-success,alert-info,alert-warning,alert-danger
可取消的警告 alert-dismissable
警告中的链接 alert-link

进度条
基础类 progress
默认进度条 progress-bar
修饰类 progress-bar-success,progress-bar-info,progress-bar-warning,progress-bar-danger
条纹进度条 progress-striped

多媒体对象
基础类 media
媒体列表 media-list
对齐 media-left,media-right

列表组
基础类 list-group,list-group-item

面板
基础类 panel
默认面板 panel-default
标题 panel-heading,panel-title
脚注 panel-footer
修饰类 panel-primary,panel-success,panel-info,panel-warning,panel-danger

凹陷容器
基础类 well
大小 well-lg,well-sm

原创粉丝点击