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. mysql导入太慢解决方法

    半调子数据科学家又要折腾数据,拿到数据一看,3.6G的zip文件,解压看看,卧槽12个G的sql文件.好吧,又要折腾sql数据了.第一件事,肯定是搭一个数据库,导入数据咯. 折腾过sql导入的亲们都知 ...

  2. spring boot 2.0.4 Redis缓存配置

    spring boot 2 使用RedisTemplate操作redis存取对象时,需要先进行序列化操作 import org.springframework.cache.CacheManager; ...

  3. Functional Language

    1.What is functional language? 函数式语言(functional language)一类程序设计语言,是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定 ...

  4. [ts] Property 'aaa' does not exist on type 'Window' 解决办法

    第一种: (window as any).aaa 第二种: declare global { interface Window { aaa: any; } } window.aaa = window. ...

  5. linux下面重启nfs报错：nfs-server.service:main process exited

    linux下面重启nfs报错:nfs-server.service:main process exited [root@dhcp-66-83-39 images]# service rpcbind s ...

  6. 实际项目中如何使用git命令

    使用工具:Git Bash 工作空间项目存放路径C:/用户/git/demoProject 操作步骤: 1.切换到git项目路径 cd  git/demoProject 2.git status   ...

  7. Spring：MVC

    摘要 Spring MVC 是一个开源的.基于MVC架构的WEB应用框架.这里记录MVC模型的概念以及Spring MVC 的请求处理流程. 关键词:Spring MVC 一.什么是Spring MV ...

  8. 数组引用:C++ 数组做参数 深入分析

    转载:https://blog.csdn.net/jiangxinyu/article/details/7767065 在 C++中,数组永远不会按值传递,它是传递第一个元素,准确地说是第 0个 的指 ...

  9. Checked Uncheckd异常

    Checked : 你可以在写代码的时候就throw 或者try catch 的 Unchecked :  Error   + RuntimeException .提前无法预测的 http://www ...

  10. jmeter的各种调用

    1. 开发将dubbo协议的接口转化成了webservices后,jmeter直接添加http请求,输入网址就好,但是这种需要增加开发测试页面的工作量 2.jmeter自身无法调用zk连接服务器(Jm ...