電子發(fā)燒友App
我們可以發(fā)現(xiàn)，每行的數(shù)字全部相加，最終都等于剛剛我讓大家記住的12，可能大家還是不清楚，我們下面用一個例子來會說明：
如果我現(xiàn)在需要在頁面上左右分別顯示兩個面板，面板上面顯示相應(yīng)的表格數(shù)據(jù)，且左側(cè)列表占總寬度的3分之2，右側(cè)的面板僅占3分之1，OK，下面我們來看看怎么做。
我們剛剛已經(jīng)創(chuàng)建好了一個基本的頁面布局，頁面上顯示了“你好，世界！”，現(xiàn)在我們在這個框架上面接著寫：
在body中，我們刪除剛剛的“你好，世界！”，新建兩個div，如下：
?。踙tml］ view plain copy print？
《div class=“col-md-8”》《/div》
《div class=“col-md-4”》《/div》
由于左側(cè)占用3分之2，12的3分之2為8，所以上面一個div設(shè)置為8，剩下的一個設(shè)為4，好了，第一步完成了。
下面進行第二步，分別在8和4里面建立兩個面板，在bootstrap官網(wǎng)找到面板，復(fù)制代碼如下：
?。踙tml］ view plain copy print？
《div class=“panel panel-default”》
《div class=“panel-body”》
Basic panel example
《/div》
《/div》
將這段代碼分別粘貼到兩個div下，最終代碼如下：
?。踙tml］ view plain copy print？
《pre name=“code” class=“html”》 《div class=“col-md-8”》
《div class=“panel panel-default”》
《div class=“panel-body”》
Basic panel example
《/div》
《/div》
《/div》
《div class=“col-md-4”》
《div class=“panel panel-default”》
《div class=“panel-body”》
Basic panel example
《/div》
《/div》
《/div》
這時候頁面顯示效果如下：
我們可以看到左側(cè)的panel占據(jù)了頁面的3分之2，右側(cè)的僅為3分之1，第二步也完成了。
第三步，我們來創(chuàng)建表格，在bootstrap官網(wǎng)找到表格的代碼：
?。踙tml］ view plain copy print？
《table class=“table”》
《caption》Optional table caption.《/caption》
《thead》
《tr》
《th》#《/th》
《th》First Name《/th》
《th》Last Name《/th》
《th》Username《/th》
《/tr》
《/thead》
《tbody》
《tr》
《th scope=“row”》1《/th》
《td》Mark《/td》
《td》Otto《/td》
《td》@mdo《/td》
《/tr》
《tr》
《th scope=“row”》2《/th》
《td》Jacob《/td》
《td》Thornton《/td》
《td》@fat《/td》
《/tr》
《tr》
《th scope=“row”》3《/th》
《td》Larry《/td》
《td》the Bird《/td》
《td》@twitter《/td》
《/tr》
《/tbody》
《/table》
工商網(wǎng)監(jiān)
評論