2016-12-28 72 views
-4

我明白Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.所以它有助於使網站響應和東西。目前,我還有另一個文件css,我使用media queries,並通過該組織重新組織我的CSS佈局(這就是我如何使其響應)。是引導3自動響應?

Bootstrap是否爲我處理所有媒體查詢,還是我需要做額外的工作?

+1

對不起,但這樣的問題沒有提供任何實際或具體的問題,而是一個模糊的問題。此外,這並不是必須與jQuery和JavaScript相關,因爲您正在詢問關於媒體查詢的更多信息。如果真正的問題是:**是否需要照顧媒體查詢?**答案是**否,只要您使用助推器給你的工具**。在任何情況下,引導程序**都不會對您現有的項目**做任何魔術,您需要使用其網格系統並使用它提供的組件。 – briosheje

+0

是的,我一般在問關於mediaquerries的問題 –

+0

它不會自動讓_existing_佈局響應,您需要使用Bootstrap的網格系統來使用相關的類名稱。 –

回答

1

這是正確的,所有媒體查詢都由引導來處理。你只需要將適當的類分配給你的html元素。

電網系統的更多信息可以在這裏找到: http://getbootstrap.com/css/#grid

你必須修改你的HTML不會做任何額外的CSS修改爲引導工作「開箱即用」

Bootstrap使用四種設備尺寸:XS,XM,MD和LG。以下是引導程序使用的媒體查詢。您可能需要進行比較,以便確保您的系統接近這些地方。否則,您可能需要進行較大的檢修。

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... } 
+0

Boostrap不處理所有媒體查詢,它提供了一組常用的類_component_,它們根據一組_predefined_媒體查詢而具有不同的樣式。與大小相關的大多數值(例如'screen-md-min')可以使用配置文件和sass或更少的預處理器來定製,以適應項目的需求。使用自己的值添加自己的媒體查詢或使用其中一個配置文件來添加組件並不常見,這些組件並不包含在引導程序中。 –

+0

我會乞求不同。 Bootstrap的預定義媒體查詢處理所有設備大小。您可以添加自己的媒體查詢,但不需要。因爲引導程序處理所有媒體查詢。 –

+0

對於後端應用程序或Web應用程序,您可能只能使用bootstrap提供的類和組件,但更有可能需要創建自己的組件,因此您必須定義媒體查詢以便響應。對於外觀漂亮的網頁,通常沒有辦法根據bootstrap提供的媒體查詢定義自己的媒體查詢。 –