第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

按鈕插件--按鈕狀態(tài)切換

使用?data-toggle?屬性還可以激活按鈕的行為狀態(tài)，實(shí)現(xiàn)在激活和未激活之間進(jìn)行狀態(tài)切換。例如，下面代碼可以激活按鈕行為特性，單擊時(shí)將按鈕激活，再單擊可以讓按鈕恢復(fù)到默認(rèn)狀態(tài)：

<button?type="button"?data-toggle="button"?class="btn?btn-primary">確認(rèn)</button>

默認(rèn)狀態(tài)效果：

點(diǎn)擊后的效果：

再次點(diǎn)擊的效果：

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

按鈕插件--模擬復(fù)選按鈕

使用按鈕組來模擬復(fù)選按鈕和模擬單選按鈕是一樣的，具有同等效果，也是通過在按鈕組上自定義data-toggle="buttons"來實(shí)現(xiàn)。唯一不同的是，將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>

運(yùn)行效果如下：

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

模擬單選擇按鈕是通過一組按鈕來實(shí)現(xiàn)單選擇操作。使用按鈕組來模擬單選按鈕組，能夠讓設(shè)計(jì)更具個(gè)性化，可以定制出更美觀的單選按鈕組。
在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內(nèi)。

按鈕插件--按鈕加載狀態(tài)

通過按鈕可以設(shè)計(jì)狀態(tài)提示，當(dāng)單擊按鈕時(shí)，會(huì)顯示loading狀態(tài)信息。例如，點(diǎn)擊“加載”按鈕，會(huì)觸發(fā)按鈕的加載的狀態(tài)。如下所示：

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

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

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

運(yùn)行效果如下：

點(diǎn)擊前：

點(diǎn)擊后：

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

任務(wù)

警告框--JavaScript觸發(fā)警告框

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

html代碼:

<div?class="alert?alert-warning"?role="alert"?id="myAlert">?????<h4>謹(jǐn)防被騙</h4>?????<p>請(qǐng)確認(rèn)您轉(zhuǎn)賬的信息是你的親朋好友，不要輕意相信不認(rèn)識(shí)的人...</p>?????<button?type="button"??class="btn?btn-danger"?id="close">關(guān)閉</button>?</div>

通過下面的JavaScript代碼來觸發(fā)：

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

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

運(yùn)行效果如下：

告框--使用聲明式觸發(fā)警告框

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

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

運(yùn)行效果如下：

點(diǎn)擊X會(huì)關(guān)閉整個(gè)警告框。

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

<div?class="alert?alert-warning"?role="alert">?????<h4>謹(jǐn)防被騙</h4>?????<p>請(qǐng)確認(rèn)您轉(zhuǎn)賬的信息是你的親朋好友，不要輕意相信不認(rèn)識(shí)的人...</p>????關(guān)閉</a>?</div>

運(yùn)行效果如下：

當(dāng)用戶點(diǎn)擊“關(guān)閉”按鈕就可以關(guān)閉整個(gè)警告框。

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

<div?class="alert?alert-warning"?role="alert"?id="myAlert">?????<h4>謹(jǐn)防被騙</h4>?????<p>請(qǐng)確認(rèn)您轉(zhuǎn)賬的信息是你的親朋好友，不要輕意相信不認(rèn)識(shí)的人...</p>?</div>?<button?type="button?class="btn?btn-danger"?關(guān)閉</button>

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

警告框--結(jié)構(gòu)與樣式

在介紹警告框結(jié)構(gòu)之前，我們先來看看警告框插件的效果與警告框的效果在樣式風(fēng)格展示上有何不同：

上圖是“警示框”效果。

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

相比之下，唯一不同的區(qū)別正如前面開頭所言，警告框插件就是在“警示框組件”基礎(chǔ)上添加了一個(gè)關(guān)閉的按鈕，外形上就是一個(gè)X。所以其結(jié)構(gòu)只需要在警示框組件的基礎(chǔ)上添加一個(gè)按鈕即可：

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

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

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

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

• 提示框 tooltip 的默認(rèn)觸發(fā)事件是?hover?和?focus，而彈出框 popover 是?click

• 提示框 tooltip 只有一個(gè)內(nèi)容(title)，而彈出框不僅可以設(shè)置標(biāo)題（title）還可以設(shè)置內(nèi)容(content)

兩個(gè)插件的顯示模板不同：

提示框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>

彈出框--自定義結(jié)構(gòu)屬性

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

舉例：

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

彈出框--觸發(fā)彈出框的方法

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

html代碼：

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

js代碼：

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

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

使用JS設(shè)置參數(shù)：

html代碼：

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

除此之外，也可以單獨(dú)指定一個(gè)元素，在該元素上調(diào)用提示框，并且可能通過JavaScript的各種參數(shù)來實(shí)現(xiàn)，無需定義一些data屬性，如：

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

如下面示例所示：

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

彈出框--彈出框的結(jié)構(gòu)

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

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

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

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

提示框--JS設(shè)置參數(shù)方法

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

表格中的任何屬性，在使用 JavaScript 觸發(fā)提示框時(shí)，都可以被調(diào)用。

注意格式?。。。。?/strong>

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

<script>

? ? $(function(){

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

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

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

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

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

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

? ? ? ?});

? ? });

</script>