bootstrap怎麼實作響應式

隨著行動裝置的普及，如何讓使用者透過行動裝置瀏覽您的網站獲得良好的視覺效果，已經是一個不可避免的問題了。響應式 Web 設計就是實現這個目的的有效方法。

響應式 Web 設計是一個讓使用者透過各種尺寸的裝置瀏覽網站獲得良好的視覺效果的方法。 （推薦學習：Bootstrap影片教學）

例如，您先在電腦顯示器上瀏覽一個網站，然後在智慧型手機上瀏覽，智慧型手機的螢幕尺寸遠小於電腦顯示器，但是你卻沒有感覺到任何差別，兩者的使用者體驗幾乎一樣，這說明這個網站在響應式設計方面做得很好。

我們已經在我們的流動佈局中應用了響應性能，並請您在不同的螢幕尺寸下進行瀏覽。您可以透過 Chrome 或 FireFox 的視窗大小調整的擴充功能來調整瀏覽器。

響應式 Web 設計工作原理

為了應用程式回應Web設計，您需要建立一個包含適應各種裝置尺寸樣式的 CSS。一旦頁面在特定的裝置上加載，該頁面上使用了各種字體和 Web 開發技術，例如媒體查詢（Media Queries），此時，會先檢測設備的視口大小，然後加載特定於設備的樣式。

您必須在網頁的頭部區域加入下面這行程式碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

視窗的meta 標籤，重寫了預設的視口，並幫助加載與特定視窗相關的樣式。

width 屬性設定螢幕寬度。它包含一個值，例如 320，表示 320 像素，或值為 'device-width'，用來告訴瀏覽器使用原始的解析度。

initial-scale 屬性是視口最初的比例。設定為 1.0 時，將呈現裝置的原始寬度。

當然，您必須添加Bootstrap 的響應式CSS，如下所示：

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

BootStrap 的響應式是基於它柵格系統，透過為不同控制項設置，諸如col-(sm /md/ls/xl)-(1/2/3/4/5/6/7/8/9/10/11/12) 來達到在不同顯示區域下，不一樣的佈局效果，實現響應式佈局。

解釋

為了讓佈局更具回應性，Bootstrap 做了三件事：

1. 修改了網格中列的寬度。

2. 只要有需要，它就使用堆疊元素，而不是浮動元素。如果您還不清楚什麼是堆疊元素，下面來自w3.org 的表單可能會提供一些幫助：

根元素（html）形成了堆疊上下文的根，其他堆疊上下文透過任意定位的元素生成（包括相對定位元素，有一個'z-index' 的計算值，而不是'auto'）。堆疊上下文相對與包含的區塊不是必需的。

3.要正確地渲染標題和文字它們的尺寸。

更多Bootstrap相關技術文章，請造訪Bootstrap教學欄位進行學習！

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