Bootstrap教學《Bootstrap自訂欄位》將版面分割成五等分

  Bootstrap是目前最常被使用到的自適應框架,除了是由Twiter所研發的外,再來就是相當的簡單好用,且該有的應有盡有,特別是它的網格,設計相當簡易,完全不用寫任何的CSS碼,只需透過HTML的標示,就能快速的將版面,分割成3欄、4欄、6欄....等,有效的縮短網頁開發時間,這也是梅干用過這麼多套的框架中,設計的最為理想與好上手的,但那天正好有位同學問到,怎麼分割成5欄,讓梅干當場楞了一下,預設似乎是沒辦法的,因為總共才12欄,所以這時就只能自行客制化,這也是Bootstrap最好用的地方,不足時都可自行再客制,至於要怎麼將版面分割成5欄呢?有需要的朋友,現在也一塊來看看吧!

放在<head>.....</head>之間:
/* 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;
    }
}


放在<body>.....</body>之間:
當要使用時,只要加入col-lg-1-5、col-md-1-5、col-sm-1-5,畫面就會分割成5等分了。
<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>

[範例預覽] [範例下載]

相關文章

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 有位同學問到,怎麼分割成5欄,<=那個同學就是我,老師-你還記得這件事耶,那我本人不來回應怎麼可以,不過老師你應該更驚訝,怎一發文這個學生就來回應。
    我很好學辣…ㄎㄎㄎ
    我現在在學Egret引擎,原本當時在學App Inventor2後來覺得很多效果作不到就暫時放棄,
    Egret引擎..幹嘛用的?答:寫遊戲的,寫出來的東西可以在 PC的瀏覽器上,Android手機和iOS上執行
    Egret引擎寫出的遊戲可以到什麼程度?去他官網看就知道了 http://www.egret-labs.org/ 目前有6個遊戲演示
    Egret引擎會取代FLASH 有人要跟我一起去學嗎?目前全台灣再學Egret引擎的僅我一人,學習路非常孤單,看完介紹後如果你以前是很會使用FLASH的高手,你學這個一定比我學的快,只要大約1個月內,其實學這個是未免以後FLASH被徹底淘汰的備案-有想學的人加我QQ:1307891513吧讓我們學習路上不孤單。

    回應:
    記住你們的需求是梅干的責任呀!!至於Egret引擎,梅干再找個空檔來研究看看,
    也期待你的新手遊~