bootstrap是響應式嗎

如果你想了解更多關於bootstrap的知識可以點選：Bootstrap教學

什麼是響應式web設計？

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

響應式web設計工作原理？

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

深入研究響應式web設計的css？

　　我們將透過 'bootstrap-responsive.css' 的學習，來了解"響應式設計"是如何實現細微差別的。在這之前，您必須在網頁的頭部區域加入下面這行程式碼：

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

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

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

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

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

　　現在，如果您查找響應式CSS 文件，您會發現，在一些公共的聲明後邊（從行號10 到22），有各種以 '@media' 開始的區域。這就是如何編寫適用於各種裝置的樣式。

　　第一個區域以 '@media (max-width: 480px)' 開始，為最大寬度為 480 像素的裝置設定樣式。

　　第二個區域以 '@media (max-width: 767px)' 開始，為最大寬度為 767像素的裝置設定樣式。

　　第三個區域以'@media (min-width: 768px) 和(max-width: 979px)' 開始，為最小寬度為768 像素和最大寬度為979 像素的裝置設定樣式。

　　下一個區域是為最大寬度為 979 像素的裝置設定樣式。所以是以 '@media (max-width: 979px)' 開始。

　　最後兩個區域分別以'@media (min-width: 980px)' 和'@media (min-width: 1200px)' 開始，前一個是為最小寬度為980 像素的裝置設定樣式，後者是為最小寬度為1200 像素的裝置設定樣式。

　　所以，這樣樣式表的基本作用就是，透過使用 'min-width' 和 'max-width' 屬性，來根據裝置的最大寬度和最小寬度決定使用的樣式。

解釋

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

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

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

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

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

更快的開發對行動裝置友善的佈局。

Bootstrap 有幾個實用的用於開發對行動裝置友善的佈局的類別。這些類別可在 'responsive.less' 上看到。

.visible-phone，在寬度為 767px 及以下的手機上可見，在 979px 到 768px 的平板上隱藏不可見，在桌面上隱藏不可見，這是預設的。

.visible-tablet，在寬度為 767px 及以下的手機上隱藏不可見，在 979px 到 768px 的平板上可見，在桌面上隱藏不可見，這是預設的。

.visible-desktop，在寬度為 767px 及以下的手機上隱藏不可見，在 979px 到 768px 的平板上隱藏不可見，在桌面上可見，這是預設的。

.hidden-phone，在寬度為 767px 及以下的手機上隱藏不可見，在 979px 到 768px 的平板上可見，在桌面上可見，這是預設的。

.hidden-tablet，在寬度為 767px 及以下的手機上可見，在 979px 到 768px 的平板上隱藏不可見，在桌面上可見，這是預設的。

.hidden-desktop，在寬度為 767px 及以下的手機上可見，在 979px 到 768px 的平板上可見，在桌面上隱藏不可見，這是預設的。

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