【Bootstrap基礎學習】01 Bootstrap的CSS

時間 2020-05-28

標籤 Bootstrap基礎學習 bootstrap css 欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap 使用了一些 HTML5 元素和 CSS 屬性，因此須要使用 HTML5 文檔類型。css

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

爲了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪製和觸屏縮放，須要在網頁的 head 之中添加 viewport meta 標籤，以下所示：html

<meta name="viewport" content="width=device-width, //視口寬度爲設備寬度
                                     initial-scale=1.0, //縮放程度
                                     maximum-scale=1.0, //最大縮放級別（可選）
                                     user-scalable=no">//禁止頁面縮放（可選）

Bootstrap 使用 Normalize 來創建跨瀏覽器的一致性。Normalize.css 是一個很小的 CSS 文件，在 HTML 元素的默認樣式中提供了更好的跨瀏覽器一致性。git

關於佈局github

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

img-responsive 用於img元素ide
container 用於包裹頁面上的內容的元素佈局

行須要放在container，並用來建立列的水平組。
預約義的網格類，好比 .row 和 .col-xs-4，可用於快速建立網格佈局。
行列可相互嵌套，嵌套後的自適應以父級元素爲準，而不是設備寬度

要建立三個相等的列，則使用三個 col-xs-4，要是12個列就12個col-xs-1。

<div class="container">
   <div class="row">
      <div class="col-xs-6 col-md-2 col-md-offset-1"></div>
      <div class="col-xs-6 col-md-3"></div>
      <div class="col-xs-6 col-md-3"></div>
      <div class="col-xs-6 col-md-3"></div>
   </div>
   <div class="row">...</div>
</div>
<div class="container">....    
<!--以上代碼在手機上就是兩行兩列，在電腦上是一行四列，其中第一列前面有空白，比其它列寬度小三分之一-->
//可以使用.col-md-push-* 和 .col-md-pull-* 這種類設定顯示，col-md-push-6按照我我的的理解，是在左面浮動了6列，而後再插入元素，col-md-pull-3則是在右邊浮動了3列，而後從右往左插入元素

媒體查詢是很是別緻的"有條件的 CSS 規則"。它只適用於一些基於某些規定條件的 CSS。若是知足那些條件，則應用相應的樣式。

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
//對於全部帶有 min-width: @screen-sm-min 的設備，若是屏幕的寬度小於 @screen-sm-max，則會進行一些處理。

關於排版字體

關於文本

<small>本行內容是在標籤內</small><br>
<strong>本行內容是在標籤內</strong><br>
<em>本行內容是在標籤內，並呈現爲斜體</em><br>
<p class="text-left">向左對齊文本</p>
<p class="text-center">居中對齊文本</p>
<p class="text-right">向右對齊文本</p>
<p class="text-muted">本行內容是減弱的</p>灰
<p class="text-primary">本行內容帶有一個 primary class</p>藍
<p class="text-success">本行內容帶有一個 success class</p>綠
<p class="text-info">本行內容帶有一個 info class</p>深藍
<p class="text-warning">本行內容帶有一個 warning class</p>黃
<p class="text-danger">本行內容帶有一個 danger class</p>紅

Bootstrap 定義 <abbr> 元素的樣式爲顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示完整的文本（只要您爲 <abbr> title 屬性添加了文本）。爲了獲得一個更小字體的文本，請添加 .initialism 到 <abbr>。
```
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
```
使用 <address> 標籤，您能夠在網頁上顯示聯繫信息。

使用<Blockqoute>標籤做爲引用

<blockquote>這是一個帶有源標題的引用。<small>Someone famous in Source Title</small></blockquote>

list-unstyled用於未定義樣式列表ul，list-inline用於水平列表ul網站
pre-scrollable使pre可滾動
<code>內聯顯示代碼，<pre>顯示多行代碼

關於表格spa

經過把任意的 .table 包在 .table-responsive class 內，您可讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差異。

<div class="table-responsive">
   <table class="table">
      <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>
      </tbody>
   </table>
</div>

關於表單

在form上加上屬性role="form"就會應用Bootstrap基本的表單結構，此時默認爲垂直表單
把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。

向全部的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<input type="text" class="form-control" placeholder="文本輸入"/>
<textarea class="form-control" rows="3"></textarea>
<label for="name">可多選的選擇列表</label>
      <select multiple class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
     </select>

在form加上類calss=form-inline，那麼表單元素就會變成內聯的
在form加上類class=form-horizontal，那麼表單元素就會變成水平的
- 設置表單控件padding和margin值
- 改變「form-group」的表現形式，相似於網格系統的「row」。
- 向標籤添加 class .control-label。
複選框和單選框
- 對一系列複選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。
當您須要在一個水平表單內的表單標籤後放置純文本時，請在 <p> 上使用 class .form-control-static。
禁用的輸入框 input，若是您想要禁用一個輸入框 input，只須要簡單地添加 disabled 屬性
對 <fieldset> 添加 disabled 屬性來禁用 <fieldset> 內的全部控件。
Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只須要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）便可使用驗證狀態。
.input-lg 和.input-sm能夠改變輸入框的高度樣式

help-block Bootstrap 表單控件能夠在輸入框 input 上有一個塊級幫助文本。爲了添加一個佔用整個寬度的內容塊，請在 <input> 後使用 .help-block。

<input class="form-control" type="text" placeholder="">
   <span class="help-block">一個較長的幫助文本塊，超過一行，
   須要擴展到下一行。本實例中的幫助文本總共有兩行。</span>

關於按鈕

<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>
</p>
<p>
   <button type="button" class="btn btn-primary">
      默認大小的原始按鈕
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-sm">
      小的原始按鈕
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-xs">
      特別小的原始按鈕
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg btn-block">
      塊級的原始按鈕
   </button>
</p>