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

最新推荐文章于 2021-02-27 02:50:47 发布

光束云

最新推荐文章于 2021-02-27 02:50:47 发布

阅读量381

点赞数 1

分类专栏： # Java单体应用 - 常用框架

本文链接：https://blog.csdn.net/m0_46206954/article/details/104273690

版权

Java单体应用 - 常用框架专栏收录该内容

22 篇文章 0 订阅

订阅专栏

原文地址：http://www.work100.net/training/monolithic-frameworks-bootstrap-environment-setup.html
更多教程：光束云 - 免费课程

环境搭建

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

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

1.概述

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

2.下载Bootstrap

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

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

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

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

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

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

本教程编写时，使用的是最新版Bootstrap 4.4.1，源码包已经上传至QQ群，请在门户首页下方加入QQ群获取。

3.文件结构

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

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

3.1.CSS文件

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

CSS files	Layout	Content	Components	Utilities
bootstrap.css bootstrap.min.css	Included	Included	Included	Included
bootstrap-grid.css bootstrap-grid.min.css	Only grid system	Not included	Not included	Only flex utilities
bootstrap-reboot.css bootstrap-reboot.min.css	Not included	Only Reboot	Not included	Not included

3.2.JS文件

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

JS files	Popper	jQuery
bootstrap.bundle.js bootstrap.bundle.min.js	Included	Not included
bootstrap.js bootstrap.min.js	Not included	Not 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.js	jQuery文件

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.源码获取

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

上一篇：简介

下一篇：网格系统

光束云

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java单体应用 - 常用框架 - 01.Bootstrap - 环境搭建

原文地址：http://www.work100.net/training/monolithic-frameworks-bootstrap-environment-setup.html更多教程：光束云 - 免费课程环境搭建序号文内章节视频1概述2下载Bootstrap3文件结构4HTML模板5实例请参照如上章节导航进行阅读...
复制链接

扫一扫

专栏目录