プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

【HTML/CSS】 ブートストラップ(Bootstrap)まずは基本の使い方

ブートストラップ(Bootstrap)とは

CSSフレームワークで有名なもので、既にCSSが書かれたファイルを読み込んで、HTMLにクラス指定するだけで簡単にwebデザインができるというもの。

メリット

モックアップの作成やレスポンシブデザインでのレイアウトが容易

デメリット

デザインが似やすい。バージョンアップが早い。HTMLとCSSでガリガリ書くのに慣れている場合は、クラス指定の名称等のルールを見ながら作らないといけないので、最初はもどかしく感じるかも。

HTMLのテンプレート

Bootstrapをダウンロードしたら、以下の内容でhtmlファイルを作成する。

<!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>Bootstrap Sample</title>
    <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

簡単な使い方

<div class="container"></div>
<!-- .containerで囲った部分は中央寄せ -->

<p class="text-left">左寄せ</p>
<p class="text-center">中央寄せ</p>
<p class="text-right">右寄せ</p
<!-- テキストの配置は.text-○○のクラス指定で -->

グリッドシステムのルール

レスポンシブデザインを簡単に実装するためのグリッドシステムを使う際のルール

・class=”container”または”container-fluid”の中に書く
・かつclass=”row”の中に書く
・class=”col-○○-●●”の形式で
・●●は合計値が12になるように指定

○○の部分にはprefixの指定をするため、以下の画面サイズ対応表を参照

対応デバイス 画面サイズ ○○の指定方法
デスクトップ 1200px以上 lg
デスクトップ 992px以上、1200px未満 md
タブレット 768px以上、992px未満 sm
モバイル 768px以下 xs

カラムに隙間を作りたい場合

col-{prefix}-offset-{columns}

カラムの位置をずらす

前に移動させるカラム
col-{prefix}-pull-{columns}

後ろに移動させるカラム
col-{prefix}-push-{columns}

グリッドシステムを使ったレイアウトサンプル

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-xs-12">PCでは2カラム・スマホでは1カラム</div>
    <div class="col-lg-4 col-xs-12">PCでは2カラム・スマホでは1カラム</div>
  </div>
</div>

ボタンのclass指定

ボタンの色の指定方法

<button type="button" class="btn btn-default">白いボタン</button>
<button type="button" class="btn btn-primary">青いボタン</button>
<button type="button" class="btn btn-success">緑ボタン</button>
<button type="button" class="btn btn-info">水色ボタン</button>
<button type="button" class="btn btn-warning">黄色ボタン</button>
<button type="button" class="btn btn-danger">赤ボタン</button>
<button type="button" class="btn btn-link">枠なしボタン</button>

ボタンのサイズ

<button type="button" class="btn btn-default btn-lg">大きなボタン</button>
<button type="button" class="btn btn-default">普通のボタン</button>
<button type="button" class="btn btn-default btn-sm">小さなボタン</button>
<button type="button" class="btn btn-default btn-xs">より小さなボタン</button>

テーブルの使い方

テーブルを使う時のルール

・class=”container”の中に書く
・かつtable要素にclass=”table”をつける
・table class=”table-○○”でオプションの指定ができる

テーブルレイアウトの種類

指定方法 内容
table table-striped 一行置きに背景色を変える
table table-bordered 枠線を加える

テーブルのサンプル

<div class="container">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>テーブル見出し1</th>
        <th>テーブル見出し2</th>
        <th>テーブル見出し3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td>内容1</td>
          <td>内容2</td>
          <td>内容3</td>
      </tr>
    </tbody>
  </table>
</div>

ナビゲーションバーの配置

デフォルトのナビゲーションバー(使わないような部分は外してある)

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

ナビゲーションバーのオプション