ブートストラップフロントエンドフレームワークの前処理レイアウトクラスを使用すると、各レイアウトタグ要素に多くのCSSコードを記述する必要はなくなりました。ブートストラップのレイアウト機能を使用できます。タイトル、段落、リスト、その他のインライン要素の事前に定義されたスタイルを作成し、非常に標準的なWebページを入力できます。
一緒に学びましょう。ブートストラップのフロントエンドフレームワークは、私たちのために事前に定義されていますか？
最初： Bootstrapは、Helvetica Neue、Helvetica、Arial、Sans-Serifをデフォルトのフォントスタックとして使用します。これは、現在すべてのWebページで最も一般的に使用されるフォントです。それ以降、ボディのグローバルスタイルフォントスタイルを定義する必要はもうありません。ブートストラップフロントエンドフレームワークフォントファミリーを使用する限り、上記のフォントシリーズはデフォルトで使用されます。
つまり、Font-Family：Sans-Serif;
それを確認して、BootstrapのフロントエンドでFramework css file bootstrap.cssを開きましょう
親愛なる友人、ブートストラップフロントエンドフレームワークのデフォルトのフォントのみを使用できますか？明らかにそうではありません。後で、ブートストラップフレームワークをカスタマイズし、私たちが好きで効果を発揮したいブートストラップフレームワークを作成する方法を教えます。
2番目：ブートストラップフロントエンドフレームワークは、H1-H6のCSSスタイルを事前に定義しました。 BootstrapフロントエンドフレームワークのFramework css file bootstrap.cssから定義されたスタイルの一部を抽出しました。フォントサイズの属性値がそれぞれHNに対して定義されていることがわかります。
h1 {font-size：36px;}
H2 {font-size：30px;}
H3 {font-size：24px;}
H4 {font-size：18px;}
H5 {font-size：14px;}
H6 {font-size：12px;}
実際の効果は次のとおりです。
Webページコード：
Webページ効果：
3番目：インラインサブタイトル。任意のタイトルにインラインサブタイトルを追加する必要がある場合は、要素の両側に<small>を追加するか、.smallクラスを追加して、次の例に示すように、より小さなフォントサイズの軽いテキストを取得できます。
Webページコード：
Webページ効果：
4番目：メインコピーをリードします。段落に強調テキストを追加するために、次の例に示すように、Class = "Lead"を追加できます。
Webページコード：
Webページ効果：
次のブートストラップフロントエンドフレームワーククラスは、例を挙げなくなります。上記の例のような小さな効果を試すことができるため、目的を書き留めるだけです。
5番目： HTMLのデフォルトの強調は<small>（テキストを親のテキストサイズの85％に設定）、<strong>（テキストをより厚いテキストに設定）、<em>（テキストをイタリックに設定）であることを強調します。
6番目：略語、HTML要素は、wwwやhttpなどの略語のタグを提供します。 Bootstrapは、<Abbr>要素のスタイルをテキストの下部に表示される点線の境界線であると定義し、マウスがその上に浮かぶときに全文が表示されます（<Abbr>タイトル属性にテキストを追加した限り）。より小さなフォントテキストを取得するには、<abbr>に.initialismを追加します。
7番目：住所。 <アドレス>タグを使用して、Webページに連絡先情報を表示できます。 <address> defaultは表示されるためです。ブロック;、タグを使用して、囲まれたアドレステキストに行のブレークを追加する必要があります。
8番目： blockquote、任意のHTMLテキストの横にあるデフォルト<blockquote>を使用できます。その他のオプションには、参照のソースを識別する<small>タグを追加し、class.pull-rightを使用して参照を右に合わせることが含まれます。次の例は、これらの機能を示しています。
9番目：リスト
Bootstrapは、注文されたリスト、順序付けられていないリスト、および定義されたリストをサポートしています。
注文リスト：注文リストとは、数字またはその他の注文された文字から始まるリストを指します。
順序付けられていないリスト：順序付けられていないリストとは、特定の順序のないリストを指し、従来のスタイルの強調から始まるリストです。これらの強調番号を表示したくない場合は、class.list-unstyledを使用してスタイルを削除できます。 Class.list-inlineを使用して、すべてのリスト項目を同じ行に配置することもできます。
定義リスト：このタイプのリストでは、各リスト項目に<dt>および<dd>要素を含めることができます。 <dt>は、辞書のように定義用語を表します。辞書は、帰属（またはフレーズ）として定義されます。次に、<dd>は<dt>の説明です。 ClassDl-Horizontalを使用して、説明とともに<dl>行の持ち物を並べて表示できます。
他のブートストラップフロントエンドフレームワークのクラスは、次のように非常に熟練する必要があり、誰もがそれらを習熟して使用する必要があります。
.Leadは段落を強調します
.smallセット小さなテキスト（親テキストのサイズの85％に設定）
.text-leftセットテキストの左アライメント
.text-centerセットテキストセンターアライメント
.text-rightテキストの正しいアラインメントを設定します
.text-justifyはテキストのアライメントを設定し、段落の画面の外側のテキストが自動的にラップされます
.text-nowrap段落は、画面を越えて行を包みません
.text-lowercaseセットテキスト小文字
.text-uppercaseセットテキスト大文字化
.text-capitalize単語の最初の文字の大文字化を設定します
.Initialisia <abbr>要素に表示されるテキストは、小さなフォントに表示されます
.BlockQuote-Reverseは、参照右アライメントを設定します
.list-unstyledは、デフォルトのリストスタイルを削除し、リスト項目に残っているアライメント（<ul> and <ol>）。このクラスは、直接の子リストアイテムにのみ適しています（ネストされたリスト項目を削除する必要がある場合は、ネストされたリストでこのスタイルを使用する必要があります）
.list-inlineは、すべてのリストアイテムを同じ行に配置します
.dl-horizontalこのクラスはフロートとオフセットを設定し、<dl>要素と<dt>要素に適用されます。特定の実装については、インスタンスを表示できます。
.pre-slollable Make <Pre>要素スクロール可能なスクロール可能
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。