bootstrap支援手機嗎

bootstrap支援手機端；Bootstrap的響應式CSS能夠自適應於桌上型電腦、平板電腦和手機；並且自Bootstrap3起，框架包含了貫穿整個庫的行動裝置優先的樣式。

本文操作環境：Windows7系統，bootstrap2.3.2版本，Dell G3電腦。

bootstrap響應式佈局

Bootstrap 提供了一套響應式、行動裝置優先的串流媒體系統，隨著螢幕或視窗（viewport）尺寸的增加，系統會自動分成最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的佈局。

首先柵格系統用於透過一系列的行（row）與列（column）的組合來建立頁面佈局。 bootstrap根據不同螢幕尺寸，選擇不同的柵格選項。共有四種柵格選項，超小螢幕（手機）、小螢幕（平板）、中螢幕（桌面）、大螢幕（超大桌面）。柵格系統分為12列，即每行最多可容納12列。若裡，一.row內包含的列（column）大於12個（即，一行中的柵格單元超過12個單元），則會自動排版，總之，一行只能最多12列，具體分析往後閱讀。

原則：

透過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影片教學》《css影片教學》

以上是bootstrap支援手機嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！