基于Bootstrap的现代Web应用

栏目: CSS · CSS3 · 发布时间: 5年前

内容简介: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的现代Web应用

下载后解密目录结构如下:

基于Bootstrap的现代Web应用

最简单的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>

页面显示效果:

基于Bootstrap的现代Web应用

2 html元素

Bootstrap为html元素提供了大量的样式,如表单元素、按钮、图标等。

参考: https://getbootstrap.com/docs/3.3/css/

五 页面组件支持

Bootstrap为我们提供了大量的页面组件,包括字体图标、下拉框、导航条、进度条、缩略图。

参考: https://getbootstrap.com/docs/3.3/components/

六 Javascript支持

Bootstrap为我们提供了大量的JavaScript插件,包含模式对话框、标签页、提示、警告等。

参考:

https://getbootstrap.com/docs/3.3/javascript/


以上所述就是小编给大家介绍的《基于Bootstrap的现代Web应用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

链接

链接

[美]艾伯特-拉斯洛•巴拉巴西 (Albert-László Barabási) / 沈华伟 / 浙江人民出版社 / 2013-8-1 / 59.90元

[内容简介] ★《链接》是《爆发》的作者,艾伯特-拉斯洛•巴拉巴西的成名之作,同时也是复杂网络的奠基之作,社交网络的入门之作。巴拉巴西之前,随机网络理论一直主导者我们的网络思维,是巴拉巴西第一个证明了,我们不是生活在随机世界里,真实网络是无尺度的。 ★巴拉巴西在书中追溯了网络的数学起源,分析了社会学家在此基础上得出的研究成果,最后提出自己的观点:我们周围的复杂网络,从鸡尾酒会、恐怖组织......一起来看看 《链接》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具