bootstrap的引用和注意事项
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的引用和注意事项的更多相关文章
- Django 中bootstrap的引用
bootstrap的优越性 如果你有基本的HTML+CSS,bootstrap其实就是在标签中加入具体的class来实现样式.和原生态的HTML+CSS需要先在head标签的style写样式或者引入外 ...
- bootstrap课程6 bootstrap的表单注意事项有哪些
bootstrap课程6 bootstrap的表单注意事项有哪些 一.总结 一句话总结: 1.bootstrap中的表单中的每一项是什么样的形式? div.form-group>label +i ...
- Bootstrap 内核引用(一)
方法一: Bootstrap CDN推荐 本站实例采用的是百度的静态资源库(http://cdn.code.baidu.com/)上的Bootstrap资源. 百度的静态资源库的 CDN 服务,访问速 ...
- Bootstrap 在线引用
Bootstrap 3.3.0 js 文件 <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.j ...
- bootstrap插件引用
若按照步骤报这种错误,从这几方面进行排错 1.引用css/js的顺序 2.是否以及引入相应的包 3.是否正确调用(此处需要注意有require.js的情况,要不把switch方法写入require里面 ...
- Bootstrap在线引用css和js
百度在线调用 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></ ...
- C++中对类的提前引用声明注意事项
//或许,友元是VC++6.0心里永远的痛,对于这个BUG我一直很介意.//注:这个程序在VC++6.0里是行不通的,在VS2008里是可以的.#include <iostream> #i ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:引用(Blockquote)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap框架 inconfont font-awesome
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
随机推荐
- 【译】在Transformer中加入相对位置信息
目录 引言 动机 解决方案 概览 注释 实现 高效实现 结果 结论 参考文献 本文翻译自How Self-Attention with Relative Position Representation ...
- 4、promise
es5 中 var obj = { ajax: function (callback) { console.log('执行') setTimeout(function () { callback &a ...
- 聚宽获取财务数据+DataFrame写入txt
from jqdata import jy from jqdata import * #获取股票列表,这里是板块内股票 pool=get_industry_stocks(',date='2016-09 ...
- css: box-sizing
border-box 宽度包含了边框 content-box 边框不包含在内容区中,会增加到实际的宽度中
- C#给checkboxList设置js选中事件
C#: for (int i = 0; i < this.CheckBoxList1.Items.Count; i++) { this.CheckBoxL ...
- About Feature Scaling and Normalization
在进行数据处理之前,一定要想一想,你的算法是用来做什么,这样才能选择如何对数据进行预处理. 参考网站: http://sebastianraschka.com/Articles/2014_about_ ...
- CSDN网站阅读更多:实现原理
一 设计案例 现在很多网站都增加了阅读更多功能.以CSDN为例,分析其实现原理. 二 设计原理 1 内容区的初始高度是固定的. 2 背景渐变的操作区,遮盖在内容区上面 3 点击按钮时,解除内容区的高度 ...
- 微信小程序日历面板插件
创建日历面板组件,在components目录下创建calendar文件夹 1.calendar.js // components/calendar/calendar.js var util = req ...
- ROC AUC
1.什么是性能度量? 我们都知道机器学习要建模,但是对于模型性能的好坏(即模型的泛化能力),我们并不知道是怎样的,很可能这个模型就是一个差的模型,泛化能力弱,对测试集不能很好的预测或分类.那么如何知道 ...
- angular $digest 运行10次货10次以上会抛出异常
今天在做项目时,遇到一个问题,红圈处输入其他数字(n多次)也不会报异常,但是有一种特例,即0,1,0,1,0,1这种顺序输入时,输入第13次时,页面计算结果(蓝色圆圈)不会更新,困扰了1天多这个问题, ...