Twitter Bootstrap を使用した記事装飾

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

見出し

アイコン付き見出し

 

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

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

コード用preタグ

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

引用

引用・参照先(cite)http://sidaconfig.com/2013/06/29/34

 

表組み table

ヘッダー1 ヘッダー2
項目1 項目2
項目3 項目4
項目5 項目6

 

.row も使える

ヘッダー1 ヘッダー2
項目1 項目2
項目3 項目4
項目5 項目6

 

ボタン

 

アイコン表示

アイコンを表示

補足

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

 376 Views