Bootstrap學習（一）

時間 2019-12-07

標籤 bootstrap 學習欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap

1、簡介:

bootstrap，來自 Twitter，是目前很受歡迎的前端框架。php

Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。css

2、特色：

1.跨設備，跨瀏覽器html

2.響應佈局前端

3.提供的全面的組件html5

4.內置jquery插件jquery

5.支持html5 css3ios

6.支持less動態樣式css3

3、環境搭建：

如今穩定的是3的版本bootstrap

一、下載方式：api

打開網址 http:// http://v3.bootcss.com/ 點擊下載

而後編寫HTML時候引用

二、地址引用：

使用 BootCDN 提供的免費 CDN

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可選的 Bootstrap 主題文件（通常不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 引入JQuery(必須在Bootsrap JS以前引入)） -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

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

4、快速入門

一、Bootstrap中的排版

（1）、標題

標題：（h1~h6/.h1~.h6）

副標題：(samll)

以下：

<h1>Hello, world!<small>副標題</small></h1>
      <h2>Hello, world!</h2>
      <h3>Hello, world!</h3>
      <h4>Hello, world!</h4>
      <h5>Hello, world!</h5>
      <h6>Hello, world!</h6>
      <span class="h1">Hello, world!</span>
      <span class="h2">Hello, world!</span>
      <span class="h3">Hello, world!</span>
      <span class="h4">Hello, world!</span>
      <span class="h5">Hello, world!</span>
      <span class="h6">Hello, world!</span>

顯示效果：

（2）、對齊

<p class="text-left">左對齊</p>     <!-- 左對齊 -->
   <p class="text-center">居中對齊</p> <!-- 右對齊 -->
   <p class="text-right">右對齊</p>    <!-- 居中對齊 -->

顯示效果：

（3）、大小寫轉換

<p class="text-lowercase">HELLO</p>           <!-- 轉換大寫 -->
   <p class="text-uppercase">hello</p>           <!-- 轉換小寫 -->
   <p class="text-capitalize">hello worlk！</p>  <!-- 首字母轉換成大寫 -->

顯示效果：

hello

HELLO

Hello Worlk！

（4）、表格

<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th>#</th>
				<th>Firstname</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Anna</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Debbie</td>
			</tr>
			<tr>
				<td>3</td>
				<td>John</td>
			</tr>
            <tr>
				<td>4</td>
				<td>Dlq</td>
			</tr>
		</tbody>
	</table>

顯示效果：

Bootstrap 提供了一個清晰的建立表格的佈局。下表列出了 Bootstrap 支持的一些表格元素：

標籤	描述
<table>	爲表格添加基礎樣式。
<thead>	表格標題行的容器元素（<tr>），用來標識表格列。
<tbody>	表格主體中的表格行的容器元素（<tr>）。
<tr>	一組出如今單行上的表格單元格的容器元素（<td> 或 <th>）。
<td>	默認的表格單元格。
<th>	特殊的表格單元格，用來標識列或行（取決於範圍和位置）。必須在 <thead> 內使用。
<caption>	關於表格存儲內容的描述或總結。

表格類

下表樣式可用於表格中：

類	描述	實例
.table	爲任意 <table> 添加基本樣式 (只有橫向分隔線)	嘗試一下
.table-striped	在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持)	嘗試一下
.table-bordered	爲全部表格的單元格添加邊框	嘗試一下
.table-hover	在 <tbody> 內的任一行啓用鼠標懸停狀態	嘗試一下
.table-condensed	讓表格更加緊湊	嘗試一下
聯合使用全部表格類	嘗試一下

<tr>, <th> 和 <td> 類

下表的類可用於表格的行或者單元格：

類	描述	實例
.active	將懸停的顏色應用在行或者單元格上	嘗試一下
.success	表示成功的操做	嘗試一下
.info	表示信息變化的操做	嘗試一下
.warning	表示一個警告的操做	嘗試一下
.danger	表示一個危險的操做	嘗試一下

代碼:

<table class="table">
  <caption>上下文表格佈局</caption>
  <thead>
    <tr>
      <th>產品</th>
      <th>付款日期</th>
      <th>狀態</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>產品1</td>
      <td>23/11/2013</td>
      <td>待發貨</td></tr>
    <tr class="success">
      <td>產品2</td>
      <td>10/11/2013</td>
      <td>發貨中</td></tr>
    <tr class="warning">
      <td>產品3</td>
      <td>20/10/2013</td>
      <td>待確認</td></tr>
    <tr class="danger">
      <td>產品4</td>
      <td>20/10/2013</td>
      <td>已退貨</td></tr>
  </tbody>
</table>

顯示效果：

響應式表格

經過把任意的 .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>
      <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>
    </tbody>
  </table>
</div>

嘗試一下

（5）、表單

表單佈局：

垂直表單（默認）
內聯表單：.form-inline
水平表單：.form-horizontal

垂直表單——顯示效果：垂直佈局的表單

內聯表單——顯示效果：向左對齊的，標籤是並排的

水平表單——顯示效果：水平佈局的表單

支持的表單控件：

Bootstrap 支持最多見的表單控件，主要是 input、textarea、checkbox、radio 和 select。

輸入框（text）：

<form role="form">
  <div class="form-group">
    <label for="name">標籤</label>
    <input type="text" class="form-control" placeholder="文本輸入">
  </div>
 </form>

顯示效果：

文本框（Textarea）：

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

顯示效果：

複選框（Checkbox）和單選框（Radio）：

<!-- 複選框 -->
<div class="checkbox">
	<label><input type="checkbox" value="">選項 1</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>
<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="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 選項 1
	</label>
	<label class="checkbox-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 選項 2
	</label>
</div>

顯示效果：

下拉選擇框（Select）：

<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>
		<select multiple class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>

顯示效果：

靜態控件：

當您須要在一個水平表單內的表單標籤後放置純文本時，請在 <p> 上使用 .form-control-static

<div class="form-group">
		<label class="col-sm-2 control-label">帳號</label>
		<div class="col-sm-10">
			<p class="form-control-static">example</p>
		</div>
	</div>
	<div class="form-group">
		<label for="inputPassword" class="col-sm-2 control-label">密碼</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword" 
				   placeholder="請輸入密碼">
		</div>
	</div>

顯示效果：

禁用的輸入框input：

若是您想要禁用一個輸入框 input，只須要簡單地添加 disabled 屬性，這不只會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。

<div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" placeholder="禁止輸入" disabled>
    </div>
  </div>

顯示效果：

禁用的字段集 fieldset

對 <fieldset> 添加 disabled 屬性來禁用 <fieldset> 內的全部控件。

顯示效果：

<fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單</label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>禁止選擇</option>
        </select>
      </div>
    </div>
  </fieldset>

驗證狀態

Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只須要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）便可使用驗證狀態。

<div class="form-group has-success">
		<label class="col-sm-2 control-label" for="inputSuccess">
			輸入成功
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputSuccess">
		</div>
	</div>
	<div class="form-group has-warning">
		<label class="col-sm-2 control-label" for="inputWarning">
			輸入警告
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputWarning">
		</div>
	</div>
	<div class="form-group has-error">
		<label class="col-sm-2 control-label" for="inputError">
			輸入錯誤
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputError">
		</div>
	</div>

顯示效果：

表單控件大小

一、input-lg:大

二、(默認)

三、input-sm:小

輸入框：

<div class="form-group">
		<input class="form-control input-lg" type="text" placeholder=".input-lg">
	</div>
	<div class="form-group">
		<input class="form-control" type="text" placeholder="默認輸入">
	</div>
	<div class="form-group">
		<input class="form-control input-sm" type="text" placeholder=".input-sm">
	</div>

顯示效果：

選擇框：

<div class="form-group">
		<select class="form-control input-lg">
			<option value="">.input-lg</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control">
			<option value="">默認選擇</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control input-sm">
			<option value="">.input-sm</option>
		</select>
	</div>

顯示效果：

設置大小：

<div class="row">
		<div class="col-lg-2">
			<input type="text" class="form-control" placeholder=".col-lg-2">
		</div>
		<div class="col-lg-3">
			<input type="text" class="form-control" placeholder=".col-lg-3">
		</div>
		<div class="col-lg-4">
			<input type="text" class="form-control" placeholder=".col-lg-4">
		</div>
	</div>

顯示效果：

表單幫助文檔

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

（6）、按鈕

一、按鈕的樣式

帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認外觀。

可是 Bootstrap 提供了一些選項來定義按鈕的樣式，具體以下表所示：

類	描述
.btn	爲按鈕添加基本樣式
.btn-default	默認/標準按鈕
.btn-primary	原始按鈕樣式（未被操做）
.btn-success	表示成功的動做
.btn-info	該樣式可用於要彈出信息的按鈕
.btn-warning	表示須要謹慎操做的按鈕
.btn-danger	表示一個危險動做的按鈕操做
.btn-link	讓按鈕看起來像個連接 (仍然保留按鈕行爲)
.btn-lg	製做一個大按鈕
.btn-sm	製做一個小按鈕
.btn-xs	製做一個超小按鈕
.btn-block	塊級按鈕(拉伸至父元素100%的寬度)
.active	按鈕被點擊
.disabled	禁用按鈕

<!-- 標準的按鈕 -->
<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>

顯示效果：

二、按鈕的大小

Class	描述
.btn-lg	這會讓按鈕看起來比較大。
.btn-sm	這會讓按鈕看起來比較小。
.btn-xs	這會讓按鈕看起來特別小。
.btn-block	這會建立塊級的按鈕，會橫跨父元素的所有寬度。

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

顯示效果：

三、按鈕狀態

一、激活狀態：

按鈕在激活時將呈現爲被按壓的外觀（深色的背景、深色的邊框、陰影）。

下表列出了讓按鈕元素和錨元素呈激活狀態的 class：

元素	Class
按鈕元素	添加 .active class 來顯示它是激活的。
錨元素	添加 .active class 到 <a> 按鈕來顯示它是激活的。

按鈕激活狀態：

<p>
	<button type="button" class="btn btn-default btn-lg ">默認按鈕</button>
   	<button type="button" class="btn btn-default btn-lg active">激活按鈕</button>
</p>
<p>
   	<button type="button" class="btn btn-primary btn-lg ">原始按鈕</button>
   	<button type="button" class="btn btn-primary btn-lg active">激活的原始按鈕</button>

</p>
<p>
	<a class="btn btn-default active" href="">鏈接</a>
</p>

顯示效果：

二、禁用狀態：

當您禁用一個按鈕時，它的顏色會變淡 50%，並失去漸變。

下表列出了讓按鈕元素和錨元素呈禁用狀態的 class：

元素	Class
按鈕元素	添加 disabled 屬性到 <button> 按鈕。
錨元素	添加 disabled class 到 <a> 按鈕。

<p>
   <button type="button" class="btn btn-default btn-lg">默認按鈕</button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按鈕</button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">原始按鈕</button>
   <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按鈕</button>
</p>
<p>
   <a href="#" class="btn btn-default btn-lg" role="button">連接</a>
   <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用連接</a>
</p>
<p>
   <a href="#" class="btn btn-primary btn-lg" role="button">原始連接</a>
   <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始連接</a>
</p>

顯示效果：

三、按鈕標籤

您能夠在 <a>、<button> 或 <input> 元素上使用按鈕 class。

可是建議您在 <button> 元素上使用按鈕 class，避免跨瀏覽器的不一致性問題。

<!-- a標籤 -->
<a class="btn btn-default" href="#" role="button">連接</a>
<!-- button標籤 -->
<button class="btn btn-default" type="submit">按鈕</button>
<!-- input標籤 -->
<input class="btn btn-default" type="button" value="輸入">
<input class="btn btn-default" type="submit" value="提交">

顯示效果：

（7）、圖片

一、樣式

Bootstrap 提供了三個可對圖片應用簡單樣式的 class：

類	描述
.img-rounded	爲圖片添加圓角 (IE8 不支持)
.img-circle	將圖片變爲圓形 (IE8 不支持)
.img-thumbnail	縮略圖功能
.img-responsive	圖片響應式 (將很好地擴展到父元素)

<img src="/1.png" class="img-rounded">
<img src="/2.png" class="img-circle">
<img src="/3.png" class="img-thumbnail">

顯示效果：

二、響應式圖片

<img src="test.jpg" class="img-responsive" alt="測試圖片" width="304" height="236">

效果本身測試

（8）、Bootstrap 輔助類

Bootstrap 中的一些輔助類可能常常用到。

文本

如下不一樣的類展現了不一樣的文本顏色。若是文本是個連接鼠標移動到文本上會變暗：

類	描述	實例
.text-muted	"text-muted" 類的文本樣式	嘗試一下
.text-primary	"text-primary" 類的文本樣式	嘗試一下
.text-success	"text-success" 類的文本樣式	嘗試一下
.text-info	"text-info" 類的文本樣式	嘗試一下
.text-warning	"text-warning" 類的文本樣式	嘗試一下
.text-danger	"text-danger" 類的文本樣式	嘗試一下

背景

如下不一樣的類展現了不一樣的背景顏色。若是文本是個連接鼠標移動到文本上會變暗：

類	描述	實例
.bg-primary	表格單元格使用了 "bg-primary" 類	嘗試一下
.bg-success	表格單元格使用了 "bg-success" 類	嘗試一下
.bg-info	表格單元格使用了 "bg-info" 類	嘗試一下
.bg-warning	表格單元格使用了 "bg-warning" 類	嘗試一下
.bg-danger	表格單元格使用了 "bg-danger" 類	嘗試一下

其餘

類	描述	實例
.pull-left	元素浮動到左邊	嘗試一下
.pull-right	元素浮動到右邊	嘗試一下
.center-block	設置元素爲 display:block 並居中顯示	嘗試一下
.clearfix	清除浮動	嘗試一下
.show	強制元素顯示	嘗試一下
.hidden	強制元素隱藏	嘗試一下
.sr-only	除了屏幕閱讀器外，其餘設備上隱藏元素	嘗試一下
.sr-only-focusable	與 .sr-only 類結合使用，在元素獲取焦點時顯示(如：鍵盤操做的用戶)	嘗試一下
.text-hide	將頁面元素所包含的文本內容替換爲背景圖	嘗試一下
.close	顯示關閉按鈕	嘗試一下
.caret	顯示下拉式功能	嘗試一下

（8）、Bootstrap 響應式實用工具

Bootstrap 提供了一些輔助類，以便更快地實現對移動設備友好的開發。

這些能夠經過媒體查詢結合大型、小型和中型設備，實現內容對設備的顯示和隱藏。

須要謹慎使用這些工具，避免在同一個站點建立徹底不一樣的版本。

響應式實用工具目前只適用於塊和表切換。

	超小屏幕手機 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面 (≥992px)	大屏幕桌面 (≥1200px)
.visible-xs-*	可見	隱藏	隱藏	隱藏
.visible-sm-*	隱藏	可見	隱藏	隱藏
.visible-md-*	隱藏	隱藏	可見	隱藏
.visible-lg-*	隱藏	隱藏	隱藏	可見
.hidden-xs	隱藏	可見	可見	可見
.hidden-sm	可見	隱藏	可見	可見
.hidden-md	可見	可見	隱藏	可見
.hidden-lg	可見	可見	可見	隱藏

從 v3.2.0 版本起，形如 .visible-*-* 的類針對每種屏幕大小都有了三種變體，每一個針對 CSS 中不一樣的 display 屬性，列表以下：

類組	CSS display
.visible-*-block	display: block;
.visible-*-inline	display: inline;
.visible-*-inline-block	display: inline-block;

所以，以超小屏幕（xs）爲例，可用的 .visible-*-* 類是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 類也同時存在。可是從 v3.2.0 版本開始再也不建議使用。除了 <table> 相關的元素的特殊狀況外，它們與 .visible-*-block 大致相同。

打印類

下表列出了打印類。使用這些切換打印內容。

class	瀏覽器	打印機
.visible-print-block .visible-print-inline .visible-print-inline-block	隱藏	可見
.hidden-print	可見	隱藏

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。