《Bootstrap自訂化》將版面分割成五等分:Realtime－線上遊戲排行榜2013/2014,進擊的巨人線上看,candy crush saga外掛,正妹寫真三圍

Blogtrottr

♣梅問題‧教學網【Minwt】♣

3C|設計|攝影|旅遊資訊網

《Bootstrap自訂化》將版面分割成五等分

Nov 4th 2014, 00:00, by admin

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

放在.....之間：

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

="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;
                        }
                }
>

放在.....之間：
當要使用時，只要加入col-lg-1-5、col-md-1-5、col-sm-1-5，畫面就會分割成5等分了。

1 2 3 4 5 6 7

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

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions