下载 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. 【坚持】Selenium+Python学习之从读懂代码开始 DAY4

    2018/05/21 [生成器详解:廖雪峰的官方网站](https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d ...

  2. centos7.6 安装配置rabbitmq

    IP地址:192.168.200.108 安装erlang 和 依赖环境 yum install -y socat yum install -y erlang 安装rabbitmq yum insta ...

  3. salt-api https连接问题

    在非salt-api的主机上测试api连通性,测试代码如下: #!/usr/bin/env python import pycurl import StringIO import ssl ssl._c ...

  4. kubeadm 线上集群部署(一) 外部 ETCD 集群搭建

      IP Hostname   192.168.1.23 k8s-etcd-01 etcd集群节点,默认关于ETCD所有操作均在此节点上操作 192.168.1.24 k8s-etcd-02 etcd ...

  5. PHP 预定义变量

    1.$_SERVER <?php $a=$_SERVER; var_dump($a); ?> 2.$_FILES <?php if($_FILES){ echo "< ...

  6. ltrace命令详解

    原文链接:https://ipcmen.com/ltrace 用来跟踪进程调用库函数的情况 补充说明 NAME       ltrace - A library call tracer ltrace命 ...

  7. 兼容所有浏览器的旋转效果-IE滤镜Matrix和CSS3transform

    在现代浏览器中使用CSS3的transform样式即可轻松搞定,但是对于国内IE浏览器(特别是7,8)还占有较大份额的情况下,兼容性还是必须要考虑的,所以也特意记录下IE旋转滤镜的使用. 在IE下的旋 ...

  8. 利用原生Javascript实现计算器（未完待续）

    这里,将记录我升级四则运算v1.2的整个过程. 环境检测,杨说检测环境也是可以高兴到手舞足蹈的一件事. 为了实现自动化,Testing,查阅相关资料,我这里使用了node(这里为了npm).yoema ...

  9. 2017-2018-20172311 暑期编程作业：APP

    2017-2018-20172311 暑期编程作业:实现一个简单倒计时APP 写在前面:暑假的时候就单纯的想要设计一个倒计时软件,然后就通过查阅资料等学了一些,包括实现倒计时功能及显示:背景音乐的添加 ...

  10. 软件项目的开发之svn的使用

    Svn简介 SVN全名Subversion,即版本控制系统.SVN与CVS一样,是一个跨平台的软件,支持大多数常见的操作系统.作为一个开源的版本控制系统,Subversion管理着随时间改变的数据.这 ...