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 选择器 xpath 语法应用
May 13 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
Vue中使用clipboard实现复制功能
Sep 05 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
webpack中如何加载静态文件的方法步骤
May 18 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
党校自我鉴定范文
2013/10/02 职场文书
大学活动策划书范文
2014/01/10 职场文书
化学教师教学反思
2014/01/17 职场文书
领导调研接待方案
2014/02/27 职场文书
学校欢迎标语
2014/06/18 职场文书
本科应届生求职信
2014/08/05 职场文书
会员卡清退活动总结
2014/08/27 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
员工自我工作评价
2015/03/06 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
python Django框架快速入门教程(后台管理)
2021/07/21 Python
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python