Bootstrap CSS 細かな指定 

(Source)をコピーすると利用できます。

User Input

 キーボードの指定 <kbd>

「Ctrl」＋「A」（すべて選択）とキーボードの指定をするときは、「Ctrl」＋「A」

(Source) <kbd>「Ctrl」＋「A」</kbd>

Button Sizes

 ボタンのサイズ <btn-lg> <btn> <btn-sm> <btn-xs>

   

(Source)
(Large)   <button type="button" class="btn btn-default btn-lg">Large button</button>
(Default)   <button type="button" class="btn btn-default">Default button</button>
(Small)   <button type="button" class="btn btn-default btn-sm">Small button</button>
(Extra small <button type="button" class="btn btn-default btn-xs">Extra small button</button>

Table

 縦線を入れる table-bordered

(Source)
<table class="table table-bordered">
・・・
</table>

 オンマウス table-hover

(Source)
<table class="table table-hover">
・・・
</table>

 ストライプ table-striped

(Source)
<table class="table table-striped">
・・・
</table>

 「tr」のカラー

(Source)
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

 Responsive table
横幅が狭まると、テーブルの下に横スライダーが出ます。

Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell

(Source)
<div class="table-responsive">
<table class="table">
・・・
</table>
</div>

Quick float

 「←戻る」、「進む→」等のリンクを配置するときに使います。

左側に配置 (pull-left)
右側に配置 (pull-right)


(CSS Source)
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
.element {
.pull-left();
}
.another-element {
.pull-right();
}

(HTML Source)
<div class="pull-left">左側に配置</div>
<div class="pull-right">右側に配置</div>

Scrollable box

 コンテンツがボックスの高さ以上になると、スクロールバーが出ます。 overflow-auto

content
content
content
content
content
content
content
content
content
content
content

(Source)
<div style="height:#px;overflow:auto;border:1px solid #aaa;padding:10px;">コンテンツ</div> （高さは好みの数値を入力）

参考 自動的にスクロールするvtickerのページはこちら

Modal

 クリックするとModal window が出ます。



(Source-Large)
<button type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="padding:10px;">
これが大きいサイズ
</div>
</div>
</div>

(Source-Small)
<button type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="padding:10px;">
これが小さいサイズ
</div>
</div>
</div>

Collapse

 クリックすると下にボックス が出ます。

ここに文章を書く。
２段目
３段目
４段目
５段目



(Source)
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button Name
</button>
<div class="collapse" id="collapseExample">
<div class="well">
<p>ここに文章を書く。<br>２段目<br>３段目<br>４段目<br>５段目</p>
</div>
</div>

Dropup

 ドロップダウンではなく、ドロップアップ


(Source)
<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Linkpage 1</a></li>
<li><a href="#">Linkpage 2</a></li>
<li><a href="#">Linkpage 3</a></li>
<li><a href="#">Linkpage 4</a></li>
</ul>
</div>