下载 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. IO多路复用多并发服务器模板

    import socket import selectors # IO多路复用选择器 epoll_selector = selectors.EpollSelector() # 实例化选择器 serve ...

  2. JAVA之异常处理(一)

    JAVA之异常处理(一) 1.异常概述 在程序的开发过程中,可能存在各种各样的错误,有些错误是可以避免的,而有些错误却是意想不到的,在Java中把这些可能发生的错误称为异常.异常类的继承关系如下图. ...

  3. 从零开始的Python学习 知识补充sorted

    sorted()方法 sorted()可用于任何一个可迭代对象. 原型为sorted(iterable, cmp=None, key=None, reverse=False) iterable:一个可 ...

  4. CS224n学习笔记1——深度自然语言处理

    一.什么是自然语言处理呢? 自然语言处理是计算机科学家提出的名字,本质上与计算机语言学是同义的,它跨越了计算机学.语言学以及人工智能学科. 自然语言处理是人工智能的一个分支,在计算机研究领域中,也有其 ...

  5. Erlang的调度原理（译文）

    原文 http://jlouisramblings.blogspot.com/2013/01/how-erlang-does-scheduling.html 免爬墙链接 http://www.diku ...

  6. last命令详解

    基础命令学习目录首页 原文链接:https://blog.csdn.net/jerry_1126/article/details/54427119 [root@xiaoma /root] test!# ...

  7. PLSQL Developer windows 64位连接数据库的问题

    使用PLSQL Developer 工具连接到数据库进行开发,目前主流windows 系统都是64位操作系统,而PLSQL Developer  只有32位程序,所以在连接数据库上遇到一些问题. PL ...

  8. Django_rest_framework_渲染器/解析器/路由控制/分页

    目录 渲染器 解析器 路由控制 分页 渲染器 简介 什么是渲染器 根据 用户请求URL 或 用户可接受的类型,筛选出合适的 渲染组件. 渲染器的作用 序列化.友好的展示数据 渲染器配置 首先要在set ...

  9. 20162325 金立清 S2 W9 C18

    20162325 2017-2018-2 <程序设计与数据结构>第9周学习总结 教材学习内容概要 堆是一棵完全二叉树,其中每个元素大于等于其所有子结点的值. 向堆中添加一个元素的方法是,首 ...

  10. CS小分队第二阶段冲刺站立会议（6月1日）

    昨日成果:完成了,文件图标的获取,以及代码删除获取文件的图标的功能:实现了从桌面拖动一个应用到窗体进行添加的功能: 遇到问题:获取的文件图标太小了,比较模糊:从外面拖动文件到窗体时,图标一直获取错误, ...