bootstrapt框架中有幾種按鈕風(fēng)格-創(chuàng)新互聯(lián)

小編給大家分享一下bootstrapt框架中有幾種按鈕風(fēng)格，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)2013年開(kāi)創(chuàng)至今，先為瑞昌等服務(wù)建站，瑞昌等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為瑞昌企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

                                                           

摘要：bootstrapt按鈕的風(fēng)格主要有：基礎(chǔ)按鈕、默認(rèn)按鈕、主要按鈕、成功按鈕、信息按鈕、警告按鈕、危險(xiǎn)按鈕、鏈接按鈕。

一、按鈕簡(jiǎn)介：

　　按鈕也是Bootstrap框架核心內(nèi)容之一。因?yàn)榘粹o是Web制作中不可缺少的東西。

　　而且不同的Web頁(yè)面具有不同的按鈕風(fēng)格，甚至說(shuō)同一個(gè)Web網(wǎng)站或應(yīng)用程序具有多種按鈕風(fēng)格，比如說(shuō)不同的按鈕顏色、大小和狀態(tài)等。

<button class="btn" type="button">基礎(chǔ)按鈕.btn</button>  
   <button class="btn btn-default" type="button">默認(rèn)按鈕.btn-default</button> 
   <button class="btn btn-primary" type="button">主要按鈕.btn-primary</button> 
   <button class="btn btn-success" type="button">成功按鈕.btn-success</button> 
   <button class="btn btn-info" type="button">信息按鈕.btn-info</button> 
   <button class="btn btn-warning" type="button">警告按鈕.btn-warning</button> 
   <button class="btn btn-danger" type="button">危險(xiǎn)按鈕.btn-danger</button> 
   <button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>

　　

二、基本按鈕

　　Bootstrap框架V3.x版本的基本按鈕和V2.x版本的基本按鈕一樣，都是通過(guò)類名“btn”來(lái)實(shí)現(xiàn)。

　　不同的是在V3.x版本要簡(jiǎn)約很多，去除了V2.x版本中的大量的CSS3中的部分特效，比如說(shuō)文本陰影（text-shadow）、漸變背景（background-image）、邊框陰影（box-shadow）等。
　　Bootstrap框架中的考慮了不同瀏覽器的解析差異，進(jìn)行了比較安全的兼容性處理，使按鈕效果在不同的瀏覽器中所呈現(xiàn)的效果基本相同。

　　源碼請(qǐng)查閱bootstrap.css文件第1992行～第2010行：

　　Bootstrap框架的按鈕使用非常的簡(jiǎn)單，使用方式如下：

<button class="btn" type="button">我是一個(gè)基本按鈕</button>

　　

三、默認(rèn)按鈕

　　Bootstrap框架首先通過(guò)基礎(chǔ)類名“.btn”定義了一個(gè)基礎(chǔ)的按鈕風(fēng)格，然后通過(guò)“.btn-default”定義了一個(gè)默認(rèn)的按鈕風(fēng)格。

　　默認(rèn)按鈕的風(fēng)格就是在基礎(chǔ)按鈕的風(fēng)格的基礎(chǔ)上修改了按鈕的背景顏色、邊框顏色和文本顏色。

　　源碼請(qǐng)查閱bootstrap.css文件第2040行～第2044行

　　使用默認(rèn)按鈕風(fēng)格也非常的簡(jiǎn)單，只需要在基礎(chǔ)按鈕“btn”的基礎(chǔ)上增加類名“btn-default”即可：

<button class="btn btn-default" type="button">默認(rèn)按鈕</button>

　　

四、多標(biāo)簽支持（多種標(biāo)簽制作按鈕）

　　一般制作按鈕除了使用<button>標(biāo)簽元素之外，還可以使用<input type="submit">和<a>標(biāo)簽等。

　　同樣，在Bootstrap框架中制作按鈕時(shí)，除了剛才所說(shuō)的這些標(biāo)簽元素之外，還可以使用在其他的標(biāo)簽元素上，唯一需要注意的是，要在制作按鈕的標(biāo)簽元素上添加類名“btn”。

　　如果不添加是不會(huì)有任何按鈕效果。

<button class="btn btn-default" type="button">button標(biāo)簽按鈕</button><input type="submit" class="btn btn-default" value="input標(biāo)簽按鈕"/><a href="##" class="btn btn-default">a標(biāo)簽按鈕</a><span class="btn btn-default">span標(biāo)簽按鈕</span><p class="btn btn-default">p標(biāo)簽按鈕</p>

　　

　　雖然在Bootstrap框架中使用任何標(biāo)簽元素都可以實(shí)現(xiàn)按鈕風(fēng)格，但個(gè)人并不建議這樣使用，為了避免瀏覽器兼容性問(wèn)題，個(gè)人強(qiáng)烈建議使用button或a標(biāo)簽來(lái)制作按鈕。

五、定制不同風(fēng)格的按鈕

　　在介紹按鈕開(kāi)篇就說(shuō)過(guò)，Web頁(yè)面可能會(huì)有不同的按鈕風(fēng)格。那么在Bootstrap框架也考慮了。

　　在Bootstrap框架中除了默認(rèn)的按鈕風(fēng)格之外，還有其他六種按鈕風(fēng)格，每種風(fēng)格的其實(shí)都一樣，不同之處就是按鈕的背景顏色、邊框顏色和文本顏色。

　　在Bootstrap框架中不同的按鈕風(fēng)格都是通過(guò)不同的類名來(lái)實(shí)現(xiàn)，在使用過(guò)程中，開(kāi)發(fā)者只需要選擇不同的類名即可：

　　

　　

　　使用起來(lái)就很簡(jiǎn)單，就像前面介紹的默認(rèn)按鈕一樣的使用方法，只需要在基礎(chǔ)按鈕“.btn”基礎(chǔ)上追加對(duì)應(yīng)的類名，就可以得到需要的按鈕風(fēng)格。如：

<button class="btn" type="button">基礎(chǔ)按鈕.btn</button><button class="btn btn-default" type="button">默認(rèn)按鈕.btn-default</button><button class="btn btn-primary" type="button">主要按鈕.btn-primary</button><button class="btn btn-success" type="button">成功按鈕.btn-success</button><button class="btn btn-info" type="button">信息按鈕.btn-info</button><button class="btn btn-warning" type="button">警告按鈕.btn-warning</button><button class="btn btn-danger" type="button">危險(xiǎn)按鈕.btn-danger</button><button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>

六、按鈕大小

　　在Bootstrap框架中，對(duì)于按鈕的大小，也是可以定制的。類似于input一樣，通過(guò)在基礎(chǔ)按鈕“.btn”的基礎(chǔ)上追加類名來(lái)控制按鈕的大小。

　　在Bootstrap框架中提供了三個(gè)類名來(lái)控制按鈕大?。?/p>

　　

　　 從上表中不難發(fā)現(xiàn)，在Bootstrap框架中控制按鈕的大小都是通過(guò)修改按鈕的padding、line-height、font-size和border-radius幾個(gè)屬性。

　　 源碼查閱bootstrap.css文件中第2319行～第2339行

　　 那么在實(shí)際使用中，這幾個(gè)類名可以配合按鈕中其他顏色類名一起使用，但唯一一點(diǎn)不能缺少“.btn”類名：

<button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button> 
    <button class="btn btn-primary" type="button">正常按鈕</button>
    <button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button>

　　

七、塊狀按鈕

　　Bootstrap框架中提供了一個(gè)類名“btn-block”。

　　按鈕使用這個(gè)類名就可以讓按鈕充滿整個(gè)容器，并且這個(gè)按鈕不會(huì)有任何的padding和margin值。在實(shí)際當(dāng)中，常把這種按鈕稱為塊狀按鈕。

　　具體源碼請(qǐng)查閱bootstrap.css文件第2340行～第2353行：

　　使用方法和前面的類似，只需要在原按鈕類名上添加“.btn-block”類名，當(dāng)然“.btn”類名是不可或缺的：

<button class="btnbtn-primary btn-lg btn-block" type="button">大型按鈕.btn-lg</button><button class="btnbtn-primary btn-block" type="button">正常按鈕</button><button class="btnbtn-primary btn-sm btn-block" type="button">小型按鈕.btn-sm</button><button class="btnbtn-primary btn-xs btn-block" type="button">超小型按鈕.btn-xs</button>

　　

八、按鈕狀態(tài)——活動(dòng)狀態(tài)

　　Bootstrap框架針對(duì)按鈕的狀態(tài)做了一些特殊處理。在Bootstrap框架中針對(duì)按鈕的狀態(tài)效果主要分為兩種：活動(dòng)狀態(tài)和禁用狀態(tài)。

　　Bootstrap按鈕的活動(dòng)狀態(tài)主要包括按鈕的懸浮狀態(tài)(:hover)，點(diǎn)擊狀態(tài)(:active)和焦點(diǎn)狀態(tài)（:focus）幾種。

　　源碼請(qǐng)查看bootstrap.css文件第2011行～第2029行

　　不同風(fēng)格下的按鈕都具有這幾種狀態(tài)效果，只是顏色做了一定的調(diào)整，我們以默認(rèn)風(fēng)格（btn-default）為例：

　　源碼請(qǐng)查看bootstrap.css文件第2045行～第2058行

　　當(dāng)按鈕處理正在點(diǎn)擊狀態(tài)（也就是鼠標(biāo)按下的未松開(kāi)的狀態(tài)），對(duì)于<button>元素是通過(guò)“:active”偽類實(shí)現(xiàn)，而對(duì)于<a>這樣的標(biāo)簽元素則是通過(guò)添加類名“.active”來(lái)實(shí)現(xiàn)。

<button class="btn" type="button">基礎(chǔ)按鈕.btn</button>  
   <button class="btn btn-default" type="button">默認(rèn)按鈕.btn-default</button> 
   <button class="btn btn-primary" type="button">主要按鈕.btn-primary</button> 
   <button class="btn btn-success" type="button">成功按鈕.btn-success</button> 
   <button class="btn btn-info" type="button">信息按鈕.btn-info</button> 
   <button class="btn btn-warning" type="button">警告按鈕.btn-warning</button> 
   <button class="btn btn-danger" type="button">危險(xiǎn)按鈕.btn-danger</button> 
   <button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>

九、按鈕狀態(tài)——禁用狀態(tài)

　　和input等表單控件一樣，在Bootstrap框架的按鈕中也具有禁用狀態(tài)的設(shè)置。

　　禁用狀態(tài)與其他狀態(tài)按鈕相比，就是背景顏色的透明度做了一定的處理，opcity的值從100%調(diào)整為65%。

　　在Bootstrap框架中，要禁用按鈕有兩種實(shí)現(xiàn)方式：　　

方法1：在標(biāo)簽中添加disabled屬性

方法2：在元素標(biāo)簽中添加類名“disabled”

　　兩者的主要區(qū)別是：

　　　　“.disabled”樣式不會(huì)禁止按鈕的默認(rèn)行為，比如說(shuō)提交和重置行為等。

　　　　如果想要讓這樣的禁用按鈕也能禁止按鈕的默認(rèn)行為，則需要通過(guò)JavaScript這樣的語(yǔ)言來(lái)處理。

　　　　對(duì)于<a>標(biāo)簽也存在類似問(wèn)題，如果通過(guò)類名“.disable”來(lái)禁用按鈕，其鏈接行為是無(wú)法禁止。

　　　　而在元素標(biāo)簽中添加“disabled”屬性的方法是可以禁止元素的默認(rèn)行為的。

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通過(guò)disabled屬性禁用按鈕</button><button class="btnbtn-primary btn-block disabled" type="button">通過(guò)添加類名disabled禁用按鈕</button><button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按鈕</button>

以上是bootstrapt框架中有幾種按鈕風(fēng)格的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章標(biāo)題：bootstrapt框架中有幾種按鈕風(fēng)格-創(chuàng)新互聯(lián)
文章出自：http://muchs.cn/article36/hgspg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站排名、網(wǎng)站制作、ChatGPT、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)