最近寫bootstrap少了,老是忘記,所以決定每天從基礎開始一點點敲敲,bootstrap很好學,看着官網的API都敲一遍就會了
一下都是我的一下體會什麼的,希望可以幫到大家~~
今天敲了敲柵格,柵格只要搞清楚柵格把屏幕分成12個分區,有xm,sm,md,lg四大屏幕尺寸,再敲一敲就可以掌握
首先先看一下柵格如何分爲12個區的,我的樣式比官網的醜點- -~~還有一點官網特意強調了,我們使用的row行必須包裹在container和container-fluid下,區別一會看圖講解
<div class="container">
<div class="row">
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8 row_style">.col-md-8</div>
<div class="col-md-4 row_style">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 row_style">.col-md-4</div>
<div class="col-md-4 row_style">.col-md-4</div>
<div class="col-md-4 row_style">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6 row_style">.col-md-6</div>
<div class="col-md-6 row_style">.col-md-6</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
<div class="col-md-1 row_style">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8 row_style">.col-md-8</div>
<div class="col-md-4 row_style">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 row_style">.col-md-4</div>
<div class="col-md-4 row_style">.col-md-4</div>
<div class="col-md-4 row_style">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6 row_style">.col-md-6</div>
<div class="col-md-6 row_style">.col-md-6</div>
</div>
</div>
首先可以看出,每行都被分成12個分區,其次這兩份代碼唯一的區別就是外部容器一個是container,一個是container-fluid,第一個是固定寬度,居中在網頁中間,第二個是百分比寬度,寬度爲100%,根據情況我們可以選擇不同的容器。。
下一個例子是柵格的平移。也很簡單
直接上代碼
<div class="row">
<div class="col-md-4 row_style">.col-md-4</div>
<div class="col-md-4 col-md-offset-4 row_style">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3 row_style">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3 row_style">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 row_style">.col-md-6 .col-md-offset-3</div>
</div>
我們可以計算一下第一行佔據了多少個區4+4+4=12,正好佔滿一行,記住一點就是,無論何時都分爲12個,無論你平移還是嵌套,嵌套下面說。
下面說的是嵌套,一句話記住12個區,爲什麼呢,結合圖和代碼看得更清楚
<div class="container">
<div class="row">
<div class="col-md-8 row_style">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
<div class="col-md-4 row_style">
<div class="col-md-8">col-md-8</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
第一層我分爲了8+4爲12 是一整行,而他們的嵌套我分爲了6+6=12和8+4=12,也就是說嵌套裏面也分爲了12個區。。所以說無論何時都是12個區
上面有一個row_style的樣式是方便看得更清楚
代碼如下,用的方法比較笨- -
.row_style{
background-color: #ccc;
border: 1px solid #000;
margin-top:10px;
}