Java基础之bootstrap概述篇

1、bootstrap介绍

*Bootstrap，基于HTML、CSS、JavaScript的前端框架（半成品）。其预定义一套css样式和与此样式对应的jQuery代码，我们只需要提供固定的HTML结构，添加固定的css样式，就可以完成指定效果的实现。

*Bootstrap在jQuery的基础上工作，可以理解Bootstrap就是jQuery的一个插件。

*Bootstrap使得Web开发更加便捷，代码优雅，美观大方。

*由Twitter公司的设计师Mark Otto和Jacob Thornton合作开发。

*Bootstrap基础入门使用的都是自带css样式，该机开发中需要使用HTML5、css3、动态css语言Less进行自定义开发，Java EE课程中学习时的“基础入门”。

*国内一些移动开发者较熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来

*中文官网：http://www.bootcss.com/

2、响应式布局

*响应式布局：一个网站能够兼容多个终端（手机，ipad等），而不需要为每个终端做一个特定的版本。此概念是为解决移动互联网浏览而诞生的。

*响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

*Bootstrap就是响应式布局最成功的实现，为了兼容不同的浏览器采用jQuery，为了适配不同的终端采用css3 Media Query（媒体查询）

3、环境搭建

3.1、中文官网地址：https://v3.bootcss.com/getting-started/#download

3.2、目录结构：

3.3、内容结构:

3.4、模板介绍

<!DOCTYPE html>    <!--html约束，固定值-->
<html lang="zh-CN">   <!--生命语言，建议编写-->
  <head>
    <meta charset="utf-8">
    <!--此属性为文档兼容模式声明，表示使用IE浏览器的最新渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口：用于设置移动浏览器显示效果
        视口的作用：在移动浏览器中，当页面宽度超过设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
        取值：
        width = device-width,视口宽度=采用设备的宽度，大多手机浏览器视口的宽度是980
        initial-scale = 1,初始化缩放级别，取值1-5
        minimum-scale = 1,最小缩放级别
        maximum-scale = 1,最大缩放级别
        use-scalable = no,禁用缩放，此时minimum-scale，maximum-scale无效
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*使用且放在head最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!--前端开发中建议：网站优化时，除了立即需要工作的js存放在header外，将大部分js文件放置在页面的末尾-->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Java基础之bootstrap概述篇

猜你喜欢