bootstrap前端開發工具

柵格系統

• 版心 .container

• 柵格佈局 (一行分為12格，響應式佈局)
  .row
  .col-md-12
  .col-sm-12
  .col-xs-12

  <div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  </div>

排版

• 文本對齊:
  .text-center;
  .text-left;
  .text-right;

• 塊標簽對齊:
  .center-block;
  .pull-left;
  .pull-right;

• 排版樣式：
  h1 .page-header
  small
  p .lead

    <h1 class="page-header">你好，世界！<small>你好，世界！</small></h1>
    <p>百度網盤為您提供文件的網路備份、同步和分享服務。空間大、速度快、安全穩固,支持教育網加速,支持手機端。現在註冊即有機會享受15G的免費存儲空間</p>
    <p class="lead">百度網盤為您提供文件的網路備份、同步和分享服務。空間大、速度快、安全穩固,支持教育網加速,支持手機端。現在註冊即有機會享受15G的免費存儲空間</p>

  

• 文字顏色(帶有樣式滑動效果)
  .text-muted 灰色
  .text-primary 淺藍色
  .text-success 綠色
  .text-info 深藍色
  .text-warning 棕色
  .text-danger 紅色

• 列表
  .list-style 無樣式列表
  .list-inline 列表浮動到一行

• 描述
  

  <dl>
    <dt>時間和教案課件課件啊</dt>
    <dd>愛十分慢慢你就開始去喝酒後即可漢口幾個號北京奧股份</dd>
  </dl>

  .dl-horizontal 水平排列的描述

表格

• 表格樣式
  .table
  .table-hover
  .table-bordered
  .table-striped

• 表格的顏色
  tr.active 灰色
  tr.danger 紅色
  tr.warning 淺黃色
  tr.success 綠色

表單

• 表單樣式
  div.from-grop

  <div class="form-group">
    <label  for="nameid">name</label>
    <input class="form-control input-lg" id="nameid" type="text" placeholder="name">
  </div>

• 表單元素
  input.form-control
  input.input-lg

• 表單顏色
  div.has-success
  div.has-error
  div.has-warning

• 多選框或單選框

  <div class="checkbox">
    <label>
     <input type="checkbox" name="" value="">check me out
    </label>
  </div>
  <div class="radio">
    <label>
    <input type="radio" name="" value="">check me out
    </label>
  </div>

• 水平多選框

  <div class="checkbox-inline">
    <label>
    <input type="checkbox" name="" value="">check me out
    </label>
  </div>

• 顯示和隱藏
  .show
  .hidden
  .sr-only

• 表單尺寸
  .inuut-lg
  .input-sm

按鈕

1. button
   
2. input type="submit"
3. input type=button
   
4. input type=reset
   
5. a

• 七種樣式
  .btn btn-default
  .btn btn-primary
  .btn btn-success
  .btn btn-info
  .btn btn-warning
  .btn btn-danger
  .btn btn-link

• 按鈕尺寸
  .btn-lg
  .btn-sm
  .btn-xs

• 按鈕變成塊元素
  .btn-block

• 按鈕的活動狀態
  .active

• 按鈕的禁用狀態
  .disabled

圖片

• img圖片
  .img-rounded
  .img-circle
  .img-thumbnail

• img響應式圖片
  .img-responsive

• 關閉叉號
  .close (&times)

• 向下的小箭頭
  .caset

組件

• 下拉菜單
  div.dropdown
  button[data-toggle=dropdown]
  ul.dropdown-menu
  li.dropdown-header
  li.disabled
  li.divider

• 按鈕組
  div.btn-group

• 按鈕工具欄
  div.btn-toolbar

• 按鈕尺寸
  div.btn-group-lg

• 垂直排列
  div.btn-group-vertical

• 按鈕組中的下拉菜單
  div.btn-group
  button
  button
  div.btn-group