首页
所有分类
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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
jstree的简单实例
Dec 01 Javascript
webpack入门+react环境配置
Feb 08 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
原生js实现验证码功能
Mar 16 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
JavaScript基础之this详解
Jun 04 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
模糊匹配(1) iPhone(1) moviepy(1) iOS16(1) iOS15(1) compose(3) opencv(7) FuzzyWuzzy(1) Athens(1) iOS(1)
You might like
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
php自定义时间转换函数示例
2016/12/07 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
JavaScript 学习点滴记录
2009/04/24 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python 实现两个线程交替执行
2020/05/02 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
HTML5注册页面示例代码
2014/03/27 HTML / CSS
Jack Rogers官网：美国经典的女性鞋靴品牌
2019/09/04 全球购物
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
质量负责人岗位职责
2015/02/15 职场文书
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server