bootstrap新手入門（二）css 全局css樣式及組件

時間 2019-11-09

標籤 bootstrap 新手入門 css 全局樣式組件欄目 Bootstarp 简体版

原文原文鏈接

http://v3.bootcss.com/css/css

1：html5的文檔類型；格式設置以下：html

<!DOCTYPE html> <html lang="zh-CN"> ... </html>

2：移動設備優先：html5

爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。jquery

在移動設備瀏覽器上，經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。瀏覽器

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

3:排版於連接app

Bootstrap 排版、連接樣式設置了基本的全局樣式。分別是：less

爲 body 元素設置 background-color: #fff;
使用 @font-family-base、@font-size-base 和 @line-height-base a變量做爲排版的基本參數
爲全部連接設置了基本顏色 @link-color ，而且當連接處於 :hover 狀態時才添加下劃線

這些樣式都能在 scaffolding.less 文件中找到對應的源碼。ide

4：佈局容器工具

Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器，因爲 padding 等屬性的緣由，這兩種容器類不能互相嵌套。

　　1）.container 類用於固定寬度並支持響應式佈局的容器。

<div class="container"> ... </div>

　　2).container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。

<div class="container-fluid"> ... </div>

5.柵格系統

　　Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

　　柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局

「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
經過「行（row）」在水平方向建立一組「列（column）」。
你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。
相似 .row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin 也能夠用來建立語義化的佈局。
經過爲「列（column）」設置 padding 屬性，從而建立列與列之間的間隔（gutter）。經過爲.row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲「行（row）」所包含的「列（column）」抵消掉了padding。
負值的 margin就是下面的示例爲何是向外突出的緣由。在柵格列中的內容排成一行。
柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可使用三個 .col-xs-4 來建立。
若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。
柵格類適用於與屏幕寬度大於或等於分界點大小的設備，而且針對小屏幕設備覆蓋柵格類。所以，在元素上應用任何 .col-md-* 柵格類適用於與屏幕寬度大於或等於分界點大小的設備，而且針對小屏幕設備覆蓋柵格類。所以，在元素上應用任何 .col-lg-* 不存在，也影響大屏幕設備。

6.媒體查詢

在柵格系統中，咱們在 Less 文件中使用如下媒體查詢（media query）來建立關鍵的分界點閾值。

@media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器，大於等於 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器，大於等於 1200px） */ @media (min-width: @screen-lg-min) { ... }

實例：從堆疊到水平排列

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap 101 Template</title>

    
    <link href="bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">

    
    
    
    <style>
       .col-md-1{border:solid 1px blue; }
       .col-md-8{border:solid 1px pink;}
       .col-md-4{border:solid 1px green;}
       .row{margin:10px auto;}
    </style>
</head>
<body>
    <div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
    
    <script src="jquery.js"></script>
    
    <script src="bootstrap-3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

實例：流式佈局容器

<div class="container-fluid"> <div class="row"> ... </div> </div>

實例：移動設備和桌面屏幕

<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>

實例：手機、平板、桌面

<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>

實例：多餘的列將另起一行

<div class="row"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>

7.響應式列重置

即使有上面給出的四組柵格class，你也難免會碰到一些問題，例如，在某些閾值時，某些列可能會出現比別的列高的狀況。爲了克服這一問題，建議聯合使用 .clearfix 和響應式工具類。

<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>

除了列在分界點清除響應，您可能須要 重置偏移, 後推或前拉某個列。請看此柵格實例

偏移（Offsets）

<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div>

八、列偏移

使用 .col-md-offset-* 類能夠將列向右側偏移這些類實際是經過使用 * 選擇器爲當前元素增長了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>

9.嵌套列

爲了使用內置的柵格系統將內容再次嵌套，能夠經過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須佔滿12列）。

<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>

十、列排序：

經過使用 .col-md-push-* 和 .col-md-pull-* 類就能夠很容易的改變列（column）的順序。

<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>

組件：

Glyphicons 字體圖標

網址：http://v3.bootcss.com/components/

出於性能的考慮，全部圖標都須要一個基類和對應每一個圖標的類。把下面的代碼放在任何地方均可以正常使用。注意，爲了設置正確的內補（padding），務必在圖標和文本之間添加一個空格。

不要和其餘組件混合使用

圖標類不能和其它組件直接聯合使用。它們不能在同一個元素上與其餘類共同存在。應該建立一個嵌套的 <span> 標籤，並將圖標類應用到這個 <span> 標籤上。

只對內容爲空的元素起做用

圖標類只能應用在不包含任何文本內容或子元素的元素上。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

圖標的可訪問性

現代的輔助技術可以識別並朗讀由 CSS 生成的內容和特定的 Unicode 字符。爲了不屏幕識讀設備抓取非故意的和可能產生混淆的輸出內容（尤爲是當圖標純粹做爲裝飾用途時），咱們爲這些圖標設置了 aria-hidden="true" 屬性。

若是你使用圖標是爲了表達某些含義（不只僅是爲了裝飾用），請確保你所要表達的意思可以經過被輔助設備識別，例如，包含額外的內容並經過 .sr-only 類讓其在視覺上表現出隱藏的效果。

若是你所建立的組件不包含任何文本內容（例如， <button> 內只包含了一個圖標），你應當提供其餘的內容來表示這個控件的意圖，這樣就能讓使用輔助設備的用戶知道其做用了。這種狀況下，你能夠爲控件添加 aria-label 屬相。

alert 組件中所包含的圖標是用來表示這是一條錯誤消息的，經過添加額外的 .sr-only 文本就可讓輔助設備知道這條提示所要表達的意思了。

<div class="alert alert-danger" role="alert"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> Enter a valid email address </div>