twitter-bootstrap - bootstrap 4排版




Bootstrap 3斷點和媒體查詢 (7)

http://getbootstrap.com/css/上說:

我們使用以下媒體查詢來在我們的網格系統中創建關鍵斷點。

超小設備(手機,最大480px):無需媒體查詢,因為這是Bootstrap中的默認設置

小型設備(平板電腦,768像素及以上):@media(最小寬度:@ screen-sm){...}

中等設備(桌面,992px及以上):@media(最小寬度:@ screen-md){...}

大型設備(大型桌面,1200px及以上):@media(min-width:@ screen-lg){...}

我們是否應該能夠在媒體查詢中使用@ screen-sm,@ screen-md和@ screen-lg名稱? 因為它不適合我。 在它工作之前,我必須使用@media(min-width:768px){...}等像素測量。 難道我做錯了什麼?

另外,對於額外的小設備是否為480px的引用有錯字? 不應該說高達767px?


Bootstrap 3媒體查詢

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

引導2.3.2媒體查詢

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

資源來自: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-querieshttps://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries


Bootstrap不會很好地記錄媒體查詢。 @screen-sm@screen-md@screen-lg這些變量實際上是指LESS變量,而不是簡單的CSS。

當您自定義Bootstrap時,您可以更改媒體查詢斷點,並在編譯時將@ screen-xx變量更改為您定義為screen-xx的任何像素寬度。 這就是像這樣的框架可以被編碼一次,然後由最終用戶自定義以適應他們的需求。

在這裡可能會提供更清晰的類似問題: Bootstrap 3.0媒體查詢

在您的CSS中,您仍然必須使用傳統媒體查詢來覆蓋或添加Bootstrap正在執行的操作。

關於你的第二個問題,這不是一個錯字。 一旦屏幕低於768px,框架變得完全流暢,並在任何設備寬度調整大小,從而消除對斷點的需求。 480px處的斷點存在,因為移動優化的佈局會發生特定的更改。

要看到這一點,請訪問他們網站上的這個例子( http://getbootstrap.com/examples/navbar-fixed-top/ ),並調整窗口大小,以查看它如何在768px之後處理設計。



如果您使用http://lesscss.org/構建CSS,您應該可以使用這些斷點。

/* 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) {  }

http://getbootstrap.com/css/#grid-media-queries

實際上,@ screen-sm-min是一個變量,當用less生成時,它被替換為_variable中指定的值。 如果你用得不多,你可以用下面的值替換這個變量:

/* 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: 768px) {  }

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

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

Bootstrap 3正式支持sass https://github.com/twbs/bootstrap-sass 。 如果你使用sass(你應該),語法有點不同。

/* 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) {  }

我知道這有點舊,但我認為我會貢獻。 基於@Sophy的回答,這是我添加一個.xxs斷點的方法。 我沒有照顧可見內聯,table.visible等類。

/*==========  Mobile First Method  ==========*/

  .col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }

.visible-xxs {
  display:none !important;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {

  .visible-xxs {
    display: block !important;
  }
  .visible-xs {
    display:none !important;
  }

  .hidden-xs {
    display:block !important;
  }

  .hidden-xxs {
    display:none !important;
  }

  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-11 {
    width: 91.66666667%;
  }
  .col-xxs-10 {
    width: 83.33333333%;
  }
  .col-xxs-9 {
    width: 75%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
  .col-xxs-7 {
    width: 58.33333333%;
  }
  .col-xxs-6 {
    width: 50%;
  }
  .col-xxs-5 {
    width: 41.66666667%;
  }
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-3 {
    width: 25%;
  }
  .col-xxs-2 {
    width: 16.66666667%;
  }
  .col-xxs-1 {
    width: 8.33333333%;
  }
  .col-xxs-pull-12 {
    right: 100%;
  }
  .col-xxs-pull-11 {
    right: 91.66666667%;
  }
  .col-xxs-pull-10 {
    right: 83.33333333%;
  }
  .col-xxs-pull-9 {
    right: 75%;
  }
  .col-xxs-pull-8 {
    right: 66.66666667%;
  }
  .col-xxs-pull-7 {
    right: 58.33333333%;
  }
  .col-xxs-pull-6 {
    right: 50%;
  }
  .col-xxs-pull-5 {
    right: 41.66666667%;
  }
  .col-xxs-pull-4 {
    right: 33.33333333%;
  }
  .col-xxs-pull-3 {
    right: 25%;
  }
  .col-xxs-pull-2 {
    right: 16.66666667%;
  }
  .col-xxs-pull-1 {
    right: 8.33333333%;
  }
  .col-xxs-pull-0 {
    right: auto;
  }
  .col-xxs-push-12 {
    left: 100%;
  }
  .col-xxs-push-11 {
    left: 91.66666667%;
  }
  .col-xxs-push-10 {
    left: 83.33333333%;
  }
  .col-xxs-push-9 {
    left: 75%;
  }
  .col-xxs-push-8 {
    left: 66.66666667%;
  }
  .col-xxs-push-7 {
    left: 58.33333333%;
  }
  .col-xxs-push-6 {
    left: 50%;
  }
  .col-xxs-push-5 {
    left: 41.66666667%;
  }
  .col-xxs-push-4 {
    left: 33.33333333%;
  }
  .col-xxs-push-3 {
    left: 25%;
  }
  .col-xxs-push-2 {
    left: 16.66666667%;
  }
  .col-xxs-push-1 {
    left: 8.33333333%;
  }
  .col-xxs-push-0 {
    left: auto;
  }
  .col-xxs-offset-12 {
    margin-left: 100%;
  }
  .col-xxs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xxs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xxs-offset-9 {
    margin-left: 75%;
  }
  .col-xxs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xxs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xxs-offset-6 {
    margin-left: 50%;
  }
  .col-xxs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xxs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xxs-offset-3 {
    margin-left: 25%;
  }
  .col-xxs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xxs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xxs-offset-0 {
    margin-left: 0%;
  }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .visible-xs {
    display:block !important;
  }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .visible-xs {
    display:none !important;
  }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

此問題已在https://github.com/twbs/bootstrap/issues/10203討論過,由於兼容性原因,目前沒有計劃更改網格。

你可以從這個分支獲得Bootstrap,分支hs: https://github.com/Teachnova/bootstrap/tree/hshttps://github.com/Teachnova/bootstrap/tree/hs

這個分支給你一個480px的額外斷點,所以你必須:

  1. 手機設計(XS,小於480像素)
  2. 在HTML中添加HS(水平小型設備)類:col-hs- *,visible-hs ...以及設計水平移動設備(HS,小於768px)
  3. 平板設備設計(SM,小於992px)
  4. 桌面設備設計(MD,小於1200像素)
  5. 大型設備設計(LG,超過1200像素)

首先設計移動設備是理解Bootstrap 3的關鍵。這是BootStrap 2.x的主要變化。 作為一個規則模板,你可以按照這個(在LESS中):

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}

@media screen and (max-width: 767px) {

}

@media screen and (min-width: 768px) and (max-width: 991px){


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){


}

@media screen and (min-width: 992px) {



}




breakpoints