ブートストラップとは何ですか？
Bootstrapは、WebアプリケーションとWebサイトの迅速な開発のためのフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。
歴史
ブートストラップは、TwitterのMark OttoとJacob Thorntonによって開発されました。 Bootstrapは、2011年8月にGitHubでリリースされたオープンソース製品です。
私は最近たくさんの暇があります。今日は、フロントエンドの「スタイル」フレームワーク - ブートストラップを紹介します。
1。ブートストラップ全体のアーキテクチャ
なぜ紹介では、ブートストラップをフロントエンドスタイルのフレームワークとして呼ぶのですか？そのようなタイトルはあまり正確ではないかもしれませんが、そのようなタイトルは、一部の初心者がどのようなブートストラップがより迅速になるかを理解し、理解することを可能にすることができると思います。私は特定の知識の理解を深めるためにハイエンドの言葉を使うのは好きではありませんが、代わりに理解しやすい言葉を使用して知識ポイントを説明することを好みます。このような説明は少し不正確かもしれませんが、それは大したことではないと思います。なぜなら、そのような説明は実際に初心者がこの知識をより速く理解できるようにするからです。知識ポイントを学んでいたときに混乱していたので、一部の公式知識文書は非常にハイエンドでした。実際、それを率直に言うと、それは過去からのものであり、その後カプセル化されて開発をより簡単かつ速くするためにカプセル化されました。したがって、ここでは、Bootstrapフレームワークが同じであることを共有します。さらに、コンテンツ組織は、初心者がそれをより良く習得できるようにすることも目的としています。私が最初にそれと接触し始めたとき、私は初心者でもあったからです。この整理方法は、知識をより迅速かつより良く理解するのに役立つと思います。
Bootstrapの場合、最初にその全体的なアーキテクチャを紹介する必要があります - それは正確に何で構成されていますか。下の写真を見て、ブートストラップで何で構成されているかをすぐに理解できると思います。
上記の図から、ブートストラップは主に次の部分で構成されていることが明確にわかります。
12グリッドシステム - 画面を12コピー（列）に分割することです。
行を使用して要素を整理します（各行には12列が含まれています）、列に内容を配置します。
COL-MDオフセット - *によってオフセットされたコントロールカラム。
基本的なレイアウトコンポーネント-Bootstrapは、さまざまな基本レイアウトコンポーネントを提供します。タイプセット、コード、フォーム、ボタン、フォームなど
jQuery—すべてのJavaScriptプラグインをbootstrap jqueryに依存しています。これらのJSプラグインを使用する場合は、jQueryライブラリを参照する必要があります。これは、BootstrapのJSファイルとCSSファイルを参照することに加えて、jQueryライブラリを参照する必要がある理由でもあります。どちらも依存関係です。
CSSコンポーネント-Bootstrapは、多くのCSSコンポーネントを事前に実施しています。言い換えれば、Bootstrapコンテンツは、多くのCSSスタイルを定義するのに役立ち、これらのスタイルを以前のドロップダウンボックスなどの要素に直接適用できます。
JavaScriptプラグイン-Bootstrapは、JSプラグインも実装しています。 JSコードを書き換えてプロンプトボックスやモーダルウィンドウなどの効果を実現することなく、いくつかの一般的な関数を完了するために提供されたプラグインを使用できます。
レスポンシブデザイン - これはデザインコンセプトです。応答性とは、画面サイズに応じてページを自動的に調整し、フロントエンドページがさまざまなサイズの画面でうまく機能できることを意味します。
ブートストラップは上記の部分で構成されています。上記は各コンポーネントの簡単な紹介を示しており、次のコンテンツは、いくつかの例を通じて各コンポーネントへの詳細な紹介にすぎません。
2。12グリッドシステム
Bootstrapは、より良いレイアウトのために12グリッドシステムを定義します。定義する最初のことは、各フロントエンドフレームワークのレイアウトシステムです。ブートストラップでは、行と列を使用してページレイアウトを作成します。レイアウトにはいくつかの原則があります。
行は.container（固定幅）または.container-fluid（100％幅）に含める必要があります
各行には12列が含まれています
各列にコンテンツを配置します
Bootstrapのラスターシステムでは、ブラウザは幅に応じて4つのタイプに分割されます。値は、自動（100％）、750px、970px、および1170pxです。
対応するスタイルは、非常に小さい（XS）、小（SM）、中サイズの画面（MD）、および大規模（LG）です
もともとは、メディアクエリを介して最小幅を定義することによって実装されています。したがって、Bootstrapによって作成されたWebページは、大きなものと小さなものと互換性があります！
Bootstrapフレームワーク内では、画面サイズの区切り値が事前に定義されており、境界値はメディアクエリを通じて定義されます。その定義は次のとおりです。
/*ウルトラスマール画面（モバイル、768px未満）* //*これはブートストラップのデフォルトであるため、メディアクエリに関連するコードはありません。 992px） */ @media（min-width： @screen-md-min）{...}/ *大画面（大型デスクトップディスプレイ、1200px以上） */ @media（min-width： @screen-lg-min）{...}実際、メディアクエリは、Win8アプリケーション開発でも使用されており、応答性の高いアプリケーションを実現しています。したがって、将来応答性のあるシステムを聞いても、それが非常に深いとは思わないでください。実際、フレームワークは私たちのメディアクエリを定義しています。メディアクエリで定義されている最小幅がメディアクエリで定義された最小幅を超える場合、このようにして、異なる画面間で要素サイズを縮小して画面に適応できます。ただし、Bootstrapによって提案された概念はモバイルデバイスよりも好まれるため、Bootstrapによって設計されたページは、小規模と小さいものとのみ互換性があります。
3。基本的なレイアウトコンポーネント
基本的なレイアウトコンポーネントは、ブートストラップフレームワークがいくつかの基本レイアウトラベルのいくつかの統一スタイルを定義することです。テーブル、ボタン、フォームなどなど。テーブルの例を見てみましょう。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge"> <meta name = "viewport" content = "width =" width = bed "他のコンテンツは *それらに従う必要があります！ - > <title> bootstrap 101テンプレート</title> <！ - js bootstrapにはjsプラグインがないため、jqueryコンポーネントへの参照はありません - > <！ - bootstrap-> <link rel = "styleSheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.csss"> </head> <body> <h3>デフォルトスタイルテーブル</h3> <テーブル> <キャプション>テーブルタイトル。表 - > <thead> <tr> <th> id </th> <th>名</th> <th>姓</th> </tr> </thead> <tbody> <tr> <th scope = "row"> 1 </th> <td> tommy </td> <td> li </td> </tr <tr <th scope = "row"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "row"> 3 </th> <td> sam </td> <td> t+head、tはテーブルの意味を表します - > <thead> <tr> <th> id </th> <th>名</th> <th>姓</th> </tr </thead> <tbody> <tr> <th scope = "row"> 1 </th> <td> tommy </td> scope = "row"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "row"> 3 </th> <td> sam </td> <td> wang </td> </tr> </tbody> <！ http://v3.bootcss.com/css/#tables--> <！-- jquery（bootstrapのjavascriptプラグインに必要） - > <スクリプトsrc = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.min.js"> < - > <スクリプトsrc = "http://cdn.bootcss.com/boottrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
ボタンとフォームのサンプルコードはここには投稿されません。以下のリンクを使用して、実行中の効果とソースコードを表示できます。また、最後のダウンロードファイルを使用して、このトピックのすべてのソースコードをダウンロードすることもできます。
IV。 CSSコンポーネント
CSSコンポーネントは、基本的なレイアウトコンポーネントに似ています。つまり、ブートストラップはいくつかのタグの既存のスタイルを定義し、これらのスタイルの効果は非常に美しいため、すべての企業や開発者が別のスタイルを作成する必要がなく、開発効率を高速化する必要がありません。ここでナビゲーションの例を見てみましょう。率直に言って、このことをあまりにも多く使用すれば、自然にそれに慣れます。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge"> <meta name = "viewport" content = "width =" width = bed "他のコンテンツは *それらに従う必要があります！ - > <title> bootstrap 101テンプレート</title> <！ - bootstrap-> <link rel = "styleSheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <より良いモバイルディスプレイのためにグループ化されます - > <div> <ボタンタイプ= "button" data-toggle = "collapse" data-target = "＃bs-example-navbar-collapse-1" aria-expanded = "false"> <span>トグルナビゲーションhref = "＃"> home </a> </div> <！ - 切り替えのためのNavリンク、フォーム、およびその他のコンテンツを収集 - > <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "＃"> home <span>（current）</span </a> href = "＃"> bout </a> </li> </ul> <ul> <li> <a href = "＃"> link </a> </li> <li> href = "＃">アクション1 </a> </li> <li> <a href = "＃">アクション2 </a> </li> <li> <a href = "＃">アクション3 </a> </li> <li> < - > </div> <！ - /.container-fluid-> </nav> <！ - jquery（bootstrapのjavascriptプラグインに必要です） - > <スクリプトsrc = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.min.js - > <スクリプトsrc = "http://cdn.bootcss.com/boottrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
他のコンポーネントの操作効果は次のとおりです。
5。JavaScriptプラグイン
デフォルトでは、すべてのJSプラグインは、JavaScriptコードの行を記述せずに特定のHTMLコードと対応するプロパティを設定することで実装できます。その実装の本質は、ブートストラップがこれらのプロパティの対応するJavaScriptコードを実装することです。
モーダルウィンドウの例を見てみましょう。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge"> <meta name = "viewport" content = "width =" width = bed "他のコンテンツは *それらに従う必要があります！ - > <title> bootstrap 101テンプレート</title> <！ - bootstrap-> <link rel = "styleSheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> < type = "button" data-toggle = "modal" data-target = "＃mymodal">クリック</button> <div id = "mymodal"> <div> <div> <button = "button =" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"タイトル</h4> </div> <div> <p>テストボディ…</p> </div> <div> <button = "button" data-dismiss = "modal"> close </button> <button type = "button"> div> <！ - /.modal-content-> <> </div - jQuery（BootstrapのJavaScriptプラグインに必要） - > <スクリプトsrc = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> </<！ src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
以前のすべてのコンテンツを読んだ後、ブートストラップは実際には単なるスタイルフレームワークであるとすぐに感じますか？これにより、Webページをすばやく簡単に作成できます。さらに、以前のコンテンツを読んだ後、公式のブートストラップドキュメントが次のとおりである理由を混乱させることはありません。
公式ブートストラップのナビゲーションバーのエントリは、上記の紹介の主要なコンポーネントではありませんか？
6。概要
この時点で、この記事のすべてのコンテンツが終了しました。この記事を通して、初心者がブートストラップをすばやく理解し、マスターすることができることを願っています。さらに、この記事はブートストラップの重要なポイントに相当します。より詳細なコンテンツについては、Bootstrapの公式のWebサイトを参照できます。でももう欲しくないと思います。その時間があれば、直接練習することをお勧めします。 VS2013 Webアプリケーションは、デフォルトでBootstrapフレームワークを既にサポートしています。 VS2013を介してWebアプリケーションをすぐに作成して、ASP.NET MVCの下でBootstrapのアプリケーションを読む前に体験できます。