bootstrapt框架中按鈕的風格有哪些

這篇文章給大家分享的是有關bootstrapt框架中按鈕的風格有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

bootstrapt按鈕的風格主要有：基礎按鈕、默認按鈕、主要按鈕、成功按鈕、信息按鈕、警告按鈕、危險按鈕、鏈接按鈕。

一、按鈕簡介：

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

　　而且不同的Web頁面具有不同的按鈕風格，甚至說同一個Web網站或應用程序具有多種按鈕風格，比如說不同的按鈕顏色、大小和狀態等。

<button class="btn" type="button">基礎按鈕.btn</button>     <button class="btn btn-default" type="button">默認按鈕.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">危險按鈕.btn-danger</button>    <button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>

二、基本按鈕

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

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

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

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

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

三、默認按鈕

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

　　默認按鈕的風格就是在基礎按鈕的風格的基礎上修改了按鈕的背景顏色、邊框顏色和文本顏色。

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

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

<button class="btn btn-default" type="button">默認按鈕</button>

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

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

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

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

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

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

五、定制不同風格的按鈕

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

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

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

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

<button class="btn" type="button">基礎按鈕.btn</button><button class="btn btn-default" type="button">默認按鈕.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">危險按鈕.btn-danger</button><button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>

六、按鈕大小

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

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

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

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

　　 那么在實際使用中，這幾個類名可以配合按鈕中其他顏色類名一起使用，但唯一一點不能缺少“.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框架中提供了一個類名“btn-block”。

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

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

　　使用方法和前面的類似，只需要在原按鈕類名上添加“.btn-block”類名，當然“.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>

八、按鈕狀態——活動狀態

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

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

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

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

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

　　當按鈕處理正在點擊狀態（也就是鼠標按下的未松開的狀態），對于<button>元素是通過“:active”偽類實現，而對于<a>這樣的標簽元素則是通過添加類名“.active”來實現。

<button class="btn" type="button">基礎按鈕.btn</button>     <button class="btn btn-default" type="button">默認按鈕.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">危險按鈕.btn-danger</button>    <button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>

九、按鈕狀態——禁用狀態

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

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

　　在Bootstrap框架中，要禁用按鈕有兩種實現方式：　　

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

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

　　兩者的主要區別是：

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

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

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

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

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

感謝各位的閱讀！關于“bootstrapt框架中按鈕的風格有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！