因為公司選擇了使用BootStrap3作為項目的前台展示框架，所以花了半天時間來學習Bootstrap, 如果你是第一次聽說，或者說以前聽說過，但沒有使用過這個框架的話，希望這篇入門實戰能夠讓你快速掌握。
什么是BootStrap?
基於HTML，CSS，JAVASCRIPT的簡潔靈活的流行前端框架及交互組件集,由Twitter的經驗豐富的工程師和設計師奉獻。說得更具體點就是基於12列的柵格布局的HTML,Javascript使用定制的jQuery插件，用LESS構建CSS等技術構建的響應式設計，跨設備，跨瀏覽器，而且最主要就是入門門檻非常低，既能用來開發簡單的小東西，也能構造更為復雜的應用。完美支持HTML5/CSS 標簽和語法，源碼托管在GitHub。
如何入手？
1，下載bootstrap,官網下載到customize components. 使用到的jquery可以使用CDN,直接至官網http://jquery.com的最下面有一段cdn的鏈接，復制下來即可，至於是使用http還是https由你自己決定。我做的示例就是直接使用的http.
2，工具和將要使用的類庫都准備好了，接下來，在notepad++中輸入html代碼，在我看來，手寫html是一種好習慣，先建出框架出來，
<!DOCTYPE html> <html> <head> <title>Bootstrap3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a href="#" class="navbar-brand">BootStrap3 Study</a> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
3, 個人從這個簡單的框架中得出的一個重要的結論就是div布局牢記，不管什么，先最好弄個div套住，然后再二層弄個div並冠以container class是最佳實踐。例如要創建一個頭部的導航菜單,先創建一個div,然后再弄個二級div叫container，第三層就是菜單內容，可以平行多個。如圖示
<!DOCTYPE html> <html> <head> <title>Bootstrap3 Study</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap_study.css" rel="stylesheet"> </head> <body> <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a class ="navbar-brand" href="#">Bootstrap3</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeadMenu" > <span class="icon-bar"/> <span class="icon-bar"/> <span class="icon-bar"/> </button> <div class="collapse navbar-collapse navHeadMenu"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">Technologies<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Java</a></li> <li><a href="#">C#</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
bootstrap.css是很語義化的一個css. 真心建議閱讀一下源代碼。
4， 接下來就建一個底部的navigator， 按照我的體驗，先弄個div與head navigator平級，然后里面再弄個container的div. 如下面這樣子。
<div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <p class="navbar-text pull-left">Create by BP</p> <a class="navbar-btn btn btn-danger pull-right" href="#">Subscribe on Tudou</a> </div> </div>
頭部的navigator用的是navbar-static-top, 頂部嘛，當然是top,所以底部使用navbar-fixed-bottom, 靠左靠右使用的語義就是拉到左邊，拉到右邊。單詞之間的空隙用的是-就可以了。
5， 其實，我上面說的有點絕對，並不能說是先弄個div，應該說弄一個有意義的div才合適，換句通俗點的話，就是弄個有class名稱的div，然后再套個container的div. 舉個例子就是我想在網頁的上面顯示一點大的字體塊，用來說明一些簡明扼要的信息，可以使用到jumbtron這個類。那么我的html就是在body的下一級加一個如下的div
<div class="container"> <div class="jumbotron"> <center> <h1>Hello, World!</h1> <p>As a best practice, we highly recommend using the element whenever possible to ensure matching cross-browser rendering.</p> <a class="btn btn-default" href="#">Watch Now!</a> <a class="btn btn-info" href="#">Tweet it!</a> </center> </div> </div>
jumbotron是有圓角定義的，如果你將其移到container那個地方的話，圓角就沒了，所以還是另套一個div 最為合適。
6，最后講一個重量級的自適應的表格布局，在做這個布局之前，牢記一點，bootstrap的布局是一個基於12格的布局。作為表格，肯定是有行row和列col的。對於語義化很的bootstrap3自然也會考慮到這些，所以，在上面5點的基礎上，可以很快得到一個代碼編寫流程：container的div下面建一個row的div，然后再在row的下面建一些col即可完成。
<div class="container"> <div class="row"> <div class="col-md-3"> 。。。。。 </div> </div> </div>
架構是這樣子，因為col列里面是占3個格的，共12格，所以col列這個div應該重復4次。
<div class="container"> <div class="row"> <div class="col-md-3"> <h3><a href = "#">$500 Gaming PC Build</a></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <a class="btn btn-default" href="#">Read More</a> </div> <div class="col-md-3"> <h3><a href = "#">$500 Gaming PC Build</a></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <a class="btn btn-default" href="#">Read More</a> </div> <div class="col-md-3"> <h3><a href = "#">$500 Gaming PC Build</a></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <a class="btn btn-default" href="#">Read More</a> </div> <div class="col-md-3"> <h3><a href = "#">$500 Gaming PC Build</a></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <a class="btn btn-default" href="#">Read More</a> </div> </div> </div>
7, modal窗體的使用，在bootstrap3里面，實現一個模式窗體是不需要寫任何js代碼的。定義一個modal fade的div,然后千萬千萬記得設一個id, 至於modal窗體的結構就是：modal-dialog->modal-content->modal-header->modal-body->modal-footer. 如果你很好奇我為什么上一句說千萬千萬記得設一個id,那么你悟了，如果有id,那么你在類似於a 標簽中就可以這樣子用<a href="#id" data-toggle="modal">然后你點擊這個鏈接時，就彈出了自定義的模式窗體了。
<div class="modal fade" id="contact"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4>Contact US</h4> </div> <div class="modal-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class="modal-footer"> <a class="btn btn-default" data-dismiss="modal">Close</a> <a class="btn btn-primary" data-dismiss="modal">OK</a> </div> </div> </div> </div> ============= invoke code like following: <li><a href="#contact" data-toggle="modal">Contact</a></li>
8, 一般的，文章不可能是像6所說的幾列顯示，一篇文章就是一頁是很符合人的閱讀習慣的，bootstrap也考慮到了這些，就定義出了一個panel類出來。當然帶圖片的話，還可以帶個featuredImg的class出來。可以定義一個結構：panel panel-default ->panel-body->page-header...
<div class="container"> <div class="row"> <div class="col-lg-9"> <div class="panel panel-default"> <div class="panel-body"> <div class="page-header"> <h3>Whatever you want <small>Posted on Oct 26th</small></h3> </div> <img class="featuredImg" src="img/Lighthouse.jpg" width="100%"/> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <h4> A heading</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> </div> </div> </div> </div>
9， 由於8中使用的是col-lg-9，剩余3列的，我們用來做SideBar的效果，使用list-group。
<div class="col-lg-3"> <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class = "list-group-item-heading">Lorem ipsum</h4> <p class = "list-group-item-text">Fusce consequat eu risus sit amet vehicula. Maecenas auctor odio ipsum. Phasellus convallis est eu cursus lacinia.</p> </a> <a href="#" class="list-group-item"> <h4 class = "list-group-item-heading">Lorem ipsum</h4> <p class = "list-group-item-text">Fusce consequat eu risus sit amet vehicula. Maecenas auctor odio ipsum. Phasellus convallis est eu cursus lacinia.</p> </a> <a href="#" class="list-group-item"> <h4 class = "list-group-item-heading">Lorem ipsum</h4> <p class = "list-group-item-text">Fusce consequat eu risus sit amet vehicula. Maecenas auctor odio ipsum. Phasellus convallis est eu cursus lacinia.</p> </a> </div> </div>
10，對modal進行一些advance, 可以在modal-content里面加個form-horizontal也是可以的。也就是將modal-header/body/footer將在form里面。
<form class="form-horizontal"> <div class="modal-header"> <h4>Contact US</h4> </div> <div class="modal-body"> <div class ="form-group"> <label for = "contact-name" class = "col-lg-2 control-label">Name:</label> <div class = "col-lg-10"> <input type = "text" class = "form-control" id = "contact-name" placeholder = "Full Name"> </div> </div> <div class = "form-group"> <label for = "contact-email" class = "col-lg-2 control-label">Email:</label> <div class = "col-lg-10"> <input type = "email" class = "form-control" id = "contact-email" placeholder = "you@example.com"> </div> </div> <div class = "form-group"> <label for = "contact-msg" class = "col-lg-2 control-label">Message:</label> <div class = "col-lg-10"> <textarea class = "form-control" rows = "8"></textarea> </div> </div> </div> <div class="modal-footer"> <a class="btn btn-default" data-dismiss="modal">Close</a> <button class="btn btn-primary" type="submit">Send</button> </div> </form>
如此上面這般，第一個自適應的網頁就可以說是完成了，有頭部菜單導航，有底部說明，有中間算是廣告的醒目標題，也有自適應的grid表格布局。