Java单体应用 - 常用框架 - 01.Bootstrap - 环境搭建

  • Z时代
  • 2024-01-10
  • 分类：综合

java

原文地址：http://www.work100.net/training/monolithic-frameworks-bootstrap-environment-setup.html

更多教程：光束云 - 免费课程

序号文内章节视频
1概述-
2下载Bootstrap-
3文件结构-
4HTML模板-
5实例-

请参照如上章节导航进行阅读

1.概述

Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。

2.下载Bootstrap

您可以通过地址 http://getbootstrap.com/ 下载 Bootstrap 的最新版本。

当您点击这个链接时，您将看到如下所示的网页：

点击 Download 按钮进入下载页面，如下：

如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。

为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。

由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。

本教程编写时，使用的是最新版（Bootstrap 4.4.1）。

3.文件结构

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

  • bootstrap.* ：已编译的CSS和JS

  • bootstrap.min.* ： 已编译并且压缩后的CSS和JS

3.1.CSS文件

Bootstrap包含一些选项，可以包含部分或全部已编译的CSS。

CSS filesLayoutContentComponentsUtilities
bootstrap.css
bootstrap.min.css		IncludedIncludedIncludedIncluded
bootstrap-grid.css
bootstrap-grid.min.css		Only grid systemNot includedNot includedOnly flex utilities
bootstrap-reboot.css
bootstrap-reboot.min.css		Not includedOnly RebootNot includedNot included

3.2.JS文件

同样，我们可以选择包含部分或全部已编译的JavaScript。

JS filesPopperjQuery
bootstrap.bundle.js
bootstrap.bundle.min.js		IncludedNot included
bootstrap.js
bootstrap.min.js		Not includedNot included

4.HTML模板

一个使用了 Bootstrap 的基本的 HTML 模板如下所示：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Hello, Bootstrap!</title>
</head>
<body>
<h1>Hello, Bootstrap!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

5.实例

我们通过一个实例展示下如何构建基于 Bootstrap 的项目。

5.1.创建项目

首先通过 IDEA 创建一个 hello-bootstrap 项目，并构建如下目录结构：

目录结构说明：

目录含义
assets/css/样式
assets/images/图片
assets/js/JS
assets/plugins/插件
assets/plugins/bootstrap/Bootstrap 框架
assets/plugins/bootstrap/css/Bootstrap 框架的样式
assets/plugins/bootstrap/js/Bootstrap 框架的JS
assets/plugins/jquery-3.4.1.jsjQuery文件

5.2.创建测试文件

在项目根目录新建一个 index.html 文件，引入 Bootstrap 框架，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="./assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Hello Bootstrap</h1>
<script src="./assets/plugins/jquery-3.4.1.min.js"></script>
<script src="./assets/plugins/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

为了对比使用和未使用 Bootstrap 的差异，我们新增一个未引入 Bootstrap 框架的 test.html 文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<h1>Hello Bootstrap</h1>
</body>
</html>

5.3.运行

在 IDEA 编辑器中打开 index.html 和 test.html 文件，点击图示位置运行：

对比下运行结果：

5.4.源码获取

实例源码已经托管到如下地址：

  • https://github.com/work100-net/training-stage2/tree/master/hello-bootstrap

  • https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap

上一篇：简介

下一篇：网格系统

如果对课程内容感兴趣，可以扫码关注我们的 公众号 或 QQ群，及时关注我们的课程更新

以上是 Java单体应用 - 常用框架 - 01.Bootstrap - 环境搭建 的全部内容， 来源链接： utcz.com/z/390602.html

回到顶部