オンラインツール

Bootstrap基本チュートリアル

Bootstrap グリッドシステムの例：スマートフォン、タブレット、デスクトップ Bootstrap グリッドシステムの例：水平に並べ替え

Bootstrapプラグイン

Bootstrapグリッドシステムの例：中型と大型デバイス例：水平に並べた中で、基本的なグリッドシステムについて見てきました。ここでは、 2 個のdivがあり、ビューポートの幅の中央にそれらを配置します 50%/50%　分割：

<div>....</div>
<div>....</div>

ただし、大規模デバイスでは、最終的に 33%/66%。したがって、私たちはブレイクポイントで列の幅を変更する準備をしなければなりません：

<div>....</div>
<div>....</div>

現在Bootstrapが中型デバイスで、 md のクラスを持ち、それらを使用します。大規模デバイスでは、 lg のクラスを持ち、それらを使用します。このサンプルでは、私たちの 2 個のdivが、 50%/50%　分割に変換されます 33%/66%。以下のサンプルを確認してください。（各列にスタイルをそれぞれ定義することを避けることができます。）

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap　サンプル　-　中型と大型デバイス</title>
　　　<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>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div class="col-md-6　col-lg-4" style="background-color: #dedef8;　
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
　　　　　　　　　<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>
　　　　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium, totam rem aperiam, eaque ipsa　
　　　　　　　　　　　　quae ab illo inventore veritatis et quasi architecto beatae vitae　
　　　　　　　　　　　　dicta sunt explicabo.　
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-md-6　col-lg-8" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
　　　　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium.
　　　　　　　　　</p>
　　　　　　　　　<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,　
　　　　　　　　　　　　consectetur, adipisci velit, sed quia non numquam eiusmodi　
　　　　　　　　　　　　tempora　incidunt　ut　labore　et　dolore　magnam　aliquam　quaerat　
　　　　　　　　　　　　voluptatem.　
　　　　　　　　　</p>
　　　	</div>
　　</div>
</div>
</body>
</html>

テストを見てみる ‹/›

以下の結果が表示されます：

Bootstrap グリッドシステムの例：スマートフォン、タブレット、デスクトップ Bootstrap グリッドシステムの例：水平に並べ替え