下载 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. JavaScript-强制类型转换

    因为没有学过其他编程语言,因此作为我的第一门编程“母语”我在这就不举其他编程语言的例子了,JavaScript这个动态类型脚本语言的变量号称是没有类型的,那么我们怎么转换他的变量呢?而且还要强行转换. ...

  2. 1042 Shuffling Machine

    一.题目描述 Shuffling is a procedure used to randomize a deck of playing cards. Because standard shufflin ...

  3. Plasma Cash 合约解读

    作者介绍 虫洞社区·签约作者 steven bai Plasma Cash 合约解读 Plasma Cash 合约解读 1. 合约代码 2. 合约文件简单介绍 3. Plasma Cash 的基础数据 ...

  4. JAVA第一次实验 ——凯撒密码的实现

    JAVA实验一   编写程序实现凯撒密码 201352330 潘俊洋 一．实验说明 凯撒密码作为一种最为古老的对称加密体制,在古罗马的时候都已经很流行,他的基本思想是:通过把字母移动一定的位数来实现加 ...

  5. 20135234mqy-——信息安全系统设计基础第三周学习总结

    (1)计算机将信息按位编码,通常组成字节序列.用不同的编码方式表示整数,师叔和字符串.不同的计算机模型在编码数字和多字节数据中的字节排序时使用不同的约定. (2)C语言的设计可以包容多种不同字长和数字 ...

  6. 第二阶段Sprint冲刺会议2

     进展:讨论主界面布局,跳转界面的布局,查看有关页面跳转的资料及示例代码并试着编写. 

  7. 软工1816 · Beta冲刺（4/7）

    团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 推进安卓端各个接口的开发,安卓端各个接口已经基本完成 完成食堂各个平面图的绘制 ...

  8. Teamwork（The fifth day of the team）

    在前面几天的努力中,我们已经完成了一些自己的工作,还有的就是一些完善,因为在前段时间一直都在寻找和配置Eclipse+Android SDK,由于版本和一些网络的阻碍,总是不能如愿的很好完成,经过了一 ...

  9. JAVA之路(二)

    学道酬勤,这是第二次学习JAVA,感觉如醍醐灌顶一样,理解很多思想和道理. 本博只是自己对JAVA的一些理解,具体定义以及用法百科里有. 我为什么在博客园内记录自己的学习过程呢,因为我想有人知道我在学 ...

  10. 封装react组件——三级联动

    思路: 数据设计:省份为一维数组,一级市为二维数组,二级市/区/县为三维数组.这样设计的好处在于根据数组索引实现数据的关联. UI组件: MUI的DropDownMenu组件或Select Field ...