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. vue-router传递参数的几种方式

    参考资料:vue.js官网  博客 vue-router传递参数分为两大类 编程式的导航 router.push声明式的导航 <router-link>编程式导航传递参数有两种类型:字符串 ...

  2. makefile（一）

    Makefile的一个具体的实例 来源:http://blog.sina.com.cn/s/blog_73d4d5fa0100paiy.html (2011-03-06 23:10:02) 转载▼ 标 ...

  3. 接口测试（二） 优化项目分层及cookies值带入

    整个项目分层如图 然后上代码 #data_test.py from openpyxl import load_workbook import json import os class Date_tes ...

  4. API权限设计总结

    最近在做API的权限设计这一块,做一次权限设计的总结. 1. 假设我们需要访问的API接口是这样的:http://xxxx.com/openapi/v1/get/user/?key=xxxxx& ...

  5. 在同时满足if 和 else 条件的情况下，输出所需的内容。

    请问划线处填什么内容,可以输出 "Hello World!"?if(__________){    printf("Hello ");}else{    pri ...

  6. vim常用配置 vimrc文件

    自从接触vim,自己瞎鼓捣.vimrc也有一段时间了.收集记录一下好用的配置. 一.奇技淫巧 1.折叠代码 折叠代码常常用在代码块较长的情况下,比如一个文件里定义了很多个函数,或者注释.括号影响的阅读 ...

  7. CRM--admin组件

    admin组件使用 1.创建一个Django项目 2.在models里面创建表 class Publish(models.Model): name = models.CharField(max_len ...

  8. ROS零门槛学渣教程系列前言

    为什么选择ROS: 1.ROS是开放源码的,在该平台上可以找到非常很多免费开源的代码包,并且这些例程还带wiki说明文档: 2.机器人领域最新的算法直接支持ROS,简单几个步骤就能运行: 3.ROS工 ...

  9. Linux驱动之USB总线驱动程序框架简析

    通用串行总线(USB)是主机和外围设备之间的一种连接.USB总线规范有1.1版和2.0版,当然现在已经有了3.0版本.USB1.1支持两种传输速度:低速为1.5Mbps,高速为12Mbps.USB2. ...

  10. PHP开发——目录

    PHP开发基础 PHP开发——环境安装 PHP开发——基础 PHP开发——变量 PHP开发——超全局数组变量 PHP开发——常量 PHP开发——数据类型 PHP开发——进制转换 PHP开发——运算符 ...