bootstrap是響應式的嗎

bootstrap是響應式的。 Bootstrap提供了一套響應式、行動裝置優先的串流柵格系統，對於不同的螢幕採用不同的類別屬性，在開發中可以只寫一套程式碼在手機平板，PC端都能使用，而不用考慮使用媒體查詢。

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

什麼是響應式？

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

bootstrap是響應式的嗎？

bootstrap是響應式的。

Bootstrap提供了一套響應式、行動裝置優先的串流閘格系統，隨著螢幕或視窗（viewport）尺寸的增加，系統會自動分成做多12列。柵格系統用於透過一系列的行（row）與列（column）的組合來建立頁面佈局。

Bootstrap響應式佈局是利用其柵格系統，對於不同的螢幕採用不同的類別屬性。在開發中可以只寫一套程式碼在手機平板，PC端都能使用，而不用考慮使用媒體查詢（針對不同的裝置分別寫不同的程式碼）。

網格系統的實現原理，是透過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最後結合媒體查詢，就製作出了強大的響應式網格系統。 Bootstrap框架中的網格系統就是將容器平分成12份。

 Bootstrap 柵格系統的工作原理：

「行（row）」必須包含在.container （固定寬度）或.container-fluid（100% 寬度）中，以便為其賦予適當的排列（aligment）和內補（padding）。

透過「行（row）」在水平方向建立一組「列（column）」。

你的內容應放置於「列（column）」內，並且，只有「列（column）」可以作為行（row）」的直接子元素。

類似.row和.col-xs-4 這種預先定義的類，可以用來快速建立柵格佈局。Bootstrap 原始碼中定義的mixin 也可以用來創建語義化的佈局。

透過為「列（ column）”設定padding 屬性，從而創建列與列之間的間隔（gutter）。透過為.row 元素設定負值margin 從而抵消掉為.container 元素設定的padding，也間接為“行（row）”所包含的「列（column）」抵消掉了padding。

負值的margin就是下面的範例為什麼是向外突出的原因。在柵格列中的內容排成一行。

柵格系統中的欄位是透過指定1到12的值來表示其跨越的範圍。例如，三個等寬的欄位可以使用三個.col-xs-4 來建立。

如果一「行（row）」中包含了的「列（column）」大於12，多餘的「列（column）」所在的元素將被當作一個整體另起一行排列。

柵格類適用於與螢幕寬度大於或等於分界點大小的設備， 並且針對小螢幕設備覆蓋柵格類別。 因此，在元素上套用任何.col-md-* 柵格類別適用於與螢幕寬度大於或等於分界點大小的設備， 並且針對小螢幕設備覆蓋柵格類別。 因此，在元素上應用任何.col-lg-* 不存在，也影響大螢幕設備。

#建議：bootstrap影片教學

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