♣梅問題‧教學網【Minwt】♣
|
《Bootstrap自訂化》將版面分割成五等分
Posted: 03 Nov 2014 04:00 PM PST
Bootstrap是目前最常被使用到的自適應框架，除了是由Twiter所研發的外，再來就是相當的簡單好用，且該有的應有盡有，特別是它的網格，設計相當簡易，完全不用寫任何的CSS碼，只需透過HTML的標示，就能快速的將版面，分割成3欄、4欄、6欄....等，有效的縮短網頁開發時間，這也是梅干用過這麼多套的框架中，設計的最為理想與好上手的，但那天正好有位同學問到，怎麼分割成5欄，讓梅干當場楞了一下，預設似乎是沒辦法的，因為總共才12欄，所以這時就只能自行客制化，這也是Bootstrap最好用的地方，不足時都可自行再客制，至於要怎麼將版面分割成5欄呢?有需要的朋友，現在也一塊來看看吧!
放在<head>.....</head>之間：
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <style type="text/css">
/* define bootstrap 5 columns */
.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-1-5 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-1-5 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-1-5 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-1-5 {
width: 20%;
float: left;
}
}
</style> |
放在<body>.....</body>之間：
當要使用時，只要加入col-lg-1-5、col-md-1-5、col-sm-1-5，畫面就會分割成5等分了。
| 1
2
3
4
5
6
7
| <div class="row">
<div class="col-md-1-5">1</div>
<div class="col-md-1-5">2</div>
<div class="col-md-1-5">3</div>
<div class="col-md-1-5">4</div>
<div class="col-md-1-5">5</div>
</div> |
[範例預覽] [範例下載] |
knoledge 發表在 痞客邦 留言(0) 人氣()
留言列表
