Use Responsive Design with Bootstrap Fluid Containers

流行的響應(yīng)式框架Bootstrap

• Bootstrap將會(huì)根據(jù)你的屏幕的大小來調(diào)整HTML元素的大小 —— 強(qiáng)調(diào)響應(yīng)式設(shè)計(jì)的概念。
• 通過響應(yīng)式設(shè)計(jì)，你無需再為你的網(wǎng)站設(shè)計(jì)一個(gè)手機(jī)版的。它在任何尺寸的屏幕上看起來都會(huì)不錯(cuò)。
• 你僅需要通過添加下列代碼到你的HTML開頭來將Bootstrap添加到任意應(yīng)用中：
  <link rel="stylesheet" />

Make Images Mobile Responsive

• 通過Bootstrap，我們要做的只是給圖片添加 img-responsive class屬性。這樣圖片的寬度就能完美地適配你的頁面的寬度了。

Center Text with Bootstrap

• 可以通過居中頭部元素來使它看起來更棒。 我們所要做的只是給元素添加text-center class屬性

Create a Bootstrap Button

• Bootstrap有它自己的 button 按鈕風(fēng)格， 看起來要比默認(rèn)的按鈕好看得多。只要給button添加btn系列的class屬性

Create a Block Element Bootstrap Button

通常情況下，你的 button 元素僅與它所包含的文本一樣寬。通過使其成為塊級(jí)元素，你的按鈕將會(huì)伸展并填滿頁面整個(gè)水平空間，任何在它之下的元素都會(huì)跟著浮動(dòng)至該區(qū)塊的下一行。

行內(nèi)元素與塊級(jí)元素的區(qū)別

• 注意，這些按鈕仍然需要 btn class。

Taste the Bootstrap Button Color Rainbow

• Bootstrap自帶了一些預(yù)定義的按鈕顏色。
• 深藍(lán)色btn-primary是你的應(yīng)用的主要顏色，被用在那些用戶主要采取的操作上。

Call out Optional Actions with Button Info

• 淺藍(lán)色 btn-info 被用在那些用戶可能會(huì)采取的操作上。

Warn your Users of a Dangerous Action

• 紅色btn-danger被用來提醒用戶該操作具有“破壞性”，例如刪除一張貓的圖片。

Use the Bootstrap Grid to Put Elements Side By Side

Bootstrap 使用一種響應(yīng)式網(wǎng)格布局——可輕松實(shí)現(xiàn)將多個(gè)元素放入一行并指定各個(gè)元素的相對(duì)寬度的需求。Bootstrap 中大多數(shù)的class屬性都可以設(shè)置于 div 元素中。

Bootstraps 的12列網(wǎng)格布局是如何起作用的

• 在這張圖表中，class屬性 col-md-** 正被使用。在這里，md 表示 medium (中等的)，* *代表一個(gè)數(shù)字，它指定了這個(gè)元素所占的列寬。通過此圖表的屬性設(shè)置可知，在中等大小的屏幕上(例如筆記本電腦)，元素的列寬被指定了。
• 在我們創(chuàng)建的 Cat Photo App 中，將會(huì)使用 col-xs-** ，其中 xs 是 extra small 縮寫（應(yīng)用于較小的屏幕，比如手機(jī)屏幕），* * 是你需要填寫的數(shù)字，代表在一行中,各個(gè)元素應(yīng)該占的列寬。
• 當(dāng)div 元素設(shè)置了 class 屬性 row 之后，那幾個(gè)按鈕便可嵌入其中。

Use Spans for Inline Elements

• 可以用 span 標(biāo)簽來創(chuàng)建行內(nèi)元素。

inline 元素與 block-level 塊級(jí)元素的區(qū)別

通過使用 span 元素，你可以把幾個(gè)元素放在一起。你甚至可以用此為一個(gè)元素的不同部分指定樣式。

Create a Custom Heading

導(dǎo)航

• Bootstrap使用響應(yīng)式柵格系統(tǒng)，這使得把元素放入行內(nèi)并為每個(gè)元素指定寬度變得很容易。大部分的 Bootstrap的 class 都可以被用在 div 元素上。
• 將圖片和元素放在同一個(gè)<div class="row">元素下,再指定元素寬度應(yīng)該占用的欄數(shù)，就可以放在同一行，實(shí)現(xiàn)導(dǎo)航條了。

Add Font Awesome Icons to all of our Buttons

Font Awesome 是一個(gè)非常方便的圖標(biāo)庫。這些圖標(biāo)都是矢量圖形，被保存在 .svg 的文件格式中。這些圖標(biāo)就和字體一樣，你可以通過像素單位指定它們的大小，它們將會(huì)繼承其父HTML元素的字體大小。

你可以將 Font Awesome 圖標(biāo)庫增添至任何一個(gè)應(yīng)用中，方法很簡(jiǎn)單，只需要在你的 HTML 頭部增加下列代碼即可：

           <link rel="stylesheet" />

• i 元素起初一般是讓其它元素有斜體(italic)的功能，不過現(xiàn)在一般用來指代圖標(biāo)。你可以將 Font Awesome 中的 class 屬性添加到 i 元素中，把它變成一個(gè)圖標(biāo)，比如：
  <i class="fa fa-info-circle"></i>

Responsively Style Radio Buttons And Checkboxes

• 還可以將 Bootstrap 的 col-xs-*用在 form 元素中。這樣的話，我們的單選按鈕就可以均勻地在頁面上展開，不需要知道屏幕的分辨率有多寬。

Line up Form Elements Responsively with Bootstrap

• 把 input 元素和提交按鈕 button 放到同一行。我們將用和之前一樣的方法：通過使用擁有 row class 屬性的 div 元素和其它在它之內(nèi)的具有 col-xs-* class 屬性的 div 元素。

Create a Bootstrap Headline

• text-primary 使文本顏色為深藍(lán)色
• text-center 使文本居中顯示

House our page within a Bootstrap Container Fluid Div

• 為了確保頁面里所有的內(nèi)容都是響應(yīng)式的，將 所有元素放置于一個(gè)class屬性為 container-fluid 的 div 元素中。

Create a Bootstrap Row

                                            <div class="row"></div>

Split your Bootstrap Row

• 分欄來放置元素
  <div class="col-xs-*"></div>

Create Bootstrap Wells

• Bootstrap 有一個(gè) class 屬性叫做 well，它的作用是為設(shè)定的列創(chuàng)造出一種視覺上的深度感
  <div class="well"></div>

Apply the Default Bootstrap Button Style

• Bootstrap 還有一種屬于按鈕的 class 屬性叫做 btn-default 。
  <button class="btn btn-default"></button>

Create a Class to Target with jQuery Selectors

• 并不是每一個(gè) class 屬性都是用于 CSS 的。 有些時(shí)候我們創(chuàng)建一些 class 只是為了更方便地在jQuery中選中這些元素。
  為 button 添加 target:
  <button class="btn btn-default target"></button>