首页
所有分类
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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
JS左右无缝滚动（一般方法+面向对象方法）
Aug 17 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
vue环境搭建简单教程
Nov 07 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
JS数据类型判断的几种常用方法
Jul 07 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
Springboot-cli(1) ForkJoin(1) 底部导航(1) format(1) CompletableFuture(1) FutureTask(3) 异步回调(1) JAVA(88) 计算器(5) 对齐打印(1)
You might like
牡丹941资料
2021/03/01 无线电
PHP VS ASP
2006/10/09 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
深入浅出php socket编程
2015/05/13 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
python实现网页录音效果
2020/10/26 Python
大学毕业感言一句话
2014/02/06 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2015新年寄语大全
2014/12/08 职场文书
保洁员岗位职责
2015/02/04 职场文书
大学学生会竞选稿
2015/11/19 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript