Well(囲み記事)の書式:Bootstrapコードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回はWell(囲み記事)の書式です。
Wellとはコラムのような囲み記事で、コンテンツを背景色で囲みます。
Wellの作成
div要素又はp要素にclass「well」を適用します。
<div class="well"> <h3>レスポンシブデザイン</h3> <p>パソコンだけではなく、スマートフォンやタブレットからでも見やすいホームページを制作する技術です。制作にはCSSの特別な知識が必要となります。 </p> </div> <p class="well">従来のパソコン用に最適化されたホームページだとスマ-トフォンなどの小さな画面からはとても見づらく、世の中の趨勢に合わせてホームページもスマフォユーザーに対応する必要があります。</p>
ブラウザでの表示
余白や角丸のサイズを調整
背景色の囲みを大きくしたい場合はdiv要素又はp要素にclass「well-lg」、
小さくしたい場合はdiv要素又はp要素にclass「well-sm」を追加します。
HTML
<p class="well well-lg">画面サイズに応じてレイアウトを変化させる「レスポンシブデザイン」が主流となりつつあります。</p> <p class="well">画面サイズに応じてレイアウトを変化させる「レスポンシブデザイン」が主流となりつつあります。</p> <p class="well well-sm">画面サイズに応じてレイアウトを変化させる「レスポンシブデザイン」が主流となりつつあります。</p>