Bootstrap基本樣式學(xué)習(xí)筆記之按鈕(4)
更新時間：2016年12月07日 14:10:27 作者：kikay
篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之按鈕基本樣式的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
Bootstrap中任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認(rèn)外觀，再結(jié)合一些選項，可以定義各種按鈕樣式。
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>大號按鈕</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>小號按鈕</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 其他按鈕
移動端一個按鈕占用一行按鈕，可以利用.btn-block類來實現(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個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了js實現(xiàn)新增加事件：時間軸自動排列效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
Midway 基于 TypeScript 開發(fā)，結(jié)合了面向?qū)ο螅∣OP + Class + IoC）與函數(shù)式（FP + Function + Hooks）兩種編程范式，并在此之上支持了 Web / 全棧 / 微服務(wù) / RPC / Socket / Serverless 等多種場景，這篇文章主要介紹了前端中間件Midway的使用,需要的朋友可以參考下2023-05-05
今天小編就為大家分享一篇使用layui的layer組件做彈出層的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
事件就是用戶或瀏覽器自身執(zhí)行的某種動作。比如說click,mouseover，都是事件的名字。而相應(yīng)某個事件的函數(shù)就叫事件處理程序（或事件偵聽器）。為事件指定處理程序的方式有好幾種2012-06-06
大家都習(xí)慣了重載帶來的便利。JavaScript有沒有重載呢？有人會回答沒有，因為函數(shù)會被覆蓋；有人說有，我們可以模擬重載這 一操作。2010-07-07
這篇文章主要介紹了基于javascript的無縫滾動動畫實現(xiàn)2，文章通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
瀑布流的實現(xiàn)方式（原生js+jquery+css3）
這篇文章主要為大家詳細(xì)介紹了原生js+jquery+css3實現(xiàn)瀑布流的相關(guān)代碼，三種實現(xiàn)瀑布流的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
大家都知道js是單線程的腳本語言,在同一時間只能做同一件事,為了協(xié)調(diào)事件、用戶交互、腳本、UI渲染和網(wǎng)絡(luò)處理等行為,防止主線程阻塞,Event Loop方案應(yīng)運(yùn)而生,這篇文章主要給大家介紹了關(guān)于js在瀏覽器中的event loop事件隊列的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要為大家詳細(xì)介紹了js簡單實現(xiàn)網(wǎng)頁換膚功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
用javascript將數(shù)據(jù)導(dǎo)入Excel示例代碼
將數(shù)據(jù)導(dǎo)入Excel的方法有很多，本例介紹的這個是使用js來實現(xiàn)數(shù)據(jù)的導(dǎo)入，感興趣的朋友可以了解下2014-09-09