bootstrap-安装

最新推荐文章于 2023-09-26 14:27:08 发布

易爻64

最新推荐文章于 2023-09-26 14:27:08 发布

阅读量521

点赞数

分类专栏： bootstrap 文章标签： bootstrap jquery javascript

本文链接：https://blog.csdn.net/weixin_42176112/article/details/108113243

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本地安装

1.下载bootstrap：https://getbootstrap.com/docs/versions/
在这里插入图片描述

编译版本的目录结构:
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

2.下载jQuery ：https://jquery.com/download/
在这里插入图片描述
全选后复制，新建一个名为jquery.js的文件，把刚才复制的粘贴进去，然后把jquery.js文件拉到boostrap的js文件夹中
3. 下载Popper: https://unpkg.com/browse/popper.js@1.16.1/dist/

然后把Popper.js文件拉到boostrap的js文件夹中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>BootStrap模板</title>
    <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--页面内容-->
<a href="#" class="btn btn-primary .m-5">Hello Bootstrap</a>

<script src="jquery.js"></script>
<script src="Popper.js"></script>
<script src="bootstrap-4.2.1-dist/js/bootstrap.js"></script>
</body>
</html>

在线安装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Container</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">内容</h3>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

易爻64

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-安装

编译版本的目录结构bootstrap/├── css/│ ├── bootstrap-grid.css│ ├── bootstrap-grid.css.map│ ├── bootstrap-grid.min.css│ ├── bootstrap-grid.min.css.map│ ├── bootstrap-reboot.css│ ├── bootstrap-reboot.css.map│ ├── bootstrap-reboot.min.css│ ├──
复制链接

扫一扫