TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
学習のための重要なポイント：
1。ページレイアウト
このレッスンでは、主に、タイトル、ページボディ、アライメント、リスト、その他の一般的なコンテンツなど、ブートストラップグローバルCSSスタイルのレイアウトスタイルを学びます。
1つ。ページレイアウト
Bootstrapは、開発者が使用できる通常のデザインページレイアウトのスタイルを提供します。
1。ページボディ
ブートストラップは、グローバルフォントサイズを14pxに設定し、ラインハイトのラインの高さは1.428（つまり20px）に設定されています。段落要素は、1/2ラインの高さ（つまり10px）に等しく設定されています。色は＃333に設定されています。
//段落を強調表示された段落でテキストを作成します
2。タイトル
// H1からH6 <H1>ブートストラップフレームワーク</h1> // 36px <h2> bootstrapフレームワーク</h2> // 30px <h3> bootstrapフレームワーク</h3> // 24px <h4>ブートストラップフレームワーク</h4> // 18px <h5> boottrapフレームワーク</h5>フレームワーク</h6> // 12px
FireBugから、ブートストラップはそれぞれH1〜H6をリファクタリングし、同じ関数を達成するための通常のインライン要素のclass =（。H1〜H6）の定義もサポートしていることを学びました。
//インライン要素は、タイトルフォント<span> bootstrap </span>を使用します
注：FireBugを介して要素を表示すると、フォントの色、フォントスタイル、およびラインの高さがすべて固定されていることも確認でき、均一性が確保されます。ネイティブのものは、システムに組み込まれた優先フォントに基づいて決定され、色は最も黒です。
H1〜H6要素の間では、小さな要素を字幕として埋め込むこともできます。
//タイトル要素に小さな要素を挿入<H1>ブートストラップフレームワーク<small> bootstrap subtitle </small> </h1> <h2> bootstrapフレームワーク<small> bootstrap subtitle </small> </h2> <h3>ブートストラップフレームワーク</h3>ブートストラップフレームワーク<smalサブタイトル</small> </h5> bootstrapフレームワーク<small> bootstrap subtitle </small> </h5> <h6> bootstrapフレームワーク<small> bootstrap subtitle </small> </h6>
FireBugの視聴により、H1〜H3の下の小さな要素のサイズが親要素の65％のみを占めることがわかりました。次に、計算を通じて（FireBugによって計算されたスタイルを参照）、H1〜H3の下の小さな要素は23.4px、19.5px、および15.6pxです。 H4〜H6の下の小さな要素のサイズは、親要素の75％、つまり13.5px、10.5px、および9pxのみを占めています。 H1〜H6の下の小さなスタイルも変更され、色は明るい灰色になりました：＃777、行の高さは1、厚さは400です。
3。インラインテキスト要素
//マーク、<mark>要素または.markクラス<p> bootstrap <mark> frame </mark> </p> //行のあるさまざまなテキスト<del> bootstrap </del> //削除されたテキスト<s> bootstrapフレームワーク</s> //無駄なテキスト<ins>ブートストラップフレームワーク<//下線付きのテキスト//強調したさまざまなテキスト<small> bootstrapフレームワーク</small> //標準フォントサイズの85％<strong> bootstrapフレームワーク</strong> //太字700 <em> bootstrapフレームワーク</em> //ティルト
4。整列します
//左側のテキストアライメント<p> bootstrapフレームワーク</p> //を設定します<p> bootstrapフレームワーク</p> // center <p> bootstrapフレームワーク</p> //右側のブートストラップフレームワーク</p> //
5.ケース
//英語のテキストケース<p> bootstrapフレームワーク</p> // lowercase <p> bootstrapフレームワーク</p> // uppercase <p> bootstrapフレームワーク</p> // uppercase <p> bootstrapフレームワーク</p> //元の文字大文字化
6。略語
//略語Bootstrap <Abbr>フレーム</abbr>
7。アドレステキスト
//アドレスを設定し、チルトを削除し、行の高さを設定し、下部20px <アドレス> <strong> Twitter、Inc。
8。引用テキスト
//デフォルトスタイルのリファレンス、エッジラインを追加し、フォントサイズと内側のマージンと外側のマージンを設定<ブロックストラップフレームワーク</blockquote> //逆<blockquote>ブートストラップフレームワーク</blockquote>
9。リストレイアウト
//デフォルトのスタイルの移動<ul> <li>ブートストラップフレームワーク</li> <li> bootstrapフレームワーク</li> <li> bootstrapフレームワーク</li> <li>ブートストラップフレームワーク</li> <li>ブートストラップフレームワーク</li> </ul> //セット中間</li </li> bootstrapフレーム<li>ブートストラップフレームワーク</li> <li>ブートストラップフレームワーク</li> <li>ブートストラップフレームワーク</li> <li>ブートストラップフレームワーク</li> <li>ブートストラップフレームワーク</li> <li>ブートストラップフレームワーク</li> <li>ブートストラップフレームワーク</li <dt> bootstrap </dt> <dd> bootstrapは、開発者が使用できるスタイルを提供します。 </dd> </dl>
10。コード
//インラインコード<code <code> <section> </code> //ユーザー入力<kbd> ctrl +、</kbd> //コードブロック<pre> <p>入力... </p> </pre>
Bootstrapは、マークアップ変数の<var>、プログラム出力の場合は<samp>にもリストされていますが、CSSはrewriptedではありません。
上記は、編集者が紹介したブートストラップページレイアウトスタイルに関する関連する知識です。それがあなたに役立つことを願っています！