最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

10年積累的成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有清江浦免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

一、按鈕簡介：

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

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

基礎(chǔ)按鈕.btn  
   默認按鈕.btn-default 
   主要按鈕.btn-primary 
   成功按鈕.btn-success 
   信息按鈕.btn-info 
   警告按鈕.btn-warning 
   危險按鈕.btn-danger 
   鏈接按鈕.btn-link

二、基本按鈕

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

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

源碼請查閱bootstrap.css文件第1992行～第2010行：

Bootstrap框架的按鈕使用非常的簡單，使用方式如下：

我是一個基本按鈕

三、默認按鈕

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

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

源碼請查閱bootstrap.css文件第2040行～第2044行

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

默認按鈕

四、多標簽支持（多種標簽制作按鈕）

一般制作按鈕除了使用標簽元素之外，還可以使用和標簽等。

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

如果不添加是不會有任何按鈕效果。

button標簽按鈕a標簽按鈕span標簽按鈕

p標簽按鈕

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

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

在介紹按鈕開篇就說過，Web頁面可能會有不同的按鈕風(fēng)格。那么在Bootstrap框架也考慮了。

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

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

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

基礎(chǔ)按鈕.btn默認按鈕.btn-default主要按鈕.btn-primary成功按鈕.btn-success信息按鈕.btn-info警告按鈕.btn-warning危險按鈕.btn-danger鏈接按鈕.btn-link

六、按鈕大小

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

在Bootstrap框架中提供了三個類名來控制按鈕大小：

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

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

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

大型按鈕.btn-lg 
    正常按鈕
    小型按鈕.btn-sm

七、塊狀按鈕

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

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

具體源碼請查閱bootstrap.css文件第2340行～第2353行：

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

大型按鈕.btn-lg正常按鈕小型按鈕.btn-sm超小型按鈕.btn-xs

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

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

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

源碼請查看bootstrap.css文件第2011行～第2029行

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

源碼請查看bootstrap.css文件第2045行～第2058行

當(dāng)按鈕處理正在點擊狀態(tài)（也就是鼠標按下的未松開的狀態(tài)），對于元素是通過“:active”偽類實現(xiàn)，而對于這樣的標簽元素則是通過添加類名“.active”來實現(xiàn)。

基礎(chǔ)按鈕.btn 默認按鈕.btn-default 主要按鈕.btn-primary 成功按鈕.btn-success 信息按鈕.btn-info 警告按鈕.btn-warning 危險按鈕.btn-danger 鏈接按鈕.btn-link

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

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

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

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

　　　　方法1：在標簽中添加disabled屬性

　　　　方法2：在元素標簽中添加類名“disabled”

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

“.disabled”樣式不會禁止按鈕的默認行為，比如說提交和重置行為等。

如果想要讓這樣的禁用按鈕也能禁止按鈕的默認行為，則需要通過JavaScript這樣的語言來處理。

對于標簽也存在類似問題，如果通過類名“.disable”來禁用按鈕，其鏈接行為是無法禁止。

而在元素標簽中添加“disabled”屬性的方法是可以禁止元素的默認行為的。

通過disabled屬性禁用按鈕通過添加類名disabled禁用按鈕未禁用的按鈕

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