Bootstrap框架安装使用详解


Posted in Javascript onJanuary 21, 2017

Bootstrap框架安装使用简单介绍

下载 Bootstrap

可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。

Bootstrap框架安装使用详解

Bootstrap框架安装使用详解

Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。

Download Source:下载源代码。点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
源代码需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件,Bootstrap 官方只支持 Recess,这是 Twitter 的基于 less.js 的 CSS 提示。

Download Sass:下载Sass代码,类似于源代码,可以编译生成可用的CSS文件。

我们这里初步学习直接使用编译好的Bootstrap框架即可,以后熟悉了可以再研究源码或者Sass代码。

文件结构

下载下来的文件是压缩包,我们解压之后可以看到文件的结构。

预编译的 Bootstrap

Bootstrap框架安装使用详解

Bootstrap框架安装使用详解

如上图所示,可以看到已编译的 CSS 和 JS(bootstrap.*),以及已编译压缩的 CSS 和 JS(bootstrap.min.*)。同时也包含了 Glyphicons 的字体,这是一个可选的 Bootstrap 主题。

Bootstrap 源代码

下载源代码压缩包 解压后结构如下:

Bootstrap框架安装使用详解

less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

html使用Bootstrap

html使用Bootstrap需要引用jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件,引用这几个文件可以让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

方式一:html与Bootstrap文件夹放在一起

我们前面已经下载了预编辑的Bootstrap解压出来得到了Bootstrap文件夹,只要把html与Bootstrap文件夹放在一起,然后用相对路径引用jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件即可。

方式二:html引用CDN中的jquery.js、bootstrap.min.js 和 bootstrap.min.css

很多CDN服务已经上传有这几个文件了,直接调用就好。

例如:

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>在线尝试 Bootstrap 实例</title> 
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
 
  <h1>Hello, world!</h1> 
 
</body> 
</html>

此外,你还可以使用以下的 CDN 服务:
国内推荐使用:https://www.staticfile.org/
国际推荐使用:https://cdnjs.com/

java项目使用bootstrap

java项目使用bootstrap也是有两种方式,一种是把解压的bootstrap文件夹放入项目webapp文件夹中,jsp页面引用即可,另一种方式则是jsp页面引用远程的cdn服务中的jquery.js、bootstrap.min.js 和 bootstrap.min.css 等文件。

下图是把bootstrap文件夹放入java项目中在myeclipse中的样子:

Bootstrap框架安装使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
小试JQuery的AutoComplete插件
May 04 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
原生js的数组除重复简单实例
May 24 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 #Javascript
微信小程序 九宫格实例代码
Jan 21 #Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 #Javascript
巧用canvas
Jan 21 #Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 #Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 #Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 #Javascript
You might like
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
input按钮的事件处理大全
2010/12/10 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
全面理解闭包机制
2016/07/11 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python异步存储数据详解
2019/03/19 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
编程输出如下图形
2013/11/24 面试题
汉语言文学毕业生求职信
2013/10/01 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
先进个人总结范文
2015/02/15 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
体育部部长竞选稿
2015/11/21 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP
MySQL索引失效场景及解决方案
2022/07/23 MySQL