Bootstrap基本樣式學(xué)習(xí)筆記之按鈕(4)
Bootstrap中任何帶有 class .btn 的元素都會(huì)繼承圓角灰色按鈕的默認(rèn)外觀,再結(jié)合一些選項(xiàng),可以定義各種按鈕樣式。
0x01 按鈕樣式
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>按鈕</title> </head> <body> <div class="container"> <div class="page-header"> <h1>基本按鈕</h1> </div> <p> <a href="#" class="btn btn-default">Default</a> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <a href="#" class="btn btn-info">Info</a> <a href="#" class="btn btn-warning">Warning</a> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> </p> </div> </body> </html>
效果如下:
0x02 調(diào)節(jié)按鈕大小
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>調(diào)節(jié)按鈕大小</title> </head> <body> <div class="container"> <div class="page-header"> <h1>調(diào)節(jié)按鈕的大小</h1> </div> <h3>大號(hào)按鈕</h3> <p> <a href="#" class="btn btn-lg btn-default">Default</a> <button type="button" class="btn btn-lg btn-primary">Primary</button> <button type="button" class="btn btn-lg btn-success">Success</button> <a href="#" class="btn btn-lg btn-info">Info</a> <a href="#" class="btn btn-lg btn-warning">Warning</a> <button type="button" class="btn btn-lg btn-danger">Danger</button> <button type="button" class="btn btn-lg btn-link">Link</button> </p> <h3>默認(rèn)大小</h3> <p> <a href="#" class="btn btn-default">Default</a> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <a href="#" class="btn btn-info">Info</a> <a href="#" class="btn btn-warning">Warning</a> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> </p> <h3>小號(hào)按鈕</h3> <p> <a href="#" class="btn btn-sm btn-default">Default</a> <button type="button" class="btn btn-sm btn-primary">Primary</button> <button type="button" class="btn btn-sm btn-success">Success</button> <a href="#" class="btn btn-sm btn-info">Info</a> <a href="#" class="btn btn-sm btn-warning">Warning</a> <button type="button" class="btn btn-sm btn-danger">Danger</button> <button type="button" class="btn btn-sm btn-link">Link</button> </p> <h3>微型按鈕</h3> <p> <a href="#" class="btn btn-xs btn-default">Default</a> <button type="button" class="btn btn-xs btn-primary">Primary</button> <button type="button" class="btn btn-xs btn-success">Success</button> <a href="#" class="btn btn-xs btn-info">Info</a> <a href="#" class="btn btn-xs btn-warning">Warning</a> <button type="button" class="btn btn-xs btn-danger">Danger</button> <button type="button" class="btn btn-xs btn-link">Link</button> </p> </div> </body> </html>
效果如下:
0x03 其他按鈕
移動(dòng)端一個(gè)按鈕占用一行按鈕,可以利用.btn-block類來實(shí)現(xiàn)塊狀按鈕。Bootsrap通過將announce背景色設(shè)置為50%褪色的方式來呈現(xiàn)無法點(diǎn)擊的效果:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>其他按鈕</title> </head> <body> <div class="container"> <div class="page-header"> <h1>其他按鈕</h1> </div> <div> <p> <button type="button" class="btn btn-block btn-success">Block</button> </p> <p> <button type="button" class="btn btn-lg btn-default" disabled="disabled">不可用按鈕1</button> <a href="#" class="btn btn-lg btn-info disabled">不可用按鈕2</a> </p> </div> </div> </body> </html>
效果如下:
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)時(shí)間軸自動(dòng)排列效果
本文主要介紹了js實(shí)現(xiàn)新增加事件:時(shí)間軸自動(dòng)排列效果的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03基于javascript的無縫滾動(dòng)動(dòng)畫實(shí)現(xiàn)2
這篇文章主要介紹了基于javascript的無縫滾動(dòng)動(dòng)畫實(shí)現(xiàn)2,文章通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08瀑布流的實(shí)現(xiàn)方式(原生js+jquery+css3)
這篇文章主要為大家詳細(xì)介紹了原生js+jquery+css3實(shí)現(xiàn)瀑布流的相關(guān)代碼,三種實(shí)現(xiàn)瀑布流的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07js在瀏覽器中的event loop事件隊(duì)列示例詳解
大家都知道js是單線程的腳本語(yǔ)言,在同一時(shí)間只能做同一件事,為了協(xié)調(diào)事件、用戶交互、腳本、UI渲染和網(wǎng)絡(luò)處理等行為,防止主線程阻塞,Event Loop方案應(yīng)運(yùn)而生,這篇文章主要給大家介紹了關(guān)于js在瀏覽器中的event loop事件隊(duì)列的相關(guān)資料,需要的朋友可以參考下2021-11-11js簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)換膚功能
這篇文章主要為大家詳細(xì)介紹了js簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)換膚功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04用javascript將數(shù)據(jù)導(dǎo)入Excel示例代碼
將數(shù)據(jù)導(dǎo)入Excel的方法有很多,本例介紹的這個(gè)是使用js來實(shí)現(xiàn)數(shù)據(jù)的導(dǎo)入,感興趣的朋友可以了解下2014-09-09