• 企業開發多使用某種CSS框架，其中以BootStrap為目前使用居多
• 本課程後面的web界面為了統一將使用bootstrap作為統一的前端框架
• 有利於學習和理解其它框架
  BootStrap基本樣式-柵格
  拼命尺寸和12列布局介紹：
  
  柵格基本使用方式
• 使用.container（ 1170 px）或container-fluid包裹
• 列應當包含在行”row”中
• 列的基本格式： (col-屏幕大小-數字）
  例：
  <div class="container">
  
  <div class="row">
  <div class="col-md-3" style="background-color: #ddd">col-3</div>
  <div class="col-md-9" style="background-color: red">col-9</div>
  </div>
  </div>

一行多余12列時將自動換行

列偏移：.col-md-offset-n：向右偏移N列

嵌套列：在一個col下再使用row產生一個或多個行

• .active
• .success
• .info
• .warning
• .danger

響應式表格：table-responsive
表單樣式

• Form-control:表單元素的寬度屬性為100%
• input-group：表單分組（使用表單分組時無需添加row)
• checkbox-inline：在一行顯示checkbox
• Radio-inline:在一行顯示radio
• Disabled:禁用
• Readonly:只讀
• .has-warning、.has-error?或?.has-success：表單校驗
• 添加圖標： has-feedback
• 控件尺寸：input-lg ,input-sm
  表單其他樣式：
• Form-inline：內聯表單
• form-horizontal: 水平標簽

按鈕

• Btn:顯示為一個按鈕，用於button元素或其它元素
• 顏色： btn-default， btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link
• 尺寸： btn-lg，btn-sm,btn-xs,btn-block
• Disabled:禁用
  圖片
• 響應式圖片： img-responsive
• 圖片形狀： img-rounded， img-circle， img-thumbnail
  輔助工具
  文字顏色
• text-muted
• text-primary
• text-success
• text-info
• text-warning
• text-danger
  背景顏色
• bg-muted
• bg-primary
• bg-success
• bg-info
• bg-warning
• bg-danger
  ）
  浮動
• Pull-xx: right:xxx%
• Push-xx：left: xxx%
• clearfix
  內容居中
• center-block
  顯示或隱藏
• Show
• hidden
  響應式工具
• visible-xs-* 可見
• hidden-xs 隱藏
  BootStrap組件

下拉菜單

• Dropdown
• Dropdown-menu
• dropdown-header：不可點擊的菜單
  按鈕組
• Button-group
• btn-group-vertical:垂直排列
  導航
• nav
• Nav-tabs：標簽式導航
• Nav-pills:膠囊式導航

導航條

• Navbar
• navbar-brand：品牌圖標
• navbar-btn：導航按鈕
• Navbar-text:導航文本
• Navbar-left/navbar-right:元素居左/居右
• navbar-fixed-top：固定在頂部
• navbar-fixed-bottom：固定在底部
• navbar-default：反色
  路徑導航

• Breadcrumb：

  分頁

• Pagination：
  路徑導航
• Breadcrumb：
  標簽
• Label
• label-default
• label-primary
• label-success
• label-info
• label-warning
• label-danger
  徽章
• badge
  巨幕
• jumbotron ：
  縮略圖
• thumbnail ：
  列表
• list-group：
• List-group-item:列表項
• list-group-item-heading
• list-group-item-text
  面板
• Panel
• panel-heading
• panel-title
• panel-body：
• panel-footer
• panel-primary
• panel-success
• panel-info
• panel-warning
• panel-danger
• Panel和其它元素的組合

Javascript插件

• 模態框
• 下拉菜單
• 滾動監聽
• 標簽頁
• 工具提示
• 彈出框
• 手風琴組件
• 圖片輪播組件

Javascript插件-模態框
data方式調用

• <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
  js方式調用
• $(‘#myModal‘).modal(options)
  

Javascript插件-標簽頁
data方式調用

• <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
  js方式調用
• $(‘#someTab‘).tab(‘show‘)
  事件
• show.bs.tab 顯示前觸發（2）
• shown.bs.tab 顯示後觸發（4）
• hide.bs.tab 隱藏前觸發（1）

• hidden.bs.tab 隱藏後觸發（3）

• Javascript插件-輪播圖
  data方式調用
• <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"></div>
  js方式調用
• $(‘.carousel‘).carousel()
  Javascript插件-模態框
  

Bootstrap總結