Bootstrap引入配置 – 源码巴士

Bootstrap环境搭建

Bootstrap介绍

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking
News都使用了该项目

Bootstrap环境详细配置

BootStrap环境配置分为两种方式。

一种是将Bootstrap文件包下载，在开发的Web页面中导入
另一种方式是使用CDN在线方式，避免将Bootstrap文件包下载到本地。

1.静态文件配置

下载地址

中文地址：https://www.bootcss.com/

下载步骤

1.点击【Bootstrap3中文文档v3.3.7】
在这里插入图片描述
2.点击【下载Bootstrap】

3.进入下一个页面，下滑到如下位置，下载用于生产环境的Bootstrap

4.将压缩包放到指定位置，解压。目录结构如下所示
Bootstrap目录结构
Bootstrap详细目录结构
注
      css文件:css样式文件，包括css核心文件和主题文件
      js文件：javascript文件，包括javascript核心文件
      fonts文件：图标字体，主要是css样式文件中的主题文件会引用到的字体图标

配置

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <!-- IE将使用最新的引擎渲染网页 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 页面的宽度与设备屏幕的宽度一致
         初始缩放比例 1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>
	<!-- 将下载好的Bootstrap文件复制到项目的当前路径下 -->
    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- NO.1 加载框架依赖的jQuery文件(压缩版) -->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!-- NO.2 加载Bootstrap的所有JS插件 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

2.在线方式

在线方式使用CDN技术，CDN是Content Delivery Network的缩写，简单的说就是Bootstrap把自己的css、Js等文件托管到某一个网络服务器上使用时调用。
注意：CDN方式要保证网络畅通

引用网址

https://www.bootcdn.cn/twitter-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">
    <title>Demo</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
    

  </head>
  <body>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

原文链接：https://blog.csdn.net/laowangism/article/details/111239838