首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap安装环境配置教程分享

Posted in Javascript onMay 27, 2016

Bootstrap 安装是非常容易的。此文是本人的学习汇总，便于以后查询学习，同时也希望给大家带来帮助。

一、下载 Bootstrap
您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：

Bootstrap安装环境配置教程分享

您会看到两个按钮：

Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。

由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。

本学习笔记，使用的是最新版（Bootstrap 3）。

二、文件结构
1、预编译的 Bootstrap
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

Bootstrap安装环境配置教程分享

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

2、Bootstrap 源代码
如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：

Bootstrap安装环境配置教程分享

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

三、HTML 模板
一个使用了 Bootstrap 的基本的 HTML 模板如下所示：

<!DOCTYPE html>
<html>
 <head>
 <title>Bootstrap 模板</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- 引入 Bootstrap -->
 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
 
 <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
 <!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
 <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <h1>Hello, world!</h1>
 
 <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
 <script src="https://code.jquery.com/jquery.js"></script>
 <!-- 包括所有已编译的插件 -->
 <script src="js/bootstrap.min.js"></script>
 </body>
</html>

在这里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

四、实例
现在让我们尝试使用Bootstrap输出"Hello, world!"：

<!DOCTYPE html>
<html>
<head>
 <title>在线尝试 Bootstrap 实例</title>
 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
 
 <h1>Hello, world!</h1>
 
</body>
</html>　
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，正确搭建Bootstrap安装环境。

Bootstrap安装环境配置教程分享

- Author -

好记忆不如烂键盘

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
简单学习vue指令directive
Nov 03 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
javascript canvas API内容整理
Feb 16 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
Bootstrap布局方式详解
May 27 #Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 #Javascript
JS组件Bootstrap Table布局详解
May 27 #Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 #Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 #Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 #Javascript
Dojo获取下拉框的文本和值实例代码
May 27 #Javascript
欧洲购物网站(15) 葡萄牙购物网站(13) 芬兰购物网站(10) 哥伦比亚购物网站(5) 土耳其购物网站(10) 南非购物网站(8) 奥地利购物网站(28) 阿联酋购物网站(26) 荷兰购物网站(99) 泰国购物网站(30)
You might like
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
基于Jquery的文字自动截取（提供源代码）
2011/08/09 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python中redis的安装和使用
2016/12/04 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python list元素为tuple时的排序方法
2018/04/18 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
澳大利亚有机化妆品网上商店：The Well Store
2020/02/20 全球购物
abstract是什么意思
2012/02/12 面试题
C#里面可以避免一个类被其他类继承么？如何？
2013/09/26 面试题
软件售后服务承诺书
2014/05/21 职场文书
警察群众路线整改措施
2014/09/26 职场文书
合作意向协议书
2015/01/29 职场文书
学习保证书100字
2015/02/26 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
Spring 使用注解开发
2022/05/20 Java/Android