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 相关文章推荐
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
vue.js+element 默认提示中英文操作
Nov 11 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
php Static关键字实用方法
2010/06/04 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
Python优先队列实现方法示例
2017/09/21 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
python实现聊天小程序
2018/03/13 Python
Python实现全排列的打印
2018/08/18 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
python新手学习可变和不可变对象
2020/06/11 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
给老婆的搞笑检讨书
2014/01/12 职场文书
技能竞赛活动方案
2014/02/21 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
社会实践的活动方案
2014/08/22 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
四风之害观后感
2015/06/09 职场文书
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS