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安装环境。

Javascript 相关文章推荐
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
JavaScript 数组去重详解
Sep 15 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
You might like
简单采集了yahoo的一些数据
2007/02/14 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python自动12306抢票软件实现代码
2018/02/24 Python
python计算两个地址之间的距离方法
2018/06/09 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
pycharm安装和首次使用教程
2018/08/27 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
浅谈python中get pass用法
2019/03/19 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
网上祭先烈心得体会
2014/09/01 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
如何写观后感
2015/06/19 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
干部理论学习心得体会
2016/01/21 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers