今天敲代码的时候,正好碰到这个问题.

与大家分享这个解决方法:

 
 

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页面加载使用的更多相关文章

  1. AnjularJS系列4 —— 单个页面加载多个ng-App

    第四篇,插播, 单个页面加载多个ng-App 在写范例的时候发现的问题 一个页面有多个ng-app,angular只会处理第一个ng-app 需要加载两个ng-app,需要进行手动加载: angula ...

  2. JavaScript在A页面判断B页面加载完毕(iframe load)

    今天遇到一个需求,在A页面上判断B页面是否加载完毕(B页面是第三方页面),加载完毕时隐藏loading动画... 而平时我们一般做的事是在B页面上判断B页面是否加载完毕,进行操作. if(docume ...

  3. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  4. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

  5. JQuery Mobile页面加载处理

    在弄移动Web时采用了JQueryMobile框架. 奇怪的是 在使用页面加载 时 事件无效 我尝试了两种方法: $(document).ready(function(){ //do events } ...

  6. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  7. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

  8. 转: web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  9. 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 3

    备注: 因为文章太长,所以将它分为三部分,本文是第三部分. 第一部分:深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1 第二部分:深入浅出经典面试题:从浏览器中输入URL ...

随机推荐

  1. string类型介绍

    一.前言 int,float,char,C++标准库提供的类型:string,vector. string:可变长字符串的处理:vector一种集合或者容器的概念. 二.string类型简介 C++标 ...

  2. 关于在JS中AJAX导致跨域问题的解决

    在部署一个原声的前端项目的时候,请求该服务器后端接口时发现出现了CORS跨域的问题,但是服务端已经做了同源策略的兼容,常见问题,遂记录. 报错信息: XMLHttpRequest cannot loa ...

  3. jmeter的non-gui模式的使用

    jmeter的non-gui模式的使用,待补充

  4. shell-007:数据库备份,本地保留7天,远程机器保留一个月

    ## #!/bin/bash d1=`date +%w` # 以周几有变量 d2=`date +%d` # 以每月第几天为变量 local_bakdir=/bak/mysql # 本地备份目录 rem ...

  5. netty用户指南

    Netty用户指南 一.前言 1.问题 当今世界我们需要使用通用的软件或库与其他组件进行通信,例如使用HTTP客户端从服务器中获取信息,或通过网络服务调用一个远程的方法.然而通用的协议及其实现通常不具 ...

  6. Mac下使用crontab来实现定时任务

    说明: 1.Linux和Mac下操作crontab都是一致的 2.配置文件都在/etc/crontab下,如果没有就创建. 3.测试发现直接使用crontab -e命令创建的定时任务是放在临时文件夹的 ...

  7. java io 处理流,BufferdInputStream、BufferedWriter、BufferedReader

    BufferdInputStream:读取helloworld.java helloworld.java: package io; public class HelloWorld { public s ...

  8. ES6 rest参数和扩展运算符

    rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0 ...

  9. HUE配置文件hue.ini 的Spark模块详解(图文详解)(分HA集群和HA集群)

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  10. Types方法之isCastable-isConvertible

    5. Conversions and Promotions 5.1. Kinds of Conversion 5.1.1. Identity Conversion 5.1.2. Widening Pr ...