麥子學院bootstrap入門影片的資料（課件源碼）推薦

Bootstrap是由Twitter發表一款目前最受歡迎的前端框架。 Bootstrap基於HTML、CSS、JAVASCRIPT的，它簡潔靈活，將常見的CSS佈局、常用組件和JavaScript插件進行了完整並完善的封裝，能讓沒有經驗的前端工程師和後端開發工程師都迅速掌握和使用，大幅提高開發效率，它還在某種程度上規範前端團隊編寫CSS和JavaScript的規格。總之學習Bootstrap可以讓你很輕鬆地開發出響應式的WEB專案。 《麥子學院bootstrap入門影片教學》將幫助你輕鬆入門bootstrap。

課程播放網址：http://www.php.cn/course/324.html

該老師講課風格:

教師講課生動形象，機智詼諧，妙語連珠，動人心弦。一個生動形象的比喻，猶如畫龍點睛，給學生開啟智慧之門；一種恰如其分的幽默，引來學生會心的微笑，如飲一杯甘醇的美酒，給人以回味和留戀；哲人的警句、文化的箴言不時穿插於講述中間，給人思考和警醒。

本影片中較為困難是Bootstrap柵格系統原理了：

#Bootstrap內建了一套響應式、行動裝置優先的串流閘格系統，隨著螢幕設備或視窗（viewport）尺寸的增加，系統會自動分成最多12列。

我在這裡是把Bootstrap中的柵格系統叫做佈局。它就是透過一系列的行（row）與列（column）的組合來建立頁面佈局，然後你的內容就可以放入到你創建好的佈局當中。以下就簡單介紹一下Bootstrap柵格系統的工作原理：

網格系統的實現原理非常簡單，僅僅是透過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最後結合媒體查詢，就製作出了強大的響應式網格系統。 Bootstrap框架中的網格系統就是將容器平分成12份。

使用的時候大家可以根據實際情況重新編譯LESS（或Sass）原始碼來修改12這個數值（也就是換成24或32，當然你也可以分成更多，但不建議這樣使用）。

Bootstrap內建了一套響應式、行動裝置。

1、資料行(.row)必須包含在容器（.Container）中，以便為其賦予適當的對齊方式和內距(padding)。如：

<div class="<span style="color: rgb(178, 34, 34);">container</span>">
<span style="white-space: pre;">	
</span><div class="<span style="color: rgb(178, 34, 34);">row</span>"></div>
</div>

2、在行(.row)中可以加列(.column)，但列數總和不能超過平分的總列數，例如12。如：

<div class="container">
<div class="row">
  <div class="col-md-<span style="color: rgb(178, 34, 34);">4</span>"></div>
  <div class="col-md-<span style="color: rgb(178, 34, 34);">8</span>"></div>

3、具體內容應放置在列容器（column）之內，而且只有列（column）才可以作為行容器(.row )的直接子元素

4、透過設定內距（padding）從而建立列與列之間的間距。然後透過為第一列和最後一列設定負值的外距（margin）來抵消內距(padding)的影響

以上是麥子學院bootstrap入門影片的資料（課件源碼）推薦的詳細內容。更多資訊請關注PHP中文網其他相關文章！