首页
所有分类
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 相关文章推荐
用于table内容排序
Jul 21 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
AngularJS中的API（接口）简单实现
Jul 28 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
微信小程序实现简单表格
Feb 14 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 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
bs4(1) agg(1) 音频(1) 读取(1) 矩阵(1) 网页解析(1) 数组(5) mp3Play(1) pandas(7) 数据保存(1)
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP学习资料汇总与网址
2007/03/16 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
Node.js调用fs.renameSync报错（Error: EXDEV, cross-device link not permitted）
2017/12/27 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
纯CSS3大转盘抽奖示例代码（响应式、可配置）
2017/01/13 HTML / CSS
日本最大的眼镜购物网站：Oh My Glasses
2016/11/13 全球购物
个性化皮包、小袋、生活配件：Mon Purse
2019/03/26 全球购物
Feelunique德国官方网站：欧洲最大的在线美容零售商
2019/07/20 全球购物
司马光教学反思
2014/02/01 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
大学生就业协议书范本（适用于公司企业）
2014/10/07 职场文书
员工离职感谢信
2015/01/22 职场文书
如何书写先进事迹材料？
2019/07/02 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
mysql 生成连续日期及变量赋值
2022/03/20 MySQL