毎日学ばなければならないBootstrapの基本レイアウト_JavaScriptスキル

今回は主に組版について学びたいと思います。これは HTML の基本的なタグにも存在しますので、シリーズの完全性を確保するために、それも復習して記録します。主な内容は以下の通りです:

• 1.タイトル
• 2. ページ本文
• 3. 強調
• 4.略語
• 5.住所
• 6. 引用
• 7. リスト

1. タイトル
HTML 内のすべてのタイトル タグ (

から

) が使用できます。さらに、インライン属性のテキストにタイトル スタイルを与えるために、.h1 から .h6 までのクラスが提供されます。

<div class="container"> 
  <h1 id="标题">标题</h1>
  <h1 id="h-Bootstrap-heading">h1. Bootstrap heading</h1>
  <h2 id="h-Bootstrap-heading">h2. Bootstrap heading</h2>
  <h3 id="h-Bootstrap-heading">h3. Bootstrap heading</h3>
  <h4 id="h-Bootstrap-heading">h4. Bootstrap heading</h4>
  <h5 id="h-Bootstrap-heading">h5. Bootstrap heading</h5>
  <h6 id="h-Bootstrap-heading">h6. Bootstrap heading</h6>
 </div> 

効果を直接見てみましょう

タイトルには、サブタイトルをマークするために使用できる タグまたは .small 要素 を含めることもできます。

 <div class="container"> 
  <h1 id="标题">标题</h1>
  <h1 id="h-Bootstrap-heading">h1. Bootstrap heading</h1><small>Secondary text</small>
  <h2 id="h-Bootstrap-heading">h2. Bootstrap heading</h2><small>Secondary text</small>
  <h3 id="h-Bootstrap-heading">h3. Bootstrap heading</h3><small>Secondary text</small>
  <h4 id="h-Bootstrap-heading">h4. Bootstrap heading</h4><small>Secondary text</small>
  <h5 id="h-Bootstrap-heading">h5. Bootstrap heading</h5><small>Secondary text</small>
  <h6 id="h-Bootstrap-heading">h6. Bootstrap heading</h6><small>Secondary text</small>
 </div> 

2. ページ本文
ブートストラップは、グローバル font-size を 14px に、line-height を 1.428 に設定します。これらのプロパティは、

およびすべての段落要素に直接割り当てられます。さらに、

(段落) も行の高さの 1/2 (つまり 10px) に等しい下マージンが設定されます。

 <h1 id="页面主体">页面主体</h1>
  <div style="border:1px solid ">
   <p style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>

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

リードボディコピー
.lead を追加すると段落を強調表示できます。

 <h1 id="Lead-Body-Copy">Lead Body Copy</h1>
  <div style="border:1px solid ">
   <p class="lead" style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>
 <h1></h1>

上記のページの本文と比較すると、明らかな効果がわかります。

3. 強調
HTML タグを使用して強調し、少しスタイルを加えるだけです。
1. 小さなテキスト
強調する必要のないインラインまたはブロック タイプのテキストの場合は、 タグを使用してテキストを囲みます。その中のテキストは親コンテナのフォント サイズの 85% に設定されます。 title 要素内のネストされた 要素は、異なるフォント サイズに設定されます。
タグの代わりにインライン要素に .small を指定することもできます。

<small>This line of text is meant to be treated as fine print.</small>

2. 集中
フォントの太さを増やしてテキストを強調します。

<strong>rendered as bold text</strong>

3.斜体
斜体でテキストを強調します。

<em>rendered as italicized text</em>　　

4. クラスを整列します
テキスト配置クラスを使用すると、テキストを簡単かつ便利に再配置できます。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

明らかに、1 行目は左揃え、2 行目は中央揃え、3 行目は右揃えです。
5. 授業の重視
これらのクラスは、色を使用して強調を表現します。また、リンクに適用して、リンク上にマウスを置くと、デフォルトのリンク スタイルと同様に、リンクの色が濃くなるようにすることもできます。

<h1 id="强调Class">强调Class</h1>
 <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <h1></h1>

4. サムネイル
Bootstrap は HTML 要素に拡張スタイルを実装します。 abbreviation 要素には title 属性があり、マウスをその上に移動すると、「疑問符」の付いたポインタに変わります。完全な内容を表示したい場合は、略語の上にマウスを置くことができますが、title 属性を含める必要があります。
基本的な略語
完全な内容を表示したい場合は、略語の上にマウスを置くことができますが、title 属性を含める必要があります。

<abbr title="attribute">attr</abbr>

効果は確認できますが、スクリーンショットを撮ることができません。
イニシャリズム
略語に .initialism を追加すると、フォント サイズが小さく設定されます。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

コードをアップロードするだけで、その効果をご自身で確認できます。
5.住所
連絡先情報は日常の使用に最も近い形式で表示されます。希望のスタイルを維持するには、各行の末尾に
を追加します。

<address>
 <strong>Twitter, Inc.</strong><br>
 795 Folsom Ave, Suite 600<br>
 San Francisco, CA 94107<br>
 <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
 <strong>Full Name</strong><br>
 <a href="mailto:#">first.last@example.com</a>
</address>

 

六、引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在

之中即可表现为引用。对于直接引用，我们建议用

标签。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

 

引用选项
对于标准样式的

，可以通过几个简单的变体就能改变风格和内容。
命名来源:添加标签来注明引用来源。来源名称可以放在标签里面。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

会多一个Source Title
另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。   

 <blockquote class="pull-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>

向右对齐移动了额，当然也有相应的pull-left。　　
七、列表
 无序列表 
顺序无关紧要的一列元素。

 <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的一样。
有序列表
顺序至关重要的一组元素。

<ol>
  <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样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。

<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>

效果当然就是在一行了。

以上就是Bootstrap基础排版的全部内容，希望大家好好阅读，再结合相关文章进行扩展性的学习。