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实现in_array的方法
Nov 05 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 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 CURL获取返回值的方法
2014/05/04 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
jQuery之按钮组件的深入解析
2013/06/19 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
javascript设计模式之装饰者模式
2020/01/30 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
使用python实现ANN
2017/12/20 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
使用Python函数进行模块化的实现
2019/11/15 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
送货司机岗位职责
2013/12/11 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
小学班主任评语
2014/12/29 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
建国大业观后感800字
2015/06/01 职场文书