SpringMVC+Spring+MyBatis 的综合练习 3 (引入Bootstrap)

Bootstrap中文网:http://www.bootcss.com/

Bootstrap编码规范:http://codeguide.bootcss.com/

Bootstrap中文文档:https://v3.bootcss.com/

查看各种样式的class和用法看这里就行啦~~
一边学,一边用,一边,一边记……慢慢就熟悉啦~~(视频里面老师说的 :P)

3.1 引入Bootstrap

(1) 在Bootstrap中文网下载 Bootstrap 3(https://v3.bootcss.com/
(2) 在webapp文件夹中创建 static 文件夹,用来保存静态文件。
(3) 将解压缩后的 bootstrap*3.3.7-dist 文件夹复制到static文件夹中。

<!-- Bootstrap -->
<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

3.2 引入jQuery

由于 Bootstrap 依赖 jQuery,所以要引入 jQuery。

3.2.1 引入本地jQuery.js

(1) 在 static 文件夹中建立 js 文件夹,
(2) 在 jQuey 网站中下载 jQuery-3.2.1.min.js
(3) 复制到 js 文件夹中
(4) 在网页的 < head > 标签中加上下面的代码

<script src="js/jquery.min.js"></script>

3.2.2 也可以直接在网页中写jQuery的引用。

像这样:

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

3.3 一个简单的例子

今后在创建网页文件时,使用下面的方法使用 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标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <!-- Bootstrap -->
        <link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

        <title>Bootstrap is ready !!</title>
    </head>
    <body>
        <h1>h1. 你好,世界!</h1>
        <button class="btn btn-success">Hello</button>
    </body>

</html>

注意:
jQuery.min.js 的引入一定要在 bootstrap.min.js 之前,这样能保证不出错。

猜你喜欢

转载自blog.csdn.net/hh680821/article/details/79044705