Bootstrap基本CSS樣式

時間  2019-11-07
標籤 bootstrap 基本 css 樣式 欄目 Bootstarp 简体版
原文   原文鏈接

1、簡介、使用

一、簡介

　　Bootstrap 來源於 Twitter，是一款基於 Html、Css、JavaScript 的前端UI框架。能夠方便、快速的開發web界面。
　　教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.htmlcss

二、使用

（1）直接使用CDN
　　BootCDN網址：https://www.bootcdn.cn/html

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。務必在bootstrap.min.js 以前引入，bootstrap.js 基於 jQuery 實現 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

（2）直接下載文件
　　下載地址：https://getbootstrap.com/
　　選擇不一樣的版本進行下載。前端

 

 

 

 

 

 

2、Bootstrap的CSS樣式

一、基本設置

（1）使用 HTML5 文檔類型。
　　Bootstrap使用了 HTML5 元素和 Css屬性，故須要使用 HTML5。vue

<!DOCTYPE html>
<html>
....
</html>

（2）響應移動設備。
　　移動設備與桌面設備的差異 在於 屏幕的大小，Bootstrap 使用 viewport 來控制屏幕的縮放。jquery

【格式：】
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
指的是讓viewport的寬度等於物理設備上的真實分辨率，且不容許用戶縮放。


【屬性：】
width：控制 viewport 的大小，能夠指定的一個值，如 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
maximum-scale：容許用戶縮放到的最大比例。
minimum-scale：容許用戶縮放到的最小比例。
user-scalable：用戶是否能夠手動縮放，能夠傳"yes"或"no"。(大多數狀況下有用，能夠本身寫js去實現)
shrink-to-fit：自適應手機屏幕寬度，shrink-to-fit=no屬性是蘋果專屬的，在Safari IOS9開始引入，安，卓以及其餘系統沒有。


【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
          <!-- 能夠縮放，且放大比例爲2.0 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes" />
        <style>
            img {
                /*max-width：100%：若是img寬度大於div寬度，img就顯示div100%寬度，不然就顯示img的寬度；*/
                max-width: 100%;
                /*width:100%：無論img寬度多少，都顯示div寬度*/
                /*width: 100%;*/
                height: auto;
            }
        </style>
    </head>

    <body>
        <div>
            <img src="https://cn.vuejs.org/images/logo.png" alt="Chania" width="360" height="345">
        </div>

        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
        </p>
    </body>

</html>

 

二、網格（Grid）

(1)Bootstrap 網格系統（Grid System）
　　Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，能夠隨着設備或視口大小的增長而適當地擴展到 12 列。ios

 

 

（2）container
　　container 用於包裹頁面上的內容，其左右外邊距由瀏覽器決定。web

class="container "

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

 

（3）使用 Grid
　　Step1：使用 container 包裹頁面。
　　Step2：使用 col-xs- 、col-sm- 、col-md- 、col-lg- 來劃分網格。
　　step3：使用 @media 來監控 屏幕大小的變化。bootstrap

/* 超小設備（手機，小於 768px） */
@media (max-width: @screen-xs-max) { ... }

/* 小型設備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

/* 中型設備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

/* 大型設備（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

 

（4）舉例：瀏覽器

【舉例：】
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 實例 - 列排序</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左邊
      </div>
      <div class="col-md-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右邊
      </div>
   </div><br>
   <div class="row">
      <p>排序後</p>
      <div class="col-md-4 col-md-push-8" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在左邊
      </div>
      <div class="col-md-8 col-md-pull-4" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在右邊
      </div>
   </div>

</div>

</body>
</html>

 

 

三、文本處理

（1）small 屬性 、<small> 標籤
　　寫在父標籤中，能夠獲得一個字體顏色淺、字體更小的文本。框架

【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap文本</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!-- 寫在父標籤中，能夠獲得一個比父標籤字體顏色淺、字體更小的文本。 -->
        <h1>Hello World! <small>Tom</small></h1>
        
        <!-- 使用 small 屬性也能夠獲得一樣的效果 -->
        <h1>Hello World! <span class="small">Jarry</span></h1>
    </body>
</html>

 

 

 

 

（2）經常使用文本屬性

class="lead"             獲得字體稍大、行高稍高的文本
class="text-left"        向左對齊文本
class="text-center"      居中對齊文本
class="text-right"       向右對齊文本


【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap文本</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!-- 本來顯示內容 -->
        <h1>Hello World!</h1>
        <p>Tom</p>
        
        <!-- 給段落字體加粗，行高加高 -->
        <h1>Hello World! </h1>
        <p class="lead">Jarry</p>
        
        <!-- 文本居左 -->
        <h1 class="text-left">Hello World! </h1>
        
        <!-- 文本居中 -->
        <h1 class="text-center">Hello World! </h1>
        
        <!-- 文本居右 -->
        <h1 class="text-right">Hello World! </h1>
    </body>
</html>

 

 

（3）補充文本屬性

【如下幾個屬性大體相同，字體顏色不一樣】
class="text-muted"         
class="text-primary"
class="text-success"
class="text-info"
class="text-warning"
class="text-danger"

 

（4）<abbr> 標籤
　　<abbr> 元素的樣式爲顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示title屬性中的信息。

【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap文本</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!--  <abbr> 元素的樣式爲顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示title屬性中的信息 -->
        <abbr title="JavaScript" style="font-size:20px">JS</abbr><br>
    </body>
</html>

 

 

（5）列表

class="list-unstyled"         用於去除列表的樣式
class="list-inline"           用於將列表水平顯示
dl、dt、dd                    用於自定義列表
class="dl-horizontal"         用於將自定義列表水平顯示

【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 列表</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!-- 通常的有序列表 -->
        <h4>有序列表</h4>
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ol>
        
        <!-- 通常的無序列表 -->
        <h4>無序列表</h4>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
        
        <!-- 去除樣式的列表 -->
        <h4>未定義樣式列表</h4>
        <ul class="list-unstyled">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
        
        <!-- 將列表項放在一行顯示 -->
        <h4>內聯列表</h4>
        <ul class="list-inline">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
        
        <!-- 自定義列表 -->
        <h4>定義列表</h4>
        <dl>
            <dt>Description 1</dt>
            <dd>Item 1</dd>
            <dt>Description 2</dt>
            <dd>Item 2</dd>
        </dl>
        
        <!-- 自定義水平列表 -->
        <h4>水平的定義列表</h4>
        <dl class="dl-horizontal">
            <dt>Description 1</dt>
            <dd>Item 1</dd>
            <dt>Description 2</dt>
            <dd>Item 2</dd>
        </dl>

    </body>
</html>

 

 

四、表格

（1）經常使用表格標籤

<table>         定義表格
<thead>         定義表格標題行
<tbody>         定義表格主體
<tr>            定義表格行
<td>            定義表格列
<th>            定義表格列（用於<thead>中）
<caption>       定義表格描述信息

 

（2）<table>經常使用屬性

class="table"            基本表格樣式，只有橫向的分割線
class="table-striped"    給 tbody 添加條紋（表格間有色差）。
class="table-bordered"   給全部的單元格添加邊框
class="table-hover"      給 tbody 添加懸停樣式（加個背景色）
class="table-condensed"  使表格樣式更緊湊

 

（3）<tr>, <th> 和 <td>經常使用屬性
　　幾個屬性會選中某行、某列數據，根據不一樣的屬性，顯示不一樣的顏色。

class="active"           表示選中某條數據（有個陰影）
class="success"          表示成功
class="info"             表示信息變化
class="warning"          表示警告
class="danger"           表示危險

 

（4）舉例

【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 表格</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <caption>表格演示</caption>
            <thead>
                <tr>
                    <th>產品</th>
                    <th>付款日期</th>
                    <th>狀態</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>產品1</td>
                    <td>23/11/2013</td>
                    <td>待發貨</td>
                </tr>
                <tr>
                    <td>產品2</td>
                    <td>10/11/2013</td>
                    <td>發貨中</td>
                </tr>
                <tr>
                    <td>產品3</td>
                    <td>20/10/2013</td>
                    <td>待確認</td>
                </tr>
                <tr>
                    <td>產品4</td>
                    <td>20/10/2013</td>
                    <td>已退貨</td>
                </tr>
                <tr class="active">
                    <td>產品5</td>
                    <td>23/11/2013</td>
                    <td>待發貨</td>
                </tr>
                <tr class="success">
                    <td>產品6</td>
                    <td>10/11/2013</td>
                    <td>發貨中</td>
                </tr>
                <tr class="warning">
                    <td>產品7</td>
                    <td>20/10/2013</td>
                    <td>待確認</td>
                </tr>
                <tr class="danger">
                    <td>產品8</td>
                    <td>20/10/2013</td>
                    <td>已退貨</td>
                </tr>
                <tr class="info">
                    <td>產品9</td>
                    <td>20/10/2013</td>
                    <td>已退貨</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

 

 

五、表單

（1）基本使用

給 <form> 標籤添加一個 role="form"。

爲了獲取最佳間距，可給表單控件加個屬性 class="form-group"。

若想給文本添加 文本框，可給相關的文本標籤增長 class="form-control"

若想讓表單呈一行顯示，可給 <form> 增長 class="form-inline"

若想隱藏表單控件，可給表單控件 增長 class="sr-only"


【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 表單</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!-- 
            使用 role="form" 聲明 form。
            使用 class="form-inline" 將 form 改成一行顯示（內聯表單）。
            使用 class="form-group" 使表單控件間能夠獲取合適的間距。
            使用 class="form-control" 爲文本 加個文本框。
            使用 class="checkbox" 爲複選框添加樣式。
        -->
        <form class="form-inline" role="form">
            <div class="form-group">
                <label for="name">名稱</label>
                <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
            </div>
            <div class="form-group">
                <label for="inputfile">文件輸入</label>
                <input type="file" id="inputfile">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 請打勾
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>

        <br />
        <br />
        
        <!-- 使用 sr-only 能夠隱藏表單控件-->
        <form class="form-inline sr-only" role="form">
            <div class="form-group">
                <label for="name">名稱</label>
                <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
            </div>
            <div class="form-group">
                <label for="inputfile">文件輸入</label>
                <input type="file" id="inputfile">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 請打勾
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
        
        <br />
        <br />

        <form role="form">
            <div class="form-group">
                <label for="name">名稱</label>
                <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
            </div>
            <div class="form-group">
                <label for="inputfile">文件輸入</label>
                <input type="file" id="inputfile">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 請打勾
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>

    </body>
</html>

 

 （2）按鈕、下拉框

class="checkbox"              用於給複選框加樣式，此時能夠不用寫 class="form-group"
class="radio"                 用於給單選框加樣式
class="checkbox-inline"       將複選框顯示在同一行
class="radio-inline"          將單選框顯示在同一行
class="form-control"          能夠修改select樣式

【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 按鈕、下拉框</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!--  普通複選框、單選框樣式-->
        <label for="name">默認的複選框和單選按鈕的實例</label>
        <div class="checkbox">
            <label><input type="checkbox" value="">選項 1</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" value="">選項 2</label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 選項 1
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">選項 2 - 選擇它將會取消選擇選項 1
            </label>
        </div>

        <br />
        <br />

        <!-- 內聯單選框、複選框樣式 -->
        <label for="name">內聯的複選框和單選按鈕的實例</label>
        <div>
            <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1"> 選項 1
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox2" value="option2"> 選項 2
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox3" value="option3"> 選項 3
            </label>
            <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 選項 1
            </label>
            <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 選項 2
            </label>
        </div>

        <br />
        <br />
        
        <!-- slect樣式 -->
        <div class="form-group">
            <label for="name">選擇列表</label>
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
            <label for="name">可多選的選擇列表</label>
                   <!-- multiple 表示可多選 -->
            <select multiple class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </body>
</html>

 

 

六、按鈕

（1）基本屬性

class="btn"                基本按鈕樣式
class="btn btn-default"    默認按鈕樣式
class="btn btn-primary"    原始按鈕樣式
class="btn btn-success"    成功按鈕樣式
class="btn btn-info"       信息按鈕樣式
class="btn btn-warning"    警告按鈕樣式
class="btn btn-danger"     危險按鈕樣式
class="btn btn-link"       連接按鈕樣式

class="btn btn-lg"        大的基本按鈕樣式
class="btn btn-sm"        小的基本按鈕樣式
class="btn btn-xs"        特別小的基本按鈕樣式
class="btn btn-block"     塊級的基本按鈕樣式，默認會填充滿父標籤的寬度


【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 按鈕</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

        <!-- 基本的按鈕 -->
        <button type="button" class="btn">基本按鈕</button>
        <!-- 標準的按鈕 -->
        <button type="button" class="btn btn-default">默認按鈕</button>
        <!-- 提供額外的視覺效果，標識一組按鈕中的原始動做 -->
        <button type="button" class="btn btn-primary">原始按鈕</button>
        <!-- 表示一個成功的或積極的動做 -->
        <button type="button" class="btn btn-success">成功按鈕</button>
        <!-- 信息警告消息的上下文按鈕 -->
        <button type="button" class="btn btn-info">信息按鈕</button>
        <!-- 表示應謹慎採起的動做 -->
        <button type="button" class="btn btn-warning">警告按鈕</button>
        <!-- 表示一個危險的或潛在的負面動做 -->
        <button type="button" class="btn btn-danger">危險按鈕</button>
        <!-- 並不強調是一個按鈕，看起來像一個連接，但同時保持按鈕的行爲 -->
        <button type="button" class="btn btn-link">連接按鈕</button>

        <p>
            <button type="button" class="btn btn-primary btn-lg">大的原始按鈕</button>
            <button type="button" class="btn btn-default btn-lg">大的按鈕</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary">默認大小的原始按鈕</button>
            <button type="button" class="btn btn-default">默認大小的按鈕</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-sm">小的原始按鈕</button>
            <button type="button" class="btn btn-default btn-sm">小的按鈕</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-xs">特別小的原始按鈕</button>
            <button type="button" class="btn btn-default btn-xs">特別小的按鈕</button>
        </p>
        <p style="width: 600px; ">
            <button type="button" class="btn btn-primary btn-lg btn-block">塊級的原始按鈕</button>
            <button type="button" class="btn btn-default btn-lg btn-block">塊級的按鈕</button>
        </p>
    </body>
</html>

 

 

（2）按鈕激活、禁用

class="btn active"         定義激活按鈕樣式，背景色會改變（有色差）
class="btn disabled"       定義禁止按鈕樣式，背景色會變（可能有些效果不能徹底禁用）。

【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 按鈕激活、禁用</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

        <p>
            <button type="button" class="btn btn-default">默認按鈕</button>
            <button type="button" class="btn btn-default" disabled="disabled">禁用按鈕</button>
            <!-- 若只是使用 disabled 的樣式，可能有些效果未能徹底禁用 -->
            <button type="button" class="btn btn-default disabled">禁用的原始按鈕</button>
        </p>
        <p>
            <a href="#" class="btn btn-default" role="button">連接</a>
            <a href="#" class="btn btn-default" disabled="disabled" role="button">禁用連接</a>
            <a href="#" class="btn btn-default disabled" role="button">禁用連接</a>
        </p>
        
        <br/>
        <br/>
        
        <p>
            <button type="button" class="btn btn-default">默認按鈕</button>
            <button type="button" class="btn btn-default active">激活的原始按鈕</button>
        </p>
        <p>
            <a href="#" class="btn btn-default" role="button">連接</a>
            <a href="#" class="btn btn-default active" role="button">激活連接</a>
        </p>

    </body>
</html>

 

 

 （3）按鈕組

class="btn-group"           建立一個按鈕組
class="btn-group-lg"        建立一個大按鈕組
class="btn-group-sm"        建立一個小按鈕組
class="btn-group-xs"        建立一個特別小按鈕組
class="btn-group-vertical"  建立一個垂直的按鈕組
class="btn-group-justified" 建立一個自適應大小的按鈕組（若內部是<button>標籤，需給其加一個class="btn-group"）
class="dropdown-menu" + class="caret"      能夠建立一個有下拉框的按鈕


【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 按鈕組</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div class="container">
            <h3>默認大小按鈕(自適應大小、垂直顯示):</h3>
            <div class="btn-group btn-group-justified btn-group-vertical" style="width: 100px;">
                <div class="btn-group">
                    <button type="button" class="btn btn-primary">Apple</button>
                    <button type="button" class="btn btn-primary">Samsung</button>
                    <button type="button" class="btn btn-primary">Sony</button>
                </div>
            </div>
            
            <br/>
            <br/>
            
            <h3>默認大小按鈕（自適應大小）:</h3>
            <div class="btn-group btn-group-justified">
                <a href="#" class="btn btn-primary">Apple</a>
                <a href="#" class="btn btn-primary">Samsung</a>
                <a href="#" class="btn btn-primary">Sony</a>
            </div>
            
            <br/>
            <br/>
            
            <h3>大按鈕:</h3>
            <div class="btn-group btn-group-lg">
                <button type="button" class="btn btn-primary">Apple</button>
                <button type="button" class="btn btn-primary">Samsung</button>
                <button type="button" class="btn btn-primary">Sony</button>
            </div>
            
            <br/>
            <br/>
            
            <h3>默認大小按鈕:</h3>
            <div class="btn-group">
                <button type="button" class="btn btn-primary">Apple</button>
                <button type="button" class="btn btn-primary">Samsung</button>
                <button type="button" class="btn btn-primary">Sony</button>
            </div>
            
            <br/>
            <br/>
            
            <h3>小按鈕:</h3>
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-primary">Apple</button>
                <button type="button" class="btn btn-primary">Samsung</button>
                <button type="button" class="btn btn-primary">Sony</button>
            </div>
            
            <br/>
            <br/>
            
            <h3>超級小按鈕:</h3>
            <div class="btn-group btn-group-xs">
                <button type="button" class="btn btn-primary">Apple</button>
                <button type="button" class="btn btn-primary">Samsung</button>
                <button type="button" class="btn btn-primary">Sony</button>
            </div>
            
            <br/>
            <br/>
            
            <h3>帶下拉框的按鈕</h3>
            <div class="btn-group">
                <button type="button" class="btn btn-primary">Sony</button>
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Tablet</a></li>
                    <li><a href="#">Smartphone</a></li>
                </ul>
            </div>
        </div>

    </body>
</html>

 

 

七、輔助樣式

（1）背景樣式

【如下幾個樣式只是背景顏色不一樣】
class="bg-primary"
class="bg-success"
class="bg-info"
class="bg-warning"
class="bg-danger"

【舉例：】
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 背景</title> 
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    
<div class="container">
    <h2>背景</h2>
    <p class="bg-primary" style="width: 300px;">該段落使用了類 "bg-primary"。</p>
    <p class="bg-success">該段落使用了類 "bg-success"。</p>
    <p class="bg-info">該段落使用了類 "bg-info"。</p>
    <p class="bg-warning">該段落使用了類 "bg-warning"。</p>
    <p class="bg-danger">該段落使用了類 "bg-danger"。</p>
</div>

</body>
</html>

 

 （2）浮動與隱藏

class="pull-left"         元素浮動在左側
class="pull-right"        元素浮動在右側
class="text-center"       元素居中
class="show"              元素顯示
class="hidden"            元素隱藏
class="sr-only"           元素隱藏
class="text-hide"         元素隱藏


【舉例：】
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 浮動與隱藏</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div class="container" style="width: 600px;">
            <h2>浮動</h2>
            <div class="pull-left">元素浮動到左側</div>
            <div class="pull-right">元素浮動到左側</div>
            <div class="text-center">元素居中</div>

            <h2>隱藏</h2>
            <p> .show 類強制一個元素顯示:</p>
            <p class="show bg-success">該段落強制顯示</p>
            <p> .hidden 類強制一個元素隱藏 :</p>
            <p class="hidden bg-success">該段落強制隱藏</p>
            <p> .sr-only 類使元素隱藏 :</p>
            <p class="sr-only bg-success">該段落隱藏</p>
            <p> .text-hide 類使元素隱藏 :</p>
            <p class="text-hide bg-success">該段落隱藏</p>
        </div>

    </body>
</html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程