オンラインツール

Bootstrap 基礎チュートリアル

Bootstrap プラグイン

Bootstrap グリッドシステムのサンプル：スマートフォン、タブレット、デスクトップ中型および大型デバイス。次に、別のサンプルを見てみましょう。小さなスマートフォンにも適用します。タブレットの列を以下のように分割します 25%/75%、以下のオプションを追加します：

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

現在、以下を提供しています 3 の異なる列レイアウトがあり、3つのデバイスに対応しています。スマートフォンでは、左側 25% 右側 75%のレイアウト。タブレットでは、以下のようになります 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-sm-3　col-md-6　col-lg-8"　　
　　　　　　　　　style="background-color: #dedef8;　
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444,　
　　　　　　　　　inset　-1px　1px　1px #444">
　　　　　　　　　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>
　　　　　　　　　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-sm-9　col-md-6　col-lg-4"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444,　
　　　　　　　　　inset　-1px　1px　1px #444">
　　　　　　　　　Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium.
　　　　　　　　　</p>
　　　　　　　　　Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,　
　　　　　　　　　　　　consectetur, adipisci velit, sed quia non numquam eius Modi　
　　　　　　　　　　　　tempora　incidunt　ut　labore　et　dolore　magnam　aliquam　quaerat　
　　　　　　　　　　　　voluptatem.　
　　　　　　　　　</p>
　　　	</div>
　　</div>
</div>
</body>
</html>

テストを見てみる ‹/›

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

Bootstrap グリッドシステムの例：中サイズと大サイズのデバイス