2017.4.7 Bootstrap響應式設計

 

1.CSS添加：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

 

2.首先，咱們須要把全部的HTML內容放在class爲container-fluid的div下。

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

3.圖片自適應：經過Bootstrap，咱們要作的只是給圖片添加 img-responsive class屬性。這樣圖片的寬度就能完美地適配你的頁面的寬度了。

 

4.咱們能夠經過居中頭部元素來使它看起來更棒。

咱們所要作的只是把text-center class屬性添加給 h2 元素。

記住：你能夠用空格分開多個class來爲同一個元素添加多個 class 屬性， 就像這樣：

<h2 class="red-text text-center">your text</h2>

 

5.Bootstrap有它本身的 button 按鈕風格， 看起來要比默認的按鈕好看得多。建立一個新的 button 元素。給它添加 btn class 屬性

 

6.一般狀況下，你的 button 元素僅與它所包含的文本同樣寬。經過使其成爲塊級元素，你的按鈕將會伸展並填滿頁面整個水平空間，任何在它之下的元素都會跟着浮動至該區塊的下一行。添加Bootstrap的 btn-block class 到你的按鈕。

 

7.深藍色btn-primary是你的應用的主要顏色，被用在那些用戶主要採起的操做上。添加Bootstrap的 btn-primary class 屬性到按鈕標籤上。

注意：這個按鈕仍然須要 btn 和 btn-block 屬性！

<button class="btn btn-block btn-primary">Like</button>

 

8.Bootstrap自帶了一些預約義的按鈕顏色。淺藍色 btn-info 被用在那些用戶可能會採起的操做上。在你的 "Like" 按鈕下面添加一個文本爲 "Info" 的塊級Bootstrap按鈕，併爲其添加 btn-info和 btn-block class屬性。

注意：這些按鈕仍然須要 btn 和 btn-blockclass屬性.

 

9.Bootstrap自帶了一些預約義的按鈕顏色。紅色btn-danger被用來提醒用戶該操做具備「破壞性」，例如刪除一張貓的圖片。

建立一個文本爲 "Delete" 的按鈕，而且給它添加 class btn-danger。

注意：這些標籤仍然須要 btn 與 btn-blockclass。

<button class="btn btn-block btn-danger">Delete</button>

 

 10.Bootstrap 使用一種響應式網格佈局——可輕鬆實現將多個元素放入一行並指定各個元素的相對寬度的需求。Bootstrap 中大多數的class屬性均可以設置於 div 元素中。

請注意，在這張圖表中，class屬性 col-md-*正被使用。在這裏，md 表示 medium (中等的)，* 表明一個數字，它指定了這個元素所佔的列寬。經過此圖表的屬性設置可知，在中等大小的屏幕上(例如筆記本電腦)，元素的列寬被指定了.

使用 col-xs-* ，其中 xs 是 extra small 縮寫（應用於較小的屏幕，好比手機屏幕），* 是你須要填寫的數字，表明在一行中,各個元素應該佔的列寬

把 Like, Info 和 Delete 三個按鈕一併放入一個 <div class="row"> 元素中；而後，其中的每個按鈕都須要各自被一個 <div class="col-xs-4"> 元素包裹

代碼：

<div class="row">
<div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>
<div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div>
<div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div>
</div>

 

11.移除 h2 元素的 red-text class 而且用 Bootstrap的 text-primary class替換之。

最後，移除第一個 img 元素的 "smaller -image" class ，替換爲 Bootstrap的 img-responsive class

 

12.你能夠用 span 標籤來建立行內元素。經過使用 span 元素，你能夠把幾個元素放在一塊兒。你甚至能夠用此爲一個元素的不一樣部分指定樣式。

<p>Things cats <span class="text-danger">love</span>:</p>

 

13.記住，Bootstrap使用響應式柵格系統，這使得把元素放入行內併爲每一個元素指定寬度變得很容易。大部分的 Bootstrap的 class 均可以被用在 div 元素上。

咱們將使用 col-xs-*， xs 意味着很是小（好比很是小的手機屏幕）， * 指定了元素寬度應該佔用的欄數

<div class="row">
<div class="col-xs-8"><h2 class="text-primary text-center">CatPhotoApp</h2></div>

<div class="col-xs-4"><a href="#"><img class="img-responsive thick-green-border" src="/images/relaxing-cat.jpg"></a></div>
</div>

 

 

14.前端設計之基本佈局代碼：

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6"></div>

<div class="col-xs-6"></div>

</div>
</div>

 

15.Bootstrap 有一個 class 屬性叫作 well，它的做用是爲設定的列創造出一種視覺上的深度感

代碼：

<div class="row">
　　<div class="col-xs-6">
　　　　<div class="well"></div>
　　</div>
　　<div class="col-xs-6">
　　　　<div class="well"></div>
　　</div>
</div>

 

16.Bootstrap 還有一種屬於按鈕的 class 屬性叫作 btn-default 。

<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>

 

17.並非每個 class 屬性都是用於 CSS 的。 有些時候咱們建立一些 class 只是爲了更方便地在jQuery中選中這些元素。

<button class="btn btn-default target"></button> <button class="btn btn-default target"></button> <button class="btn btn-default target"></button>