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. Windows终端工具_MobaXterm

    前言 有人喜欢小而美的工具,有人喜欢大集成工具.这里推荐一款增强型的Windows终端工具MobaXterm,它提供所有重要的远程网络工具(SSH,X11,RDP,VNC,FTP,MOSH ..... ...

  2. 用word发CSDN blog，免去插图片的烦恼

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  3. react学习2

    props,state与render函数的关系 react,父组件的state中的变量改变,则相应的render函数也会执行,返回新的视图,同时父组件的子组件通过props获取父组件的state的变量 ...

  4. C#使用Mutex实现单例应用程序

    不少应用程序有单一实例的需求,也就是同时只能开启一个实例(一般也就是一个进程). 实现的方式可能有判断进程名字,使用特殊文件等等,但是最靠谱的方式还是使用系统提供的 Mutex 工具. Mutex是互 ...

  5. 分布式系统里session同步

    https://blog.csdn.net/xyw591238/article/details/51644315

  6. linux命令——wc

    wc 统计文件里面有多少单词,多少行,多少字符. wc语法 [root@www ~]# wc [-lwm] 选项与参数: -l :仅列出行: -w :仅列出多少字(英文单字): -m :多少字符: 默 ...

  7. systemverilog soft constraint

    1.class my_item; rand bit constrainted_random; rand bit usually_one; endclass class my_generator; my ...

  8. Apache和Nginx运行原理解析

    Web服务器 Web服务器也称为WWW(WORLD WIDE WEB)服务器,主要功能是提供网上信息浏览服务. 应用层使用HTTP协议. HTML文档格式. 浏览器统一资源定位器(URL). Web服 ...

  9. 【转载】路径双反斜杠！！！Python IDLE或Python shell中切换路径 切换目录os.chdir("C:\\python37\\2019pythonshel37\\diedai")

    Python IDLE或shell中切换路径在Python自带的编辑器IDLE中或者python shell中不能使用cd命令,那么跳到目标路径呢.方法是使用os包下的相关函数实现路径切换功能. im ...

  10. C#多线程--信号量（Semaphore）[z]

    百度百科:Semaphore,是负责协调各个线程, 以保证它们能够正确.合理的使用公共资源.也是操作系统中用于控制进程同步互斥的量. Semaphore常用的方法有两个WaitOne()和Releas ...