Bootstrap框架V3.x版本的基本按鈕和V2.x版本的基本按鈕一樣,都是通過類名“btn”來實現。不同的是在V3.x版本要簡約很多,去除了V2.x版本中的大量的CSS3中的部分特效,比如說文本陰影(text-shadow)、漸變背景(background-image)、邊框陰影(box-shadow)等。
難能可貴的是,Bootstrap框架中的考慮了不同瀏覽器的解析差異,進行了比較安全的兼容性處理,使按鈕效果在不同的瀏覽器中所呈現的效果基本相同。
源碼請查閱bootstrap.css文件第1992行~第2010行:
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
Bootstrap框架的按鈕使用非常的簡單,使用方式如下:
<button class="btn" type="button">我是一個基本按鈕</button>
運行效果如下或查看右側結果窗口:
我來試一試:在右側代碼編輯器中添加一個基本按鈕
參考代碼如下:
<button class="btn" type="button">我是一個基本按鈕</button>
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報