欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap基本樣式學(xué)習(xí)筆記之按鈕(4)

 更新時(shí)間:2016年12月07日 14:10:27   作者:kikay  
篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之按鈕基本樣式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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è)精彩的專題:

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js實(shí)現(xiàn)時(shí)間軸自動(dòng)排列效果

    js實(shí)現(xiàn)時(shí)間軸自動(dòng)排列效果

    本文主要介紹了js實(shí)現(xiàn)新增加事件:時(shí)間軸自動(dòng)排列效果的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-03-03
  • 前端中間件Midway的使用教程

    前端中間件Midway的使用教程

    Midway 基于 TypeScript 開發(fā),結(jié)合了面向?qū)ο螅∣OP + Class + IoC)與函數(shù)式(FP + Function + Hooks)兩種編程范式,并在此之上支持了 Web / 全棧 / 微服務(wù) / RPC / Socket / Serverless 等多種場(chǎng)景,這篇文章主要介紹了前端中間件Midway的使用,需要的朋友可以參考下
    2023-05-05
  • 使用layui的layer組件做彈出層的例子

    使用layui的layer組件做彈出層的例子

    今天小編就為大家分享一篇使用layui的layer組件做彈出層的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 淺談Javascript事件處理程序的幾種方式

    淺談Javascript事件處理程序的幾種方式

    事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。比如說click,mouseover,都是事件的名字。而相應(yīng)某個(gè)事件的函數(shù)就叫事件處理程序(或事件偵聽器)。為事件指定處理程序的方式有好幾種
    2012-06-06
  • 為JavaScript添加重載函數(shù)的輔助方法

    為JavaScript添加重載函數(shù)的輔助方法

    大家都習(xí)慣了重載帶來的便利。JavaScript有沒有重載呢?有人會(huì)回答沒有,因?yàn)楹瘮?shù)會(huì)被覆蓋;有人說有,我們可以模擬重載這 一操作。
    2010-07-07
  • 基于javascript的無縫滾動(dòng)動(dòng)畫實(shí)現(xiàn)2

    基于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)

    瀑布流的實(shí)現(xiàn)方式(原生js+jquery+css3)

    這篇文章主要為大家詳細(xì)介紹了原生js+jquery+css3實(shí)現(xiàn)瀑布流的相關(guān)代碼,三種實(shí)現(xiàn)瀑布流的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-07-07
  • js在瀏覽器中的event loop事件隊(duì)列示例詳解

    js在瀏覽器中的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-11
  • js簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)換膚功能

    js簡(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示例代碼

    用javascript將數(shù)據(jù)導(dǎo)入Excel示例代碼

    將數(shù)據(jù)導(dǎo)入Excel的方法有很多,本例介紹的這個(gè)是使用js來實(shí)現(xiàn)數(shù)據(jù)的導(dǎo)入,感興趣的朋友可以了解下
    2014-09-09

最新評(píng)論