# BootsTrap 3
###### tags: `BootStrap`
前置環境code：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

## Grid(格線)：


使用offset可以留白grid空間

<div class='col-sm-offset-*'>

使用visible來針對不同大小給予相對應的顯示(反之使用hidden來隱藏)
## Layout：
預設的container是fixed的，會動態調整視窗大小，依照grid分級表調整。

fluid則是會自動調整內容(依照百分比調整)，不照grid分級表。
## Navigation：
使用nav關鍵字，nav-tabs：
active為預設分頁

nav-pills，為方格形式：

nav-stacked(直式選單)：
## Table：

<table class='table'>


<table class='table table-striped'>


<table class='table table-striped table-bordered'>


<table class='table table-hover'>


table有不同的狀態，分別用不同顏色表示：

## List
list-unstyled：

<ul class='list-unstyled'>

可以把項目符號去除

list-inline：

<ul class='list-inline'>

把li變成橫排

dictionary list：

<dl class='dl-horizontal'>

效果會像key-value，項目符號可以用文字表示。

list-group：

也可以塞連結、icon、badge等內容豐富化
也支援先前使用不同顏色的狀態表示

## Form
預設的form：

會自動加一些margin，整體比較好看，input部份加上form-control則可以label與input各一行，不會擠在一起。

如果想要label與input在同一排的話就用form-horizontal，細部一樣可以使用grid概念：

也有一行式的樣式，form-inline：

form-control-static可以填入預先的內容：

help-block可以在input下方使用文字提醒使用者要輸入的內容：

可以針對form加入顏色來表示狀態：

## Button
可以使用btn，並且可以用顏色表示狀態：

可以改變button大小：

btn-block可以把button變成一整行：

使用disable可以讓按鈕變成不能按的狀態(注意!此功能對a沒效果，因a本身就是假按鈕，需另用js來調整，button本身就支援disable，所以真的有效果)：

data-toggle可以讓按鈕變成類似checkbox，按下去顏色會變深，再按一次則復原：

button-group(-vertical是以直行顯示)可以將按鈕變成一整組排列：

可以用type來改變button的模式(checkbox/radio)，input要用label包起來才有效果，如果data-toggle下在btn-group的話，必須要寫buttons(+s)才有效果。

使用js來觸發跟toggle一樣的效果：

可以用js對button設定loading/reset效果，也可以使用data-loading-text對文字自訂義修改：

也可以設定complete來設定點擊完會變成完成狀態(停留)，一樣可以用data-complete-text來自定義文字：

## Dropdown
dropdown為下拉式選單，class="dropdown-toggle"是點了讓他有反應可以打開選單跟關閉選單(長相)，data-toggle則是賦予它正真的動作(bootstrap慣用手法)

範例1，把dropdown加入navigation：

範例2，把dropdown加入button：

範例3，把dropdown加入button-group：

dropup為上拉式選單，方向改變而已，其餘相同：

可以用dropdown來將選項(li)做分類：

disable則是讓連結變成不能點選狀態：

可以透過js在網頁一刷新時就自動觸發toggle動作：

bootstrap自己定義的一些事件：

可以根據這些事件來配合js監聽該事件，並觸發該事件引發相關動作：

## icons
bootstrap有跟glyphicon合作推出許多icon，可以直接去官網查詢：
https://icons.getbootstrap.com/

## Typography
small標籤或是class='small'可以在文字中給予相對應比較小的文字，class='page-header'可以在內容下方插入一條底線：

一些關於p(文字)的調整：

blockquote，常用於引用名人話語時：

## Breadcrumbs

## Label & badges

## Pagination

也可以改變大小：

也可以用pager表示：

## Panel

也可以配合色狀態：

也可以把list-group放到panel裡面：

## Progress-bar

一個progress也可以塞入多個progress-bar，並且一樣可以用顏色表示狀態：

## Helper class
有提供背景顏色狀態：

close可以讓視窗可以按叉叉關閉，caret常用在下拉式選單，向下指的小箭頭：

版面區塊置中，center-block：

區塊置左 & 置右 & clearfix：

show & hidden & invisible & sr-only (screen only;盲人用)

## Customize System
bootstrap有提供客製化工具，可自訂boostrap內部細節：
https://getbootstrap.com/docs/3.4/customize/