学習のための重要なポイント：
1.BootStrapの概要
2.BootStrap機能
3.ブートストラップ構造
4.最初のページを作成します
5。学習のためのさまざまな準備
このレッスンでは、主にBoostrapの歴史、機能、用途、およびBoostrapがWebプロジェクトを開発するために選択された理由について学びます。
1つ。ブートストラップの概要
Bootstrapは、Twitter（世界最大のWeibo）の2人の技術エンジニアによって開発されたHTML、CSS、およびJavaScriptに基づくオープンソースフレームワークです。フレームワークコードはシンプルで視覚的に美しいものであり、PCおよびモバイルデバイスに基づいて迅速かつ単純にWebページ要件を構築するために使用できます。
2010年6月、Twitter内のエンジニアは、フロントエンド開発タスクにおけるコラボレーションと統一の問題を解決しました。さまざまなソリューションの後、2011年8月にブートストラップが最終的に確認およびリリースされました。長期間の反復とアップグレードの後、元のCSS駆動型プロジェクトは、多くのJavaScriptプラグインとアイコンが組み込まれた多機能Webフロントエンドを備えたオープンソースフレームワークに発展しました。
ブートストラップの最も重要な部分は、そのレスポンシブレイアウトです。これは、PC、パッド、携帯電話のページアクセスと互換性があります。
ブートストラップのダウンロードとデモンストレーション：
国内文書翻訳公式ウェブサイト：http：//www.bootcss.com
Piaocheng Webクラブの公式ウェブサイト：http：//www.ycku.com
二。ブートストラップ機能
Bootstrapは、非常に実用的な機能と機能のおかげで非常に人気があります。主なコア関数は次のとおりです。
（1）。クロスデバイス、クロスブラウザー
より批判されたIE7および8を含むすべての最新のブラウザと互換性があります。もちろん、このコースはもはやIE9以下のブラウザを考慮しません。
（2）。レスポンシブレイアウト
PC側のさまざまな解像度でディスプレイをサポートできるだけでなく、モバイルパッド、携帯電話、その他の画面のレスポンシブスイッチングディスプレイもサポートできます。
（3）。提供された包括的なコンポーネント
Bootstrapは、ナビゲーション、ラベル、ツールバー、ボタン、その他のコンポーネントを含む非常に実用的なコンポーネントを提供します。これらは、開発者が呼び出すのに便利です。
（4）。内蔵jqueryプラグイン
Bootstrapは、多くの実用的なjQueryプラグインを提供します。これにより、開発者はWebでさまざまな一般的な特殊効果を実装するようになります。
（5）。 HTML5およびCSS3をサポートします
HTML5セマンティックタグとCSS3プロパティはよくサポートされています。
（6）。ダイナミックなスタイルをサポートします
変数、ネスト、および操作を使用して、より速く、より柔軟なCSSを書き込みます。ブートストラップでうまく機能します。
三つ。ブートストラップ構造
まず、Boostrapのドキュメント構造を理解したい場合は、公式Webサイトでローカルにダウンロードする必要があります。ブートストラップのダウンロードアドレスは次のとおりです。
ブートストラップダウンロードアドレス：http：//v3.bootcss.com/（選択環境を選択、v3.3.4）
減圧後、ディレクトリは次のような構造を提示します。
ブートストラップ/
├├。。CSS/
│├··ックス。bootstrap.css
bootstrap.css.map
│├··ックス。bootstrap.min.css
│├│├）ruittrap-theme.css
wuttrap-theme.css.map
wuttrap-theme.min.css
├├）/ js/
│├│├。-bootstrap.js
│└│└。bootstrap.min.js
ponts/
├├）-グリフィコン - ハルフリング - レギュラー.eot
├··ックス - Glyphicons-Halflings-Regulal.svg
├├）- Glyphicons-Halflings-Regulal.ttf
├├）-グリフィコン - ハルフリング - レギュラー.woff
└└）- Glyphics-Halflings-Regular.Woff2
主に、CSS（スタイル）、JS（スクリプト）、およびフォント（フォント）の3つのコアディレクトリに分かれています。
1. CSSディレクトリには、CSS接尾辞を含む4つのファイルがあります。 minという単語を含むものは圧縮バージョンであり、一般的に使用されます。含まれていないものは圧縮のないファイルであり、CSSコードを理解することを学ぶことができます。マップサフィックスを備えたファイルは、一部の特定のブラウザツールで使用されるCSSソースコードマッピングテーブルです。
2.JSディレクトリには、非圧縮および圧縮JSファイルが2つのファイルが含まれています。
3.Fontsディレクトリには、異なるサフィックスを持つフォントファイルが含まれています。
4。最初のページを作成します
HTML5ページを作成し、Bootstrapのコアファイルを導入し、正常に表示するかどうかをテストします。
//最初のbootstrap <！doctype html> <html lang = "zh-cn"> <head> <head> <head> <title> bootstrap introdution </titles </titlesheet "link rel =" link rel = "css/boottrap.min.css src = "js/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </scrip> </body> </html>
五。学習のためのさまざまな準備
1。開発ツール。 Sublime Text3をBootstrapの開発ツールとして使用し、Emmet Code Generationプラグインをインストールしました。
2。テストツールは、従来の最新のブラウザに加えて、2番目にモバイルテストツールとしてです。 OperaモバイルエミュレータとChromeのモバイルWebテストツールを使用しています。
3.必要な基盤は、少なくともHTML5シーズン1コースの基盤です。 Bootstrapには多くのjQueryプラグインが組み込まれています。JQueryまたはJS自体よりも使用する方がはるかに簡単ですが、JQueryコースとJSコースの基盤がある場合は、学習をより深く理解できます。
4。コース解決：基本コースでは、1024 x 768を使用して記録しますが、レスポンシブコースやプロジェクトコースなどの特別なパーツは高解像度の録音を必要とし、1440 x 900を使用して記録します。
上記は、編集者が紹介したブートストラップフレームワークの関連する知識です。それがあなたに役立つことを願っています！