您所在的位置:小祥子 » 编程 » CSS » 正文

Bootstrap~页面的布局

时间:2015-07-08 编辑:张占岭 来源:CnBlogs

Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的!

今天主要说下页面的布局,这是最基础的东西了,当我们设计一个站点时,应该为它设计一个全局性的统一的规范页面,这种页面我们叫它布局页,而在页面上体现出来的东西,就是布局的元素,在bootstrap里当然也是不可缺少的东西。

Bootstrap的布局是一种栅格系统,即它由行和列组成,在使用时需要为页面内容和栅格系统包裹一个 .container 容器。

一 .container 类用于固定宽度并支持响应式布局的容器。

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

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

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

二 栅格系统的行和列,在bootstrap里,行和列使用row和col表示,而一行中最多有12个列单元组成,col-md-1表示占用1个单元的宽度,而col-md-7表示占用7个单元的宽度,它们加在一起最多为12个单元

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

第二和第三行显示出来的效果类似这样

JSXz2tcAR73I3VzlKXt21P33i2W2hJ2vm3gj/UrI7/pYnp1PNQcFXXcvYXx2zRuFg/8QtxoVyL6ZnXolQh1E+BliVxMf2Zpu9YU+67ypbSEddpnHXeFvb3gXxVq/xr1EzcpV2/c+gHtt/L9ytWdxocr2lgvoXdWOxvsuc/628X0x+4ZB2DEXxWKX9q6K9r92z2TWsJubZN3NmHd7Hwq2PkjGDpvvgc+gqF9h+L569aH3N49NuoM58Cjq3FfwoBZbW+w/1Mkzh82oWsCPOO5upnM0tZ6lhsrRcJL2NVt8s4S/Jh3AJicf8QSwqibAORI3YQw6iYAOVI3IYy6CUCO1E0Io24CkCN1E8KomwDkSN2EMOomADlSNyGMuglAjtRNCKNuApAjdRPCqJsA5EjdhDDqJgA5UjchjLoJQI7UTQijbgKQI3UTwqibAORI3YQw6iYAOVI3IcwDdRMAAJ4wqG6KiIiIiIwSdVNEREREJoy6KSIiIiITRt0UERERkQmjboqIiIjIhFE3RURERGTCqJsiIiIiMmHUTRERERGZMOqmiIiIiEwYdVNEREREJoy6KSIiIiITRt0UERERkQmjboqIiIjIhFE3RURERGTCqJsiIiIiMmGu181//v4XAACeMLRufv75AqZWjeWP7wa8PbMGYdRNSIslEGKYNQijbkJaLIEQw6xBGHUT0mIJhBhmDcKom5AWSyDEMGsQRt2EtFgCIYZZgzDqJqTFEggxzBqEUTchLZZAiGHWIIy6CWmxBEIMswZh1E1IiyUQYpg1CKNuQlosgRDDrEEYdRPSYgmEGGYNwqibkBZLIMQwaxBG3YS0WAIhhlmDMOompMUSCDHMGoRJsG7uPorZaj/mNrfzos64Wx5pVzeLolhs+x+zX5dj/2chTbFLoHG7xrjlwaxNu6tmjZb3r5vbeVEuj6c/Dnn3x+/q/b06rsrRf6CQqF+9BBo3fhGzNu2umjVaourmfl1Wx2Dl+tB8v3qrXXz/+hv9sJzVjzmuyqKY707f7D+2e+LI6eVdPT3pcnF6/Hz3uWl93fzdes+Xd2bysJyV84VDwEyMsAQaN+PGAGbNrBEmpm7uPoriY/NVvbPrA7JmtD6riwKn9/qt46p6I/t1WT2yfeR06yhqs+iOVsiuVlNdPb6axurr5gdEe+PVcN6eyer1uuKQjZeXQONm3BjErJk1woTUzasDs1+XnW+eh+H2afzNopjvtvPqYYMuH1QHjtvmSPHe5YZRdnW/Lot6J5sHt76+eJa+F3JclbPV3g0uGXl1CTRuxo1hzJpZI0xE3WxdLGi5PDg7HxX13DXSORRrXwWo3/TXnrp44AaXcXa1Mz/tx5xm8vJZLme+sz+nnTeT2XhxCTRuxo2BzJpZI0y6dbN188p5Dq+fnK9/O+/K3/r21MdVeXOAR9vVZ2fyynbODzOT2fiRJdC4GbcMmTWzRpjfdDG9Oh5qjoo62reMdJ/6kZkc74pD30wOvOLQGdE6fTvPW0jkAp9xM25vz6yZNcIE/6rQ12E5q4/nnrhJuXrj1g9ov5VvHiF1h/D+PTFj7WrvTHY2eO9+6jsvkHcz3q8vGDfjRh+zZtYIM2Hd7Hwq2PkjGDpvvgc+gmE7707FfPfZ+ZDbnmOj1rPceOuPu6sDZrK9wfufFvFtm7yz55ZA4/btMcaNO8yaWSNMgh/zDlnzD+tBDLMGYdRNSIslEGKYNQijbkJaLIEQw6xBGHUT0mIJhBhmDcKom5AWSyDEMGsQRt2EtFgCIYZZgzDqJqTFEggxzBqEUTchLZZAiGHWIIy6CWmxBEIMswZh1E1IiyUQYpg1CKNuQlosgRDDrEEYdRPSYgmEGGYNwqibkBZLIMQwaxBG3YS0WAIhhlmDMOompMUSCDHMGoR5oG4CAMATLorl/xcjoCvkjEoBAAAAAElFTkSuQmCC" border="0" onload="return imgzoom(this,600);"/>

三 嵌套列,列中还可以有列,这种嵌套我们需要把md改为sm

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

效果类似于这样

今天就说到这里,主要是大体布局的一些基础知识。

关键词:页面