罗列Bootstrap的使用

viewport

width=device-width sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

起步

#####.container .container-fluid container :固定宽度 container-fluid: 100%宽度 container不能嵌套

网格布局

xs(phone) sm(table) md(desktop) lg(larger desktop)

默认设置

字体默认为14px,行高为1.428(20px),段落默认有行高的一半(10px)

p {
  margin: 0 0 (@line-height-computed / 2);
}

  <small>创建小文本 font-size:65%</small>
  <mark> 添加背景色 padding:0.2em background-color:#fcf8e3;</mark>
  <abbr title="..."> 下面添加点画线，abbr[title]{cursor: help;border-bottom: 1px dotted #777;}</abbr>
  <blockquote> 引用模块，左侧竖线。.blockquote-reverse 右侧对齐，右侧竖线</blockquote>
  <code> 添加浅色背景 </code>
  <kbd> 键盘输入显示,黑底白字</kbd>
  <pre>代码块显示</pre>

表现状态字体颜色，背景颜色：

.text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger
.bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger

.lead 突出显示一个段落
.small  85%字体大小
.text-left      文本向左对齐 text-align: left;
.text-center  文本居中对齐
.text-right     文本向右对齐
.text-justify 
.text-nowrap   文本不换行 white-space: nowrap;
.text-lowercase  小写转换 text-transform:lowercase
.text-uppercase  大写转化
.text-capitalize 首大写
.initialism 
.list-unstyled  移除list-style和左内补
.list-inline  行内list
.dl-horizontal  
.pre-scrollable 可滚动代码块

表格

.table 默认样式
.table-striped 交替颜色表格

.table-striped {
  > tbody > tr:nth-of-type(odd) {
    background-color: @table-bg-accent;
  }
}

.table-bordered 添加边框
.table-hover 悬停背景高亮
.table-condensed 紧凑型，减小内补

.table-hover {
  > tbody > tr:hover {
    background-color: @table-bg-hover;
  }
}

可以作用在tr td上的contextual classes

.active
.success
.info
.warning
.danger

图片

.img-rounded 圆角6px
.img-circle 圆形
.img-thumbnail inline-block 内补，添加倒角边框
.img-responsive 响应式图片, 跟随父元素大小变化 display:block; max-width:100%,height:auto

jumbotron

div + .jumbotron 大幕显示，内补+大字体
.page_header 大标题，下划线，边距内补

well

.well 边框+背景色+内补
.well-sm
.well-lg

Alert

.alert 警告信息
.alert-success
.alert-info
.alert-warning
.alert-danger
.close 关闭消息 data-dismiss="alert"
.fade .in 渐进式变化opacity

Button

.btn 默认按钮样式可施加在button a input元素

.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

不同大小btn

.btn-lg
.btn-md
.btn-sm
.btn-xs

.btn-block 块级button width:100%

ButtonGroup

div

.btn-group 创建按钮组
.btn-group-vertical 垂直按钮组
.btn-group-justified 铺满整个宽度按钮组
.btn.dropdown-toggle data-toggle="dropdown" 下拉按钮

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
.btn-group-justified > .btn, .btn-group-justified > .btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}

Glyphicons

符号字体

<span class="glyphicon glyphicon-name"></span>

Badge_Label

span.badge 徽章 inline-block
span.label 标签 label-success,label-default

Pagination

ul.pagination 分页
li.active 对应页面被选中
li.disabled 对应页面被禁用
.pagination-sm,.pagination-lg 大小分页
ul.breadcrumb 面包屑分页

Pager

ul.pager 分页
li.previous li.next 排布按钮到两侧

ListGroup

ul.list-group li.list-group-item  创建列表
li span.badge 列表项中添加徽章

div.list-group a.list-group-item 创建链接列表项
.list-group-item.active     选中项
.list-group-item.disable    禁用该项
.list-group-item.list-group-item-success 
.list-group-item.list-group-item-info

list-group-item内可任意自定义元素
.list-group-item-heading  上边距为0
.list-group-item-text     下边距为0

Panel

div.panel.panel-default      面板，边框+内补
.panel .panel-body           面板内容
.panel .panel-heading        面板标题

.panel-group  多个panel组成panel-group

.panel-default, .panel-primary, .panel-success, .panel-info

DropDown

div.dropdown 下拉菜单position:relative; 内部菜单项绝对定位。
触动按钮或链接上添加 .dropdown-toggle 和 data-toggle="dropdown"
菜单项上添加         .dropdown-menu

.dropdown-menu .divider          菜单项内部添加分隔线
.dropdown-menu .dropdown-header  菜单项内部添加抬头
.dropdown-menu .disabled         菜单项内禁用项    

.dropdown-menu.dropdown-menu-right 右对齐菜单项

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Collapsible

显隐大量内容

在按钮上定义 data-toggle="collapse" data-target="#demo" 在内容上定义 id="demo" class="collapse"
在a上定义 data-toggle="collapse" href="#demo" 在内容上定义 id="demo" class="collapse"

<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

可显隐的panel

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

可显隐的list-group

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>

Tabs/Pills

ul.list-inline 水平菜单
ul.nav.nav-tabs tab标签
ul.nav.nav-justified 标签平铺
ul.nav.nav-pills pill标签
ul.nav.nav-pills.nav-stacked 水平排布

tab动态显隐效果

在链接上添加 data-toggle="tab" href="#xx" 对应id的div 添加.tab-pane 包裹在 .tab-content

pill动态显隐效果

在链接上添加 data-toggle="pill" href="#xx" 对应id的div 添加.tab-pane 包裹在 .tab-content

Navigation_Bar

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Form

.form-control 默认设置，input textarea select默认100%宽度

三种类型的布局方式：

默认垂直布局
水平表单
内联表单

步骤:

* 将label与控件元素包含在form-group之中
* 将.form-control 添加在 input  textarea等元素中


添加.form-inline在form,       内联表单
添加.form-horizontal在form, 添加control-label在label,   水平表单

Form input

Form 元素 div.checkbox 复选框 div.checkbox-inline 行内复选框

div.radio            单选框
div.radio-inline     行内单选框

.has-success.form-control  高亮显示input元素

.input-lg .input-sm 设置input元素的大小
.span.help-block    添加help信息到input之后

Media

父元素:div.media
字元素:div.media-left,div.media-body

Carousel

轮播插件

最外层div   
#myCarousel           指定id为myCarousel
.carousel             添加轮播样式
.slide                切换时滑动
data-ride="carousel"  页面加载完即触发轮播

指示器list

ul.carousel-indicators
li指定data-target="#myCarousel",data-slide-to="0" 指定显示id为myCarousel的第一张轮播

轮播slide

div.carousel-inner 指定轮播slide
每个slide指定.item
.item内部指定.carousel-caption设定标题

control a.carousel-control 指定控制链接，data-slide="next" 指定向后slide

Modal

模态对话框

触发button，定义data-toggle="modal" data-target="#myModal" 打开id为myModal的模态对话框

内容：.modal.modal-dialog
标题：.modal-header
内容: .modal-body
页脚：.modal-footer

ToolTip

提示信息

触发元素上添加： data-toggle="tooltip"，title属性指定显示文本，data-placement指定提示文本显示位置

Popover

提示信息，与ToolTip类似，但单击后可以显示更多内容

触发元素上添加：data-toggle="popover",title属性指定头部文字，data-content属性指定body文字
data-placement指定提示位置

data-trigger="focus" 外部点击时消失
data-trigger="hover" 悬停时显示

hustry / Boostrap_Demo