Bootstrap3.0學習第二輪(柵格系統原理)

時間 2021-08-13

標籤 css html 前端 html5 jquery bootstrap app less 編輯器 ide 欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap3.0系列導航css

1.BootStrap學習從如今開始 http://www.cnblogs.com/aehyok/p/3381651.htmlhtml

2.Bootstrap3.0學習第一輪(入門) http://www.cnblogs.com/aehyok/p/3398359.html前端

　　經過前面兩篇博文的簡單介紹，大體對於Bootstrap有了初步的瞭解。因爲本身也只是想經過Bootstrap官網來進行簡單的學習，本身可以隨便搞個不是太搓的頁面就能夠了。因此若是你是新手或許能夠來看看，對你還有那麼一點兒幫助，高手請飄過。html5

《學習第一輪》中也只是簡單的介紹瞭如何下載文件，及進行引用下載的文件，尚未真正的進入前端的設計學習中。我也看到了廣大博友們對Bootstrap3.0也具備很大的興趣，有以前就使用過的大牛，也有和我同樣正打算學習一下的盆友、小菜。至於回覆中比較多的就是：但願能有個系列，固然我也很但願本身能很好的規劃列一個系列，而後按照這個大綱進行便可。不過本人能力有限，因此只好跟隨本身的喜愛來進行學習了。jquery

　　聲明：寫做能力真是不濟，還望各位看官見諒。若有錯誤，請及時通知，本人必會在最短的時間進行更正，固然更但願能有更多的人來一塊兒學習。bootstrap

柵格系統（佈局）app

Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨着屏幕設備或視口（viewport）尺寸的增長，系統會自動分爲最多12列。less

我在這裏是把Bootstrap中的柵格系統叫作佈局。它就是經過一系列的行（row）與列（column）的組合建立頁面佈局，而後你的內容就能夠放入到你建立好的佈局當中。下面就簡單介紹一下Bootstrap柵格系統的工做原理：編輯器

行（row）必須包含在.container中，以便爲其賦予合適的排列（aligment）和內補（padding）。ide
使用行（row）在水平方向建立一組列（column）。
你的內容應當放置於列（column）內，並且，只有列（column）能夠做爲行（row）的直接子元素。
相似Predefined grid classes like .row and .col-xs-4 這些預約義的柵格class能夠用來快速建立柵格佈局。Bootstrap源碼中定義的mixin也能夠用來建立語義化的佈局。
經過設置padding從而建立列（column）之間的間隔（gutter）。而後經過爲第一和最後同樣設置負值的margin從而抵消掉padding的影響。
柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可使用三個.col-xs-4來建立。

DW6編碼實現

Okay勒，下面開始寫代碼了額。首先上一張圖看看我使用的編輯器，以前在學校學習Html+CSS的時候使用較多的工具。

而後新建一個HTML文檔，選擇類型HTML5

建立好後，另存爲與上一節的講解中js、css文件夾的同一目錄下。

layout.html就是我剛剛建立的文件。Bootstrap.html也是上一節中建立的第一個html頁面。

如今能夠將Bootstrap.html中的代碼所有Copy到layout.html頁面。

而後在body標籤下添加以下代碼

 <h1>Hello, world!</h1>
 <h2 class="page-header">區域一</h2>
 <p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
 <h2 class="page-header">區域二</h2>
 <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
 <h2 class="page-header">區域三</h2>
 <p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>

這幾個標籤你們應該都能看的明白，最基礎最簡單的。

添加完後layout.html頁面全部代碼以下

<!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <h1>Hello, world!</h1>
 <h2 class="page-header">區域一</h2>
 <p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
 <h2 class="page-header">區域二</h2>
 <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
 <h2 class="page-header">區域三</h2>
 <p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
 <script src="js/jquery-2.0.3.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 </body>
 </html>

固然效果也很簡單，我仍是把截圖放上，能夠進行對比。

優化一：能夠發現上圖的頁面效果佔滿全屏，咱們能夠經過Bootstrap 樣式類對上面的內容進行居中。

 <div class="container">
  .........以前上面添加在body標籤下的代碼</div>

效果以下

能夠發現container這個類設置了寬度，而且可讓內容顯示在頁面的中間。

優化二：將三個區域顯示在同一排，而且平均分紅三欄。

首先爲三個區域添加一個容器，可使用div，而且爲div添加一個類 <div class="row">.

而後咱們爲每一個小的區域也添加一個容器div，而且爲div添加一個類<div class="col-xs-4">

簡單代碼實現以下

 <div class="container">
 <h1>Hello, world!</h1>
 <div class="row">
 <div class="col-xs-4">
     <h2 class="page-header">區域一</h2>
     <p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
 </div>
  <div class="col-xs-4">
     <h2 class="page-header">區域二</h2>
     <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
 </div>
  <div class="col-xs-4">
     <h2 class="page-header">區域三</h2>
     <p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
     </div>
     </div>
 </div>

效果以下

的確排成一列，而後分紅三欄。再結合一下上面柵格系統的6部原理。是否是懂一點了，反正我本身懂了不少。經過一樣的方式能夠建立出比較複雜的網格佈局頁面。只須要在佈局使用的容器上面添加相應的網格佈局的類。好比說若是內容佔用6個網格，那麼就添加一個col-xs-6的類、佔用四個網格就添加一個col-xs-4的類，而後在同一排的周圍進行使用帶有row類的容器。

總結

本節主要學習的佈局（柵格系統），經過簡單的實例來理解它的工做原理。

使用過的類有:

　　1..container:用.container包裹頁面上的內容便可實現居中對齊。在不一樣的媒體查詢或值範圍內都爲container設置了max-width，用以匹配柵格系統。

2..col-xs-4:這個類經過"-"分爲三個部分，第三個部分的數字做爲一個泛指，它的範圍是1到12。就是能夠把一個區域分爲12個欄，這個要和row類聯合使用。

其實這個佈局很像HTMl中的Table佈局TR行和TD列吧。

暫時的理解就這些，代碼直接複製粘貼就能夠看效果，固然首先要把預先的css、js文件進行準備。