bootstrap 地雷與避雷針

前言

最近在學習研究前端開發, 學了JS之後想學一學bootstrap.

經過

邊看教程邊去官網找lib臨摹, 結果一不小心沒有注意bootstrap的版本以及作者教程所用庫的版本, 踩到一顆地雷, 把我雷的裡嫩外焦.

示例

    
    
    
    



    
Hello World
   

        
span8
           

               
span1 offset3 
                   
span3
               
           
        
span3
    

bootstrap2 example

    
    
    
    



    
    
Hello World
    

         
span8
            

                
span1 offset3
                
span3
            
         
         
span3
    

bootstrap3 example

解決方法

看清楚引用包裡的版本, 多練習.

學到了什麼

bootstrap全都是12 Column分行, 從bt2轉戰bt3, 當然了, 基礎的知識還是一樣的.

推薦幾篇文章

Bootstrap2和3的区别与选择指南
BootStrap 3 完全学习路径及前景分析
2 to 3 migration guide英文
2 to 3 migration guide中文
bootstrap3: the new grid system

• custom.css, 教程裡給的, 高亮了dark, 用於加深理解nested rows.

/* General */
body {
  margin-top: 3em;
}
/* Custom */
.custom-cols {
  background-color: #ffe5e0;
  display: block;
  height: 200px;
}
[class*="span"] {
  background-color: #AAE1EE;
}
.dark {
  background-color: #2ab4d5;
}