tech1000+

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

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

html/css
目次

ブートストラップ(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>

簡単な使い方

<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

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

<div class="redbox">col-{prefix}-offset-{columns}</div>

カラムの位置をずらす

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

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

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-xs-12">ＰＣでは２カラム・スマホでは１カラム</div>
    <div class="col-lg-4 col-xs-12">ＰＣでは２カラム・スマホでは１カラム</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>テーブル見出し１</th>
        <th>テーブル見出し２</th>
        <th>テーブル見出し３</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td>内容１</td>
          <td>内容２</td>
          <td>内容３</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>

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

要素にクラスを追記する

指定方法内容
navbar-fixed-topトップに固定
navbar-fixed-bottom下部に固定
navbar-inverse色を反転

ナビゲーションバーのサンプル


    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
      <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>

さらに多数のコンポーネント

多くの便利な使い方やサンプルが表記されている。
http://getbootstrap.com/components/