bootstrapについての勉強メモ

2018年12月11日

CSSフレームワークとして有名な、Twitter bootstrapについての勉強メモです。

bootstrapのインクルード

ダウンロードしてFTPでアップロードしなくてもCDNからincludeする記述ができます。

//4系
//ヘッダに記述
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

//フッタに記述
<!-- オプションのJavaScript -->
<!-- 最初にjQuery、次にPopper.js、次にBootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

グリッドシステム

bootstrapは、12本のグリッドで構成されていて、幅を指定する場合にそのグリッドのどれだけを利用するかを指定でき、幅指定がスムーズです。

クラス

.container　クラス

全体を囲うコンテナです。
画面幅によって可変です。

.container-fluid　クラス
可変のコンテナです

.row
行に与えるクラス

.col
列に与えるクラス

.col-画面幅-グリッド数

画面幅
bootstrap3系 .col-xs Extra Samll オートレイアウト(全幅に対応、主にスマホ縦用)
bootstrap4系 .col- Extra Samll オートレイアウト(全幅に対応、主にスマホ縦用)
3、４共通 .col-sm Samll 576px(スマホ横)
3、４共通 .col-md Medium 720px (PC)
3、４共通 .col-lg Large 940px(PC)
3、４共通 .col-xl ExtraLarge 114opx(PC)

レスポンシブの対応

列のグリッド指定は、12を超えると自動的に折り返します。

この仕組みを使って、例えばレシポンシブで記述する場合は以下のようにします。

<div class="container">

<div class="col-xs-12 col-md-4">
左カラム(PCのときは左カラムの隣に右カラムが回り込む、スマホのときは下に回りこむ)
</div>
<div class="col-xs-12 col-md-8">
右カラム
</div>

</div>

上記はBootstrap3系の場合で、bootstrapが4系の場合は以下の記述になります。
col-xsが4系ではcol-になっている他、containerだけでなく、rowで囲ってやらないといけなくなっています。

<div class="container">
 <div class="row">
<div class="col-12 col-md-4">
左カラム(PCのときは左カラムの隣に右カラムが回り込む、スマホのときは下に回りこむ)
</div>
<div class="col-12 col-md-8">
右カラム
</div>
 </div>
</div>

上記のように記述すると、スマホレイアウトのときは左カラムの下に右カラムが入ります。(.col-xs-12 4系では .col-12が適用される)
PCで見た時は、左カラムの横に右カラムが回り込みます(.col-md-4、.col-md-8)

メニューを折りたたみ式にしたい

collapseというクラスを指定することで、メニューを折りたたみ式にすることが可能です。

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#menu">menu</button>
<ul id="menu" class="collapse">
    <li></li>
<li></li>
    </ul>

テーブルのtdの横幅

bootstrap4からは、 class=”w-◯◯”(◯◯は数字)で横幅を%指定できる。