Bootstrap-Bootstrap CSS_html/css_WEB-ITnose の第 2 章ユニット 1

こんにちは、読者の皆様、今日はブートストラップ CSS について説明しますが、この本から引用した多くの参考文献、例、デモは後のブログに追加されます。

1. タイポグラフィ

タイポグラフィから始めて、Bootstrap は Helvetica Neue を使用します。ヘルベチカ、Arial、sansserif がデフォルトのフォント スタックに含まれています。ここで、Bootstrap のデフォルト フォントの種類を知ることができます

上記のフォントがお使いのコンピュータとブラウザにインストールされていない場合、sansserif がその として使用されますデフォルトのフォントを使用して表示しました。  すべての本文コピーのフォント サイズは 14

ピクセル に設定され、line-height は 20 ピクセルに設定されています。

タグの margin-bottom は 10 ピクセル、つまり行の高さの半分 (5 ピクセル) です。

1.1 見出し

6 つの標準見出しレベルはすべて、

からのブートストラップ範囲でスタイル設定されています。

へ 

を使用すると、高さ 36 ピクセル

、および

最大 12 ピクセル

(参考までに、

デフォルトの本文テキストの高さは 14 ピクセルです)。 見出しのいずれかにインライン小見出しを追加するには、 を追加します。タグを囲んで小見出しを作成し、その色を親見出しより明るくします。

1.2 リードボディコピー

段落に強調を追加するには、class="lead" を追加します。

これにより、フォントサイズが大きくなり、重さが軽くなり、行の高さが高くなります。これは一般に

セクションの最初の数段落に使用されますが、実際にはどこでも使用できます。

1.3 強調

の使用に加えて、上で説明したように、
見出し

内のtag

を本文コピーと一緒に使用することもできます。 とき本文に適用されると、フォントは 元のサイズの 85% に縮小します。 1.4 太字

テキストを強調するには、テキストを

で囲むだけです。タグ

。これにより

fontweight:bold

; が追加されます。 1.5 斜体 斜体の場合は、コンテンツを

で囲みます。タグ

。 「em」という用語は「強調」という言葉に由来しており、テキストに強調を加えるという意味があります。

ここで、新しい質問が尋ねられます。そして、それに対する答えを見つけます。

1. を使用しないのはなぜでしょうか。または の代わりにタグを付けます。または ?

1.6 クラスを強調します

と一緒に、Bootstrap は強調を提供するために使用できる他のクラスをいくつか提供しています。これらは段落やスパンに適用できます:

このコンテンツはミュートされています

このコンテンツには警告クラスがあります

このコンテンツにはエラークラスがあります

このコンテンツには情報クラスがあります

このコンテンツには成功クラスがあります

このコンテンツには 強調< ;/em>、太字

1.6.1 略語（中文:缩略词）

HTML 要素は、WWW や HTTP などの略語や頭字語のマークアップを提供します。略語をマークアップすることで、ブラウザ、スペル チェッカー、翻訳システム、または検索エンジンに有益な情報を提供できます。ブートストラップ スタイル 要素の下部に明るい点線の境界線があり、ホバーすると全文が表示されます ( title 属性にテキストを追加している場合):
RSS< /abbr>.
1.6.2 アドレス

を追加します。ページに要素を追加すると、スクリーン リーダーや検索エンジンがテキスト内の物理的な住所や電話番号を見つけるのに役立ちます。電子メール アドレスをマークアップするためにも使用できます。 <アドレス>デフォルトは表示:ブロック;
を使用する必要があります。囲まれた住所テキストに改行を追加するためのタグ (例: 番地と市区町村を別の行に分割する):

O'Reilly Media, Inc.< ;br>1005 Gravenstein HWY North
Sebastopol, CA 95472

P: (707) 827-7000

ジェイク・スパーロック

flast@oreilly.com

1.6.3 ブロック引用

引用されたテキストのブロックを文書に追加するには、または引用のためにメインのテキスト フローから区別したい場合は、テキストの前後に

タグを追加します。最良の結果を得るには、改行を行うには、各サブセクションを

で囲みます。鬼ごっこ。 Bootstrap のデフォルトのスタイルでは、テキストがインデントされ、左側に太い灰色の境界線が追加されます。引用元を特定するには、
タグを追加し、 を閉じる前に タグで囲まれた出典の名前を追加します。 tag:

これが必要であること、切実に必要とされていることは、Bootstrap の驚異的な普及によって示されています。私が開発しているすべてのサーバー ソフトウェアでこれを使用しています。そして、それは私が開発しているテンプレート言語にも反映されているので、それを使用する人は誰でも、ブートストラップ手法を実行したいときはいつでも、それが「そこにある」だけで機能することがわかります。何もする必要はありません。
含めるライブラリもありません。まるでハードウェアの一部であるかのようです。 Apple が 1984 年に Mac OS で採用したのと同じアプローチです。

RSS 開発者、Dave Winer
< ;/blockquote>

1.7 リスト

ul ol dl

1.7.1 順序なしリスト

箇条書きを削除したい順序付きリストがある場合は、

class=" を追加します。スタイルなし」
にオープニング

タグ :

好きなアウトドアアクティビティ



• ヨセミテのバックパッキング


• アーチズでのハイキング
  
  
  
  • ;デリケート アーチ
  
  
  • パークアベニュー
  
  
  
  


• tstones トレイル




1.7.2 順序付きリスト
順序付きリストは、ある種の連続した順序に該当し、先頭に箇条書きではなく数字が付けられるリストです (図 2-10 を参照)。これは、タスク リスト、ガイド項目、さらにはブログ投稿のコメントのリストなど、番号付き項目のリストを作成する場合に便利です:




自己参照タスクリスト





1. インターネットをオフにしてください。


2. 本を書きます< /li>
   
3. ... 利益?



1.7.3 定義リスト


Bootstrap で取得する 3 番目のタイプのリストは、定義リストです。 定義リストは、ブロックレベルの

• を持つだけではなく、順序付きリストや順序なしリストとは異なります。要素では、各リスト項目は
  要素の両方で構成できます。そして
  要素。
  は「定義用語」の略で、辞書と同様に、定義されている用語 (または語句) です。続いて、
  の定義です。 マークアップでは、順序なしリスト内で見出しを使用していることがよくあります。これは機能しますが、テキストをマークアップする最もセマンティックな方法ではない可能性があります。より良い方法は、

  を作成し、その後、

  と

  をスタイル設定することです。そうは言っても、Bootstrap は、いくつかのクリーンなデフォルト スタイルと、各定義を並べてレイアウトするためのオプションを提供します。

  LED>>

  発光ダイオード (LED) は、半導体光源です。

  サーボ

  サーボ

  
  

  
  
  

  を
  水平レイアウト
  に変更するには、

  を使用します。左側に

  を追加し、開始タグに
  class="dl-horizo​​ntal"

  を追加します