内容简介：1 单页面应用单页面应用：指的是一种类似原生客户端软件更流畅的用户体验的页面。在单页面应用中，所有的资源（HTML、Javascript、CSS）都是按需动态加载到页面中，且不需要服务端控制页面的转向。2 响应式设计
一 现代Web应用的特点
1 单页面应用
单页面应用：指的是一种类似原生客户端软件更流畅的用户体验的页面。在单页面应用中，所有的资源（HTML、Javascript、CSS）都是按需动态加载到页面中，且不需要服务端控制页面的转向。
2 响应式设计
响应式设计：指的是不同的设备（电脑、平板、手机）访问相同的页面的时候，得到不同的页面视图，而得到的页面视图是适应当前屏幕的。当然就算在电脑上，我们通过拖动浏览器窗口的大小，也能得到合适的视图。
3 数据导向
数据导向是针对页面导向而言的，页面上的数据获得是通过消费后台REST服务来实现的，而不是通过服务器渲染动态页面（如JSP）来实现的，一般数据交换使用JSON。
二 什么是Bootstrap
Bootstrap官方定义：Bootstrap是响应式开发和移动优先的Web应用的最流行的HTML、CSS、JavaSciprit框架。
Bootstrap实现了只使用一套代码就可以在不同设备显示你想要的视图的功能。
Bootstrap还为我们提供了大量美观的HTML元素前端组件和jQuery。
三 下载并应用Bootstrap
下载地址： https://getbootstrap.com/docs/3.3/getting-started/
下载后解密目录结构如下：
最简单的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标签必须是head的头三个标签，其余的head内标签在此3个之后 --> <title>Bootstrap 基本模板</title> <!-- Bootstrap的CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 用来让IE 8 支持HTML5 元素和媒体查询 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery是Boorstrap脚本插件必需的--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
四 CSS支持
Bootstrap的CSS样式为基础的HTML元素提供了美观的样式，此为还提供了一个高级的网格系统用来做页面布局。
1 网格布局
在Bootstrap里，行使用样式row，列使用col-md-数字，此数字范围为1~12，所有列加起来的和也是12，代码如下：
<!DOCTYPE html> <html lang="zh-cn"> <!-- 上面两句为HTML5的doctype --> <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标签必须是head的头三个标签，其余的head内标签在此3个之后The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap基本模板</title> <!-- Bootstrap的CSS --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js用来让IE8支持HTML5元素和媒体查询 --> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好, Bootstrap!</h1> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> <!-- jQuery是Bootstrap脚本插件必须的 --> <script src="js/jquery.min.js"></script> <!-- 包含所有编译的插件 --> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
页面显示效果：
2 html元素
Bootstrap为html元素提供了大量的样式，如表单元素、按钮、图标等。
参考： https://getbootstrap.com/docs/3.3/css/
五 页面组件支持
Bootstrap为我们提供了大量的页面组件，包括字体图标、下拉框、导航条、进度条、缩略图。
参考： https://getbootstrap.com/docs/3.3/components/
六 Javascript支持
Bootstrap为我们提供了大量的JavaScript插件，包含模式对话框、标签页、提示、警告等。
参考：
以上所述就是小编给大家介绍的《基于Bootstrap的现代Web应用》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 袜子商店应用：一个云原生参照应用
- Android 应用中跳转到应用市场评分
- 授之以渔-运维平台应用模块一（应用树篇）
- OAM（开放应用模型）——定义云原生应用标准的野望
- ChromeOS 终端应用程序暗示其即将支持 Linux 应用
- Android应用之间数据的交互(一)获取系统应用的数据
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
C++沉思录
Andrew Koenig、Barbara Moo / 黄晓春、孟岩(审校) / 人民邮电出版社 / 2002-11-01 / 50.00元
《C++ 沉思录》集中反映了C++的关键思想和编程技术，不仅告诉你如何编程，还告诉你为什么要这样编程。本书曾出现在众多的C++专家推荐书目中。 这将是C++程序员的必读之作。因为： 它包含了丰富的C++思想和技术，从详细的代码实例总结出程序设计的原则和方法。 不仅教你如何遵循规则，还教你如何思考C++编程。 既包括面向对象编程也包括泛型编程。 探究STL这一近年来C++最重要的新成果的内在思想。一起来看看 《C++沉思录》 这本书的介绍吧!
