1，在https://v3.bootcss.com/getting-started/#download下载bootstrap的压缩包；

2，将压缩包解压到自己的工程文件中，会得到如下结果：

3，打开这个解压的文件，一直点击进去，里面有三个文件的界面，展示如下：

4，css文件中装的是样式文件：

　　其中bootstrap.min.css是我们要使用并且引用的样式文件，bootstrap.css是我们可以阅读并修改的样式文件。还有几个主题文件，一般情况下，如果不涉及到动画和渐变，不引入bootstrap的主题文件，一般工程bootstrap.css就够用。

5，编辑器新建.html文件和css文件夹丶jQuery文件夹，并且在jQuery文件夹中引入jQuery.js库（因为bootstrap.js依赖于jQuery库）

6，用某个编辑器（我用的是sublime）打开新建的html文件，复制粘贴一下基础代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- 此处引用bootstrap的css文件 -->
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
<!-- 此处引用的是自己的css文件，该文件会覆盖上面引用的bootstrap的css文件 -->
<link rel="stylesheet" type="text/css" href="lib/css/style.css">
</head>
<body>
</body>
<!-- 提前引用JQ -->
<script type="text/javascript" src="jQuery/jquery-1.11.3.min.js"></script>
<!-- 此处引用bootstrap的js文件 -->
<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
<!-- 此处引用的是自己的js文件 -->
<script type="text/javascript" src="lib/js/test.js"></script>
</html>

7，注意事项：

a.注意自己的bootstrap文件的路径，路径不同引用的地址也不一样；

b.引用bootstrap.js的时候一定要先引用jQuery.js，否则会报错，因为boostrap.js依赖于jQuery，所以必须先引用jQuery；

c.若是想自己的样式覆盖掉bootstrap的样式，要把自己样式在bootstrap的后面引用；

bootstrap的引用和注意事项的更多相关文章

  1. Django 中bootstrap的引用

    bootstrap的优越性 如果你有基本的HTML+CSS,bootstrap其实就是在标签中加入具体的class来实现样式.和原生态的HTML+CSS需要先在head标签的style写样式或者引入外 ...

  2. bootstrap课程6 bootstrap的表单注意事项有哪些

    bootstrap课程6 bootstrap的表单注意事项有哪些 一.总结 一句话总结: 1.bootstrap中的表单中的每一项是什么样的形式? div.form-group>label +i ...

  3. Bootstrap 内核引用（一）

    方法一: Bootstrap CDN推荐 本站实例采用的是百度的静态资源库(http://cdn.code.baidu.com/)上的Bootstrap资源. 百度的静态资源库的 CDN 服务,访问速 ...

  4. Bootstrap 在线引用

    Bootstrap 3.3.0 js 文件 <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.j ...

  5. bootstrap插件引用

    若按照步骤报这种错误,从这几方面进行排错 1.引用css/js的顺序 2.是否以及引入相应的包 3.是否正确调用(此处需要注意有require.js的情况,要不把switch方法写入require里面 ...

  6. Bootstrap在线引用css和js

    百度在线调用 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></ ...

  7. C++中对类的提前引用声明注意事项

    //或许,友元是VC++6.0心里永远的痛,对于这个BUG我一直很介意.//注:这个程序在VC++6.0里是行不通的,在VS2008里是可以的.#include <iostream> #i ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：引用（Blockquote）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Bootstrap框架 inconfont font-awesome

    Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...

随机推荐

  1. Confluence安装部署

    前言:Confluence是一个专业的企业知识管理与协同软件,可以用于构建企业wiki.通过它可以实现团队成员之间的协作和知识共享.现在大多数公司都会部署一套Confluence,用作内部WiKi. ...

  2. pywin32安装教程

    下载 pywin32-224-cp37-cp37m-win32.whl 放在 Scripts 目录下,然后cmd 安装 pip install pypiwin32 即可成功 此次安装成功对应的pyth ...

  3. 移动端目标识别(1)——使用TensorFlow Lite将tensorflow模型部署到移动端(ssd)之TensorFlow Lite简介

    平时工作就是做深度学习,但是深度学习没有落地就是比较虚,目前在移动端或嵌入式端应用的比较实际,也了解到目前主要有 caffe2,腾讯ncnn,tensorflow,因为工作用tensorflow比较多 ...

  4. vue---canvas实现二维码和图片合成的海报

    应项目需求,要一张宣传页面上加一个太阳码合成一张宣传海报,用户用微信可以识别进入微信小程序. 1. npm安装 npm install html2canvas --save   //html转canv ...

  5. php导出excel不使用科学计数法

    在变量前后拼接上制表符 foreach($orderList as $k=>$v){ $orderList[$k]['pos_id'] = "\t".$v['pos_id'] ...

  6. Object备忘录

    1.Object.assign(target,...source) 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 2.Object.create()方法创建一个新对 ...

  7. MyBatis学习资料

    中文文档:http://www.mybatis.org/mybatis-3/zh/index.html http://blog.csdn.net/neosmith/article/details/61 ...

  8. 布署配置管理中心apollo

    Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理场景. 服 ...

  9. 浅谈https和http2

    最近被问到http2和https的相关知识,这是一篇补基础的博客: 首先想说下https 什么是https https的主要用处: - 建立信息安全通道,保证数据传输的安全 - 确保网站的真实性,防止 ...

  10. Exp3 免杀原理与实践 20165110

    Exp3 免杀原理与实践 20165110 一.. 实践内容 1.正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5分),veil-evasion(0.5分),加壳工 ...