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树形控件脚本代码
Jul 24 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
javascript实现固定侧边栏
Feb 09 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高级OOP技术演示
2009/08/27 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
php抽象类用法实例分析
2015/07/07 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
python WindowsError的错误代码详解
2017/07/23 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
初入社会应届生求职信
2013/11/18 职场文书
新闻专业个人求职信
2013/12/19 职场文书
新学期家长寄语
2014/01/19 职场文书
教师研修随笔感言
2014/01/23 职场文书
新春寄语大全
2014/04/09 职场文书
煤矿安全承诺书
2014/05/22 职场文书
离职感谢信怎么写
2015/01/22 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
Python包argparse模块常用方法
2021/06/04 Python
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
javascript对象3个属性特征
2021/11/17 Javascript