学習のための重要なポイント:
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を使用して記録します。
上記は、編集者が紹介したブートストラップフレームワークの関連する知識です。それがあなたに役立つことを願っています!