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>

　　

 

 

 

 

四、多標籤支援（多種標籤製作按鈕）

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

　　同樣，在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行

　　当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于

元素是通过“:active”伪类实现，而对于这样的标签元素则是通过添加类名“.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这样的语言来处理。

　　　　对于标签也存在类似问题，如果通过类名“.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按鈕的風格有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！