Bootstrapを使う環境を作る

Bootstrapを使うには2つの方法があります。

  • Bootstrapをダウンロードし、必要ファイルをサーバーにアップロードする
  • ダウンロードせずにCDN(Content Delivery Network)を使用する
    ※ローカル環境だと動かない場合があります。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet" >
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <h1>テンプレートです！</h1>
    HTMLを記述してください
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

グリッドシステムを使ってみる

Bootstrapのグリッドは優秀です。
モバイルファーストで設計されており、スマートフォン、タブレット、PC、PCでも大きめのモニタでブレイクポイントを設定しています。

基本的な設定
  1. .containerで表示枠を設定
  2. .rowで割付枠を設定
  3. .col-**-**でカラム数を設定（カラム数の合計は12です）
Extra small devices
スマートフォン		 Small devices
タブレット		 Medium devices
デスクトップPC		 Large devices
デスクトップPC
ブラウザ表示幅 768px未満 768px～991px 992px～1199px 1200px以上
container最大幅 auto 750px 970px 1170px
Class名称 col-xs-** col-sm-** col-md-** col-lg-**
カラム数 12
カラム最大幅 auto 60px 78px 95px
カラム余白 30（左右に15pxの余白）
入れ子表示 有効
オフセット表示 無効 有効
カラム表示順 無効 有効

これだけで表示デバイス（ウィンドウサイズ）によりレイアウトが変わってきます。
基本的にPCでコーディングし表示確認を行うと思いますが、最低でもブラウザのリサイズを行い各表示デバイスサイズの表示確認をして下さい。

グリッドシステムの設定

例01－タブレットサイズ以降カラム指定を行う
<div class="row">
  <div class="col-sm-2">col-02</div>
  <div class="col-sm-5">col-05</div>
  <div class="col-sm-5">col-05</div>
</div>
col-sm-02
col-sm-05
col-sm-05

ちなみに入れ子も行けます。

col-sm-02

col-05

col-sm-06
col-sm-06
<div class="col-sm-5">col-sm-02</div>
<div class="col-sm-5">
    <p>col-05</p>
    <div class="col-sm-6">col-sm-06</div>
    <div class="col-sm-6">col-sm-06</div>
  </div>
</div>

オフセットカラムの指定

グリッドは絶対に一列の合計を12にしなくても使えます。
そのような使い方をする場合オフセットカラムと言います。

オフセットカラムを使う場合は.col-**-offset-**を別途付与するだけで使えます。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

コンテナについて

Bootstrapには、固定幅のコンテナ(.cpntainer)と親要素の幅に合わせて伸びるタイプ（. container-fluid）の2種類があります。

グリッドレイアウトを使う場合にも影響しますので、デザインによって変更してください。

<!--固定幅の場合-->
<div class="container">
  <div class="row">
    <div class="col-md-6">col-md-6</div>
    <div class="col-md-6">col-md-6</div>
  </div>
</div>

<!--流動幅の場合-->
 <div class="container-fluid">
  <div class="row-fluid">
    <div class="col-md-6">col-md-6</div>
    <div class="col-md-6">col-md-6</div>
  </div>
</div>

まだ詳しく見たい場合は公式documentで。

ボタンのスタイル

Bootstrapにはボタンのデザインが数種類予め用意されています。
項目にとって色、大きさ、横の長さが選べますので組み合わせて使います。

ボタンのデザイン
default primary success info warning danger link Link 
<a class="btn btn-default" href="#" >default</a>
<a class="btn btn-primary" href="#" >primary</a>
<a class="btn btn-success" href="#" >success</a>
<a class="btn btn-info" href="#" >info</a>
<a class="btn btn-warning" href="#" >warning</a>
<a class="btn btn-danger" href="#" >danger</a>
<a class="btn btn-link" href="#" >link</a>
<a class="btn" href="#" >Link</a>
ボタンの大きさ

.btn-lg,.btn-sm,.btn-xsmでボタンの大きさを変更できます。
また.btn-blockをつけると横幅一杯のボタンになります。

Primary Link
Primary Link
Primary Link
Primary Link
Primary Link
ボタンの表示

.activeをつけるとONの状態になります。

Primary success Link 
<a href="#" class="btn btn-primary btn-lg active">Primary</a>
<a href="#" class="btn btn-success btn-lg active">success</a>
<a href="#" class="btn btn-default btn-lg active">Link</a>

.disabledをつけると無効の状態になります。

Primary success Link 
<a href="#" class="btn btn-primary btn-lg disabled">Primary</a>
<a href="#" class="btn btn-success btn-lg disabled">success</a>
<a href="#" class="btn btn-default btn-lg disabled">Link</a>

画像周りの加工

CSSで画像を加工できるような指定方法(classの指定)が予め用意されています。
よく使うものなので、覚えておいて損はないと思います。

  • 角丸形

  • サークル型

  • サムネイル型

<img src="img/thum.jpg" alt="" class="img-rounded">
<img src="img/thum.jpg" alt="" class="img-circle">
<img src="img/thum.jpg" alt="" class="img-thumbnail">
レスポンシブ対応
親要素の横幅に合わせて、画像の横幅を可変させたい場合は.img-responsiveを付与します。

<img src="img/thum.jpg" alt="" class="img-responsive">

レスポンシブによる表示・非表示

画面幅に要素を表示したり、非表示にする設定があります。
横幅の大きさに寄ってデザイン変更をする場合にも使えます。

Extra small devices スマートフォン (<768px) Small devices タブレット (≥768px) Medium devices デスクトップPC (≥992px) Large devices デスクトップPC (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

表示させる場合は、displayの設定とどの横幅から表示させるかを.visible-*-*の指定で確定出来ます。

Group of classes CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;