首页
所有分类
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 相关文章推荐
清空上传控件input file的值
Jul 03 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 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
PL660(1) 根德(2) S2000(3) MX500(1) 南麂列岛(1) 台湾(1) SRF-S83(1) 森海(1) SRF-S84(1) 松下(1)
You might like
php简单实现批量上传图片的方法
2016/05/09 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
vue实现键盘输入支付密码功能
2018/08/18 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python统计日志ip访问数的方法
2015/07/06 Python
pyhton列表转换为数组的实例
2018/04/04 Python
python实现大文本文件分割
2019/07/22 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python与js主要区别点总结
2020/09/13 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
分解成质因数(如435234=251*17*17*3*2，据说是华为笔试题)
2014/07/16 面试题
介绍一下OSI七层模型
2012/07/03 面试题
应聘护士自荐信
2013/10/21 职场文书
环境日宣传活动总结
2014/07/09 职场文书
我是特种兵观后感
2015/06/11 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers