Bootstrap 3.0 学習ノートのページレイアウト

今回はレイアウトを中心に学習しますが、これは基本的なHTMLタグのほとんどにも存在するため、比較的簡単です。シリーズの完全性を期すために、復習や記録も行います。主な内容は以下の通りです。

1. タイトル

2. ページ本文

3. 強調

4. 略語

5. 住所

6. 参考文献

7. リスト

8. まとめ

タイトル

HTML の <h1> から <h6> までのすべての見出しタグを使用できます。さらに、インラインテキストにタイトルスタイルを指定するために、.h1 から .h6 までのクラスが提供されています。

コードをコピー

コードは次のとおりです。

<div class="コンテナ">
<h1 class="page-header">タイトル</h1>
<h1>h1. Bootstrap の見出し</h1>
<h2>h2. Bootstrap の見出し</h2>
<h3>h3. Bootstrap の見出し</h3>
<h4>h4. Bootstrap の見出し</h4>
<h5>h5. Bootstrap の見出し</h5>
<h6>h6. Bootstrap の見出し</h6>
</div>

効果を見てください

見出し内に<small>タグまたは.small要素を含めて、サブ見出しをマークすることもできます。

コードをコピー

コードは次のとおりです。

<div class="コンテナ">
<h1 class="page-header">タイトル</h1>
<h1>h1. Bootstrap の見出し</h1><small>セカンダリテキスト</small>
<h2>h2. Bootstrap 見出し</h2><small>セカンダリテキスト</small>
<h3>h3. Bootstrap 見出し</h3><small>セカンダリテキスト</small>
<h4>h4. Bootstrap 見出し</h4><small>セカンダリテキスト</small>
<h5>h5. Bootstrap 見出し</h5><small>セカンダリテキスト</small>
<h6>h6. Bootstrap 見出し</h6><small>セカンダリテキスト</small>
</div>

ページ本文

Bootstrap は、グローバルfont-size 14 ピクセルに、 line-heightを 1.428 に設定します。これらのプロパティは、 <body>およびすべての段落要素に直接割り当てられます。さらに、 <p> (段落) には、行の高さの半分 (つまり 10 px) に等しい下余白が与えられます。

コードをコピー

コードは次のとおりです。

<h1 class="page-header">ページ本文</h1>
<div style="border:1px solid">
<p style="border:1px solid ">ヌラムは、自分の尿を尿道に流し、尿道から尿を排出しました。人々は尿道に尿を排出し、尿道から尿を排出しました。ヌラムは、自分の尿を尿道に排出し、尿道を清潔に保ちました。

球状のペニシリンとマグニスの出産モンテス、ナセトゥル・リディキュラス・ムス。ウラムコーパー・ヌラは、auctor fringilla では測定されません。モリスでは、それは一般的ではありません。luctus、nisi erat porttitor ligula、eget lacinia odio sem nec elit。ウラムコーパー・ヌラは、auctor fringilla では測定されません。

セダムはとても小さく、サイズも小さかったです。全然大きくありませんでした。あまり大きくなかったので、靭帯を取るのがとても難しく、鎮静剤を使わなければなりませんでした。</p>
</div>

エフェクト表示を見れば一目瞭然です。

リード本文

.leadを追加することで段落を目立たせることができます。

コードをコピー

コードは次のとおりです。

<h1 class="page-header">リード本文</h1>
<div style="border:1px solid">
<p class="lead" style="border:1px solid ">ヌラムは、自分の尿を尿道に流し、尿道から尿を排出しました。ヌラムは、尿道から尿を排出し、尿道から尿を排出しました。

球状のペニシリンとマグニスの出産モンテス、ナセトゥル・リディキュラス・ムス。ウラムコーパー・ヌラは、auctor fringilla では測定されません。モリスでは、それは一般的ではありません。luctus、nisi erat porttitor ligula、eget lacinia odio sem nec elit。ウラムコーパー・ヌラは、auctor fringilla では測定されません。

セダムはとても小さく、サイズも小さかったです。全然大きくありませんでした。あまり大きくなかったので、靭帯を取るのがとても難しく、鎮静剤を使わなければなりませんでした。</p>
</div>
<h1></h1>

上記ページの本文と比較すると、その効果が一目瞭然です。

強調する

強調するには HTML タグを使用し、少しスタイルを設定します。

1. 小さな文字

強調する必要のないインラインテキストまたはブロックテキストの場合は、 <small>タグで囲みます。内部のテキストは、親コンテナーのフォントサイズの 85% に設定されます。見出し要素内にネストされた<small>要素には、異なるfont-size指定されます。

<small>タグの代わりに、インライン要素に.small割り当てることもできます。

コードをコピー

コードは次のとおりです。

<small>このテキスト行は、細かい文字として扱われるものとします。</small>

2. フォーカス

フォントの太さを大きくしてテキストの一部を強調します。

コードをコピー

コードは次のとおりです。

太字で表示される

3. イタリック体

斜体を使用してテキストの一部を強調します。

コードをコピー

コードは次のとおりです。

斜体テキストとして表示される

4. クラスを揃える

テキスト配置クラスを使用すると、テキストの再配置が簡単になります。

コードをコピー

コードは次のとおりです。

<p class="text-left">左揃えのテキスト。</p>
テキストを中央揃えにします。
<p class="text-right">右揃えのテキスト。</p>

明らかに、最初の行は左揃え、2 行目は中央揃え、3 行目は右揃えです。

5. 品格を強調する

これらのクラスは色で強調されます。リンクにも適用でき、デフォルトのリンクスタイルと同様に、マウスをリンクの上に移動するとリンクが暗くなります。

コードをコピー

コードは次のとおりです。

<h1>クラスを重視</h1>
<p class="text-muted">マエケナスは、そのようにして、様々なことを成し遂げた。</p>
<p class="text-primary">マエケナスは、そのようにして、様々なことを成し遂げた。</p>
<p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-info">マエケナスは、そのようにして、様々なことを成し遂げた。</p>
<p class="text-warning">マエケナスは、そのようにして、様々なことを成し遂げた。</p>
<p class="text-danger">マエケナスは、そのようにして、様々なことを成し遂げた。</p>
<h1></h1>

サムネイル

略語や頭字語の上にマウスを置くと、完全な内容が表示されます。Bootstrap は、HTML <abbr>要素の拡張スタイルを実装します。略語要素にはtitle属性があり、薄い点線のボックスとして表示されます。マウスをその上に移動すると、疑問符の付いたポインターに変わります。完全な内容を表示するには、略語の上にマウスを置きますが、タイトル属性を含める必要があります。

基本的な略語

完全な内容を表示するには、略語の上にマウスを置きますが、 title属性を含める必要があります。

コードをコピー

コードは次のとおりです。

効果は確認できましたが、スクリーンショットは撮れませんでした。

頭文字語

略語に.initialismを追加すると、フォントサイズを小さくすることができます。

コードをコピー

コードは次のとおりです。

または、コードを投稿して、その効果を自分で確認することもできます。

住所

連絡先情報を、日常の使用に最も近い形式で提示します。各行の末尾に<br>を追加すると、目的のスタイルが保持されます。

コードをコピー

コードは次のとおりです。

<住所>
Twitter株式会社
795 フォルサムアベニュー、スイート 600
カリフォルニア州サンフランシスコ 94107
<abbr title="電話">P:</abbr> (123) 456-7890
</アドレス></p> <p><アドレス>
フルネーム
<a href="<a href="mailto:#">first.last@example.com</a">mailto:#">first.last@example.com</a</a>>
</アドレス>

参考文献

文書内で他のソースを引用してください。

デフォルトのスタイル参照

参照として表すために、何でもその中にラップします。直接引用の場合はタグを使用することをお勧めします。それを包むと、参照として表示されます。直接引用の場合はタグを使用することをお勧めします。

コードをコピー

コードは次のとおりです。

<引用>
<p>私はただそこに座って、エリートのアディピス主義者と対峙しました。整数は賭け金として与えられました。</p>
</blockquote>

引用オプション

標準の<blockquote>には、スタイルとコンテンツを変更できる簡単なバリエーションがいくつかあります。

ソースに名前を付ける: 引用元を示すために<small>タグを追加します。ソース名は<cite>タグ内に配置できます。

コードをコピー

コードは次のとおりです。

<引用>
<p>私はただそこに座って、エリートのアディピス主義者と対峙しました。整数は賭け金として与えられました。</p>
ソースタイトルの有名人
</blockquote>

ソースタイトルがもう1つあります

別の表示スタイル

.pull-rightを使用すると、参照が右に移動されて整列しているように見えます。

コードをコピー

コードは次のとおりです。

<blockquote class="pull-right">
<p>私はただそこに座って、エリートのアディピス主義者と対峙しました。整数は賭け金として与えられました。</p>
</blockquote>

右に揃えると量が移動し、当然それに応じて左に引っ張られます。

リスト

順序なしリスト

順序が重要でない要素のリスト。

コードをコピー

コードは次のとおりです。

<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>

これは明らかにHtmlと同じです。

順序付きリスト

順序が重要となる要素のセット。

コードをコピー

コードは次のとおりです。

<オル>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ol>

順序付きリストの場合も同様です。

スタイルなしリスト

デフォルトのlist-styleと左余白が削除された要素のセット (直接の子のみ)。これは直接の子要素用です。つまり、同じスタイルにするには、このクラスをすべてのネストされたリストに追加する必要があります。

コードをコピー

コードは次のとおりです。

<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>

インラインリスト

display: inline-block;を設定し、少量のパディングを追加すると、すべての要素が同じ列に配置されます。

コードをコピー

コードは次のとおりです。

<ul class="list-inline">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>

効果はもちろん一行です。

説明する

説明付きのフレーズのリスト。

コードをコピー

コードは次のとおりです。

<ダウンロード>
<dt>.Lorem ipsum dolor sit amet</dt>
<dd>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</dd>
</dl>

このタグは HTML にも存在することに注意してください。

水平方向の説明

.dl-horizontalを使用すると、 <dl>内のフレーズとその説明を 1 行に揃えることができます。最初はデフォルトの<dl>スタイルが積み重ねられたように始まり、ナビゲーションバーが徐々に拡大するのと同じように配置されます。

コードをコピー

コードは次のとおりです。

<dl class="dl-horizontal">
<dt>.Lorem ipsum dolor sit amet</dt>
<dd>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</dd>
</dl>