首页
所有分类
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 相关文章推荐
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
JavaScript中跨域问题的深入理解
Mar 04 Javascript
JS实现简单的九宫格抽奖
Jun 28 Javascript
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
plus.io(1) RabbitMQ(3) Hash(1) 入门基础(1) 目录管理(1) html5+(1) 虚拟机(3) Vmware(3) 磁盘管理(1) Get(1)
You might like
overlord人气高涨，却被菲利普频繁举报，第四季很难在国内上映
2020/05/06 日漫
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
jQuery回车实现登录简单实现
2013/08/20 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
ES6函数和数组用法实例分析
2020/05/23 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
浅谈tensorflow1.0 池化层（pooling)和全连接层(dense)
2018/04/27 Python
Python定时任务sched模块用法示例
2018/07/16 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python3 深浅copy对比详解
2019/08/12 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
python try...finally...的实现方法
2020/11/25 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
python 对xml解析的示例
2021/02/27 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
LEGO玩具英国官方商店：LEGO Shop GB
2018/03/27 全球购物
丝芙兰新加坡官网：Sephora新加坡
2018/12/04 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
单位租房协议书样本
2014/10/30 职场文书
党员剖析材料范文
2014/12/18 职场文书
创业计划书之农家乐
2019/10/09 职场文书
处理canvas绘制图片模糊问题
2022/05/11 Javascript