在這篇文章中，小白會跟大家探討一下網(wǎng)頁結(jié)構(gòu)規(guī)劃的柵格系統(tǒng)。你可以這么理解，每一個(gè)網(wǎng)頁其實(shí)都是被一個(gè)個(gè)方格子隔開的，所以才造就了網(wǎng)頁的有序性。如果柵格系統(tǒng)排布不到位就會導(dǎo)致網(wǎng)頁的雜亂，內(nèi)容的重疊等嚴(yán)重后果。

圖文 / 丁建雄

小白是單純?yōu)榕d趣而寫作的獨(dú)立創(chuàng)作人，如果您喜歡小白的文章，歡迎關(guān)注、交流、分享（引用請鏈接到本文）。

柵格系統(tǒng)

用戶看一個(gè)網(wǎng)頁，最先體驗(yàn)到的是什么？

是網(wǎng)站給人的整體感覺！就好比你看一個(gè)人，第一印象絕對是這個(gè)人的氣質(zhì)、氣場，而不是他的容貌細(xì)節(jié)。一個(gè)舒適的網(wǎng)頁布局會給人很好的第一印象，用戶才會有心情去繼續(xù)欣賞具體的內(nèi)容。

就原始的HTML標(biāo)準(zhǔn)而言，布局系統(tǒng)里面有很多專業(yè)的名詞，比如：padding，margin 等概念，對于剛剛接觸HTML設(shè)計(jì)的小白而言實(shí)在是有點(diǎn)苦惱，很多時(shí)候明明自己想的是這樣，可這布局卻偏偏有那么一點(diǎn)點(diǎn)偏差，怎么調(diào)都調(diào)整不過來。

后來，小白在經(jīng)過多個(gè)項(xiàng)目的鍛煉、嘗試之后。才發(fā)現(xiàn)，有時(shí)候并不是小白理解的問題，而是HTML新舊標(biāo)準(zhǔn)在不同瀏覽器之間的兼容性問題，大寫的坑??！然而還是只能笑著接受，好吧~

本篇的內(nèi)容，小白就帶你領(lǐng)略一下 Bootstrap 獨(dú)特的柵格系統(tǒng)，雖然還有欠缺的地方，但是這個(gè)柵格系統(tǒng)，小白認(rèn)為是業(yè)界相當(dāng)優(yōu)美的了。當(dāng)然了，這個(gè)柵格系統(tǒng)是基于最新的 HTML5 標(biāo)準(zhǔn)，小白在最新的網(wǎng)頁設(shè)計(jì)中還沒有發(fā)現(xiàn)大的問題。

布局容器

在 Bootstrap 中，整個(gè)頁面和柵格系統(tǒng)是需要包裹一個(gè)「 容器 」的。

容器是什么？由于我們設(shè)計(jì)的網(wǎng)頁面向的設(shè)備是多樣化的（從小屏幕的手機(jī)到超大屏幕的電腦顯示屏），在不同設(shè)備之間切換會引起網(wǎng)頁布局的顯著變化。因此，有必要使用一個(gè)「 縮放友好型 」的「 外套 」，在這個(gè)外套的包裹下，無論頁面怎么縮放，總能保持其包裹的東西成比例地變化，而使整體框架相對穩(wěn)定，這個(gè)外套就是容器。

在此我們提供了兩種容器 .container 和 .container-fluid，以下是他們的使用方式

<div class="container">
  ...
</div>

<div class="container-fluid">
  ...
</div>

兩者的區(qū)別在于：.container 適用于固定寬度（邊上有一定間距），而 .container-fluid 適用于無邊距的滿屏設(shè)計(jì)。

container vs container-fluid

柵格

柵格是由行 .row 和列 .col 共同組成的，調(diào)用格式如下

<div class="row">
  <div class="col-md-6">
  ...
  </div>
  <div class="col-md-6">
  ...
  </div>
</div>
<div class="row">
  <div class="col-md-3">
  ...
  </div>
  <div class="col-md-4">
  ...
  </div>
</div>

由于 Bootstrap 定義的柵格是實(shí)用性的，在網(wǎng)頁制作中是透明的，沒辦法明顯表現(xiàn)出來。因此，為了大家便于理解，小白這邊參考官網(wǎng)說明文件重新定義了一個(gè)CSS文件 docs.min.css，代碼如下，大家可以把它拷貝到CSS文件夾目錄下

/*!
 * Bootstrap Docs (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 * details, see http://creativecommons.org/licenses/by/3.0/.
 */body{position:relative}.table code{font-size:13px;font-weight:400}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:hover,.btn-outline-inverse:focus,.btn-outline-inverse:active{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;font-weight:500;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon-sm{width:30px;height:30px;font-size:20px;line-height:28px}.bs-docs-booticon-lg{width:144px;height:144px;font-size:108px;line-height:140px}.bs-docs-booticon-inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon-outline{background-color:transparent;border:1px solid #cdbfe3}.bs-docs-nav{margin-bottom:0;background-color:#fff;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#563d7c}.bs-docs-nav .navbar-nav>li>a:hover,.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover{color:#463265;background-color:#f9f9f9}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#563d7c}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle:hover,.bs-docs-nav .navbar-header .navbar-toggle:focus{background-color:#f9f9f9;border-color:#f9f9f9}.bs-docs-footer{padding-top:40px;padding-bottom:40px;margin-top:100px;color:#777;text-align:center;border-top:1px solid #e5e5e5}.bs-docs-footer-links{padding-left:0;margin-top:20px;color:#999}.bs-docs-footer-links li{display:inline;padding:0 2px}.bs-docs-footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-docs-footer p{margin-bottom:0}}.bs-docs-social{margin-bottom:20px;text-align:center}.bs-docs-social-buttons{display:inline-block;padding-left:0;margin-bottom:0;list-style:none}.bs-docs-social-buttons li{display:inline-block;padding:5px 8px;line-height:1}.bs-docs-social-buttons .twitter-follow-button{width:225px!important}.bs-docs-social-buttons .twitter-share-button{width:98px!important}.github-btn{overflow:hidden;border:0}.bs-docs-masthead,.bs-docs-header{position:relative;padding:30px 15px;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);background-repeat:repeat-x}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 30px}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 30px;font-size:20px;color:#fff}.bs-docs-masthead .version{margin-top:-15px;margin-bottom:30px;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:15px 30px;font-size:20px}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:80px 0}.bs-docs-masthead h1{font-size:60px}.bs-docs-masthead .lead{font-size:24px}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:30px}}.bs-docs-header{margin-bottom:40px;font-size:20px}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;line-height:1.4}.bs-docs-header .container{position:relative}@media (min-width:768px){.bs-docs-header{padding-top:60px;padding-bottom:60px;font-size:24px;text-align:left}.bs-docs-header h1{font-size:60px;line-height:1}}@media (min-width:992px){.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:20px!important;margin:30px -30px -31px!important;overflow:hidden;font-size:13px!important;line-height:16px!important;text-align:left;background:transparent!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-text,.carbonad-tag{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-text a,.carbonad-tag a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:20px auto!important;border-width:1px!important;border-radius:4px}.bs-docs-masthead .carbonad{margin:50px auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:0;right:15px;width:330px!important;padding:15px!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:40px;padding-bottom:40px;font-size:16px;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:5px;font-size:30px;font-weight:400;color:#333}.half-rule{width:100px;margin:40px auto}.bs-docs-featurette h3{margin-bottom:5px;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:20px;color:#333}.bs-docs-featurette-img:hover{color:#428bca;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:15px}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:30px}}@media (min-width:768px){.bs-docs-featurette{padding-top:100px;padding-bottom:100px}.bs-docs-featurette-title{font-size:40px}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:4px;border-bottom-left-radius:4px}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:4px;border-bottom-right-radius:4px}}.bs-examples .thumbnail{margin-bottom:10px}.bs-examples h4{margin-bottom:5px}.bs-examples p{margin-bottom:20px}@media (max-width:480px){.bs-examples{margin-right:-10px;margin-left:-10px}.bs-examples>[class^=col-]{padding-right:10px;padding-left:10px}}.bs-docs-sidebar.affix{position:static}@media (min-width:768px){.bs-docs-sidebar{padding-left:20px}}.bs-docs-sidenav{margin-top:20px;margin-bottom:20px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#999}.bs-docs-sidebar .nav>li>a:hover,.bs-docs-sidebar .nav>li>a:focus{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}.bs-docs-sidebar .nav>.active>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active:focus>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>li>a:hover,.bs-docs-sidebar .nav .nav>li>a:focus{padding-left:29px}.bs-docs-sidebar .nav .nav>.active>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active:focus>a{padding-left:28px;font-weight:500}.back-to-top,.bs-docs-theme-toggle{display:none;padding:4px 10px;margin-top:10px;margin-left:10px;font-size:12px;font-weight:500;color:#999}.back-to-top:hover,.bs-docs-theme-toggle:hover{color:#563d7c;text-decoration:none}.bs-docs-theme-toggle{margin-top:0}@media (min-width:768px){.back-to-top,.bs-docs-theme-toggle{display:block}}@media (min-width:992px){.bs-docs-sidebar .nav>.active>ul{display:block}.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:213px}.bs-docs-sidebar.affix{position:fixed;top:20px}.bs-docs-sidebar.affix-bottom{position:absolute}.bs-docs-sidebar.affix-bottom .bs-docs-sidenav,.bs-docs-sidebar.affix .bs-docs-sidenav{margin-top:0;margin-bottom:0}}@media (min-width:1200px){.bs-docs-sidebar.affix-bottom,.bs-docs-sidebar.affix{width:263px}}.bs-docs-section{margin-bottom:60px}.bs-docs-section:last-child{margin-bottom:0}h1[id]{padding-top:20px;margin-top:0}.bs-callout{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:3px}.bs-callout+.bs-callout{margin-top:-5px}.bs-callout-danger{border-left-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{border-left-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{border-left-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:60px;height:60px;margin:0 5px;border-radius:3px}@media (min-width:768px){.color-swatch{width:100px;height:100px}}.color-swatches .gray-darker{background-color:#222}.color-swatches .gray-dark{background-color:#333}.color-swatches .gray{background-color:#555}.color-swatches .gray-light{background-color:#999}.color-swatches .gray-lighter{background-color:#eee}.color-swatches .brand-primary{background-color:#428bca}.color-swatches .brand-success{background-color:#5cb85c}.color-swatches .brand-warning{background-color:#f0ad4e}.color-swatches .brand-danger{background-color:#d9534f}.color-swatches .brand-info{background-color:#5bc0de}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#c7bfd3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:32px;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:20px;margin-top:6px}.bs-team img{float:left;width:32px;margin-right:10px;border-radius:4px}.show-grid{margin-bottom:15px}.show-grid [class^=col-]{padding-top:10px;padding-bottom:10px;background-color:#eee;background-color:rgba(86,61,124,.15);border:1px solid #ddd;border:1px solid rgba(86,61,124,.2);}.bs-example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0;-webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,.05);box-shadow:inset 0 3px 6px rgba(0,0,0,.05)}.bs-example:after{position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#959595;text-transform:uppercase;letter-spacing:1px;content:"Example"}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin:-15px -15px 15px;border-width:0 0 1px;border-radius:0}@media (min-width:768px){.bs-example{margin-right:0;margin-left:0;background-color:#fff;border-color:#ddd;border-width:1px;border-radius:4px 4px 0 0;-webkit-box-shadow:none;box-shadow:none}.bs-example+.highlight,.bs-example+.zero-clipboard+.highlight{margin-top:-16px;margin-right:0;margin-left:0;border-width:1px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.bs-example-standalone{border-radius:4px}}.bs-example .container{width:auto}.bs-example>p:last-child,.bs-example>ul:last-child,.bs-example>ol:last-child,.bs-example>blockquote:last-child,.bs-example>.form-control:last-child,.bs-example>.table:last-child,.bs-example>.navbar:last-child,.bs-example>.jumbotron:last-child,.bs-example>.alert:last-child,.bs-example>.panel:last-child,.bs-example>.list-group:last-child,.bs-example>.well:last-child,.bs-example>.progress:last-child,.bs-example>.table-responsive:last-child>.table{margin-bottom:0}.bs-example>p>.close{float:none}.bs-example-type .table .type-info{color:#999;vertical-align:middle}.bs-example-type .table td{padding:15px 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:15px}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:5px}.bs-example>.table-responsive>.table{background-color:#fff}.bs-example>.btn,.bs-example>.btn-group{margin-top:5px;margin-bottom:5px}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:10px}.bs-example-control-sizing select,.bs-example-control-sizing input[type=text]+input[type=text]{margin-top:10px}.bs-example-form .input-group{margin-bottom:10px}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-top-example,.bs-navbar-bottom-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-top-example .navbar-header,.bs-navbar-bottom-example .navbar-header{margin-left:0}.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example:after{top:auto;bottom:15px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:absolute}}.bs-example .pagination{margin-top:10px;margin-bottom:10px}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:15px}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:5px;margin-bottom:5px}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.bs-example-popover{padding-bottom:24px;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:20px}.scrollspy-example{position:relative;height:200px;margin-top:10px;overflow:auto}.highlight{padding:9px 14px;margin-bottom:14px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:4px}.highlight pre{padding:0;margin-top:0;margin-bottom:0;word-break:normal;white-space:nowrap;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#333}.highlight pre code:first-child{display:inline-block;padding-right:45px}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:5px}.responsive-utilities-test .col-xs-6{margin-bottom:10px}.responsive-utilities-test span{display:block;padding:15px 10px;font-size:14px;font-weight:700;line-height:1.1;text-align:center;border-radius:4px}.visible-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-xs,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-lg{color:#999;border:1px solid #ddd}.visible-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-xs-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-lg-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-glyphicons{margin:0 -10px 20px;overflow:hidden}.bs-glyphicons-list{padding-left:0;list-style:none}.bs-glyphicons li{float:left;width:25%;height:115px;padding:10px;font-size:10px;line-height:1.4;text-align:center;background-color:#f9f9f9;border:1px solid #fff}.bs-glyphicons .glyphicon{margin-top:5px;margin-bottom:10px;font-size:24px}.bs-glyphicons .glyphicon-class{display:block;text-align:center;word-wrap:break-word}.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}@media (min-width:768px){.bs-glyphicons{margin-right:0;margin-left:0}.bs-glyphicons li{width:12.5%;font-size:12px}}.bs-customizer .toggle{float:right;margin-top:25px}.bs-customizer label{margin-top:10px;font-weight:500;color:#555}.bs-customizer h2{padding-top:30px;margin-top:0;margin-bottom:5px}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:15px;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:5px}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{margin-bottom:5px;font-size:12px}#less-section label{font-weight:400}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:0;right:0;left:0;z-index:1030;padding:15px 0;color:#fff;background-color:#d9534f;border-bottom:1px solid #b94441;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.bs-customizer-alert .close{margin-top:-4px;font-size:24px}.bs-customizer-alert p{margin-bottom:0}.bs-customizer-alert .glyphicon{margin-right:5px}.bs-customizer-alert pre{margin:10px 0 0;color:#fff;background-color:#a83c3a;border-color:#973634;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-dropzone{position:relative;padding:20px;margin-bottom:20px;color:#777;text-align:center;border:2px dashed #eee;border-radius:4px}.bs-dropzone h2{margin-top:0;margin-bottom:5px}.bs-dropzone hr{width:100px}.bs-dropzone .lead{margin-bottom:10px;font-weight:400;color:#333}#import-manual-trigger{cursor:pointer}.bs-dropzone p:last-child{margin-bottom:0}.bs-brand-logos{display:table;width:100%;margin-bottom:15px;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:4px}.bs-brand-item{padding:60px 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item .svg{width:144px;height:144px}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}.bs-brand-item .glyphicon{width:30px;height:30px;margin:10px auto -10px;line-height:30px;color:#fff;border-radius:50%}.bs-brand-item .glyphicon-ok{background-color:#5cb85c}.bs-brand-item .glyphicon-remove{background-color:#d9534f}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:60px}}.zero-clipboard{position:relative;display:none}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:5px 8px;font-size:12px;color:#777;cursor:pointer;background-color:#fff;border:1px solid #e1e1e8;border-radius:0 4px 0 4px}.btn-clipboard-hover{color:#fff;background-color:#563d7c;border-color:#563d7c}@media (min-width:768px){.zero-clipboard{display:block}.bs-example+.zero-clipboard .btn-clipboard{top:-16px;border-top-right-radius:0}}#focusedInput{border-color:#ccc;border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6)}.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc{color:#069}.kd{color:#069}.kn{color:#069}.kp{color:#069}.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf{color:#F60}.mh{color:#F60}.mi{color:#F60}.mo{color:#F60}.sb{color:#C30}.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2{color:#C30}.se{color:#C30}.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#F60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}

如果不清楚如何操作上述步驟也沒關(guān)系，下面講解的才是重點(diǎn)內(nèi)容，有實(shí)在想弄明白的同學(xué)可以在文章下方留言，小白很樂意跟大家討論。

屏幕尺寸支持

這張圖片詳細(xì)解釋了柵格系統(tǒng)對不同尺寸設(shè)備的支持信息

圖片引用自Bootstrap官方說明網(wǎng)站

我們首先要在腦海中建立一些概念：

列與行都是是依賴于容器的；
列必須依賴于行而存在，而列中也可以再次嵌套列（把該列當(dāng)成一個(gè)新的行）；
一行是由12列組成的。

Bootstrap 的一大特點(diǎn)，就是默認(rèn)對移動設(shè)備的支持，也就是他默認(rèn)的尺寸是超小屏幕。

因此，如果我們的網(wǎng)頁需要在不同設(shè)備上都有很好的展現(xiàn)效果，為了尺寸的兼容，我們需要對相應(yīng)的設(shè)備作出特定的定義，比如

<div class="bs-docs-grid">
    <div class="row show-grid">
        <div class="col-xs-12 col-sm-6 col-md-8">col-xs-12 col-sm-6 col-md-8</div>
        <div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
    </div>
    <div class="row show-grid">
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4 this is for clearfix test</div>
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
            
        <!-- notice: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
    </div>
</div>

實(shí)際演示效果如下

不同屏幕尺寸的顯示效果

大家從這張圖片中應(yīng)該能明顯看出來效果了吧！一開始可以認(rèn)為是最大號的屏幕，接著隨著寬度的縮小，逐漸經(jīng)歷了中屏、小屏、超小屏，顯示效果按照我們規(guī)定的顯示方式實(shí)現(xiàn)了。

是不是很神奇？

或許大家感覺這沒什么，但是稍早一點(diǎn)的前端開發(fā)者卻會有很深的感觸！在移動互聯(lián)網(wǎng)剛剛興起之時(shí)，由于HTML對不同尺寸屏幕支持的研究工作很少，很多網(wǎng)頁設(shè)計(jì)師在設(shè)計(jì)不同尺寸屏幕支持時(shí)遇到各種各樣煩人的問題，很多在PC端瀏覽效果很好的網(wǎng)頁，到了手機(jī)端卻是各種排版錯亂。后來移動互聯(lián)網(wǎng)，尤其是手機(jī)客戶端的重大需求，推動了多屏支持的研究發(fā)展，才有了后來這些在手機(jī)端也能流暢瀏覽的高質(zhì)量網(wǎng)頁。這一切來之不易，感謝 HTML5，感謝前輩們的貢獻(xiàn)，才有了我們現(xiàn)在的便捷！

特殊情況列補(bǔ)償規(guī)則

好了，繼續(xù)我們的探索之路！

大家現(xiàn)在是不是會有一些問題，比如：

問題1：如果一行多余或者少于12列，那會出現(xiàn)什么情況呢？

其實(shí)，答案就在上面的圖片中。我們發(fā)現(xiàn)，當(dāng)屏幕尺寸很小的時(shí)候，起作用的是 col-xs-12 和 col-xs-6， 這兩個(gè)一共是18列，大于了最長12列的規(guī)則，所以，系統(tǒng)默認(rèn)處理辦法是另起一行。那如果小于12呢？也沒關(guān)系，就空著唄，列會優(yōu)先占滿左邊的區(qū)域。

問題2：<div class="clearfix visible-xs-block"></div> 小白同學(xué)，這行是干嘛的啊？好像與行列講解沒啥關(guān)系嘛！

問得好，這是個(gè)細(xì)節(jié)性問題，官方文檔是這么解釋的：

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix
and our responsive utility classes.

啥意思?。窟@句話的意思是說，如果在你的一行中某些列的內(nèi)容相較于其他的列比較長，那么可能顯示會出現(xiàn)問題，在特定的節(jié)點(diǎn)處，你需要選用 .clearfix 和響應(yīng)式工具類的組合來解決這個(gè)問題。代碼如下：

<div class="clearfix visible-xs-block"></div>

好的，我們來實(shí)際操作一下，大家就知道這句話到底什么意思了

clearfix解釋圖

對于這幅圖，我是先使用了 .clearfix，讓大家看了一下使用的效果，然后將其注釋掉，又給大家示范了一下注釋的效果。大家有沒有發(fā)現(xiàn)什么區(qū)別呢？

大家注意看 col-xs-6 col-sm-4 this is for clearfix test 這列，使用 .clearfix的時(shí)候，當(dāng)屏幕縮小到最小的時(shí)候，這列由于內(nèi)容過長，他的上下高度會變大，而行規(guī)則是不變的，嚴(yán)格按照 .col-xs-6 的規(guī)定，超出的第三個(gè) .col-xs-6 列排列在他的下面；而把 .clearfix 注釋掉的時(shí)候， col-xs-6 col-sm-4 this is for clearfix test 這列就完全獨(dú)占了第一個(gè)列空間，超出的第三列也被他擠在了后面，違背了「 如果一行超出12列，那就另起一行 」的規(guī)定。

大家會問，這是為什么呢？其實(shí)，這就是網(wǎng)頁排版麻煩的地方，在原始HTML標(biāo)準(zhǔn)中有一個(gè) float 選項(xiàng)，這個(gè)選項(xiàng)可以制造出一些浮動的，不嚴(yán)格遵守「 獨(dú)占一行 」規(guī)定的平滑效果的。但是，這也為網(wǎng)頁設(shè)計(jì)者帶來了困擾，有些設(shè)計(jì)需要平滑浮動，有些設(shè)計(jì)不需要平滑浮動，那到底該怎么辦呢？在 Bootstrap 的行列規(guī)則中，是默認(rèn)支持平滑浮動效果的，所以，如果設(shè)計(jì)師不需要浮動，就需要額外調(diào)用 .clearfix 這一選項(xiàng)。

問題3：小白同學(xué)，你這列排列默認(rèn)靠左排列，要是我想讓他靠右排列，就是左邊空間空出來，那該怎么辦呢？

這個(gè)問題可以用列偏移法實(shí)現(xiàn)，具體使用的方法是 .col-md-offset-* 其中 * 是你要向右移動的列數(shù)

offset解釋

代碼如下

<div class="row show-grid">
  <div class="col-xs-9 col-md-offset-2"> col-xs-9 </div>
</div>

這里，我讓 col-xs-9 這行右移了2列。官方文檔里面還講了一個(gè)「 列排序 」的方法。

通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。

這里我感覺并沒有什么創(chuàng)新點(diǎn)，其實(shí)列排序可以這么理解：push 就是右移，pull 就是左移。其實(shí) push 所做的工作與 offset 是重復(fù)的。

嵌套列

列的嵌套其實(shí)很簡單，就是將列作為一個(gè)新的行空間，再寫一遍之前的結(jié)構(gòu)，這里給出一個(gè)簡單的示范

嵌套列解釋圖

代碼如下

<div class="row show-grid">
    <div class="col-sm-10">
    Level 1: col-sm-10
        <div class="row show-grid">
        <div class="col-sm-6">
        Level 2:col-sm-6
        </div>
        <div class="col-sm-4">
        Level 2:col-sm-4
        </div>
    </div>
    </div>
</div>

結(jié)束語

好啦，更高級的排版內(nèi)容，比如語義化布局，使用Less mixin 和變量這里就先不介紹了。感興趣的同學(xué)，可以去 Bootstrap 官網(wǎng)細(xì)看。

對了，再次強(qiáng)調(diào)一下，本篇的代碼都是小白測試用的代碼。為了讓大家看清楚，用的是測試CSS（主要是柵格邊框和背景色的區(qū)別），如果大家真正去設(shè)計(jì)一個(gè)網(wǎng)頁，把代碼中的 <div class="row show-grid"> 改成 <div class="row"> 就可以啦！說白了，就是兩套CSS而已。

好啦，光看是不行的，同學(xué)們要想掌握得實(shí)踐哦！如果遇到問題，歡迎跟小白在留言中討論哦！

最后，小白想跟大家討論一個(gè)問題：如何把一行等分成5列呢？

歡迎大家在留言中給出好的想法哈~

參考文獻(xiàn)
Bootstrap官方文檔