BootstrapのCSSでよく使いそうなサンプル

「Bootstrap」でよく使いそうと思われるまとめ。

外枠

  • 幅を指定する - .container
  • 幅を指定しない - .container-fluid

色系

「text-○○○」や「bg-○○○」の「○○○」に使われる名前と基本の色。

  • primary：青系
  • success：緑系
  • info：水色系
  • warning：黄色系
  • danger：赤系

※モノによっては上記以外に別記述があったりする。

文字色

「.text-muted」が別にいる

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

※参照：「Bootstrap.cssのHelper classes」のサンプル

背景色

.bg-primary：青系

.bg-success：緑系

.bg-info：水色系

.bg-warning：黄色系

.bg-danger：赤系

実際のソース 

<p class="bg-primary">.bg-primary：青系</p>
<p class="bg-success">.bg-success：緑系</p>
<p class="bg-info">.bg-info：水色系</p>
<p class="bg-warning">.bg-warning：黄色系</p>
<p class="bg-danger">.bg-danger：赤系</p>

※参照：「Bootstrap.cssのHelper classes」のサンプル

ボタン色

「.btn-default」「.btn-link」が別にいる

実際のソース 

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

※参照：「Bootstrap.cssのButtons」のサンプル

枠系

アラート

背景色＋文字色＋角丸のセット

alert-success：Well done!
You successfully read this important alert message.
alert-info：Heads up!
This alert needs your attention, but it's not super important.
alert-warning：Warning!
Better check yourself, you're not looking too good.
alert-danger：Oh snap!
Change a few things up and try submitting again.
実際のソース 

<div class="alert alert-success">
	alert-success：<strong>Well done!</strong><br />
	You successfully read this important alert message. 
</div>

<div class="alert alert-info">
	alert-info：<strong>Heads up!</strong><br />
	This alert needs your attention, but it's not super important. 
</div>

<div class="alert alert-warning">
	alert-warning：<strong>Warning!</strong><br />
	Better check yourself, you're not looking too good. 
</div>

<div class="alert alert-danger">
	alert-danger：<strong>Oh snap!</strong><br />
	Change a few things up and try submitting again. 
</div>

※参照：「Bootstrap ComponentsのAlerts」のサンプル

画像（サムネイル）＋テキスト

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

実際のソース 

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="./images/sample_cat.png">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p>
          <a href="#" class="btn btn-primary bootstrap" role="button">Button</a>
          <a href="#" class="btn btn-default bootstrap" role="button">Button</a>
        </p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="./images/sample_cat.png">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p>
          <a href="#" class="btn btn-primary bootstrap" role="button">Button</a>
          <a href="#" class="btn btn-default bootstrap" role="button">Button</a>
        </p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="./images/sample_cat.png">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p>
          <a href="#" class="btn btn-primary bootstrap" role="button">Button</a>
          <a href="#" class="btn btn-default bootstrap" role="button">Button</a>
        </p>
      </div>
    </div>
  </div>
</div>

※参照：「Bootstrap ComponentsのThumbnails」のサンプル

画像＋テキスト

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
実際のソース 

<div class="media">
  <div class="media-left">
    <a href="#"><img class="media-object" src="./images/sample_cat.png"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

※参照：「Bootstrap ComponentsのMedia object」のサンプル

ヘッダ・ボディ・フッタあり

Panel title

Panel content
Panel footer
実際のソース 

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title bootstrap">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

※参照：「Bootstrap ComponentsのPanels」のサンプル

Jumbotron？

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

実際のソース 

<div class="container-fluid">
  <div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-primary btn-lg bootstrap" href="#" role="button">Learn more</a></p>
  </div>
</div>

※参照：「Bootstrap ComponentsのJumbotron」のサンプル

Wells＝はめ込み？

ただの枠？

サイズ違い・大

サイズ違い・小

実際のソース 

<p class="well">ただの枠？</p>
<p class="well well-lg">サイズ違い・大</p>
<p class="well well-sm">サイズ違い・小</p>

テーブル

#姓名
1マークオット
2ヤコブトロントン
3ラリーバード
実際のソース 

<table class="table">
  <thead>
    <tr><th>#</th><th>姓</th><th>名</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>マーク</td><td>オット</td></tr>
    <tr><td>2</td><td>ヤコブ</td><td>トロントン</td></tr>
    <tr><td>3</td><td>ラリー</td><td>バード</td></tr>
  </tbody>
</table>

※参照：「Bootstrap.cssのTables」のサンプル

グリッドシステム：横並びのレイアウト

.col-xs-3
.col-xs-9
実際のソース 

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3" style="background-color:#ddd">.col-xs-3</div>
    <div class="col-xs-9" style="background-color:#bbb">.col-xs-9</div>
  </div>
</div>

※参照：「Bootstrap.cssのGrid system」のサンプル

form

Example block-level help text here.

実際のソース 

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
    <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

※参照：「Bootstrap.cssのForms」のサンプル

関連ページ

Copyright© 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.