FCC學習記錄(二)—— Responsive Design with Bootsstrap
1.Bootstrap的基本了解:
Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。——引用自360百科
Bootstrap將通過調整HTML元素大小來確定屏幕的寬度和響應,因此名稱響應式設計(Responsive Design)。
代碼添加到HTML頂部來將Bootstrap添加到任何應用程序:<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
Bootstrap使用響應式網格系統,可以輕松地將元素放入行中並指定每個元素的相對寬度。下面是Bootstrap的12列網格布局如何工作的圖:
通過 .row表示行 和 .col-xs-* 這種表示寬度的列快速創建柵格布局:
2.Fluid layout
流布局是一種適應屏幕的做法。即不固定塊的寬度,而是采用百分比作為單位來確定每一塊的寬度。
開始,我們應該將所有的HTML嵌套在一個div元素中,並使用類container-fluid。
3. 圖片:
類img-responsive img-responsive是圖片響應式的意思,在Bootstrap框架中,有一個.img-responsive的CSS樣式。應用這個樣式以後,圖片就會變成響應式圖片
4.標題
類text-center 實現塊元素居中顯示
類text-primary
5.按鈕
類btn Bootstrap自己的按鈕元素樣式,通常,您的btn類的按鈕元素與其包含的文本一樣寬。
類btn-block 按鈕將伸展到填充您的頁面的整個水平空間,其後的任何元素將流入塊下方的“新行”。
類btn-primary 是您在應用程序中使用的主要顏色。 突出顯示您希望用戶采取的操作。
類btn-info 用於提醒用戶可以采取的可選操作。
類btn-danger 用於通知用戶按鈕執行破壞性操作,例如刪除。
6.圖標:
Font Awesome是一個方便的圖標庫。 這些圖標是矢量圖形,以.svg文件格式存儲。 這些圖標就像字體一樣被處理。 您可以使用像素指定其大小,並且它們將假定其父HTML元素的字體大小。
i元素最初用於制作其他元素斜體,但現在通常用於圖標。 您將Font Awesome類添加到i元素以將其轉換為圖標,例如:
7.其他:
<span> 標簽被用來組合文檔中的行內元素。前後不換行,如下
<p>Things cats <span class="text-danger">love:</span></p>
8.Bootstrap練習
Bootstrap有一個名為well的類,可以為您的列創建一個視覺深度。
FCC學習記錄(二)—— Responsive Design with Bootsstrap