Bootstrap - Components (2/2)


Breadcrumb

Breadcrumb は現在のページのナビゲーションでの位置を示す。

  <ol class="breadcrumb">
   <li><a href="#">Home</a></li>
   <li><a href="#">Library</a></li>
   <li class="active">Data</li>
  </ol> 

Pagination

Pagination はページの切り替えに使用するコンポーネントである。

  <nav>
   <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
   </ul>
  </nav>
 

次のようなページ切り替えもできる。

  <nav>
   <ul class="pager">
     <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Previous</a></li>
     <li class="next"><a href="#">Next <span aria-hidden="true">→</span></a></li>
   </ul>
  </nav>
 

Label

Label は外観はボタンに似ているが、スタティックなテキストである。

Default

Default

Success

Primary Danger Warning Info
   <span class="label label-default">Default</span>
   <h3 style="clear:all"><span class="label label-default">Default</span></h3>
   <h3><span class="label label-success">Success</span></h3>
   <span style="font-size:6pt;" class="label label-primary">Primary</span>
   <span style="font-size:9pt;" class="label label-danger">Danger</span>
   <span style="font-size:12pt;" class="label label-warning">Warning</span>
   <span style="font-size:16pt;" class="label label-info">Info</span>

Badge

Badge は Label に似ているが、丸い境界を持つ。

  <button class="btn btn-primary" type="button">
   Messages <span class="badge">4</span>
  </button> 

Jumbotron

Jumbotron はサイトの目立つショーケースとして使用する。

でか文字

Jumbotron はサイトの目立つショーケースとして使用する。

詳細..

<div class="jumbotron">
  <h1>でか文字</h1>
  <p>Jumbotron はサイトの目立つショーケースとして使用する。</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">詳細..</a></p>
</div>

Page header

class="page-header" を指定した div 内の h1 タグ内部に small タグを入れると大きな文字と小さい文字を混在できる。

<div class="page-header">
  <h1>ページヘッダ <small>サブテキスト</small></h1>
</div>

Thumbnail

Thumbnail は Bootstrap のグリッド系を拡張したものである。

<div class="row">
  <div class="col-xs-1">
    <a href="#" class="thumbnail">
      <img src="1CS.jpg" alt="1CS" />
    </a>
  </div>
  <div class="col-xs-1">
    <a href="#" class="thumbnail">
      <img src="2CS.jpg" alt="2CS" />
    </a>
  </div>
  <div class="col-xs-1">
    <a href="#" class="thumbnail">
      <img src="3CS.jpg" alt="3CS" />
    </a>
  </div>
</div>

Alert

Alert はメッセージを表示するのに使用する。

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>警告!</strong> 不正な文字が含まれています。
</div>

Progress bar

Progress bar は進捗率を表すコンポーネントである。

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Media object

風景その1

Media object は写真などの説明を入れるのに使用する。
<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="1CS.jpg" alt="1CS">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">風景その1</h4>
    Media object は写真などの説明を入れるのに使用する。
  </div>
</div>

List group

List group は項目の一覧を表示するのに使用する。

<ul class="list-group">
  <li class="list-group-item">とんかつ定食</li>
  <li class="list-group-item">生姜焼き定食</li>
  <li class="list-group-item">焼き魚定食</li>
  <li class="list-group-item">肉野菜炒め定食</li>
  <li class="list-group-item">日替わり定食</li>
</ul>

Panel

内容のみのパネル

タイトル

タイトルがあるパネル
<div class="panel panel-default">
  <div class="panel-body">
    内容のみのパネル
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">タイトル</h3>
  </div>
  <div class="panel-body">
    タイトルがあるパネル
  </div>
</div>

Responsive embed

Responsive embed はビデオやオブジェクトを埋め込むのに使用する。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="HTML5_Doc.pdf"></iframe>
</div>

Well

Well はシンプルな効果をテキストに与える。

Well です。
<div class="well well-lg">Well です。</div>