Bootstrap全局樣式 - 按鈕

知識點

任何帶有 .btn 的元素都會繼承圓角灰色按鈕的默認外觀;
<a><button><input>可以使用Bootstrap提供的按鈕類樣式;

類 | 描述

  • | :-: | -:
    .btn | 基本樣式
    .btn-default | 默認/標準按鈕
    .btn-primary | 首選項,未被操作的按鈕
    .btn-success | 表示成功的動作
    .btn-info | 一般信息,該樣式可用于要彈出信息的按鈕
    .btn-warning | 警告,表示需要謹慎操作的按鈕
    .btn-danger | 危險,表示一個危險動作的按鈕操作
    .btn-link | 讓按鈕看起來像一個鏈接
    .btn-lg | 大尺寸按鈕
    .btn-sm | 小尺寸
    .btn-xs | 超小尺寸
    .btn-block | 塊級按鈕
    .active | 按鈕被點擊
    .disabled | 禁用

如果為 <button> 元素添加 disabled 屬性,Internet Explorer 9 及更低版本的瀏覽器將會把按鈕中的文本繪制為灰色,并帶有陰影,目前Bootstrap開發團隊還沒有解決方案。


實踐

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>按鈕</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        <!--
        .line{border-top:1px solid #afd9ee;margin:20px 0;}
        -->
    </style>
</head>
<body>
<!--按鈕-->
<div class="container">
    <input type="button" value=".btn" class="btn"/>
    <input type="button" value="(默認樣式)Default" class="btn btn-default"/>
    <input type="button" value="(首選項)Primary" class="btn btn-primary"/>
    <input type="button" value="(成功)Success" class="btn btn-success"/>
    <input type="button" value="(警告)Warning" class="btn btn-warning"/>
    <input type="button" value="(危險)danger" class="btn btn-danger"/>
    <input type="button" value="link,鏈接" class="btn btn-link"/>
    <input type="button" value="大按鈕,Primary,lg" class="btn btn-primary btn-lg"/>
    <input type="button" value="小按鈕,Primary,sm" class="btn btn-primary btn-sm"/>
    <input type="button" value="超小按鈕,Primary,xs" class="btn btn-primary btn-xs"/>
    <input type="button" value="塊級按鈕" class="btn btn-primary btn-block"/>
    <input type="button" value="active,激活狀態" class="btn btn-primary active"/>
    <input type="button" value="disabled,禁用狀態" class="btn btn-primary disabled"/>
</div>

</body>
</html>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Bootstrap是什么? 一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 10,935評論 3 184
  • 第5章 菜單、按鈕及導航 一、下拉菜單 小伙伴們注意,在Bootstrap框架中的下拉菜單組件是一個獨立的組件,根...
    凜0_0閱讀 5,065評論 0 66
  • 第3章 探索Bootstrap組件 在這一章,我們將開始使用Bootstrap的一些非常有用的HTML組件。諸如按...
    海上名月閱讀 957評論 1 6
  • 原文出處 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端進階之旅閱讀 7,129評論 0 42
  • 原來害怕洗碗,從小到大幾乎沒洗過碗,現在不得不洗碗,因為不想再到外面吃飯,害怕到外面吃飯,覺得還是家里的飯菜...
    許生說閱讀 516評論 1 2