首页
所有分类
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 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
jQuery的position()方法详解
Jul 19 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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
Set接口(1) KVM(1) Jmerte(1) persistedstate(1) 自定义组件(1) click(1) 本地化存储(1) Vue(10) Storage(1) HashSet集合(1)
You might like
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
深入php内核之php in array
2015/11/10 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python自动格式化json文件的方法
2015/03/11 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
对Python w和w+权限的区别详解
2019/01/23 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
日本食品网上商店：JaponShop.com
2017/11/28 全球购物
团支书竞选演讲稿
2014/04/28 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
Python作用域和名称空间的详细介绍
2022/04/13 Python