前端笔记（二）：Bootstrap环境配置

最新推荐文章于 2024-06-07 03:54:45 发布

MuffinFish

最新推荐文章于 2024-06-07 03:54:45 发布

阅读量342

点赞数

分类专栏：前端 web 文章标签： bootstrap 前端

本文链接：https://blog.youkuaiyun.com/qq_36113598/article/details/78412874

版权

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

web

6 篇文章

订阅专栏

本文详细介绍如何使用Bootstrap和jQuery快速搭建响应式网站环境。首先从官方站点下载最新版本的Bootstrap及jQuery生产环境文件，也可直接从作者提供的链接下载。然后在HTML头部引入Bootstrap CSS并设置视口元信息，最后在body部分引入jQuery和Bootstrap JS即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

1、下载相关生产环境文件

分别到：
http://v3.bootcss.com/getting-started/#download
http://jquery.com/download/
下载最新的Bootstrap、jQuery生产环境文件，因为Bootstrap.js依赖于jQuery.js。

如果觉得麻烦也可以直接到我的优快云文件下载：
http://download.youkuaiyun.com/download/qq_36113598/10048235

下载完以后应该包括以下文件：

2、在< head>< /head>中引入Bootstrap.css并定义相应的meta信息：

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bootstrap Theme</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>

其中< meta name = “viewport” content =”XXX “>有以下几个参数可以填写：
width=device-width , 设置页面为自适应
initial-scale = 1.0 , 确保页面1：1呈现
shrink-to-fit = no , 解决IOS9的一些BUG
还可以设置：maximum-scale = 1.0 , user-scalable = no 禁止页面缩放，使WEBapp看起来更像原生应用。

3、在body中引入jQuery和Bootstrap.js，一般在body尾引入，方便阅读：

    <!-- Bootstrap core JavaScript -->
    <script src="jquery/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

完成上面三步以后，一个完整的Bootstrap环境就搭建好啦，开始设计自己的响应式网站吧！