亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Bootstrap的CSS樣式全面使用介紹

 更新時間：2023年07月28日 09:34:20   投稿：yin  
Bootstrap?自帶以下特性：全局的?CSS設(shè)置、定義基本的?HTML?元素樣式、可擴(kuò)展的?class，以及一個先進(jìn)的網(wǎng)格系統(tǒng)。HTML的基本元素均可以通過class設(shè)置樣式并得到增強(qiáng)效果。

Bootstrap 自帶以下特性：全局的 CSS設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class，以及一個先進(jìn)的網(wǎng)格系統(tǒng)。HTML的基本元素均可以通過class設(shè)置樣式并得到增強(qiáng)效果。

1、基本設(shè)置

（1）使用 HTML5 文檔類型。

Bootstrap使用了 HTML5 元素和 Css屬性，故需要使用 HTML5。

（2）響應(yīng)移動設(shè)備。

移動設(shè)備與桌面設(shè)備的差別 在于 屏幕的大小，Bootstrap 使用 viewport 來控制屏幕的縮放。

指的是讓viewport的寬度等于物理設(shè)備上的真實(shí)分辨率，且不允許用戶縮放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

【屬性】
width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應(yīng)，指定高度。
initial-scale：初始縮放比例，也即是當(dāng)頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放，可以傳"yes"或"no"。(大多數(shù)情況下有用，可以自己寫js去實(shí)現(xiàn))
shrink-to-fit：自適應(yīng)手機(jī)屏幕寬度，shrink-to-fit=no屬性是蘋果專屬的，在Safari IOS9開始引入，安，卓以及其他系統(tǒng)沒有。

2、網(wǎng)格（Grid）

（1）Bootstrap 網(wǎng)格系統(tǒng)（Grid System）

Bootstrap 包含了一個響應(yīng)式的、移動設(shè)備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設(shè)備或視口大小的增加而適當(dāng)?shù)財(cái)U(kuò)展到 12 列。

（2）container

container 用于包裹頁面上的內(nèi)容，其左右外邊距由瀏覽器決定。

（3）使用 Grid

Step1：使用 container 包裹頁面。
Step2：使用 col-xs- 、col-sm- 、col-md- 、col-lg- 來劃分網(wǎng)格。
step3：使用 @media 來監(jiān)控 屏幕大小的變化。

/* 超小設(shè)備（手機(jī)，小于 768px） */
@media (max-width: @screen-xs-max) { ... }
/* 小型設(shè)備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
/* 中型設(shè)備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
/* 大型設(shè)備（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

（4）舉例：

<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>
   <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>

3、文本處理

（1）small 屬性 、<small> 標(biāo)簽

寫在父標(biāo)簽中，可以得到一個字體顏色淺、字體更小的文本。

（2）常用文本屬性

class="lead"             得到字體稍大、行高稍高的文本

class="text-left"        向左對齊文本

class="text-center"      居中對齊文本

class="text-right"       向右對齊文本

（3）補(bǔ)充文本屬性

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

（4）<abbr> 標(biāo)簽　

<abbr> 元素的樣式為顯示在文本底部的一條虛線邊框，當(dāng)鼠標(biāo)懸停在上面時會顯示title屬性中的信息。

（5）列表

class="list-unstyled"         用于去除列表的樣式

class="list-inline"           用于將列表水平顯示

dl、dt、dd                    用于自定義列表

class="dl-horizontal"         用于將自定義列表水平顯示

4、表格

（1）常用表格標(biāo)簽

<table>         定義表格
<thead>         定義表格標(biāo)題行
<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>常用屬性

幾個屬性會選中某行、某列數(shù)據(jù)，根據(jù)不同的屬性，顯示不同的顏色。

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

5、表單

（1）基本使用

使用 role="form" 聲明 form。
使用 class="form-inline" 將 form 改為一行顯示（內(nèi)聯(lián)表單）。
使用 class="form-group" 使表單控件間可以獲取合適的間距。
使用 class="form-control" 為文本 加個文本框。
使用 class="checkbox" 為復(fù)選框添加樣式。

【舉例：】

        <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>

（2）按鈕、下拉框

class="checkbox"              用于給復(fù)選框加樣式，此時可以不用寫 class="form-group"

class="radio"                 用于給單選框加樣式

class="checkbox-inline"       將復(fù)選框顯示在同一行

class="radio-inline"          將單選框顯示在同一行

class="form-control"          可以修改select樣式

【舉例：】

<!-- 內(nèi)聯(lián)單選框、復(fù)選框樣式 -->
<label for="name">內(nèi)聯(lián)的復(fù)選框和單選按鈕的實(shí)例</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 選項(xiàng) 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 選項(xiàng) 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 選項(xiàng) 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 選項(xiàng) 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 選項(xiàng) 2
    </label>
</div>
<!-- slect樣式 -->
<div class="form-group">
    <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>

6、按鈕

（1）基本屬性

class="btn"                基本按鈕樣式
class="btn btn-default"    默認(rèn)按鈕樣式
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"     塊級的基本按鈕樣式，默認(rèn)會填充滿父標(biāo)簽的寬度

（2）按鈕激活、禁用

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

（3）按鈕組

class="btn-group"           創(chuàng)建一個按鈕組
class="btn-group-lg"        創(chuàng)建一個大按鈕組
class="btn-group-sm"        創(chuàng)建一個小按鈕組
class="btn-group-xs"        創(chuàng)建一個特別小按鈕組
class="btn-group-vertical"  創(chuàng)建一個垂直的按鈕組
class="btn-group-justified" 創(chuàng)建一個自適應(yīng)大小的按鈕組（若內(nèi)部是<button>標(biāo)簽，需給其加一個class="btn-group"）
class="dropdown-menu" + class="caret"      可以創(chuàng)建一個有下拉框的按鈕

7、輔助樣式

（1）背景樣式

class="bg-primary"
class="bg-success"
class="bg-info"
class="bg-warning"
class="bg-danger"

（2）浮動與隱藏

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

到此這篇關(guān)于Bootstrap的CSS樣式全面使用介紹的文章就介紹到這了,更多相關(guān)Bootstrap全局 CSS 樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論