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

2019-03-19HTML&CSSBootstrap3

スポンサーリンク

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ボタン">

      
<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>

サイズ

   
<button class="btn btn-default btn-lg">default</button>
btn-lg :大
btn-sm:小
btn-xs:極小

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タグのどちらでも使用できる
色が汚いのが難点
薄い色:text-muted 青色:text-primary 緑色:text-success 水色:text-info 黄色:text-warning 赤色:text-danger
<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>

Posted by Agopeanuts