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

bootstrap基本配置_动力节点Java学院整理

Posted in Javascript onJuly 14, 2017

Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。

实例采用的是百度的静态资源库上的Bootstrap资源。

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap-theme.min.css"></script>
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>

HTML 模板（使用百度CDN，支持IE8)

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

<!DOCTYPE html>
<html lang="zh-cn">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap v3.2 Template</title>
 
  <!-- Bootstrap -->
  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 
  <!-- 引入下面两个库让 IE8 支持 HTML5 元素 -->
  <!-- 警告: Respond.js 通过 file:// 浏览的时候不能正常工作！-->
  <!--[if lt IE 9]>
   <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
   <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
  <h1>你好，世界！</h1>
 
  <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 </body>
</html>

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

bootstrap基本配置_动力节点Java学院整理

在bootstrap官网上面您会看到两个按钮：

  1. Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
  2. Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

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

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

本教程编写时，使用的是最新版（Bootstrap 3）。

文件结构

预编译的 Bootstrap

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

bootstrap基本配置_动力节点Java学院整理

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

Bootstrap 源代码

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

bootstrap基本配置_动力节点Java学院整理

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

bootstrap基本配置_动力节点Java学院整理

- Author -

zx

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

Javascript 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）
Aug 20 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
如何用JS模拟实现数组的map方法
Jul 30 Javascript
easyui简介_动力节点Java学院整理
Jul 14 #Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 #Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 #Javascript
简单实现js轮播图效果
Jul 14 #Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 #Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 #Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 #Javascript
Telnet(1) https(7) 动静分离(1) 远程控制(1) 生成缩略图(1) Windows server 2019(5) IIS(7) 负载均衡(6) http(6) Windows server 2016(6)
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
用ＰＨＰ和ＡＣＣＥＳＳ写聊天室(五)
2006/10/09 PHP
php header()函数使用说明
2008/07/10 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
js省市区级联查询（插件版&amp;无插件版）
2017/03/21 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
vue打包相关细节整理(小结)
2018/09/28 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
用Python实现协同过滤的教程
2015/04/08 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
基于Django用户认证系统详解
2018/02/21 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
python修改字典键（key）的方法
2019/08/05 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python 实现return返回多个值
2019/11/19 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
明信片寄语大全
2014/04/08 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
单方投资意向书
2015/05/11 职场文书
负责培养人意见
2015/06/05 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
浅谈JavaScript作用域
2021/12/06 Javascript
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python