Bootstrap—各式各样的按钮
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap—各式各样的按钮
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Bootstrap為我們提供了各式各樣漂亮的按鈕，我們無(wú)需自己給按鈕寫(xiě)樣式，直接使用它給我們提供的類(lèi)樣式，使用在我們的按鈕上，非常的簡(jiǎn)單方便。
活學(xué)活用，自己利用bootstrap的樣式來(lái)做一個(gè)表格，里邊放一些知識(shí)點(diǎn)：
| .btn | 圓角灰色按鈕，為了讓按鈕不那么尖銳，我們的按鈕都應(yīng)該使用這個(gè)樣式來(lái)獲得圓角，然后再覆蓋上其他的特性。 |
| .btn-default | 默認(rèn)/標(biāo)準(zhǔn)按鈕，白色的按下灰色。 |
| .btn-primary | 原始按鈕樣式（未被操作），這個(gè)跟active相對(duì)應(yīng)，他是一個(gè)按鈕沒(méi)被操作的樣式，而active是按鈕被點(diǎn)擊時(shí)顯示的相應(yīng)的樣式。 |
| .btn-success | 表示成功的動(dòng)作 |
| .btn-info | 該樣式可用于要彈出信息的按鈕 |
| .btn-warning | 表示需要謹(jǐn)慎操作的按鈕 |
| .btn-danger | 表示一個(gè)危險(xiǎn)動(dòng)作的按鈕操作 |
| .btn-link | 讓按鈕看起來(lái)像個(gè)鏈接 (仍然保留按鈕行為) |
| .btn-lg | 大按鈕 |
| .btn-sm | 小按鈕 |
| .btn-xs | 超小按鈕 |
| .btn-block | 塊級(jí)按鈕(拉伸至父元素100%的寬度) |
| .active | 按鈕被點(diǎn)擊，按鈕在激活時(shí)將呈現(xiàn)為被按壓的外觀（深色的背景、深色的邊框、陰影）。 |
| .disabled | 禁用按鈕，顏色會(huì)變淡 50%，并失去漸變。 |
很明顯，圓角按鈕~成功按鈕都是比較容易理解的，我們主要講一下原始按鈕，激活按鈕和禁用按鈕。
原始按鈕（btn-primary）：指的是一個(gè)按鈕（原始按鈕，激活按鈕和禁用按鈕都使用了成功按鈕的樣式），還沒(méi)有被操作的樣式，這里的表現(xiàn)跟其左邊的成功按鈕樣式是一致的，都是沒(méi)有被按下的樣子；
激活按鈕（.active）：按鈕被點(diǎn)擊，被按壓時(shí)的樣式，這個(gè)可以說(shuō)跟原始按鈕是 相對(duì)應(yīng)的。
禁用按鈕（.disabled）：看到效果很明顯，相比于成功按鈕，顏色變淡，失去漸變，有一層 蒙蒙的效果，當(dāng)我們的鼠標(biāo)懸停在上邊的時(shí)候，會(huì)出現(xiàn)紅色的禁用圓圈，這個(gè)樣式非常利于用戶(hù)體驗(yàn)。
附上代碼：
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>bootsrap按鈕</title><link rel="stylesheet" href="../libs/bootstrap.css"> </head> <body><div class="container"><button class="btn">圓角按鈕</button><button class="btn btn-default">默認(rèn)按鈕</button><button class="btn btn-info">信息按鈕</button><button class="btn btn-warning">警示按鈕</button><button class="btn btn-danger">危險(xiǎn)按鈕</button><button class="btn btn-link">鏈接按鈕</button><button class="btn btn-lg">大的按鈕</button><button class="btn btn-sm">小的按鈕</button><button class="btn btn-xs">超小按鈕</button><button class="btn btn-block">塊級(jí)按鈕</button><button class="btn btn-success">成功按鈕</button><button class="btn btn-success btn-primary">原始按鈕</button><button class="btn btn-success active">激活按鈕</button><button class="btn btn-success disabled" role="button">禁用按鈕</button></div></body> </html>本文參考資料地址： http://www.runoob.com/bootstrap/bootstrap-buttons.html
總結(jié)
以上是生活随笔為你收集整理的Bootstrap—各式各样的按钮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【我的开源】股票软件简介+源码(蜗牛股票
- 下一篇： 甜甜用计算机计算1050,NVIDIA