Bootstrap 全局CSS样式
一 排版
1.标题标签 : h1-h6
2.small 常用于副标题
3.lead 内容突出
4.文字对齐:
1).text-left
2).text-center
3).text-right
4).text-justify
5).text-nowrap
5.大小写转换 :
1)小写.text-lowercase
2).大写.text-upercase
3)首字母大写.text-capitalize
6.列表:
1)清除样式 .list-unstyled
2)列表一行显示 .list-inline
3)自定义列表一行显示 .dl-horizontal
7.表格 (.table)
1)边框 .table-bordered
2)条纹状表格.table-striped
3)紧凑 .table-condensed
4)响应式表格 .table-responsive
5)鼠标悬浮类 .table-hover
8.表单:
1)表单组 .form-group
2)表单控件.form-control
3)内联表单 .form-inline
4).input-group 输入框组
5)input-group-addon
6)水平排布 .form-horizontal
7)静态的表单控件 .form-control-static
9.表单校验状态 :
1)验证成功 .has-success
2)验证失败 .has-error
3)验证警告 .has-warning
4)设置表单验证的图标 .has-feedback
5)给需要显示图标的span 指定显示位置 .form-control-feedback
10.按钮:
1).btn 具有按钮效果
2).btn-default
3)btn-primary 蓝色
4).btn-info 天蓝色
5).btn-success 绿色
6).btn-warning 橙黄
7).btn-danger 红色
8).btn-lg 超大
9).btn-sm 小按钮
10).btn-xs 超小按钮
11).btn-block 设置为块级按钮
11.图片 :
1).img-rounded 圆角
2).img-circle 圆
3).img-thumbnail 缩略图
4).img-responsive 响应式图片
5).center-block 让响应式图片居中
12.辅助类:
1)文本颜色 .text-primary .text-muted .text-info .text-success .text-warning .text-danger
2)文本背景色 .bg-primary .bg-info .bg-success .bg-warning .bg-danger
二、组件
1.图标:
1).glyphicon
2.)glyphicon-* 例如: .glyphicon-user
引用 font-awesome图标库 使用方法: 1).fa 2).fa-* 例如 .fa-desktop
2.下拉菜单:
1) .dropdown /.dropup 定义下拉菜单样式
2).dropdown-menu 菜单列表样式
3).data-toggle:dropdown 定义按钮点击处理事件
4).dropdown-menu-right /.dropdown-menu-left 定义菜单文字对齐方式
5).dropdown-header作为标题
6).divider 分割线
7).disabled 不可用
3.按钮组: .btn-group
尺寸:1) .btn-group-lg 2).btn-group-sm 3).btn-group-xs
按钮组排布方式,默认水平排布 .btn-group-vertical 垂直方向排布
.input-group-btn :用于包裹在输入框组的按钮
4.导航(.nav)
1)标签页导航:.nav-tabs
2)胶囊式导航:.nav-pills
3)适应屏幕宽度:.nav-justified
4)路径导航:.breadcrumb (面包屑导航)
5.导航条(.navbar)
1).navbar-brand 品牌图标,用于logo的超链接上(主要让logo处于导航中间,按需添加)
2)表单: .navbar-form
3).navbar-btn 按钮
4).icon-bar 面包屑
5).navbar-text 文字
6)对齐方式: navbar-left .navbar-right
7)固定定位: navbar-fixed-top navbar-fixed-bottom
8)反色导航 :navbar-inverse
9)头部 :.navbar-header
10)汉堡包按钮 :.navbar-toggle
11)导航折叠类: .navbar-collapse
12)小屏中导航默认收起:.collapse
13)展开/收起 功能,按钮添加属性: data-toggle=”collapse” 并指向需显示的导航 : data-target=”.navbar-collapse”
6.标签(.label)
1).label 标签
2).label-primary 颜色
3).label-danger
4).label-info
5).label-success
6).label-warning
7.徽章(.badge)
8.分页(.pagination) 1)当前页 .active 2)禁用的 .disabled
9.翻页(.pager) 1).previous 2).next
10.标签(.label) 1).label-default 2).label-success 3).label-info 4).label-primary 5).label-danger 6).label-warning
11.巨幕 (.jumbotron)
12.页头(.page-header)
13.缩略图 (.thumbnail)
14.警告提示(.alert) 2).alert-info 3).alert-success 4).alert-warning 5).alert-danger 如需关闭按钮 添加button 按钮 并且设置一个 data-dismiss=”alert” 属性