ホームページ > 記事 > ウェブフロントエンド > [バックエンドスタッフがフロントエンドをプレイするシリーズ]Boostrap 記事: Bootstrap_html/css_WEB-ITnose を 30 分でサクッとマスター
[バックエンドスタッフがフロントエンドをプレイするシリーズ]Boostrap 記事: Bootstrap_html/css_WEB-ITnose を 30 分でサクッとマスター
- WBOYオリジナル
- 2016-06-24 11:30:061278ブラウズ
1. はじめに
長い間ブログを書いていませんでしたが、最近忙しくて色々な面に触れることができました。たとえば、いくつかのフロントエンド フレームワークとコンポーネント、モバイル開発 React-Native、および .NET フレームワーク設計の新しい理解などです。これらの内容は、次の回で順次皆さんに共有していきます。なぜブログを長い間放置していたのに、またブログを書き始めたのでしょうか？なぜなら、この期間中、私は非常に多くのことにさらされ、学ぶために立ち止まらなかったにもかかわらず、要約するためにブログ記事を書かなかったら、それらは常に私のものではないと感じていたからです。私の心はいつも空っぽです。今日は最初に、フロントエンドの「スタイル」フレームワークであるブートストラップを紹介します。
2. Bootstrap の全体的なアーキテクチャ冒頭で Bootstrap を フロントエンド スタイルのフレームワーク と呼んだのはなぜですか?このタイトルはあまり正確ではないかもしれませんが、このタイトルにより、一部の初心者がBootstrapが何であるかをより早く理解し、理解できるようになると思います。物事を要約するときは、知識をより深く理解するために高尚な言葉を使うのではなく、知識のポイントをわかりやすい言葉で説明することを好みます。この説明は少し不正確かもしれませんが、このような説明は確かに初心者がこの知識をより早く理解するのに役立つため、大したことではないと思います。というのは、私がナレッジポイントを学ぶときに非常に混乱したためです。公式ドキュメントに記載されているナレッジの一部は、実際には、開発を簡単にするために以前のものの一部にすぎません。そしてより速く。したがって、ここでは同じブートストラップフレームワークを共有します。また、コンテンツ構成も初心者が使いやすいように構成されています。私も始めた当初は初心者だったからです。このような組織は、知識をより速く、よりよく理解するのに役立つと思います。
Bootstrap について、最初に紹介するのはその全体的なアーキテクチャ、つまり正確に何で構成されているかです。以下の図を見れば、Bootstrap が正確にどのような構成になっているかをすぐに理解できると思います。
上の図から、Bootstrap が主に次の部分で構成されていることが明確にわかります:
Bootstrap は、レイアウトを改善するために 12 グリッド システムを定義します。すべてのフロントエンド フレームワークで最初に定義する必要があるのは、レイアウト システムです。 Bootstrap では、行と列を使用してページ レイアウトを作成します。レイアウトにはいくつかの原則があります:
行は .container (固定幅) または .container-fluid (100% 幅) に含まれている必要があります
対応するスタイルは極小（xs）、小（sm）、中画面（md）、大（lg）です
メディアクエリを通じて最小幅を定義することで実装されます。したがって、Bootstrap で作成された Web ページは、大きな Web ページには対応しますが、小さな Web ページには互換性がありません。
Bootstrapフレームワーク内では、画面サイズの境界値があらかじめ定義されており、その境界値はメディアクエリを通じて定義されます。次のように定義されます:
/* 超小屏幕（手机，小于 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应用开发中也应用了媒体查询来实现可响应式的应用。所以大家以后如果听到了可响应系统不要觉得很高深哦，其实就是框架为我们定义了媒体查询，如果超过了媒体查询中定义的最小宽度对应某个类型屏幕，通过这样的方式，就可以在不同屏幕之间收缩元素大小来适应屏幕。然而Bootstrap提出的概念是移动设备优先的，所以Bootstrap设计出来的页面只能向大兼容，向小不兼容。
四、基础布局组件基础布局组件就是Bootstrap框架内为一些基础布局的标签定义了一些统一的样式。如Table、按钮、表单等。下面让我们看一个Table的例子：
<!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的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和表单的例子代码这里就不贴了，大家可以通过下面的链接查看运行效果和查看源码。也可以通过最后的下载文件来下载本专题的所有源码。
Button例子的运行效果：在此运行
表单例子的运行效果：在此运行
五、CSS组件
CSS组件和基础布局组件差不多，也就是Bootstrap为一些标签定义了一些已有的样式，这些样式运行的效果都非常美观，这样每个公司或开发人员都不需要再去写一篇样式，从而加快开发效率。这里直接看一个导航的例子吧。说白这个东西，你用多了自然就熟了。
<!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>
其运行效果：在此运行
其他组件的运行效果如下:
分页例子的运行效果：在此运行
下拉菜单的运行效果：在此运行
面板的运行效果：在此运行
六、JavaScript插件默认情况下，所有的JS插件都可以通过设置特定的HTML代码和相应的属性来实现，而无需写一行JavaScript代码。其实现本质就是Bootstrap为这些属性实现了对应的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>
其运行效果：在此运行。
看完前面的所有内容之后，是不是瞬间觉得Bootstrap其实只不过是一个样式框架罢了。利用它我们可以快速方便地构建Web页面。另外看完前面的内容，你也就不会困惑为什么Bootstrap官方文档为什么是下面这样的吧：
Bootstrap官方文档的导航条中的条目不就是我们上面的介绍的几大组成部分嘛。
七、总结到此，本文的所有内容就分享结束了，希望通过本文可以让初学者快速理解和掌握Bootstrap。另外本文相当于是Bootstrap要领吧，关于更详细的内容大家可以自行参考Bootstrap中文官网。不过我觉得没不要了，有那样的时间还不如就直接实践起来呢。VS2013的Web应用程序就已经默认支持Bootstrap框架，大家可以看完之前就可以马上通过VS2013来创建一个Web应用程序来体验下Bootstrap在Asp.net MVC 下的应用吧。具体相关教程可以参考：ASP.NET MVC使用Bootstrap系列
在接下来的一篇文章中，我将继续为大家分享前端MVVM框架——AngularJS。
本文所有源码下载：BootstrapSamples。