Bootstrap CSS3媒體查詢斷點

文章目錄

Bootstrap響應式設計，就是一個典型的媒體查詢CSS框架，它設定了某些媒體查詢節點，根據不同設備寬度，寫不同的斷點位置來做響應式查詢。

Bootstrap推薦的媒體查詢樣式如下：

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

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

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的佈局。下面是Bootstrap媒體查詢的一些文檔，希望對你有所幫助。

簡介

柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面佈局，你的內容就可以放入這些創建好的佈局中。下面就介紹一下 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-* 不存在，也影響大屏幕設備。

通過研究後面的實例，可以將這些原理應用到你的代碼中。

媒體查詢

在柵格系統中，我們在 Less 文件中使用以下媒體查詢（media query）來創建關鍵的分界點閾值。

複製

/* 超小屏幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的代碼，因爲這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */

/* 小屏幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }

我們偶爾也會在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小範圍的屏幕大小之內。

複製

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

柵格參數

通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。

	超小屏幕手機 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面顯示器 (≥992px)	大屏幕大桌面顯示器 (≥1200px)
柵格系統行爲	總是水平排列	開始是堆疊在一起的，當大於這些閾值時將變爲水平排列C
`.container` 最大寬度	None （自動）	750px	970px	1170px
類前綴	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）數	12
最大列（column）寬	自動	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

實例：從堆疊到水平排列

使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。所有“列（column）必須放在 ” .row 內。

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

實例：流式佈局容器

將最外面的佈局元素 .container 修改爲 .container-fluid，就可以將固定寬度的柵格佈局轉換爲 100% 寬度的佈局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

實例：移動設備和桌面屏幕

是否不希望在小屏幕設備上所有列都堆疊在一起？那就使用針對超小屏幕和中等屏幕設備所定義的類吧，即 .col-xs-*和 .col-md-*。請看下面的實例，研究一下這些是如何工作的。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

實例：手機、平板、桌面

在上面案例的基礎上，通過使用針對平板設備的 .col-sm-* 類，我們來創建更加動態和強大的佈局吧。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

實例：多餘的列（column）將另起一行排列

如果在一個 .row 內包含的列（column）大於12個，包含多餘列（column）的元素將作爲一個整體單元被另起一行排列。

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

響應式列重置

即便有上面給出的四組柵格class，你也不免會碰到一些問題，例如，在某些閾值時，某些列可能會出現比別的列高的情況。爲了克服這一問題，建議聯合使用 .clearfix 和響應式工具類。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

除了列在分界點清除響應，您可能需要重置偏移, 後推或前拉某個列。請看此柵格實例。

複製

//code from http://caibaojian.com/bootstrap-media.html
<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

列偏移

使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器爲當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

嵌套列

爲了使用內置的柵格系統將內容再次嵌套，可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的.col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須佔滿12列）。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列排序

通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Less mixin 和變量

除了用於快速佈局的預定義柵格類，Bootstrap 還包含了一組 Less 變量和 mixin 用於幫你生成簡單、語義化的佈局。

變量

通過變量來定義列數、槽（gutter）寬、媒體查詢閾值（用於確定合適讓列浮動）。我們使用這些變量生成預定義的柵格類，如上所示，還有如下所示的定製 mixin。

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

mixin

mixin 用來和柵格變量一同使用，爲每個列（column）生成語義化的 CSS 代碼。

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

實例展示

你可以重新修改這些變量的值，或者用默認值調用這些 mixin。下面就是一個利用默認設置生成兩列布局（列之間有間隔）的案例。

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Bootstrap CSS3媒體查詢斷點

Bootstrap CSS3媒體查詢斷點

文章目錄

簡介

媒體查詢

柵格參數

實例：從堆疊到水平排列

實例：流式佈局容器

實例：移動設備和桌面屏幕

實例：手機、平板、桌面

實例：多餘的列（column）將另起一行排列

響應式列重置

列偏移

嵌套列

列排序

Less mixin 和變量

變量

mixin

實例展示

如何使用 JS 判斷用戶是否處於活躍狀態

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

HTML5的標籤

原生js實現jQuery的ready方法

php 錯誤信息配置

css3 media媒體查詢器用法總結

PHP面向對象——訪問修飾符

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結