BootStrapを使ってみたくなったのでドットインストールさんのBootstrap 3.0入門で勉強した内容のメモです。
講座では3.0ですが、4.0βで学習をしています。
Bootstrap v3.0からv4.0βに置き換えるに当たっての差分情報
後方互換じゃない変更もあるので、しっかり確認しないとハマります。（ハマりました）
BootstrapをDLして、そのフォルダの中にindex.htmlを作るまで
Bootstrap - Downloadページの Compiled CSS and JS をDLします。
Bootstrap -Starter templateをコピーして、index.htmlを作ります。
ドットインストール - #04 レスポンシブWebデザインを使おう
学んだこと
画面サイズに応じてのブロック要素が使用するグリッドサイズを変更
画面サイズに応じてブロック要素を表示/非表示を切り替える
画面サイズに応じてのブロック要素が使用するグリッドサイズを変更
該当するブロックのクラスに複数のクラス名を指定することで、画面サイズに応じてグリッドサイズを変更できます。
注意点として、v3からv4への変更点として、例えばExtra smallの構文が col-xs- から col- に変わっています。
Bootstrap v4.0 - Grid options を参考にクラス名を記載します。
<!--
Side2ブロックを画面サイズがSmall以上なら3グリッド、Extra smallなら6グリッドで表示する。
-->
<!-- Bootstrap v3での実装-->
<div class="col-sm-3 col-xs-6" style="background:orange;">Side2</div>
<!-- Bootstrap v4βでの実装-->
<div class="col-sm-3 col-6" style="background:orange;">Side2</div>
画面サイズに応じてブロック要素を表示/非表示を切り替える
注意点として、v3 から v4α そして v4βそれぞれで記載方法が変更になっています。上述しているそれぞれの差分情報を確認しましょう。
<!--
画面サイズがExtra small以下になったらSide2ブロックを非表示にする。
-->
<!-- Bootstarp v3での実装 -->
<div class="col-sm-3 hidden-xs" style="background:orange;">Side2</div>
<!-- Bootstrap v4αでの実装 -->
<div class="col-sm-3 hidden-xs-down" style="background:orange;">Side2</div>
<!-- Bootstrap v4βでの実装 -->
<div class="col-sm-3 d-none d-sm-block" style="background:orange;">Side2</div>
Demoソース
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div id="header" class="container" style="background:red">header</div>
<div class="container">
<div class="row">
<div class="col-sm-3 d-none d-sm-block" style="background:gray;">Side1: Extra Small以下で非表示</div>
<div class="col-sm-6 col-6" style="background:green;">Main</div>
<div class="col-sm-3 col-6" style="background:orange;">Side2</div>
</div>
</div>
<div id="footer" class="container" style="background:blue">footer</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
ドットインストール - #05 tableのスタイリングをしよう
学んだこと
<table class="">に Bootstrap - Tables に記載されているクラス名を追加することで色々と見た目を変えることができる。
Demoソース
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container" style="padding:20px 0">
<table class="table table-striped table-bordered table-hover table-sm">
<thead class="table-inverse">
<tr><th>ID</th><th>Score</th></tr>
</thead>
<tbody>
<tr class="table-primary"><td>@hoge</td><td>200</td></tr>
<tr><td>@fuga</td><td>300</td></tr>
<tr><td>@foo</td><td>400</td></tr>
</tbody>
</table>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>