bootstrap框架怎么在html页面加载使用
今天敲代码的时候,正好碰到这个问题.
与大家分享这个解决方法:
1/7
到bootstrap官方网站下载,对于我们开发者来说,直接下载编译和压缩后的CSS、JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons

2/7
所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本,因为它的体积很小,到官网下载jQuery支持,如图:

3/7
将下载后的就jQuery放到bootstrap中的js目录下,如图:

4/7
在bootstrap的根目录下新建一个demo.html文件,(注意,必须在根目录下面新建,因为后面的步骤中要将bootstrap框架中的css和js文件链接到创建的demo中)

5/7
编辑demo.html文件,添加对bootstrap框架中css和js的引用,内容如下,图片有注释说明,这样,我们就基本上建立了对bootstrap框架的基本使用架构

6/7
另外,bootstrap官方提供了链接服务,永久免费,即使你不下载bootstrap框架文件到本地,也可以直接在html中使用,使用下面这段代码:
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
bootstrap框架怎么在html页面加载使用的更多相关文章
- AnjularJS系列4 —— 单个页面加载多个ng-App
第四篇,插播, 单个页面加载多个ng-App 在写范例的时候发现的问题 一个页面有多个ng-app,angular只会处理第一个ng-app 需要加载两个ng-app,需要进行手动加载: angula ...
- JavaScript在A页面判断B页面加载完毕(iframe load)
今天遇到一个需求,在A页面上判断B页面是否加载完毕(B页面是第三方页面),加载完毕时隐藏loading动画... 而平时我们一般做的事是在B页面上判断B页面是否加载完毕,进行操作. if(docume ...
- Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果
在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...
- 解决JS文件页面加载时的阻塞
关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...
- JQuery Mobile页面加载处理
在弄移动Web时采用了JQueryMobile框架. 奇怪的是 在使用页面加载 时 事件无效 我尝试了两种方法: $(document).ready(function(){ //do events } ...
- JQuery浮动层Loading页面加载特效
之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...
- 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
- 转: web 页面加载速度优化实战-100% 的飞跃提升
前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...
- 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 3
备注: 因为文章太长,所以将它分为三部分,本文是第三部分. 第一部分:深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1 第二部分:深入浅出经典面试题:从浏览器中输入URL ...
随机推荐
- 考试题T3
题意分析 这题一看没有什么思路 幸好我们机房的红太阳\(ghj1222\)切了这道题 首先我们考虑风跑一个来回之后人怎么样 就是跑了一个区间 也就是风跑了若干个来回之后 人跑了若干个区间 所以我们考虑 ...
- 什么是马拉车算法(Manacher's Algorithm)?
提出问题 最长回文子串问题:给定一个字符串,求它的最长回文子串长度. 如果一个字符串正着读和反着读是一样的,那它就是回文串.如a.aa.aba.abba等. 暴力解法 简单粗暴:找到字符串的所有子串, ...
- Oracle数据库学习(一):虚拟机下Oracle Linux的安装与配置
这篇博文主要以图片的形式讲述Oracle Linux在虚拟机下的安装与配置 一.前期虚拟机安装ISO文件的配置 1.创建新的虚拟机 2.选择“自定义(高级)”选项,下一步,默认“虚拟机硬件兼容性”或选 ...
- Google Spanner vs Amazon Aurora: Who’ll Get the Enterprise?
https://www.clustrix.com/bettersql/spanner-vs-aurora/ Google Spanner versus Amazon Aurora In July 20 ...
- PHP 浮点数 转化 整数方法对比 ceil,floor,round,intval,number_format
ceil,floor,round,intval,number_format - 执行1000W此效率对比 Header("Content-Type:text/html;charset=utf ...
- WebDriver中的Actions对象
我们可以利用Actions对象来模拟鼠标的操作以及页面的拖拽 1.模拟鼠标的双击操作: 1)模拟双击一个div,验证点击之前的字体为14号 2)点击后字体为20号 Actions builder = ...
- web服务器/应用服务器
1.概念 Web服务器的基本功能就是提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL.与客户端的网络浏览器配合.因为Web服务器主要支持的协议就是HTTP,所以通常情况下HTT ...
- Windows里下载并安装phpstudy(图文详解)
不多说,直接上干货! 帮助站长快速搭建网站服务器平台! phpstudy软件简介 此是基于phpStudy 2016.01.01. 该程序包集成最新的Apache+Nginx+LightTPD+PHP ...
- split使用和特殊使用(包括截取第一个字符后的数据)
javaScript中关于split()的使用 1.一般使用对一个字符串使用split(),返回一个数组 例子: var testArr = "1,2,3,4,5": var ...
- ubuntu 16.04安装好后没声音的解决方法
刚安装好Ubuntu16.04 后没声音,找了好多方法都不行,看到网上说通过安装pavucontrol和alsamixer调节解决,最后无意发现一个方法,总算是可以用了,在此记录一下.可能有的可以解决 ...