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 文档。
Javascript 相关文章推荐
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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
You might like
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php代码书写习惯优化小结
2013/06/20 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
python gdal安装与简单使用
2019/08/01 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
python绘制汉诺塔
2021/03/01 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
质检部部长职责
2013/12/16 职场文书
中国梦团日活动总结
2014/07/07 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
嘉宾邀请函
2015/01/31 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
详解python网络进程
2021/06/15 Python
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL