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

圖文 / 丁建雄

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

柵格系統(tǒng)

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

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

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

后來(lái)灼捂，小白在經(jīng)過(guò)多個(gè)項(xiàng)目的鍛煉离例、嘗試之后。才發(fā)現(xiàn)悉稠，有時(shí)候并不是小白理解的問(wèn)題宫蛆，而是HTML新舊標(biāo)準(zhǔn)在不同瀏覽器之間的兼容性問(wèn)題，大寫(xiě)的坑暗拿汀耀盗！然而還是只能笑著接受辑甜，好吧~

本篇的內(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)頁(yè)設(shè)計(jì)中還沒(méi)有發(fā)現(xiàn)大的問(wèn)題煌恢。

布局容器

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

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

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

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

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

兩者的區(qū)別在于：.container 適用于固定寬度（邊上有一定間距），而 .container-fluid 適用于無(wú)邊距的滿屏設(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)頁(yè)制作中是透明的丘侠，沒(méi)辦法明顯表現(xiàn)出來(lái)徒欣。因此，為了大家便于理解婉陷，小白這邊參考官網(wǎng)說(shuō)明文件重新定義了一個(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}

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

屏幕尺寸支持

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

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

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

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

Bootstrap 的一大特點(diǎn)，就是默認(rèn)對(duì)移動(dòng)設(shè)備的支持亥贸，也就是他默認(rèn)的尺寸是超小屏幕躬窜。

因此，如果我們的網(wǎng)頁(yè)需要在不同設(shè)備上都有很好的展現(xiàn)效果炕置，為了尺寸的兼容荣挨，我們需要對(duì)相應(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)該能明顯看出來(lái)效果了吧朴摊！一開(kāi)始可以認(rèn)為是最大號(hào)的屏幕默垄，接著隨著寬度的縮小，逐漸經(jīng)歷了中屏甚纲、小屏口锭、超小屏，顯示效果按照我們規(guī)定的顯示方式實(shí)現(xiàn)了介杆。

是不是很神奇鹃操？

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

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

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

大家現(xiàn)在是不是會(huì)有一些問(wèn)題缚陷，比如：

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

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

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

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

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.

啥意思耙堤ぁ？這句話的意思是說(shuō)涧卵，如果在你的一行中某些列的內(nèi)容相較于其他的列比較長(zhǎng)勤家，那么可能顯示會(huì)出現(xiàn)問(wèn)題，在特定的節(jié)點(diǎn)處柳恐，你需要選用 .clearfix 和響應(yīng)式工具類(lèi)的組合來(lái)解決這個(gè)問(wèn)題伐脖。代碼如下：

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

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

clearfix解釋圖

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

大家注意看 col-xs-6 col-sm-4 this is for clearfix test 這列歼跟，使用 .clearfix的時(shí)候，當(dāng)屏幕縮小到最小的時(shí)候格遭，這列由于內(nèi)容過(guò)長(zhǎng)哈街，他的上下高度會(huì)變大，而行規(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ī)定蒙揣。

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

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

這個(gè)問(wèn)題可以用列偏移法實(shí)現(xiàn)贬丛，具體使用的方法是 .col-md-offset-* 其中 * 是你要向右移動(dòng)的列數(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è)「 列排序 」的方法豺憔。

通過(guò)使用 .col-md-push-* 和 .col-md-pull-* 類(lèi)就可以很容易的改變列（column）的順序额获。

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

嵌套列

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

嵌套列解釋圖

代碼如下

<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é)束語(yǔ)

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

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

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

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

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

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