何気に自分でCSSを書いて実装しそうな機能でも、実は標準で搭載されている「Bootstrap」の機能をまとめました。
【1】リストタグ（ul、li）を入れると中黒が表示されます。
<ul>
<li>lg：幅「1200px」以上の画面。幅の大きいデスクトップPCサイズ。</li>
<li>md：幅「992px」以上の画面。デスクトップPCサイズ。</li>
<li>sm：幅「768px」以上の画面。タブレットサイズ。</li>
<li>xs：幅「768px」未満の画面。スマホサイズ。</li>
</ul>
【2】「list-unstyled」クラスを設定するとリストのマーカーが消えます。
<ul class="list-unstyled">
<li>lg：幅「1200px」以上の画面。幅の大きいデスクトップPCサイズ。</li>
<li>md：幅「992px」以上の画面。デスクトップPCサイズ。</li>
<li>sm：幅「768px」以上の画面。タブレットサイズ。</li>
<li>xs：幅「768px」未満の画面。スマホサイズ。</li>
</ul>
【3】「list-inline」クラスを設定すると、リストをインライン表示にできます。
<ul class="list-inline">
<li>インライン（1）</li>
<li>インライン（2）</li>
<li>インライン（3）</li>
</ul>
【4】ulに「list-group」、liに「list-group-item」クラスを設定すると、枠線を表示できます。
<ul class="list-group">
<li class="list-group-item">リスト（1）</li>
<li class="list-group-item">リスト（2）</li>
<li class="list-group-item">リスト（3）</li>
</ul>
【5】「panel」クラスを設定することで、ヘッダー有りのリストにしてもOK。
<div class="panel panel-default">
<div class="panel-heading">ヘッダー</div>
<ul class="list-group">
<li class="list-group-item">リスト（1）</li>
<li class="list-group-item">リスト（2）</li>
<li class="list-group-item">リスト（3）</li>
</ul>
</div>
【6】dlに「dl-horizontal」クラスを設定すると、「dt」「dd」を横並びにできます。
<dl class="dl-horizontal">
<dt>用語</dt>
<dd>説明</dd>
</dl>
【7】「text-center」クラスを設定すると、文字を真ん中寄せにできます。
<h2 class="text-center">テキスト</h2>
【8】「pull-right」クラスを設定すると、右寄せ（float）できます。
<h2 class="pull-right">テキスト</h2>
【9】「pull-left」クラスを設定すると、左寄せ（float）できます。
<h2 class="pull-left">テキスト</h2>
【10】「center-block」クラスを設定すると、中央寄せ（左右のmarginをauto）できます。
ただし、「center-block」の場合は「width」を指定する必要があります。
<h2 class="center-block bg-primary">テキスト</h2>
今後もよく使いそうな機能を紹介していきます。