Bootstrapってなんなの?状態の初心者がBootstrapについて勉強してみる その4

Bootstrapってなんなの?状態の初心者がBootstrapについて勉強してみるのコーナーです。

 

今回で4回目になりました。

その3から時間がたちましたが、Bootstrapの勉強に時間を割くことがなかなか出来なかったためで、決して勉強をやめたわけではございません。

 

1回目は、Bootstrapってなんなの?ってことや、Bootstrapの始め方を勉強しました。

2回目は、Bootstrapでのボタンの指定の仕方を学び、その簡単さに驚かされました。

3回目は、BootstarapはTableも簡単に綺麗に、そしてレスポンシブにしてくれることを学びました。

さて、4回目の今日は、Bootstrapの大きな特徴である、グリッドについて学ぼうと思います。

 

Bootstrapの大きな特徴はグリッドシステムです

グリッドシステムを使うことで、レスポンシブWebデザインを手軽に実現できます。

その恩恵を受けるためには、次の4つのルールを満たす必要があります。

  1. class=”container”でグリッド全体を指定する
  2. class=”row”の中に
  3. class=”col-{画面サイズオプション}-{columns}”でセル単位の指定を行う
  4. {columns}の合計値12になると次の行に表示する

ちょっとこれだけだとわかりにくいですね。

サンプルを載せます。


<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body class="container">
<div class="row">
<div class="col-lg-3" style="border:1px solid;">1</div>
<div class="col-lg-3 col-sm-3" style="border:1px solid;">2</div>
<div class="col-lg-2 col-sm-3" style="border:1px solid;">3</div>
<div class="col-lg-2 col-sm-3" style="border:1px solid;">4</div>
<div class="col-lg-1 col-sm-3" style="border:1px solid;">5</div>
<div class="col-lg-1 col-sm-3" style="border:1px solid;">6</div>
<div class="col-lg-6 col-sm-3" style="border:1px solid;">7</div>
<div class="col-lg-4 col-sm-3" style="border:1px solid;">8</div>
<div class="col-lg-2 col-sm-3" style="border:1px solid;">9</div>
</div>
</body>
</html>

結果は、

bootstrap-grid-sample-1

サンプルではご覧のとおり


style="border:1px solid;"

として簡単に罫線をいれ見やすくしました。

これだけで等間隔でGridを表示してくれます。素晴らしいですね、Bootstrap。

 

画面サイズオプションについて

先ほどのサンプルでは画面サイズオプションで「lg」を指定しました。

他に何が指定できるのかまとめておきましょう。

画面サイズオプションcontainerの横幅
xsNone (auto)
sm750px
md970px
lg1170px

 

実はこの画面サイズオプションは複数指定できます。

どういうことかというと、

大きい画面で見た場合は、1×12 で並べる

タブレットくらいの画面サイズの場合は、4×3 で並べる

モバイルくらいの画面サイズの場合は、2×6 で並べる

ということが指定できるんです。

 

サンプルを掲載しますので、興味のある方はコピペしてお試しください。


<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body class="container">
<div class="row">
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">1</div>
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">2</div>
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">3</div>
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">4</div>
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">5</div>
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">6</div>
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">7</div>
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">8</div>
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">9</div>
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">10</div>
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">11</div>
<div class="col-lg-1 col-sm-3 col-xs-6" style="border:1px solid;">12</div>
</div>
</body>
</html>

 

表示・非表示の制御

画面サイズオプションの指定と、

  • hidden-
  • visible-

を組み合わせることで、表示・非表示の制御を行うことができます。

要するに、

大きい画面で見た場合は、全て表示

モバイルくらいの画面サイズの場合は、あれとこれは非表示にする

といったことができるのです。

これについては、Bootstrapの公式サイトからまるっと引用しておきます。

bootstrap-available-classes

 

こんなに簡単にグリッドを使えるなんて、Bootstrapはすごすぎますね。

あんなことや、こんなことも出来そうで、嬉しくなってきますね。

 

ad

関連記事

no image

LPICレベル1合格を目指して その8

LPICレベル1を勉強するコーナーです。 前回は、基本的なコマン...

記事を読む

10インチ電子POPモニター『GP10D-WH』、3月に販売開始

皆さんこんにちは。 様々なところでITの技術が使われておりますね...

記事を読む

monacaでスマホアプリを作る!新しいプロジェクトを作成してみる。

皆さんこんにちは。 monacaでスマホを作ることを目標にしているコ...

記事を読む

Bootstrapってなんなの?状態の初心者がBootstrapについて勉強してみる

最近よく見聞きするBootstrap。 IT業界に長いこといなが...

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑