Bootstrap カスタム グリッド クラス Grid System
メディアクエリ
メディア クエリは、非常に手の込んだ「条件付き CSS ルール」です。特定の条件に基づいた一部の CSS でのみ機能します。これらの条件が満たされた場合、対応するスタイルが適用されます。
Bootstrap のメディア クエリを使用すると、ビューポート サイズに基づいてコンテンツを移動、表示、および非表示にすることができます。次のメディア クエリは、LESS ファイルで使用され、Bootstrap グリッド システムでキー ブレークポイントのしきい値を作成します。
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
また、CSS の効果をより狭い範囲の画面サイズに制限するために、メディア クエリ コードに max-width を含めることもあります。
@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) { ... }
メディア クエリには 2 つの部分があります。最初にデバイスの仕様、次にサイズ ルールです。上記の場合、次のルールが設定されます。
次のコード行を見てみましょう。
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
min-width: @screen-sm-min を持つすべてのデバイスで、画面の幅が @screen-sm-max より小さい場合、何らかの処理が行われます。
グリッド オプション
| 装置 | クラスクラス |
|---|---|
| 超小型デバイス モバイル (<768px) | .col-xs- |
| 小型デバイス タブレット (≥768px) | .col-sm- |
| 中型機器デスクトップパソコン（992px以上） | .col-md- |
| 大型機器デスクトップパソコン（1200px以上） | .col-lg- |
テスト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- 自定义网格类 Grid System
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
class="col-xs-6 col-sm-4 col-md-2"
网格系统是通过指定您想要横跨的十二个可用的列来创建的。
例如，要创建三个相等的列，则使用三个 .col-xs-4。
不同的设备Class前缀不同 -->
<div class="container">
<!-- 一旦添加了容器，接下来您需要考虑以行为单位。添加 <div class="row">...</div>， -->
<div class="rows">
<div class="col-xs-6 col-sm-4 col-md-3" style="background-color: bisque; border: black solid 1px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-xs-6 col-sm-4 col-md-3" style="background-color: bisque; border: black solid 1px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-xs-6 col-sm-4 col-md-3" style="background-color: bisque; border: black solid 1px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-xs-6 col-sm-4 col-md-3" style="background-color: bisque; border: black solid 1px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- 确保总和总是 12 9+3=12-->
<div class="rows">
<div class="col-md-9" style="background-color: darkgray; border: black solid 1px;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>
</div>
<div class="col-md-3" style="background-color: darkgray; border: black solid 1px;">
<p>quis nostrud exercitation
</p>
</div>
</div>
</div>
</body>
</html>
ルーキーチュートリアルを参照