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 DOM 添加事件
Feb 14 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
让您的菜单不离网站
2006/10/03 Javascript
用javascript做拖动布局的思路
2008/05/31 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
script标签属性用type还是language
2015/01/21 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
Python中的localtime()方法使用详解
2015/05/22 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
python多进程并行代码实例
2019/09/30 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
房地产开发项目建议书
2014/05/16 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
踏青活动策划方案
2014/08/19 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
承租经营合作者协议书
2014/10/01 职场文书
先进个人申报材料
2014/12/30 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
春节晚会开场白
2015/05/29 职场文书
Python编写nmap扫描工具
2021/07/21 Python
Android自定义双向滑动控件
2022/04/19 Java/Android