前言
我感覺自己的眼界沒有打開，關注的東西前前后后都是那么幾樣，誠然不精一門何以精前端，但是對前端新技術的關注還是需要的，就拿我們今天要說到的。
bootstrap，說實話，知道的或者說用過的人肯定不多，認為自己入門了但是沒聽過的bootstrap朋友可以留個言，我們來統計一下，若是人數眾多的話，我們應該欣慰國內前端的專注原生或者感嘆國內朋友的閉塞呢？
扯遠了，我也是最近才接觸到這塊，也不說令人汗顏之內的話，不懂學就完了，我不懂的可多了，這里就來簡單看看吧。
什么是bootstrap
bootstrap是一套現成的CSS樣式集合（做得還是很友好的）。是兩個推特的員工干出來的。。。
他內置的樣式很漂亮，而且很多。給人一種簡約而不簡單的感覺，而且經過twitter成千上億的使用，可見其強大。
bootstrap特別適合那種沒有設計師的團隊（甚至說沒有前端的團隊），可以快速的出一個網頁（我原來一個搞信息安全的同學非常鄙視我，我說系統，他非要說我干的是網頁，我說網站他也說網頁，那就網頁吧）。
因為bootstrap是基於jquery的，所以又有好事者給他加了很多插件，所以他變得很火了。
bootstrap是基於Less的CSS預處理技術，於是我們可能也不知道LESS呢：
Less CSS預處理技術
LESS 是一個開源的樣式語言，受到 Sass 的影響。
嚴格來說，LESS 是一個嵌套的元語言，符合語法規范的 CSS 語句也是符合規范的 Less 代碼。
來個簡單的例子：
/* LESS*/ @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* 生成的 CSS */ #header { color: #4D926F; } h2 { color: #4D926F; }
再來一個例子：
/* LESS*/ .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } /* 生成的 CSS */ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
他這樣對CSS3比較友好呢，可以少干很多事情的。
完了他還有點模塊化的東西：
/*LESS*/ #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } /* 生成的 CSS */ #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; }
他讓我們的代碼看上去更加清晰了！是好是壞我這里還看不到，因為我也不熟悉呢。但是我認為若是效率上沒問題的話，沒准還真能用呢！至於他的須要編譯。無論是放在客戶端還是服務器端，都是一種額外的花銷所以。。。好了，我們回歸正題吧
使用與否？
人是一個排外的生物，程序員特別明顯！我也很明顯，所以我其實是抱着一種不太願意使用的態度在學習的。。至少我不是很願意用於我的項目，至少不願意用於我的第一個項目。
因為，他其實已經干了很多事情了，事實上可以減少很多前端的工作，但是有一個問題就是，一來便使用的話！
個人覺得：第一個項目便使用的話，不利於前端團隊的發展！
因為若是一個好的產品的話，在長達半年的過程中，前端團隊會形成許多自己的東西:
1 設計的風格
2 CSS的風格，很多的樣式（下拉菜單、導航、按鈕......）
3 jquery插件
但是一做項目就使用了的話，以后肯定會繼續推下去，我不知道會不會影響前端發展，我不知道會不會破壞原有的團隊風格。
就如一來就使用jquery和使用了原生js一兩年的人一樣，有沒有問題我這里說不好啦，我也才剛入門，這里就不討論了，繼續我們的話題。
初始化文件結構
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> 7 <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> 8 9 </head> 10 <body> 11 12 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 13 <script src="js/bootstrap.js" type="text/javascript"></script> 14 <script type="text/javascript"> 15 $(document).ready(function () { 16 17 18 }); 19 20 </script> 21 </body> 22 </html>
這樣我們便可以使用bootstrap開發我們的網站啦！
基本樣式
我這里就很簡單的試試吧，先來個兩列布局了，因為我們后面會依賴他出一個實例.
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> 7 <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> 8 <style type="text/css"> 9 .main { background-color: #BBD8E9; } 10 .aside { background-color: #DCEAF4; } 11 </style> 12 </head> 13 <body> 14 <div class="container-fluid"> 15 <div class="row-fluid"> 16 <div class="span2 main"> 17 <!--Sidebar content--> 18 dddddd 19 </div> 20 <div class="span10 aside"> 21 <!--Body content--> 22 </div> 23 </div> 24 </div> 25 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 26 <script src="js/bootstrap.js" type="text/javascript"></script> 27 <script type="text/javascript"> 28 $(document).ready(function () { 29 30 31 }); 32 33 </script> 34 </body> 35 </html>
我們看到，我們若是要以這個布局實現我們的博客頁，估計還要改一點東西呢。
PS：我這里有個疑惑，我們布局的時候重要的要放到前面，但是使用這個柵格系統后，反而讓我感覺有點不好控制了呢。。新手、新手
一些樣式：
PS：其實官網的東西非常詳細了，大家自己去看吧，我都快成了抄襲啦
實戰演練·我的博客頁
光說不練假把式，搞了這么多，我們就來試試，我們能不能使用他做出我們的博客頁吧。我的博客頁是左右布局的，於是我來操作，因為他那個布局我沒搞透，我們先來看看導航。
導航
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> 7 <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> 8 <style type="text/css"> 9 .mystats { float: right; line-height: 20px; color: #555555; padding: 10px 5px; } 10 11 .main { background-color: #BBD8E9; } 12 .aside { background-color: #DCEAF4; } 13 </style> 14 </head> 15 <body> 16 <div class="header"> 17 <div class="navbar"> 18 <div class="navbar-inner"> 19 <ul class="nav "> 20 <li><a href="#">博客園</a> </li> 21 <li class="active"><a href="#">首頁</a></li> 22 <li><a href="#">博問</a></li> 23 <li><a href="#">閃存</a></li> 24 <li><a href="#">新隨筆</a></li> 25 <li><a href="#">聯系</a></li> 26 <li><a href="#">訂閱</a></li> 27 <li><a href="#">管理</a></li> 28 </ul> 29 <div class="mystats"> 30 <!--done--> 31 隨筆-64 評論-844 文章-0 trackbacks-0 32 </div> 33 </div> 34 </div> 35 </div> 36 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 37 <script src="js/bootstrap.js" type="text/javascript"></script> 38 <script type="text/javascript"> 39 $(document).ready(function () { 40 41 42 }); 43 44 </script> 45 </body> 46 </html>
說實話，我感覺有點不對！應該是我沒有用好吧，沒有按照我想象的方式排列，於是我們現在做一點改變，看看他的css代碼。
那撒，他原來的代碼洋洋灑灑幾千行，我這里還是自己改下吧：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .mystats { float: right; line-height: 20px; color: #555555; padding: 10px 5px; } #btn-navbar { display: none; } .main { background-color: #BBD8E9; } .aside { background-color: #DCEAF4; } @media (min-width: 590px) and (max-width: 838px) { .navbar .nav { float: none; } } @media (min-width: 1px) and (max-width: 590px) { #btn-navbar { display: block; float: none; width: 100%; margin: 0; } .navbar-inner { padding: 0; min-height: 0; } .mystats { display: none; } .navbar-inner .nav { float: none; margin: 0; display: none; } .open .nav { display: block; } .navbar .nav > li { float: none; } } </style> </head> <body> <div class="header"> <div class="navbar"> <div class="navbar-inner"> <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" id="btn-navbar" type="button"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"> </span> </button> <ul class="nav " id="nav"> <li><a href="#">博客園</a> </li> <li class="active"><a href="#">首頁</a></li> <li><a href="#">博問</a></li> <li><a href="#">閃存</a></li> <li><a href="#">新隨筆</a></li> <li><a href="#">聯系</a></li> <li><a href="#">訂閱</a></li> <li><a href="#">管理</a></li> </ul> <div class="mystats"> <!--done--> 隨筆-64 評論-844 文章-0 trackbacks-0 </div> </div> ddfdfdffd </div> </div> <script src="js/jquery-1.7.1.js" type="text/javascript"></script> <script src="js/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var btnNavbar = $('#btn-navbar'); btnNavbar.click(function () { var el = $(this); var p = el.parent(); var nav = $('#nav'); if (p.hasClass('open')) { p.removeClass('open'); } else { p.addClass('open'); } }); }); </script> </body> </html>
我敢肯定是我的問題。。。因為這邊完全沒有按照我的套路出牌呢。。。我們簡單看看這里的彈出導航，彈開時候整個頁面會下拉，這不是我想要的，但是改為absolute后改動又太大，所以還是算了吧，暫時這樣了，我們繼續。
結語
今天我們暫時到這里吧，因為我現在對很多東西還真不了解，我再看看多學習下，下次再繼續吧。