Bootstrapの使い方

Bootstrap概要

  • http://getbootstrap.com/
  • http://bootstrap3.cyberlab.info/
    細かいことはあまたあるBootstrap解説しているサイトを見てみてください。ここではプラクティスだけにしてます。
    Bootstrapをダウンロードして使うわけですがCDNもあるので開発途上ではそれを使った方が便利です。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

CSSとJSで基本動作を制御してます。
古いIEの対応を求められたときは、html5shiv.min.jsとrespond.min.jsが必要になるかもです。

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

諸々必要なものを最低限揃えると以下の雛形みたいになります。

雛形

とりあえずはこんな雛形でいくのがいいかもです。これでだいたいの素材は揃った感じです。

<!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">
        <title>タイトル</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <!--css-->
        <link rel="stylesheet" type="text/css" href="assets/css/original.css" media="all" /><!--オリジナルのCSS-->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h1>foo bar</h1>
  </body>
</html>

グリットシステム

Bootstrapは実際使うとかなり使いづらいです。正直フルカスタム系のコーディングをやっている人間にとってはかなり面倒な規約が満載ですが、グリッドシステムは充分に使う余地があるかなと思いました。とはいえBootstrapのバージョンがどんどん上がってゆく中では結果的には普遍的な標準にはなりえないという気がしてます。何ですかね、あの標準化信仰は。
ここがわかりやすくて詳しいです。

ブレークポイント

ブレイクポイントは、768px,992px,1200pxに用意されており、

  • ~767px
  • 768px~991px
  • 992~1119px
  • 1200px~

でうまいこと切り替わるようになっています。
それぞれcol-[prefix]-[数字]というクラスで指定することで該当のブレイクポイントでレイアウトを変更できます。それぞれで指定するクラス名は下記表を参照してください。

スマホ
767px以下
タブレット
768px〜991px
PC
992px〜1119px
PC大画面
1200px以上
class名prefix .col-xs-* .col-sm-* .col-md-* .col-lg-*
.containerの表示幅 自動 750px 970px 1170px
カラム数 12 12 12 12

クラスの切り替えはこちら

スマホ
767px以下
タブレット
768px〜991px
PC
992px〜1119px
PC大画面
1200px以上
.visible-xs-* display none none none
.visible-sm-* none display none none
.visible-md-* none none display none
.visible-lg-* none none none display
.hidden-xs none display display display
.hidden-sm display none display display
.hidden-md display display none display
.hidden-lg display display display none

充分エセポンシブ(*1)にも対応できそうです。
例えばですが、lg(大画面PC)では6カラム、md(普通のPC)は3カラム、sm(タブレット)は2カラム、xs(スマホ)は1カラム(つまり縦積み)というつくりにしたいときは以下のようになります。

<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="block-inner">
                foo bar
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="block-inner">
                foo bar
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="block-inner">
                foo bar
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="block-inner">
                foo bar
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="block-inner">
                foo bar
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
            <div class="block-inner">
                foo bar
            </div>
        </div>
    </div>
</div>

問題点としてというかカラムが5個のときはどうするんだ?みたいなことがあって、通常うまい具合にセンタリングすればいいという感じではありますが、デフォルトのBootstrapの機能を最大限且つシンプルに適用するのだったら無理な無駄なセンタリングとか、そもそも12個のカラムセットに合わないデザインやコンテンツ自体がBootstrap使う意味なしということになります。

ここのサンプルが気持ちがいいです。
http://bootstrap3-guide.com/base/grid_demo_basic.html
http://bootstrap3-guide.com/base/grid_demo_visible.html

全幅の設定

margin:0;padding:0でもって100%幅の全幅の設定は、jumbotronクラスを使えばよさそうです。jumbotronクラスにcontainerクラスを入れ子にするとマージンが自動的に挿入されるので全幅にならないのでご注意です。

<article class="jumbotron">
    <img src="assets/img/main.jpg">
</article>

デフォルトのデザインをカスタマイズする

http://getbootstrap.com/customize/
デザインがかっちり固定してしまっているところがBootstrapのいいところでありつつも、それにカスタマイズをかけると今度はBootstrap使っている意味がなくなるということですが、デフォルトの値をある程度カスタマイズできます。カスタマイズした後にコンパイルするのでBootStrapの機能を損なわずに使えます。使える項目は以下になります。私個人としてはGrid systemだけで事足りるのではないかと思っています。

Common CSS

  • Print media styles
  • Typography
  • Code
  • Grid system
  • Tables
  • Forms
  • Buttons
  • Responsive utilities

Components

  • Components
  • Glyphicons
  • Button groups
  • Input groups
  • Navs
  • Navbar
  • Breadcrumbs
  • Pagination
  • Pager
  • Labels
  • Badges
  • Jumbotron
  • Thumbnails
  • Alerts
  • Progress bars
  • Media items
  • List groups
  • Panels
  • Responsive embed
  • Wells
  • Close icon

JavaScript components

  • JavaScript components
  • Component animations (for JS)
  • (includes Collapse)
  • Dropdown
  • Tooltip
  • Popover
  • Modal
  • Carousel

グリットシステムだけだったら、カラムを60分割ぐらいにして、それだけ使うのが良さそうです。


*1 度々saba noteで使わせてい頂いておりますが、ちゃんとしたレスポンシブコーディングを「ガチポンシブ」、ブロックの表示・非表示で内部的には2ソースでやりくりしている偽物のレスポンシブデザインを「エセポンシブ」と定義しております。


Bootstrap3の使い方
http://bootstrap3-guide.com/base/grid.html#basic

Last update: 2017.11.18 (土)