ホームページ > 記事 > ウェブフロントエンド > [バックエンドスタッフがフロントエンドをプレイするシリーズ] Boostrap: Boostrap_html/css_WEB-ITnose を 30 分でサクッとマスター
[バックエンドスタッフがフロントエンドをプレイするシリーズ] Boostrap: Boostrap_html/css_WEB-ITnose を 30 分でサクッとマスター
- WBOYオリジナル
- 2016-06-24 11:30:081226ブラウズ
1. はじめに
長い間ブログを書いていませんでしたが、最近忙しくて色々な面に触れることができました。たとえば、いくつかのフロントエンド フレームワークとコンポーネント、モバイル開発 React-Native、および .NET フレームワーク設計の新しい理解などです。これらの内容は、次の回で順次皆さんに共有していきます。なぜブログを長い間放置していたのに、またブログを書き始めたのでしょうか？なぜなら、この期間中、私は非常に多くのことにさらされ、学ぶために立ち止まらなかったにもかかわらず、要約するためにブログ記事を書かなかったら、それらは常に私のものではないと感じていたからです。私の心はいつも空っぽです。今日は最初に、フロントエンドの「スタイル」フレームワークである Boostrap を紹介します。
2. Boostrap の全体的なアーキテクチャ
はじめに Boostrap を フロントエンド スタイルのフレームワーク と呼んだのはなぜですか?このタイトルはあまり正確ではないかもしれませんが、このタイトルにより、一部の初心者がBoostrapが何であるかをより早く理解し、理解できるようになると思います。物事を要約するときは、知識をより深く理解するために高尚な言葉を使うのではなく、知識のポイントをわかりやすい言葉で説明することを好みます。この説明は少し不正確かもしれませんが、このような説明は確かに初心者がこの知識をより早く理解するのに役立つため、大したことではないと思います。というのは、ナレッジポイントを学んでいるときに、この種の混乱があったからです。一部の公式ナレッジドキュメントは、実際には、率直に言って、以前のものの一部をカプセル化して開発したものであると言われています。より簡単に、より速く。したがって、ここではBoostrapフレームワークと同じことを共有します。また、コンテンツ構成も初心者が使いやすいように構成されています。私も始めた当初は初心者だったからです。このような組織は、知識をより速く、よりよく理解するのに役立つと思います。
Boostrap について、最初に紹介するのはその全体的なアーキテクチャ、つまり正確に何で構成されているかです。 Boostrap が正確にどのような構成になっているかは、下の図を見ればすぐに理解できると思います。
上の図から、Boostrap が主に次の部分で構成されていることが明確にわかります:
- 12 グリッド システム - 画面を 12 の等しい部分 (列) に分割します。行を使用して要素を整理し (各行は 12 列で構成されます)、列内にコンテンツを配置します。 Col-md-offset-* を介して列オフセットを制御します。
- 基本レイアウト コンポーネント - Boostrap は、さまざまな基本レイアウト コンポーネントを提供します。植字、コード、表、ボタン、フォームなど。
- Jquery - すべての Boosttrap JavaScript プラグインは Jquery に依存します。これらの JS プラグインを使用する場合は、Jquery ライブラリを参照する必要があります。これが、Boosttrap の JS ファイルと CSS ファイルに加えて、Jquery ライブラリを参照する必要がある理由です。この 2 つは依存関係です。
- CSS コンポーネント - Boostrap には、多くの CSS コンポーネントが事前に実装されています。ドロップダウン ボックス、ボタン グループ、ナビゲーションなど。つまり、Boosttrap コンテンツは多くの CSS スタイルの定義に役立ち、これらのスタイルをドロップダウン ボックスなどの以前の要素に直接適用できます。
- JavaScript プラグイン - Boosttrap はいくつかの JS プラグインも実装しています。Boosttrap が提供するプラグインを使用すると、プロンプト ボックスやモーダル ウィンドウなどを実装するために JS コードを書き直す必要がなく、いくつかの一般的な機能を実行できます。効果はなくなりました。
- レスポンシブデザイン - これはデザインコンセプトです。レスポンシブとは、フロントエンド ページが異なるサイズの画面でも適切に動作できるように、画面サイズに応じてページが自動的に調整されることを意味します。
Boostrap は上記のパーツで構成されています。上記では各コンポーネントについて簡単に説明しましたが、次の内容はいくつかの例を通して各コンポーネントを詳しく紹介するものにすぎません。
3. 12 グリッド システム
Boostrap は、レイアウトを改善するために 12 グリッド システムを定義します。すべてのフロントエンド フレームワークで最初に定義する必要があるのは、レイアウト システムです。 Boostrap では、行と列を使用してページ レイアウトを作成します。レイアウトにはいくつかの原則があります:
- 行は .container (固定幅) または .container-fluid (100% 幅) に含まれている必要があります
- 各行には 12 列が含まれます
- 各列にコンテンツを配置します 中
Bosstrapのグリッドシステムでは、ブラウザが幅に応じて4種類に分かれています。値は、自動 (100%)、750px、970px、1170px です。
対応するスタイルは極小(xs)、小(sm)、中画面(md)、大(lg)です
メディアクエリを通じて最小幅を定義することで実装されます。したがって、Boostrap で作成された Web ページは、大きな Web ページには対応しますが、小さな Web ページには互換性がありません。
Boosttrap フレームワークでは、画面サイズの境界値が事前に定義されており、その境界値はメディア クエリを通じて定義されます。次のように定義されます:
/* 超小屏幕（手机，小于 768px） *//* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） *//* 小屏幕（平板，大于等于 768px） */@media (min-width: @screen-sm-min) { ... }/* 中等屏幕（桌面显示器，大于等于 992px） */@media (min-width: @screen-md-min) { ... }/* 大屏幕（大桌面显示器，大于等于 1200px） */@media (min-width: @screen-lg-min) { ... } 実際、メディア クエリは、応答性の高いアプリケーションを実現するために Win8 アプリケーション開発でも使用されます。したがって、将来レスポンシブ システムについて聞いても、それが非常に奥深いものであるとは思わないでください。実際、フレームワークはメディア クエリで定義された最小幅を超える場合、特定の種類のメディア クエリに対応します。このようにして、画面に合わせて画面間の要素サイズを縮小できます。ただし、Boosttrap が提案するコンセプトはモバイル デバイス ファーストであるため、Boosttrap でデザインされたページは大型デバイスのみに対応しており、小型デバイスには対応していません。
4. 基本レイアウト コンポーネント
基本レイアウト コンポーネントは、Boosttrap フレームワークのいくつかの基本レイアウト ラベルの統一スタイルを定義します。テーブル、ボタン、フォームなど。テーブルの例を見てみましょう:
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!--因为这里没有使用到Boostrap的JS插件，所以就没有引用Jquery组件--> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3>默认样式的Table</h3> <table class="table"> <caption>表标题.</caption> <!-- 表头，组合为t+head, t代表table的意思--> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</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>wang</td> </tr> </tbody> </table> <h3>带边框的表格</h3> <table class="table-bordered"> <caption>表标题.</caption> <!-- 表头，组合为t+head, t代表table的意思--> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</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>wang</td> </tr> </tbody> </table> <!-- 更多表格样式参考： http://v3.bootcss.com/css/#tables--> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body></html>
具体的なランニング効果: ここを走ります。
ボタンとフォームのサンプルコードはここには掲載されません。以下のリンクから実行効果を確認し、ソースコードを表示できます。最終ダウンロード ファイルを通じて、このトピックのすべてのソース コードをダウンロードすることもできます。
Button の例の実行効果: ここで実行
Form の例の実行効果: ここで実行
5. CSS コンポーネント
CSS コンポーネントは基本的なレイアウト コンポーネントに似ています。つまり、Boosttrap は、いくつかのタグ スタイル、これらのスタイルの実行効果は非常に美しいため、すべての企業や開発者が別のスタイルを作成する必要がなく、それによって開発効率が向上します。ナビゲーションの例を直接見てみましょう。はっきり言って、これはたくさん使っていれば自然と慣れてきます。
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3>导航条</h3> <nav class="navbar navbar-default navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Home</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> <li><a href="#">About</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action 1</a></li> <li><a href="#">Action 2</a></li> <li><a href="#">Action 3</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated Action</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body></html>
その実行効果: ここで実行
他のコンポーネントの実行効果は次のとおりです:
ページング例の実行効果: ここで実行
ドロップダウン メニューの実行効果: ここで実行
パネルの実行効果: Here Run
6. JavaScript プラグイン
デフォルトでは、JavaScript コードを 1 行も記述することなく、特定の HTML コードと対応する属性を設定することで、すべての JS プラグインを実装できます。その実装の本質は、Boosttrap がこれらの属性に対応する JavaScript コードを実装することです。
モーダル ウィンドウの例を直接見てみましょう:
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3>模态窗口</h3> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Click me </button> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>Test body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body></html>
その実行効果: ここで実行します。
これまでの内容をすべて読んだ後、Boostrap は実際には単なるスタイル フレームワークであると突然感じませんか?これを使用すると、Web ページを迅速かつ簡単に構築できます。さらに、前のコンテンツを読んだ後は、Boosttrap の公式ドキュメントが次のようになっている理由について混乱することはなくなるでしょう:
Boosttrap の公式ドキュメントのナビゲーション バーの項目は、上記の紹介の主要コンポーネントです。
7. まとめ
この時点で、この記事の内容はすべて共有されました。この記事を通じて、初心者が Boosttrap をすぐに理解してマスターできることを願っています。なお、この記事は Boostrap の要点に相当します。さらに詳しい内容については、Boostrap 中国語公式 Web サイトを参照してください。でも、そんな時間があるなら実践したほうがいいと思います。 VS2013 の Web アプリケーションはデフォルトで Boosttrap フレームワークをサポートしています。これを読む直前に VS2013 を介して Web アプリケーションを作成し、Asp.net MVC での Boostrap のアプリケーションを体験することができます。特定の関連チュートリアルについては、Bootstrap シリーズを使用した ASP.NET MVC を参照してください。
次の記事では、フロントエンド MVVM フレームワークである AngularJS について引き続き説明します。
この記事のすべてのソース コードをダウンロードします: BoostrapSamples。