Twitter Bootstrap を使用した記事装飾

ビジュアルエディタ・テキストエディタでまかなえる部分は割愛。
（たまに変な変換されるのでテキストエディタのみ使用したほうがいいのかもしれない）

見出し

アイコン付き見出し

 

prettyprint を使用したソースコード表示

<ul class="unstyled">
  <li>装飾なしリスト01</li>
  <li>装飾なしリスト02</li>
  <li>装飾なしリスト03</li>
</ul>

コード用preタグ

枠付き黒文字。
こちらも引用として使用。

引用

引用・参照先（cite）https://sidaconfig.com/2013/06/29/34

 

表組み table

ヘッダー１	ヘッダー２
項目１	項目２
項目３	項目４
項目５	項目６

 

.row も使える

 

ボタン

Button-normal

Button-primary

Button-success

 

アイコン表示

アイコンを表示

補足

span~ を使った幅調整はコンテンツに直に指定すると bootstrap 自体の固定幅が設定されて
思った通りの表示にならないので、.row と .span~ で囲んで表示するのが良さそう。
なお、コンテンツ内の blockquote が 320px 以下の端末で改行・折り返しが効いていなかったので
スタイルシートに word-wrap: break-word; を追記した。