Bootstrap & Font Awesome 學習筆記

學習網站：http://bootstrap.ninghao.net/index.html

　　　　　https://www.freecodecamp.cn

　　　　　http://www.runoob.com/bootstrap/bootstrap-tutorial.html

 

Bootstrap

爲快速簡單的實施 Web 開發準備的前端架構。

 

Bootstrap將會根據你的屏幕的大小來調整HTML元素的大小 —— 強調 響應式設計的概念。

經過響應式設計，你無需再爲你的網站設計一個手機版的。它在任何尺寸的屏幕上看起來都會不錯。

你僅須要經過添加下列代碼到你的HTML開頭來將Bootstrap添加到任意應用中：

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

 

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

 

圖片：

給圖片添加 img-responsive class屬性。這樣圖片的寬度就能完美地適配你的頁面的寬度了。

 

文本：

text-center

text-primary

text-danger class 使文字變成紅色。

 

按鈕：

btn

btn-block

深藍色btn-primary是你的應用的主要顏色，被用在那些用戶主要採起的操做上。

淺藍色 btn-info 被用在那些用戶可能會採起的操做上

紅色btn-danger被用來提醒用戶該操做具備「破壞性」

 

 

Bootstrap 使用一種響應式網格佈局——可輕鬆實現將多個元素放入一行並指定各個元素的相對寬度的需求。

 

 Bootstraps 的12列網格佈局是如何起做用的：

在這張圖表中，class屬性 col-md-* 正被使用。在這裏，md 表示 medium (中等的)，* 表明一個數字，它指定了這個元素所佔的列寬。

經過此圖表的屬性設置可知，在中等大小的屏幕上(例如筆記本電腦)，元素的列寬被指定了。

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

 

例：

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

 

 

Font Awesome

學習網站：http://fontawesome.io/      http://fontawesome.io/icons/

是一個很是方便的圖標庫。這些圖標都是矢量圖形，被保存在 .svg 的文件格式中。

這些圖標就和字體同樣，你能夠經過像素單位指定它們的大小，它們將會繼承其父HTML元素的字體大小。

你能夠將 Font Awesome 圖標庫增添至任何一個應用中，方法很簡單，只須要在你的 HTML 頭部增長下列代碼便可：

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

 

i 元素起初通常是讓其它元素有斜體(italic)的功能，不過如今通常用來指代圖標。

你能夠將 Font Awesome 中的 class 屬性添加到 i 元素中，把它變成一個圖標，好比：

<i class="fa fa-info-circle"></i>

例： 

<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>