亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

按鈕插件--按鈕狀態切換

使用?data-toggle?屬性還可以激活按鈕的行為狀態，實現在激活和未激活之間進行狀態切換。例如，下面代碼可以激活按鈕行為特性，單擊時將按鈕激活，再單擊可以讓按鈕恢復到默認狀態：

<button?type="button"?data-toggle="button"?class="btn?btn-primary">確認</button>

默認狀態效果：

點擊后的效果：

再次點擊的效果：

注意，這里自定義屬性是?data-toggle="button"，而不是?data-toggle="buttons"。

按鈕插件--模擬復選按鈕

使用按鈕組來模擬復選按鈕和模擬單選按鈕是一樣的，具有同等效果，也是通過在按鈕組上自定義data-toggle="buttons"來實現。唯一不同的是，將input[type="radio"]換成input[type="checkbox"]，如下所示：

<div?class="btn-group"?data-toggle="buttons">?????<label?class="btn?btn-primary">?????????<input?type="checkbox"?name="options"?id="options1">電影?????</label>?????<label?class="btn?btn-primary">?????????<input?type="checkbox"?name="options"?id="options2">音樂?????</label>?????<label?class="btn?btn-primary">?????????<input?type="checkbox"?name="options"?id="options3">游戲?????</label>?????<label?class="btn?btn-primary">?????????<input?type="checkbox"?name="options"?id="options4">攝影?????</label>?</div>

運行效果如下：

按鈕插件--模擬單選擇按鈕

模擬單選擇按鈕是通過一組按鈕來實現單選擇操作。使用按鈕組來模擬單選按鈕組，能夠讓設計更具個性化，可以定制出更美觀的單選按鈕組。
在Bootstrap框架中按鈕插件中，可以通過給按鈕組自定義屬性data-toggle="buttons"，如下所示：

?>?????class="btn?btn-primary">??????????name="options"?id="options1">男?????</label>?????<label?class="btn?btn-primary">?????????<input?type="radio"?name="options"?id="options2">女?????</label>?????<label?class="btn?btn-primary">?????????<input?type="radio"?name="options"?id="options3">未知?????</label>?</div>

有div ?label input，

data-toggle="button"是寫在div內。

按鈕插件--按鈕加載狀態

通過按鈕可以設計狀態提示，當單擊按鈕時，會顯示loading狀態信息。例如，點擊“加載”按鈕，會觸發按鈕的加載的狀態。如下所示：

<button?class="btnbtn-primary"?"?type="button"?id="loaddingBtn"></button>

通過data-loading-text屬性定義加載的文本信息，然后通過JavaScript給按鈕綁定一個事件，并給按鈕添加一個button("loading")方法來激活按鈕的加載狀態行為。如下所示：

$(function(){?????$("#loaddingBtn").(function?()?{?????????;???????});?});

運行效果如下：

點擊前：

點擊后：

注意，無法直接通過聲明式觸發此效果。

任務

警告框--JavaScript觸發警告框

除了通過自定義data-dismiss="alert"屬性來觸發警告框關閉之外，還可以通過JavaScript方法。只需要在關閉按鈕上綁定一個事件。如下所示：

html代碼:

<div?class="alert?alert-warning"?role="alert"?id="myAlert">?????<h4>謹防被騙</h4>?????<p>請確認您轉賬的信息是你的親朋好友，不要輕意相信不認識的人...</p>?????<button?type="button"??class="btn?btn-danger"?id="close">關閉</button>?</div>

通過下面的JavaScript代碼來觸發：

$(function(){ ? ? $("#close").on("click",function(){ ? ? ? ? $(this).alert("close"); ? ? }); });

注意這個寫法?。?！特別是$(this).alert("close")中的alert("close")，好像是要彈出警告框而不是執行關閉警告框

運行效果如下：

告框--使用聲明式觸發警告框

如果通過自定義的HTML屬性（聲明式）來觸發警告框，需要在關閉按鈕上設置自定義屬性data-dismiss="alert"，如下所示：

<div?class="alert?alert-success"?role="alert">?????<button??type="button"?></button>?????<p>恭喜您操作成功！</p>?</div>

運行效果如下：

點擊X會關閉整個警告框。

其實關閉按鈕，不一定非要用X號，也可以是只需普通的按鈕元素或者鏈接元素，要保證關閉元素帶有自定義屬性data-dismiss="alert"即可，如下面示例所示：

<div?class="alert?alert-warning"?role="alert">?????<h4>謹防被騙</h4>?????<p>請確認您轉賬的信息是你的親朋好友，不要輕意相信不認識的人...</p>????關閉</a>?</div>

運行效果如下：

當用戶點擊“關閉”按鈕就可以關閉整個警告框。

前面兩個示例，操作關閉按鈕時都是先查找 data-target 屬性，再查找 href 屬性，如果關閉按鈕都沒有定義這兩個屬性，就會操作其父元素。也就是說，關閉按鈕不在 div.alert 容器內時，只要給關閉元素定義了data-target屬性（如果是鏈接元素還可以通過href屬性）,而且屬性值與div.alert容器的id一致，關閉元素放在容器外也可以關閉警告框。來看一個簡單的示例：

<div?class="alert?alert-warning"?role="alert"?id="myAlert">?????<h4>謹防被騙</h4>?????<p>請確認您轉賬的信息是你的親朋好友，不要輕意相信不認識的人...</p>?</div>?<button?type="button?class="btn?btn-danger"?關閉</button>

這種方式點擊“關閉”按鈕也可以關閉警告框，只不過“關閉”按鈕自身沒辦法關閉，會一直顯示在那，如下圖所示：

警告框--結構與樣式

在介紹警告框結構之前，我們先來看看警告框插件的效果與警告框的效果在樣式風格展示上有何不同：

上圖是“警示框”效果。

上圖“警告框插件”效果。

相比之下，唯一不同的區別正如前面開頭所言，警告框插件就是在“警示框組件”基礎上添加了一個關閉的按鈕，外形上就是一個X。所以其結構只需要在警示框組件的基礎上添加一個按鈕即可：

<div class="alert " role="alert"> ? ? <buttonclass="close" type="button" >&times;</button> ? ? 恭喜您操作成功！ </div>

除此差別之外，警告框插件與警示框沒有其他的區別。所以樣式部分，在此不做過多闡述，大家可以回頭看看第3章中有關于警示框的內容。

彈出框--提示框和彈出框的異同

從之前的學習可知，彈出框中HTML自定義的 data 屬性和提示框中的自定義的 data 屬性基本相同，只不過在其基礎上增加了一個 data-content 屬性，用來設置彈出框的內容。其實兩插件也有略微的不同：

• 提示框 tooltip 的默認觸發事件是?hover?和?focus，而彈出框 popover 是?click

• 提示框 tooltip 只有一個內容(title)，而彈出框不僅可以設置標題（title）還可以設置內容(content)

兩個插件的顯示模板不同：

提示框tooltip的模板：

<div?class="tooltip"?role="tooltip">?????<div?class="tooltip-arrow"></div>?????<div?class="tooltip-inner"></div>?</div>

彈出框popover的模板：

<div?class="popover"?role="tooltip">?????<div?class="arrow"></div>?????<h3?class="popover-title"></h3>?????<div?class="popover-content"></div>?</div>

彈出框--自定義結構屬性

同樣在彈出框制作時，可以在HTML中定義下表所列的自定義屬性：

舉例：

?<button?type="button"???????????class="btn?btn-default"???????????data-toggle="popover"???????????data-placement="bottom"???????????title="提示框居左"???????????data-content="我是彈出框的內容"???????????data-trigger="hover"???????????data-dalay="600">???????????猛擊我吧???</button>

彈出框--觸發彈出框的方法

Bootstrap框架中觸發彈出框和提示框一樣不能直接通過HTML的自定義data屬性來觸發。需要依賴于JavaScript腳本。
最簡單的觸發方式如下：

html代碼：

<button?type="button"??????????class="btn?btn-default"??????????data-toggle="popover"??????????data-placement="left"??????????title="提示框居左"??????????data-content="我是彈出框的內容">?????????猛擊我吧?</button>

js代碼：

$(function(){?????$('[data-toggle="popover"]').popover();?});

注意：上面這種方法注意要使用?data-?設置彈出框的屬性。

使用JS設置參數：

html代碼：

<button?type="button"???????????class="btn?btn-default"???????????id="myPopover">???????????猛擊我吧?</button>

除此之外，也可以單獨指定一個元素，在該元素上調用提示框，并且可能通過JavaScript的各種參數來實現，無需定義一些data屬性，如：

$(function(){?????$('#myPopover').popover({?????????title:"我是彈出框的標題",?????????content:"我是彈出框的內容",?????????placement:"top"?????});?});

如下面示例所示：

調用popover的時候，options的參數與聲明式選擇里以data-開頭的自定義屬性一樣。都可以在options里設置，以便制作出各式各樣的效果。

彈出框--彈出框的結構

簡單回憶一下，在制作提示框（tooltip）時，可以使用<button>或者<a>標簽元素，而且通過 data- 屬性來聲明提示框的信息

而彈出框Popover和提示框tooltip相比，就多了一個content內容，那么在此使用 data-content 來定義彈出框中的內容。同樣可以使用<button>或者<a>標簽來制作，如下：

<button?type="button"?
????????class="btnbtn-default"?
????????data-container="body"?
????????data-placement="bottom"?
????????data-toggle="popover"?
????????data-original-title="Bootstrap彈出框標題"?
????????data-content="Bootstrap彈出框的內容"?>
????????猛擊我吧
</button>
<a?href="#"?class="btnbtn-default"?
????????data-container="body"?
????????data-placement="right"?
????????data-toggle="popover"?
????????title="Bootstrap彈出框標題"?
????????data-content="Bootstrap彈出框的內容">
????????猛擊我吧
</a>

運行效果如下：
?
正如上圖所示，彈出框的制作結構和提示框并無太多差別，但樣式風格上還是有蠻大的區別。其主要定義了彈出框邊框、圓角、背景、陰影以及三角形等樣式：具體代碼見右側的bootstrap.css。

提示框--JS設置參數方法

除了在 html 代碼中使用?data-?設置提示框參數，還可以使用 JavaScript 來設置提示框參數，主要包括：

表格中的任何屬性，在使用 JavaScript 觸發提示框時，都可以被調用。

注意格式！?。。?！

<script>
??$(function(){
????$('#myTooltip1').tooltip({
??????title:"我是一個提示框，我在頂部出現",
??????placement:"top"
????});
??});
</script>

<script>

? ? $(function(){

? ? ? ?$('#myTooltip2').tooltip({

? ? ? ? ? ?html:"true",

? ? ? ? ? ?title:"<h>我愛你</h>",

? ? ? ? ? ?placement:"top",

? ? ? ? ? ?trigger:"click",

? ? ? ? ? ?delay:{hide:200,show:100}

? ? ? ?});

? ? });

</script>

提示框--其他的自定義屬性

除此之外，提示框還有其他的自定義屬性，每個自定義屬性都具自身存在的意義，如下表所示：

(單擊可放大) ? 格式！?。?/strong>

data-animation="true"

data-original-title="<h1>data-html='true'</h1>"?data-html="true"

data-trigger="click"

?data-delay="500"

直接設置屬性的正確的寫法應該是這樣：