注目の記事 PICK UP!

bootstrap Bootstrap簡単入門(4)

26fde19616bb4dcf6b2a523162f7428c_m

Bootstrapは下の端末を左からlg,md,sm,xsと呼んでいます。
12というのは縦方向に12分割出来るという意味です。
ひとつの全体のブロックをrowでくくります。

size

今回の作成例

ウインドウサイズを変更すると横並びの個数が違ってきます。

 

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –>
<title>Bootstrap 101 Template</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<div class=”container”>
<div class=”row”>
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
</div>
</div>
</body>
</html>

ここの
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12″>

<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
として12個ほどコピーしてみます。
つまりlg は6個で和が12、smは4個で和が12、mdは3個で和が12、xsは既に12ということになります。
このためlgは6個並び、smは4個並び、mdは3個並び、xsは1個になります。
PCで表示されたらウインドウサイズを変更すると理解できます。

長いですがコピーしてBranketに張り付けてreidai5.htmlで保存してライブビューで見てみましょう。

画面の大きさで横並びで最大6~1の並びとなります。

ninzu

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –>
<title>Bootstrap 101 Template</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<div class=”container”>
<div class=”row”>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
<div class=”col-lg-2 col-md-3 col-sm-4 col-xs-12″>
<img src=”http://willcom-center.com/image/scene1.jpg” style=”width:100%”>
<h3>受付案内</h3>
<p>当施設の案内は、私が行います。ご遠慮なくお尋ねください。</p>
</div>
</div>
</div>
</body>
</html>

今回の作成例
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. aku02

    bootstrap Bootstrap簡単入門(3)

  2. sns2

    Bootstrap簡単入門

  3. bootstrap5

    bootstrap Bootstrap簡単入門(2)


周南市のホームページ制作会社ウィルコムはあなたのサービスを的確なターゲットに誘導させます

魅力的な動画を制作します
これからのWEB制作はこのサービスを提案します

オリジナルの楽曲を制作します
現在は無料ダウンロード実施中です
>

ホームページ制作現場から「ぶっちゃけシリーズ開始」

お気軽にお問合せ下さい
おおよその金額がわかると思います

ワードプレスのテンプレートを紹介しています
クールなホームページデザインをご一緒に見てみましょう

こんな感じの画面でホームページを制作しています

どんな戦略でどんな会社がどのように闘ってきたか
成功したか破滅したかそんなお話をします

アンドロイドマーケットでは4万件以上ダウンロードされてます

アンドロイドのレッスン場です
その後はベクトルを学習してみてください
PAGE TOP