このエントリーをはてなブックマークに追加

Base CSS



引用

引用を表示する時に使用するタグです。
通常の<blockquote>はインデントされるだけですが、Twitter Bootstrapでは判りやすいように文字寄せ方向に縦線が入ります。
どの様に表示されるかはサンプルを御覧下さい。

タグ名 機能
<blockquote> 文章を引用・転載する時に使用するタグです
オプションクラス
  • pull-left 左寄せされます
  • pull-right 右寄せされます
指定無しで左寄せとなります
<small> 出典・参照先を表示する時に使用するタグですが省略可能です
文字色が薄くなり左側にが表示されます
<cite> 出典・参照先を指定する時に使用するタグですが省略可能です
通常ではイタリック体表示されるようですが、Twitter Bootstrapでは通常表示のようです

サンプルは以下の通りです。

<p>引用を開始します。</p>
<div class="row">
    <div class="span6">
        <blockquote>
            <p>引用されている箇所になります。通常・左寄せの場合は左側に縦線が入ります。</p>
            <small>引用元は<cite>http://greenapple-room.com</cite></small>
        </blockquote>
    </div>
    <div class="span6">
        <blockquote class="pull-right">
            <p>引用されている箇所になります。右寄せの場合は右側に縦線が入ります。</p>
            <small>引用元は<cite>http://greenapple-room.com</cite></small>
        </blockquote>
    </div>
</div>
<p>引用の終了です。</p>

引用を開始します。

引用されている箇所になります。通常・左寄せの場合は左側に縦線が入ります。

引用元はgreenapple-room.com

引用されている箇所になります。右寄せの場合は右側に縦線が入ります。

引用元はgreenapple-room.com

引用の終了です。



リスト表示

リスト表示する時に使用するタグです。
通常の<ul><ol><dl>と変わりませんが、クラスを追加する事で若干表示が変わります。

タグ名 機能
<ul> 順序のないリストを表示する際に使用するタグです
オプションクラス
  • unstyled 入れ子の部分のみリストマーカーが表示されます
<ol> 順序のあるリストを表示する際に使用するタグです
<dl> 定義・説明リストを表す際に使用するタグです
オプションクラス
  • dl-horizontal 改行されずに表示されます

サンプルは以下の通りです。

<ul>
    <li>Twitter Bootstrapを使うための準備</li>
    <li>基本的な事
        <ul>
            <li>グリッドデザイン</li><li>可変グリッドデザイン</li><li>オフセットカラム</li><li>段組を入れ子にする</li>
        </ul>
    </li>
    <li>Base CSS</li>
    <li>Components</li>
    <li>javascript plugins</li>
</ul>
<ol>
    <li>Twitter Bootstrapを使うための準備</li>
    <li>基本的な事</li>
    <li>Base CSS</li>
    <li>Components</li>
    <li>javascript plugins</li>
</ol>
<dl>
    <dt>&lt;ul&gt;</dt>
        <dd>順序のないリストを表示する際に使用する</dd>
    <dt>&lt;ol&gt;</dt>
        <dd>順序のあるリストを表示する際に使用する</dd>
    <dt>&lt;dl&gt;</dt>
        <dd>定義・説明リストを表す際に使用する</dd>
</dl>

<ul>

  • Twitter Bootstrapを使うための準備
  • 基本的な事
    • グリッドデザイン
    • 可変グリッドデザイン
    • オフセットカラム
    • 段組を入れ子にする
  • Base CSS
  • Components
  • javascript plugins

<ul class="unstyled">

  • Twitter Bootstrapを使うための準備
  • 基本的な事
    • グリッドデザイン
    • 可変グリッドデザイン
    • オフセットカラム
    • 段組を入れ子にする
  • Base CSS
  • Components
  • javascript plugins

<ol>

  1. Twitter Bootstrapを使うための準備
  2. 基本的な事
  3. Base CSS
  4. Components
  5. javascript plugins

<dl>

<ul>
順序のないリストを表示する際に使用する
<ol>
順序のあるリストを表示する際に使用する
<dl>
定義・説明リストを表す際に使用する

<dl class="dl-horizontal">

<ul>
順序のないリストを表示する際に使用する
<ol>
順序のあるリストを表示する際に使用する
<dl>
定義・説明リストを表す際に使用する


コードスニペット

強調単語・コード・囲み付き文章等を表示する時に使用するタグです。
タグ内では角括弧をエスケープして下さい。

タグ名 機能
<code> 枠付き赤文字表示(左に表示されているような感じ)になります
このホームページではタグやクラスなどを記述する時に使用していますが、使い方は人それぞれかと思います
<pre> 枠付き黒文字表示になります
コードや強調したい文章などを記述する時に使用すればいいかと思います

サンプルは以下の通りです。

<code>&lt;sample&gt;</code>
<pre>
枠付き赤文字表示(左に表示されているような感じ)になります
このホームページではタグやクラスなどを記述する時に使用していますが、使い方は人それぞれかと思います
</pre>

<sample>

枠付き赤文字表示(左に表示されているような感じ)になります
このホームページではタグやクラスなどを記述する時に使用していますが、使い方は人それぞれかと思います


テーブル

テーブルを表示する時に使用するタグです。
通常のテーブルタグと使い方は同じですが、<thead><tbody>を必ず指定して下さい。
テーブルの表示方法を指定するオプションクラスがあります。

タグ名 機能
<table> テーブルを表示するタグです
オプションクラス
  • 指定無し 装飾無し表示となります
  • table 横幅が均等表示になり行間にラインが表示されるので、通常はこのオプションクラスを付けることをお薦めします
  • table-bordered 枠囲み表示されます
  • table-striped 1行ごとにバック色が変わります
  • table-condensed 1行の高さが低くなります
<thead> テーブルのヘッダ行を記述します
<tbody> テーブルのデータ行を記述します

サンプルは以下の通りです。

<table class="table table-striped table-bordered table-condensed">
    <thead>
        <tr><th>ヘッダ項目1</th><th>ヘッダ項目2</th></tr>
    </thead>
    <tbody>
        <tr><td>データ1-1</td><td>データ1-2</td></tr>
        <tr><td>データ2-1</td><td>データ2-2</td></tr>
        <tr><td>データ3-1</td><td>データ3-2</td></tr>
    </tbody>
</table>

指定無し

ヘッダ項目1ヘッダ項目2
データ1-1データ1-2
データ2-1データ2-2
データ3-1データ3-2

table

ヘッダ項目1ヘッダ項目2
データ1-1データ1-2
データ2-1データ2-2
データ3-1データ3-2

table

table-bordered

ヘッダ項目1ヘッダ項目2
データ1-1データ1-2
データ2-1データ2-2
データ3-1データ3-2

table

table-striped

ヘッダ項目1ヘッダ項目2
データ1-1データ1-2
データ2-1データ2-2
データ3-1データ3-2

table

table-condensed

ヘッダ項目1ヘッダ項目2
データ1-1データ1-2
データ2-1データ2-2
データ3-1データ3-2

table

table-striped

table-bordered

table-condensed

ヘッダ項目1ヘッダ項目2
データ1-1データ1-2
データ2-1データ2-2
データ3-1データ3-2


アイコン

アイコンを表示するオプションクラスです。
小さいアイコンなので文字サイズによっては見栄えが悪くなるので、位置調整を行ったほうが綺麗に見えます。

タグ名 機能
<i> <i>タグはイタリック表示する為のタグですが、オプションクラスを指定する事でアイコンを表示します。
オプションクラス
  • *** ***で指定されたアイコン名のアイコンを表示します。
  • icon-white 指定されたアイコンが白で表示されます

アイコン・アイコン名は以下の通りです。

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

サンプルは以下の通りです。

<p><i class="icon-glass"></i>icon-glass</p>
<button class="btn btn-primary"><i class="icon-envelope icon-white" style="margin-top: 1px;"></i> submit</button>

icon-glass



ボタン

タグにボタンのスタイルを適用するオプションクラスです。
マウスオーバー・マウスダウン時の効果が自動的に付加されます。
色々なタグに適用できますが、<a><button><input>タグに使用して下さい。
ボタン色・ボタンサイズ・ボタン状態を指定するオプションクラスもあります。

ボタンオプションクラス名
btn
btn btn-primary
btn btn-info
btn btn-success
btn btn-warning
btn btn-danger
btn btn-inverse
ボタンオプションクラス名
btn btn-large
btn btn btn-small
btn btn-mini
btn disabled

サンプルは以下の通りです。

<a class="btn">Link</a>
<button class="btn btn-primary">Button</button>
<input class="btn btn-info" type="button" value="Input Button">
<input class="btn btn-success" type="submit" value="Submit Button">
Link


フォーム

4つのフォームレイアウトをサポートしています。
基本的には通常のフォーム記述と同じですが、何箇所かの変更があります。
表示色・入力コントロールサイズ・表示方法を指定するオプションクラスもあります。

オプションクラス名 機能
form-vertical 左寄せでラベル・入力コントロールが改行されて表示されます
フォームレイアウトを指定しない場合は、このオプションクラスが採用されます
form-inline 改行されずに右に並べて表示されます
但しhelp-block等があると改行されてしまいます
form-search 検索用のフォームレイアウトです
form-horizontal ラベルと入力コントロールを1つのグループとし、ラベルは右寄せ・入力コントロールは左寄せで並んで表示されます
複数のラベルと入力コントロールがある場合は、それぞれを1つのグループとします
大まかな記述方法としては
  • 1つのグループを<div class="control-group">で囲む
  • ラベルにはcontrol-labelオプションクラスを付加する
  • 入力コントロールを<div class="controls">で囲む
  • フォームに決定ボタンなどを設置する場合は<div class="form-actions">で囲む
となります
色を付けたり特殊な表示する時は<control-group>にオプションクラスを追加します
なので、フォームを使用する時はform-horizontalを使用するのがいいかなと個人的に思います

詳しくは下のサンプルを御覧下さい

form-vertical

<form>
    <label>ラベル</label>
    <input type="text" class="span3" placeholder="入力欄">
    <label class="checkbox">
        <input type="checkbox"> チェックボックス
    </label>
    <button type="submit" class="btn">Submit</button>
</form>

form-inline

<form class="form-inline">
    <label>ラベル</label>
    <input type="text" class="span3" placeholder="入力欄">
    <label class="checkbox">
        <input type="checkbox"> チェックボックス
    </label>
    <button type="submit" class="btn">Submit</button>
</form>

form-search

<form class="form-search">
    <input type="text" class="input-medium search-query">
    <button type="submit" class="btn">Search</button>
</form>

form-horizontal

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label">ラベル</label>
        <div class="controls">
            <input type="text" class="span3" placeholder="入力欄">
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox"> チェックボックス
            </label>
        </div>
    </div>
    <div class="form-actions">
        <button type="submit" class="btn">Submit</button>
    </div>
</form>

サポートされているコントロール

例が長いですが以下の通り。

<form class="form-horizontal">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="input01">Text input</label>
            <div class="controls">
                <input type="text" class="input-xlarge" id="input01">
                <p class="help-block">入力に対しての説明文などを記述できます</p>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="optionsCheckbox">Checkbox</label>
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox" id="optionsCheckbox" value="option1">
                    チェックボックスに対する説明など
                </label>
                <label class="checkbox">
                    <input type="checkbox" id="optionsCheckbox" value="option2">
                    チェックボックスに対する説明など
                </label>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Radio buttons</label>
            <div class="controls">
                <label class="radio">
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    ラジオボタンに対する説明など
                </label>
                <label class="radio">
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    ラジオボタンに対する説明など
                </label>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="select01">Select list</label>
            <div class="controls">
                <select id="select01">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="multiSelect">Multicon-select</label>
                <div class="controls">
                    <select multiple="multiple" id="multiSelect">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="fileInput">File input</label>
            <div class="controls">
                <input class="input-file" id="fileInput" type="file">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="textarea">Textarea</label>
            <div class="controls">
                <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
            </div>
        </div>
    </fieldset>
</form>

入力に対しての説明文などを記述できます


表示状態を変える。

<input>タグに、focuseduneditable-inputオプションクラス・disabledを追加します。

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="focusedInput">Focused input</label>
        <div class="controls">
            <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">Uneditable input</label>
        <div class="controls">
            <span class="input-xlarge uneditable-input">Some value here</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="disabledInput">Disabled input</label>
        <div class="controls">
            <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
                This is a disabled checkbox
            </label>
        </div>
    </div>
</form>
Some value here

入力コントロールに色を付けたり、コメントを付ける。

入力コントロールに色を付けるにはcontrol-groupオプションクラスの後ろに、warningerrorsuccessオプションクラスを追加します。
入力に対するコメントを入力コントロールの横に付けるには<span class="help-inline">*****</span>を追加します。
入力に対するコメントを入力コントロールの下に付けるには<span class="help-block">*****</span>を追加します。

<form class="form-horizontal">
    <div class="control-group warning">
        <label class="control-label" for="inputWarning">Input with warning</label>
        <div class="controls">
            <input type="text" id="inputWarning">
            <span class="help-inline">warning</span>
        </div>
    </div>
    <div class="control-group error">
        <label class="control-label" for="inputError">Input with error</label>
        <div class="controls">
            <input type="text" id="inputError">
            <span class="help-inline">error</span>
        </div>
    </div>
    <div class="control-group success">
        <label class="control-label" for="inputSuccess">Input with success</label>
        <div class="controls">
            <input type="text" id="inputSuccess">
            <span class="help-block">success</span>
        </div>
    </div>
</form>
warning
error
success

入力コントロールの長さを変更する。

<input>タグに、span**input-miniinput-smallinput-mediumオプションクラスを追加します。
その他にもinput-largeinput-xlargeinput-xxlargeとありますので、用途に分けて使い分けて下さい。

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label">Form grid sizes</label>
        <div class="controls"><input class="span1" type="text" placeholder="span1"></div>
    </div>
    <div class="control-group">
        <div class="controls"><input class="span2" type="text" placeholder="span2"></div>
    </div>
    <div class="control-group">
        <div class="controls"><input class="span3" type="text" placeholder="span3"></div>
    </div>
    <div class="control-group">
        <div class="controls"><input class="input-mini" type="text" placeholder="input-mini"></div>
    </div>
    <div class="control-group">
        <div class="controls"><input class="input-small" type="text" placeholder="input-small"></div>
    </div>
    <div class="control-group">
        <div class="controls"><input class="input-medium" type="text" placeholder="input-medium"></div>
    </div>
    <div class="control-group">
        <div class="controls"><input class="input-large" type="text" placeholder="input-large"></div>
    </div>
    <div class="control-group">
        <div class="controls"><input class="input-xlarge" type="text" placeholder="input-xlarge"></div>
    </div>
    <div class="control-group">
        <div class="controls"><input class="input-xxlarge" type="text" placeholder="input-xxlarge"></div>
    </div>
</form>

© 2012 GreenApple-room.

QLOOKアクセス解析