[Bootstrap3] よく使うクラス一覧

2019-03-19HTML&CSSBootstrap3

Bootstrap CDN

Bootstrap3 CDN

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

ボタン

設置

<a class="btn btn-default" href="#" role="button">a要素</a>
<button class="btn btn-default">button要素</button>
<input class="btn btn-default" type="button" value="input要素">
<input class="btn btn-default" type="submit" value="submitボタン">

色

default primary success info warning danger link

<button class="btn btn-default">default</button>
<button class="btn btn-primary">primary</button>
<button class="btn btn-success">success</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-link">link</button>

サイズ

大 default 小 極小

<button class="btn btn-default btn-lg">default</button>

Disabled

Disabledボタン

<button class="btn btn-primary" disabled="disabled">ボタン</button>

テーブル

設置

サンプルテーブル

ID	氏名
001	花子

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>氏名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>花子</td>
    </tr>
  </tbody>
</table>

ストライプ

<table class="table table-striped">

枠線有り

<table class="table table-bordered">

ホバー

<table class="table table-hover">

コンパクト

セル内の余白が半分になる

<table class="table table-condensed">

レスポンシブ

表示領域の幅が狭くても、表のセル内のテキストを改行しない。表示しきれない場合、水平方向のスクロールバーが現れる

<div class="table-responsive">
  <table class="table">
  </table>
</div>

行に色つける

<tr class="danger">
<tr class="warning">
<tr class="info">
<tr class="success">
<tr class="active">

セルに色つける

<th class="danger">
<th class="warning">
<th class="info">
<th class="success">
<th class="active">

テキスト

色

pタグ、spanタグのどちらでも使用できる
色が汚いのが難点

<p class="text-muted">薄い色：text-muted</p>
<p class="text-primary">青色：text-primary</p>
<p class="text-success">緑色：text-success</p>
<p class="text-info">水色：text-info</p>
<p class="text-warning">黄色：text-warning</p>
<p class="text-danger">赤色：text-danger</p>

左右中央寄せ

<p class="text-left">左寄せ</p>
<p class="text-center">中央寄せ</p>
<p class="text-right">右寄せ</p>
<p class="text-justify">両端揃え</p>
<p class="text-nowrap">改行なし</p>

ヘルプ・テキスト

入力フォームの補足とか注意書きなんかに使う薄い色のテキスト

<form>
  <div class="form-group">
    <label class="control-label" for="phone">電話番号</label>
    <input type="text" class="form-control" id="phone" placeholder="電話番号を入力">
    <span id="helpBlock" class="help-block">半角数字のみ・ハイフンは入れないでください</span>
  </div>
</form>

ブロックの左右中央寄せ

display: block;、margin-left: auto;、margin-right: auto;を指定するクラス

<div class="pull-left">左寄せ</div>
<div class="center-block">中央寄せ</div>
<div class="pull-right">右寄せ</div>

ボタンにも使える

ボタン中央

<button class="btn btn-success center-block">ボタン</button>

オフセット・カラムを使う

<div class="container">
    <div class="row">
       <div class="col-ms-10 col-ms-offset-1">col-ms-10 col-ms-offset-1</div>
    </div>
    <div class="row">
        <div class="col-ms-8 col-ms-offset-2">col-ms-8 col-ms-offset-2</div>
    </div>
    <div class="row">
        <div class="col-ms-6 col-ms-offset-3">col-ms-6 col-ms-offset-3</div>
    </div>
    <div class="row">
        <div class="col-ms-4 col-ms-offset-4">col-ms-4 col-ms-offset-4</div>
    </div>
    <div class="row">
        <div class="col-ms-2 col-ms-offset-5">col-ms-2 col-ms-offset-5</div>
    </div>
</div>

ラベル

Default Primary Success Info Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>