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 setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
js子页面获取父页面数据示例
May 15 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP调用其他文件中的类
2018/04/02 PHP
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
python执行子进程实现进程间通信的方法
2015/06/02 Python
python中的代码编码格式转换问题
2015/06/10 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python中http请求方法库汇总
2016/01/06 Python
python实现实时监控文件的方法
2016/08/26 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
教师党员承诺书
2014/03/25 职场文书
大型会议策划方案
2014/05/17 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers