Bootstrap的安装

最新推荐文章于 2024-09-16 07:49:36 发布

Hello you'll

最新推荐文章于 2024-09-16 07:49:36 发布

阅读量1.7k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_43704651/article/details/109383285

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本地安装Bootstrap

下载Bootstrap

1、下载源代码版Bootstrap

到GitHub上下载Bootstrap压缩包

https://github.com/twbs/bootstrap/

单击Download ZIP按钮，下载最新版的Bootstrap压缩包，下载完成后解压
在这里插入图片描述
2、下载编译版Bootstrap

如果需要快速使用Bootstrap来开发网站，就可以直接下载经过编译、压缩后的发布版本，使用浏览器访问下面页面：

 https://getbootstrap.com/docs/4.1/getting-started/download/

单击Download按钮，下载编译版本压缩文件
在这里插入图片描述

安装Bootstrap

大致可以分为以下两步：

1、安装Bootstrap的基本样式
使用<link>标签引入Bootstrap.css样式表文件，并且放在其他样式表之前

 <link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css">

2、调用Bootstrap的JS文件及jQuery框架

具体的引入顺序是，jQuery.js放在最前面，然后是bundle.js，最后是Bootstrap.js

<script src="jquery.js"></script>
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script>
<script src="bootstrap-4.1.3/js/bootstrap.js"></script>

最后完整的引入Bootstrap核心代码的文件为

<head>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css">
<script src="jquery.js"></script>
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script>
<script src="bootstrap-4.1.3/js/bootstrap.js"></script>
</head>

注：为了确保在所有设备上正确渲染并支持触控缩放，需要将设置viewport属性的<meta> 标签添加到<head>中,所以才添加了下面这句：

<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">