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. 【Debug】逻辑分析仪数据错乱,看波形为信号耦合导致数据错乱,实际上为逻辑分析仪地线没接上!

    如图都有数据的时间段,数据错乱,实际为逻辑分析仪地线未接,接上就不会了.

  2. 关于VMware虚拟机安装镜像时黑屏的解决办法

    新下载的VMware14,设置了新的虚拟机,镜像放的是ubuntu系统,然后开机要安装系统的时候黑屏,并没有进入到安装系统的界面 解决办法:在管理员权限下打开cmd,然后运行netsh winsock ...

  3. CentOS中wget安装

    通过linux text最小化安装或者安装Basic Server版本后出现的问题是wget命令不能使用了,这时可以使用rpm命令来安装wget.方法一.网络安装    rpm -ivh http:/ ...

  4. Linux NGINX部署

    一.Nginx简介 Nginx是一个web服务器也可以用来做负载均衡及反向代理使用,目前使用最多的就是负载均衡,具体简介我就不介绍了百度一下有很多,下面直接进入安装步骤 二.Nginx安装 1.下载N ...

  5. MVC过滤器使用方法

    先介绍下什么是过滤器:ASP.NET MVC中的灭一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理,这时就用到了过滤器. MVC支持的过滤器有 ...

  6. CAS 无锁队列

    队列是常用的数据结构,采用的FIFO(first in firstout)原则,新元素(等待进入队列的元素)总是被插入到尾部,而读取的时候总是从头部开始读取.在计算中队列一般用来做排队(如线程池的等待 ...

  7. linux/centOS 下安装 ngnix

    Nginx 是一款轻量级的 Web 服务器/反向代理服务器,比较流行,建议在 Linux 下安装运行. Nginx 需要的依赖 它们包括:gcc,openssl,zlib,pcre(可通过rpm -q ...

  8. DOM节点遍历

    "DOM2级遍历和范围"模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator 和 TreeWalker .这两个类型能够根据给定的节点对DOM结构进行深度优 ...

  9. [Solution] 969. Pancake Sorting

    Difficulty: Medium Problem Given an array A, we can perform a pancake flip: We choose some positive ...

  10. Jquery+H5验证数据(不是表单验证啊 )

    啥也不说了 直接上代码 1.我将所有需要验证的控件都加上了   required(类名自己定吧没啥讲究)  class 2.所有的控件都加上了 data-vname的H5自定义属性(名称自个定义吧) ...