bootstrap怎麼實現響應式佈局

響應式佈局概念：

響應式web佈局是讓使用者透過不同尺寸的瀏覽器都可以獲得良好視覺的一種方法。是目前比較流行的一種佈局方法。

bootstrap響應式佈局實作原則：

透過CSS3 Media Queries（媒體（裝置）查詢），媒體查詢是讓頁面內容在不同的媒體環境下執行時可以展示不同的樣式（這個樣式當然是由我們來書寫規定的）。

@media是CSS3中規定的屬性，它可以實現針對不同媒體裝置來設定不同的樣式的目的。而且就算是在同一裝置中它也可以在你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。 

應用：

Bootstrap主要用到min-width、max-width，以及and語法，用於在不同的解析度下設定不同的CSS樣式。

@media的語法

@media mediatype and|not|only (media feature) {
CSS-Code;
}

其中mediatype有print（列印裝置）、screen（用於電腦螢幕，平板電腦，智慧型手機等）、speech（應用於螢幕閱讀器等發聲設備）；media feature則是用來規定如最大寬度或最小寬度。

我們來看看bootstrap中佈局容器的範例： 

Bootstrap 需要為頁面內容和柵格系統包裝一個 .container 容器。

如下

固定宽度布局
<div class="container">
...
</div>
或者 流式布局
<div class="container-fluid">
...
</div>

在bootstrap的css文件中@media屬性

1591~1605行
 
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
……

以上程式碼實現了隨瀏覽器寬度的變化container容器的寬度也進行變化。

推薦：bootstrap入門教學

#

以上是bootstrap怎麼實現響應式佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！