この記事では、主に歴史、機能、ブーストラップの使用、およびBoostrapがWebプロジェクトを開発するために選択された理由について学びます。
学習のための重要なポイント：
1.BootStrapの概要
2.BootStrap機能
3.ブートストラップ構造
4.最初のページを作成します
5。学習のためのさまざまな準備
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
2。ブートストラップ機能
Bootstrapは、非常に実用的な機能と機能のおかげで非常に人気があります。主なコア関数は次のとおりです。
（1）。クロスデバイス、クロスブラウザー
より批判されたIE7および8を含むすべての最新のブラウザと互換性があります。もちろん、このコースはもはやIE9以下のブラウザを考慮しません。
（2）。レスポンシブレイアウト
PC側のさまざまな解像度でディスプレイをサポートできるだけでなく、モバイルパッド、携帯電話、その他の画面のレスポンシブスイッチングディスプレイもサポートできます。
（3）。提供された包括的なコンポーネント
Bootstrapは、ナビゲーション、ラベル、ツールバー、ボタン、その他のコンポーネントを含む非常に実用的なコンポーネントを提供します。これらは、開発者が呼び出すのに便利です。
（4）。内蔵jqueryプラグイン
Bootstrapは、多くの実用的なjQueryプラグインを提供します。これにより、開発者はWebでさまざまな一般的な特殊効果を実装するようになります。
（5）。 HTML5およびCSS3をサポートします
HTML5セマンティックタグとCSS3プロパティはよくサポートされています。
（6）。ダイナミックなスタイルをサポートします
変数、ネスト、および操作を使用して、より速く、より柔軟なCSSを書き込みます。ブートストラップでうまく機能します。
3。ブートストラップ構造
まず、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のコアファイルを導入し、正常に表示するかどうかをテストします。
//最初のブートストラップ
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap introwing </title> <link rel = "styleSheet" href = " src = "js/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </scrip> </body> </html>
5。学習のためのさまざまな準備
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を使用して記録します。
それでも詳細に学びたい場合は、ここをクリックして素晴らしいトピックを学び、添付できます。BootStrapLearning Tutorial Bootstrap Practical Tutorial
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。