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. 基于Ubuntu系统XAMPP环境安装以及DVWA渗透测试系统安装（详解的不能再详解了）

    首先这是X勺年人生第二次博,用来记录一下转折于我而言.做个简介,这个Ubuntu是linux的一种吧,然 然后这个Ubuntu是我刚简单安装(在虚拟机上)没有经过任何配置,从头开始,我这绝壁的小白,其 ...

  2. [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(一) -- 安装jdk(含jre)及 MySql 5.6.39

    [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(一)  --  安装jdk(含jre)及 MySql 5.6.39 回老家已经有一段时间了, 四五线 ...

  3. python flask 解决中文乱码

    response = make_response(output_string)response.headers['Content-Type'] = 'text/plain;charset=UTF-8' ...

  4. C博客01--顺序、分支结构

    1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 经过一周的初步学习,对C语言我有了一定的认识,也体验到了代码的乐趣,这应该为我以后的学习开了一个好头.在 ...

  5. flask 需要下载的包

    Flask 需要下载的包1.pip install flask2.pip install flask-script3.pip install flask-sqlalchemy4.pip install ...

  6. 创建Jenkins构建触发器，代码提交至gitLab即自动触发构建

    下载所需插件,系统设置-->插件管理,搜索以下两个插件,选择安装 登录gitLab,生成一个Personal Access Tokens 进入Jenkins,添加api token,路径:首页- ...

  7. SQLServer 中有五种约束， Primary Key 约束、 Foreign Key 约束、 Unique 约束、 Default 约束和 Check 约束

    一直在关注软件设计方面,数据库方面就忽略了很多,最近在设计数据库时遇到了一些小麻烦,主要是数据库中约束和性能调优方面的应用,以前在学习 Sql Server 2000,还有后来的 Sql Server ...

  8. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  9. Requset模块

    Requests是用python语言基于urllib编写的,采用的是Apache2 Licensed开源协议的HTTP库 各种请求方式: #!/urs/bin/evn python # -*- cod ...

  10. 编辑gif

    在撰写文档的过程中,为了清晰的表述我们的内容经常会加入一些图片.对于 `.jpg` 或 `.png` 的静态图我们可以直接 使用windows自带的照片编辑器编辑即可.对于如 licecap 录制出来 ...