# BootsTrap 3 Conponent Tools
###### tags: `BootStrap`

## Carousel(Slide)
滑動視窗，整體架構：
class一定要包含carousel(整個樣式)與slide(滑動效果)，data-interval是設定幾毫秒會切換下一張，carousel-indicators裡面設定的是下方的圈圈，data-target是設定要綁定哪個carousel，下方的carousel-inner是設定內容，而內部的carousel-caption則是可以設定一些文字。

視窗的左右控制：
carousel-control left/right是代表左右箭頭，href是設定要綁定哪個carousel架構，data-slide是設定往前或往後的動作效果，箭頭造型則是用icon來做。

傳統需透過js設定，使用bs則可以自己決定要步要設定：

一些可以設定的屬性：

範例，透過bs與設定js按鈕綁定來做出一些效果：

bs提供類似js的事件觸發：

範例，按完按鈕後觸發alert事件：

## Tab
如果只是單純設定是動不起來的，必須要整體架構：
data-toggle="tab"是bs內建的，設定後才能觸發tab的動作，href設定要顯示哪部分的內容，下方內容要用tab-content包起來，裡面每一個要顯示的內容都要給tab-pane的class，加入fade會有淡入跟淡出的效果，active部分要多加一個in，不然會顯示不出來。

範例，透過js設定事件觸發要顯示的內容：

可以設定的一些屬性：

範例，透過事件觸發來更新頁面狀態：

## modal
顯示一個訊息，通常用來取代alert，整體架構：
data-toogle要綁定modal(!用jquery觸發的話就不用寫)，href設定要綁定的對象，下方就是主要內容，class也要給予modal，才能把其他地方用灰色蓋起來(更專注)，視窗內容的部分就要用modal-dialog包起來，然後裡面再用modal-content包起來，裡面又分為modal-header、modal-body、modal-footer，data-dismiss設定為modal就是關閉modal這個動作。

範例，透過jquery來設定按鈕綁定觸發事件，顯示modal內容：

modal又有分為大跟小，必須在dialog裡面設定modal-lg/modal-sm：

modal也有一些屬性可以設定：

除了可以在js設定以外，也可以直接加在html內：

bs也有提供一些設定可以觸發：

有一個特殊的設定，handleUpdate，因為有時候要顯示在modal的內容不一定是固定的，可能是按一下顯示更多文字，但因為文字變多，就會產生側邊的bar，然而，會出現一個些微的位置左移，造成體驗不是那麼順暢，加上handleUpdate即可解決該問題：

modal也有一些event可以設定：

## Alert
可以透過alert-warning、danger、success、info來用顏色表示狀態，切記fade要搭配in才會顯示，data-dismiss也要記得設定，不然關閉視窗會沒有效果：

如果不設定data-dismiss，則也可以使用jquery的寫法來關閉視窗：

當然也有自己的event設定:

範例，關閉之後跳出alert(browser default)：

## Tooltips
會在游標移動到目標之後，彈出一個提示視窗：
首先，data-toggle要先設定為tooltip，且必須一定要依靠js來啟動(這是跟其他的元件比較不同的地方)，要顯示的內容則是寫在data-original-title中，視窗彈出的位置則是用data-placement設定。

同樣的，也可以使用js來設定placement：

也有其他東西可以設定：

內容也可以透過js來給：

也可以透過js來綁定按鈕來觸發tooltip如何顯示：

也有一些event來監聽：

範例，當tooltip隱藏時，就跳出alert(browser default)：

## Popover
類似tooltip，但彈出的視窗是一個選單，架構如下：
要注意的是，與tooltip一樣，data-toogle設定為popover是沒有用的，一樣需要手動設定js才有效果，可以用data-content顯示內容，title顯示標題，placement則與tooltip一樣，需特別注意的是，預設當視窗彈出時，點其他地方是無法關閉視窗的，必須要再點一下按鈕，必須設定data-trigger來解決該問題：

一樣有很多東西可以設定(與tooltips差不多)：

也可以把html內容塞進去，可以寫在data-content，也可以透過js寫入：

## Scrollspy
類似反向的站內連結，站內連結是透過點擊，直接切換到目標段落，scrollspy是當user移動到目標段落時，對應的按鈕或物件會變成active狀態，整體架構如下：
首先要在body內加入data-spy="scroll"，加入監聽動作，data-target設定為要反應的目標物件，data-offset是為了避免目標碰到整個網頁頂端才有反應而所設定的偏移值，這樣就可以不需碰到頂端才有效果。

!注意：要讓對應的物件有反應必須該物件也是bs物件，否則無效果。內部也是依靠站內連結做出的效果，所以站內連結必須要設定。

也支援透過jquery來設定：

也有一個event可以使用：

範例，透過event觸發來改變資訊：

## affix
類似一些技術文件旁邊的快速連結navigation，點擊之後即可跳到目標內容，但是跳過去之後左邊的nav就會停留在原地不動，所以會消失，可以使用affix解決此問題，讓nav隨著畫面一直移動，也是屬於scrollspy的功能，整體架構如下：
首先body要先設定data-spy為scroll，data-target要設定為目標id，在nav部分才要設定data-spy為affix，offset-top的意思是要畫面滾動多少px之後才要啟動affix。

注意，需另外設定css來避免affix時產生跳動，因為bs會在啟動affix之後才會把html內容轉換，從affix-top變成affix：
另外設定當affix產生時的css來給他一個偏移，形成無縫接軌效果：

當然除了html，也可以利用js來設定：

可以設定的選項：

affix也有一些event可以監聽：

範例，利用event監聽，當affix發生時，跳出一個alert(browser default)：