下载 Bootstrap

可以从http://getbootstrap.com/上下载 Bootstrap 的最新版本。

Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
源代码需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

Download Sass：下载Sass代码，类似于源代码，可以编译生成可用的CSS文件。

我们这里初步学习直接使用编译好的Bootstrap框架即可，以后熟悉了可以再研究源码或者Sass代码。

文件结构

下载下来的文件是压缩包，我们解压之后可以看到文件的结构。

预编译的 Bootstrap

如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

Bootstrap 源代码

下载源代码压缩包 解压后结构如下:

less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

html使用Bootstrap

html使用Bootstrap需要引用jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，引用这几个文件可以让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

方式一html与Bootstrap文件夹放在一起

我们前面已经下载了预编辑的Bootstrap解压出来得到了Bootstrap文件夹，只要把html与Bootstrap文件夹放在一起，然后用相对路径引用jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件即可。

方式二html引用CDN中的jquery.js、bootstrap.min.js 和 bootstrap.min.css

很多CDN服务已经上传有这几个文件了，直接调用就好。

例如:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>在线尝试 Bootstrap 实例</title>
   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

      <h1>Hello, world!</h1>

</body>
</html>

此外，你还可以使用以下的 CDN 服务：
国内推荐使用：https://www.staticfile.org/
国际推荐使用：https://cdnjs.com/

java项目使用bootstrap

java项目使用bootstrap也是有两种方式，一种是把解压的bootstrap文件夹放入项目webapp文件夹中，jsp页面引用即可，另一种方式则是jsp页面引用远程的cdn服务中的jquery.js、bootstrap.min.js 和 bootstrap.min.css 等文件。

下图是把bootstrap文件夹放入java项目中在myeclipse中的样子:

响应式开发(三)-----Bootstrap框架的安装使用的更多相关文章

  1. 响应式开发(二)-----Bootstrap框架的介绍

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的, ...

  2. 响应式布局与bootstrap框架

    原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...

  3. 移动端开发之响应式开发和bootstrap基础

    响应式开发 (就是利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而设配不同设备的目的) 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果 原理:不同屏幕下,通过媒体查 ...

  4. 响应式开发(五)-----Bootstrap CSS----------Bootstrap 网格系统

    如果我们看过一些bootstrap的框架,经常看到col-sm-3等样式class. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系 ...

  5. 响应式开发(四)-----Bootstrap CSS----------Bootstrap CSS概览和相关注意事项

    本章先记录一些与Bootstrap CSS相关的一些特点和注意事项以及兼容性. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正 ...

  6. 响应式设计，bootstrap框架的IE兼容问题

    学习bootstrap框架,主要是为了集成好的响应式框架,及其兼容性. 但是按bootstrap中文站的说明文档 制作了一个栅格布局的test.html后,怎么测试都不成功,在ie8下一直看不到媒体查 ...

  7. 响应式开发(六)-----Bootstrap CSS----------Bootstrap文本排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈.使用 Bootstrap 的排版特性,您可以创建标题.段落.列 ...

  8. 借鉴bootstrap的方法，快速实现响应式开发

    响应式开发 注意:任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可.不要因为,提到响应式就想到只能够用bootstrap来实现,框架现有的东西是可以提高我们的效率,但是其 ...

  9. BootStrap常用组件及响应式开发

    BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...

随机推荐

  1. redis使用Jackson2JsonRedisSerializer序列化问题

    一.spring boot 集成Redis方法 依赖 <!--redis--> <dependency> <groupId>org.springframework. ...

  2. CentOs6.5中安装和配置vsftp简明教程[转]

    CentOs6.5中安装和配置vsftp简明教程 林涛 发表于:2017-3-17 10:10 分类:WebServer 标签: 101次 一.vsftp安装篇 复制代码代码如下: # 安装vsftp ...

  3. java.util.ConcurrentModificationException: null

    是因为在map.foreach中又put新的值了 在map.foreach中可能是不可以增删改

  4. BufferedWriter与BufferedRead --------------------------Test

    package com.test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; ...

  5. Leetcode题库——14.最长公共前缀

    @author: ZZQ @software: PyCharm @file: longestCommonPrefix.py @time: 2018/9/16 17:50 要求:查找字符串数组中的最长公 ...

  6. 校园跳蚤市场-Sprint计划

    一.现状 小组成员初步了解所做项目的大致内容,需要时间一步一步分析和规划. 二.部分需求索引卡 第一个阶段完成项目的其中一个模块(商品信息模块). 三.任务认领 产品负责人:林海信 Master:何武 ...

  7. 结对项目作业报告——四则运算web项目

    成员:顾思宇2016011993 程羚2016012050   1.仓库地址:https://git.coding.net/DandelionClaw/WEB_Calculator.git 注: 本项 ...

  8. iOS- 本地文本容错搜索引擎2-->如何实现英文（英文首字母，汉语拼音）对中文的搜索?

      1.前言 先闲说几句,最近北京的雾霾真是大,呛的我这攻城师都抗不住了.各位攻城师们一定要爱护好自己的身体!空气好时,少坐多动. 如果条件好的话,最好让你们BOSS搞个室内空气净化器.因为那几天一般 ...

  9. 13种细分类型的TCP重传小结(一张表总结4.4内核所有TCP重传场景)

    具体每种重传类型的wireshark示例解说参考前文 来自为知笔记(Wiz)

  10. struts2与springmvc的区别

    1 机制不同 springmvc的入口是servlet,struts2的入口是filter,导致了二者的机制不同: 2 性能不同 spring会稍微比struts快.spring mvc是基于方法的设 ...