Bootstrap技巧小集合

輕裝上陣用Bootstrap框架，

第一步：引入bootstrap樣式，bootstrap.css

第二步：引入bootstrap字體圖標：

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

這裏是採用的 fontawesome的字體庫，由於此字體庫最強大最全面。採用連接遠程的方式最簡單，樣式css文件和字體圖標都會在該服務器上。咱們只管調用便可。
圖標豐富程度：
fontawesome > Glyphicons >simple-line-icon以及其餘

fontawesome圖標一覽表：    http://fontawesome.dashgame.com/
Glyphicons圖標一覽表：http://v3.bootcss.com/components/ 
simple-line-icon圖標一覽表：  http://simplelineicons.com/

第三步：引入js bootstrap.min.js，此處別忘了jquery公共庫文件。
js用於須要交互的插件，以下拉菜單，彈窗，摺疊等，不用交互的僅適用css便可。
 

Bootstrap CSS 概覽
瞭解基礎概念：http://www.runoob.com/bootstrap/bootstrap-css-overview.html  頗有必要

 

 

別樣用法：
single-testimonial-text::before {

  content: "\f032";
  font-family: fontawesome;
  left: 30px;
  position: absolute;
  top: 21px;
}

如何得到這個圖標在字體能夠的代碼？

打開該樣式表裏找便可。

這裏是採用的fontawesome字體圖標，利用before在內容前插入圖標，\f032

 

 

在一個row中，原本跨列只能12列，也就是
若是你row內，col-md-4，那麼最多並列是3列。超過3列則須要另起一個row。

若是你循環N個後，會出現下圖這個狀況：

解決辦法就是在col-md-4這些裏面的div內容元素作個 float：left；