今回は主に組版について学びたいと思います。これは HTML の基本的なタグにも存在しますので、シリーズの完全性を確保するために、それも復習して記録します。主な内容は以下の通りです:
1. タイトル
HTML 内のすべてのタイトル タグ (
1 2 3 4 5 6 7 8 9 |
|
効果を直接見てみましょう
タイトルには、サブタイトルをマークするために使用できる タグまたは .small 要素 を含めることもできます。
1 2 3 4 5 6 7 8 9 |
|
2. ページ本文
ブートストラップは、グローバル font-size を 14px に、line-height を 1.428 に設定します。これらのプロパティは、 およびすべての段落要素に直接割り当てられます。さらに、
(段落) も行の高さの 1/2 (つまり 10px) に等しい下マージンが設定されます。
1 2 3 4 5 6 7 8 |
|
エフェクト表示を見れば一目瞭然。
リードボディコピー
.lead を追加すると段落を強調表示できます。
1 2 3 4 5 6 7 8 9 |
|
上記のページの本文と比較すると、明らかな効果がわかります。
3. 強調
HTML タグを使用して強調し、少しスタイルを加えるだけです。
1. 小さなテキスト
強調する必要のないインラインまたはブロック タイプのテキストの場合は、 タグを使用してテキストを囲みます。その中のテキストは親コンテナのフォント サイズの 85% に設定されます。 title 要素内のネストされた 要素は、異なるフォント サイズに設定されます。
タグの代わりにインライン要素に .small を指定することもできます。
1 |
|
2. 集中
フォントの太さを増やしてテキストを強調します。
1 |
|
3.斜体
斜体でテキストを強調します。
1 |
|
4. クラスを整列します
テキスト配置クラスを使用すると、テキストを簡単かつ便利に再配置できます。
1 2 3 |
|
明らかに、1 行目は左揃え、2 行目は中央揃え、3 行目は右揃えです。
5. 授業の重視
これらのクラスは、色を使用して強調を表現します。また、リンクに適用して、リンク上にマウスを置くと、デフォルトのリンク スタイルと同様に、リンクの色が濃くなるようにすることもできます。
1 2 3 4 5 6 7 8 |
|
4. サムネイル
Bootstrap は HTML 要素に拡張スタイルを実装します。 abbreviation 要素には title 属性があり、マウスをその上に移動すると、「疑問符」の付いたポインタに変わります。完全な内容を表示したい場合は、略語の上にマウスを置くことができますが、title 属性を含める必要があります。
基本的な略語
完全な内容を表示したい場合は、略語の上にマウスを置くことができますが、title 属性を含める必要があります。
1 |
|
効果は確認できますが、スクリーンショットを撮ることができません。
イニシャリズム
略語に .initialism を追加すると、フォント サイズが小さく設定されます。
1 |
|
コードをアップロードするだけで、その効果をご自身で確認できます。
5.住所
連絡先情報は日常の使用に最も近い形式で表示されます。希望のスタイルを維持するには、各行の末尾に
を追加します。
1 2 3 4 5 6 7 8 9 10 11 |
|
六、引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在
之中即可表现为引用。对于直接引用,我们建议用标签。
1
2
3
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
ログイン後にコピー
引用选项
对于标准样式的,可以通过几个简单的变体就能改变风格和内容。
命名来源:添加标签来注明引用来源。来源名称可以放在标签里面。
1
2
3
4
<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可以让引用展现出向右侧移动、对齐的效果。
1
2
3
<blockquote
class
=
"pull-right"
>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
ログイン後にコピー
向右对齐移动了额,当然也有相应的pull-left。
七、列表
无序列表
顺序无关紧要的一列元素。
1
2
3
4
5
6
7
<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的一样。
有序列表
顺序至关重要的一组元素。
1
2
3
4
5
6
7
<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才能具有同样的样式。
1
2
3
4
5
6
7
<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;并添加少量的内补,将所有元素放置于同一列。
1
2
3
4
5
6
7
<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基础排版的全部内容,希望大家好好阅读,再结合相关文章进行扩展性的学习。