• 周四. 4月 25th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

Java单体应用

admin

11月 28, 2021

原文地址: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)。

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/[email protected]/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.htmltest.html 文件,点击图示位置运行:

对比下运行结果:

5.4.源码获取

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


上一篇:简介

下一篇:网格系统


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


《Java单体应用》有一个想法
  1. Wow, superb blog format! How long have you been running a blog
    for? you make blogging glance easy. The whole look of your website is great,
    as neatly as the content material! You can see similar here dobry sklep

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注