【BootStrap】基本样式、组件与插件

按钮
可用于按钮元素< button >
超链元素< a >
按钮类型的input元素 < input type=“button”>
提交类型的input元素 < input type=“submit”>
重置类型的input元素 < input type=“reset”>

• 原始样式按钮：btn
• 默认按钮：btn btn-default
• 提交按钮：btn btn-primary
• 成功按钮：btn btn-success
• 信息按钮：btn btn-info
• 警告按钮：btn btn-warning
• 危险按钮：btn btn-danger
• 表现为链接：btn btn-link
• 大一点的按钮：btn btn-lg
• 小一点的按钮：btn btn-sm
• 最小的按钮：btn btn-xs
• 宽屏按钮：btn btn-block
• 激活状态按钮：btn active
• 无效按钮：btn disabled
• 多种按钮样式混用： btn disabled btn-danger btn-xs

表格

• 基本表格：table
• 带斑马线的表格：table table-striped
• 带边框的表格：table table-bordered
• 有鼠标悬停状态的表格：table table-hover
• 更加紧凑的表格：table table-condensed
• 多种表格效果整合在一起：table table-striped table-bordered table-hover table-condensed
• 激活样式：active
• 成功样式：success
• 信息样式：info
• 警告样式：warning
• 危险样式：danger

图片

• 圆角：img-rounded
• 圆形：img-circle
• 缩略图：img-thumbnail

表单

• 表单输入元素：form-control，对输入元素使用form-control 可以去除阴影，边框附带淡蓝色，输入状态更加柔和

文本

• 淡灰色文本：text-muted
• 强调的文本：text-primary
• 操作成功文本：text-success
• 提示信息文本：text-info
• 警告文本：text-warning
• 危险操作文本：text-danger

背景

• 强调的背景：bg-primary
• 成功操作文字的背景：bg-success
• 信息提示文字的背景：bg-info
• 警告提示文字的背景：bg-warning
• 危险提示文字的背景：bg-danger

其他

• 关闭按钮：close
• 下拉菜单的按钮：caret
• 左浮动：pull-left
• 右浮动：pull-right
• 显示：show
• 隐藏：hidden，强行隐藏，会把该元素的位置也让出来
• 隐藏：invisible ，强行隐藏，该元素的位置会保留
• 不可点击：< li role=“presentation” class=“dropdown-header” >Dropdown header< /li >
• 分割线：< li role=“presentation” class=“divider” >< /li >
• 禁用项：< li role=“presentation” class=“disabled”>< a role=“menuitem” tabindex=“-1” href=“#”>禁用项< /a>< /li>
• 按钮组：btn-group
• 输入框组：input-group

导航栏

• 标签页：nav nav-tabs
• 胶囊式标签页：nav nav-pills
• 面包屑导航：breadcrumb

分页

• 基本分页：pagination
• 翻页：pager

标签

• 默认标签：label label-default
• 强调标签：label label-primary
• 成功标签：label label-success
• 信息标签：label label-info
• 警告标签：label label-warning
• 危险标签：label label-danger

徽章

• 徽记：badge

其他

• 超大屏幕：jumbotron
• 标题：page-header

警告

• 警告框-操作成功：alert alert-success
• 警告框-信息提示：alert alert-info
• 警告框-警告提示：alert alert-warning
• 警告框-危险提示：alert alert-danger
• 可关闭的警告框：< div class=“alert alert-warning alert-dismissible” role=“alert”> < button type=“button” class=“close” data-dismiss=“alert”>< span aria-hidden=“true”> &times ;< /span>< /button> 警告提示< /div>
• 警告框中的链接：< div class=“alert alert-success” role=“alert”> < span>大减价！！！< /span>< a href=“#nowhere” class=“alert-link”>点击购买< /a>< /div>

进度条

• 基本进度条：class=“progress”（进度条）class=“progress-bar”（已完成进度条）
• 带有提示的进度条：在后面加文字数字
• 不同颜色的进度条：progress-bar progress-bar-success/info/warning/danger
• 条纹：progress-bar progress-bar-success progress-bar-striped
• 发廊：progress-bar progress-bar-striped active
• 堆叠：以上各种可堆叠

列表组

• 基本列表组：< ul class=“list-group”> < li class=“list-group-item”>
• 颜色：list-group-item list-group-item-success/info/warning/danger

面板

• 面板：
  < div class=“panel panel-default”>
  < div class=“panel-heading”>面板标题
  < div class=“panel-body”>
  面板内容
  < /div>
  < div class=“panel-footer”>面板脚注< /div>
  < /div>
• 面板颜色：panel panel-success/info/warning/danger

嵌入效果

• 嵌入：well

顶部底部

• 贴在顶部(不会消失）：< nav class=“navbar navbar-default navbar-fixed-top”>使用的时候需要加上样式:body{ padding-top:70px;}
• 贴在顶部(会消失)：< nav class=“navbar navbar-default navbar-static-top”>不需要样式
• 贴在底部 (不会消失)：< nav class=“navbar navbar-default navbar-fixed-bottom”>需要加上如下样式：body{ padding-bottom:70px; }

静态模块

• < button type=“button” class=“btn btn-primary” data-toggle=“modal” data-target=“#myModal”>
  提问（点击弹出模态窗口）
  < /button>
  < div class=“modal fade” id=“myModal” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel”>
  < div class=“modal-dialog”>
  < div class=“modal-content”>
  < div class=“modal-header”>
  < button data-dismiss=“modal” class=“close” type=“button”>< span aria-hidden=“true”>×< /span>< span class=“sr-only”>Close< /span>< /button>
  < h4 class=“modal-title”>提问< /h4>
  < /div>
  < div class=“modal-body”>
  < p>问题描述< /p>
  < textarea class=“form-control”>< /textarea>
  < /div>
  < div class=“modal-footer”>
  < button data-dismiss=“modal” class=“btn btn-default” type=“button”>关闭< /button>
  < button class=“btn btn-primary” type=“button”>提交< /button>
  < /div>
  < /div>< !-- /.modal-content -->
  < /div>< !-- /.modal-dialog -->
  < /div>