首頁 > web前端 > 前端問答 > bootstrap有幾種容器

bootstrap有幾種容器

青灯夜游
發布: 2022-01-10 11:39:31
原創
4073 人瀏覽過

bootstrap有2種容器:1、固定佈局容器,將預設柵格放到「class="container"」的容器中即可建立固定佈局;2、流式佈局容器,將流式將柵格放到「class="container-fluid"」的流式容器中即可建立串流佈局。

bootstrap有幾種容器

本教學操作環境:Windows7系統、bootsrap3.3.7版、DELL G3電腦

Bootstrap容器

在Bootstrap中容器是響應式佈局的基礎, Bootstrap建議將所有內容定義在容器之中,且容器是啟用Bootstrap柵格系統必不可少的前置條件。

Bootstrap提供了兩種類型的佈局容器,一種是固定寬度的佈局容器,另一種是串流佈局容器。將柵格放在某種容器中,即可實現對應的佈局。

固定佈局

將Bootstrap的預設柵格放到 class="container" 的容器中,即可建立固定寬度的佈局。固定佈局在整個頁面上居中顯示。如:

<body>
  <div class="container">
    ...
  </div>
</body>
登入後複製

效果如下圖所示(Bootstrap固定佈局容器):

bootstrap有幾種容器

#簡單的講,就是將內容統統放到class="container " 的容器中,即可建立居中、固定寬度的佈局。具體實例如下:

<body>
  <div class="container">
    <div class="row">
      <div class="span4">span4</div>
      <div class="span8">span8</div>
    </div>
    <div class="row">
      <div class="span3">span3</div>
      <div class="span6">span6</div>
      <div class="span3">span3</div>
    </div>
  </div>
</body>
登入後複製

佈局效果如下圖所示(Bootstrap固定佈局實例):

bootstrap有幾種容器

##串流佈局

同理,將Bootstrap的串流裝置放到class="container-fluid" 的串流容器中,即可建立串流佈局。流式佈局將填滿整個視口寬度。如:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>
登入後複製
佈局效果如下圖所示(Bootstrap串流佈局):

bootstrap有幾種容器

#【相關推薦:《

bootstrap教學

##### 》】###

以上是bootstrap有幾種容器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板