Bootstrap 概述

　　Bootstrap 是一个前端框架，使用它可以快速开发响应式页面，还能专门针对 PC 端或移动端快速开发，大大提高了开发效率。

　　Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

　　Bootstrap 来自 Twitter，是目前最流行的前端框架。它是基于 HTML、CSS、JavaScript 的一个简洁、灵活的开源框架。

　　1、为什么要使用 Bootstrap

　　当需要制作响应式的网页来适配各种终端，我们通过媒体查询，针对要适配的每种终端都得设置相应的样式甚至是改变网页结构，而且开发和维护起来也很麻烦。而 Bootstrap 库中包含很多现成的带有各种样式和功能的代码片段，这些代码可以为你的网站增加更多活力，Web 开发者不必再花费时间、花费精力地编码，只需要找到合适的代码，插入到合适的位置即可。最主要的是这些代码片段是经过封装的，可以适用于不同的终端设备，无论是在 PC 浏览器中还是平板电脑、手机等，都能很好地浏览网页。

　　Bootstrap 框架里的一些效果是使用 HTML5 和 CSS3 开发的，我们都知道 CSS3 有的属性是有兼容性的。 Twitter 当初开发该工具的时候，就考虑到浏览器间表现不一致的情况，所以 Bootstrap 已经对此做了兼容处理，保证了界面在不同平台上的统一性。在 IE、Chrome、Firefox 等浏览器中可以看到统一的界面。

　　目前使用较广的是版本 2.0 和 3.0，我们以 3.0 版本进行讲解。因为从版本 3.0 开始 Bootstrap 移入移动先行的思想，使我们能使用它快速开发移动项目。在 Bootstrap 3.0 中重写整个框架，使其一开始就是对移动设备友好的。这次不是简单地增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。

　　2、Bootstrap 使用场景
　　Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 Web 项目。这是 Bootstrap 的核心理念，从中也可以看出 Bootstrap 的使用场景是制作适配各终端的响应式的页面、制作移动设备项目。

　　实际上 Bootstrap 是个 “万能” 的框架，因为它不只是在上面的两种场景才能使用，它集成了 CSS 样式和 JavaScript 交互特效，只要是有网页的地方都可以使用。

Bootstrap 文件结构

　　在使用 Bootstrap 之前需要下载它的文件，登录 Bootstrap 中文网 http://www.bootcss.com/ 下载 Bootstrap 框架的文件和源码。

　　下载教程：进入 Bootstrap 中文网 >> 点击菜单栏 Bootstrap3中文文档  >>  点击菜单栏的 起步  >>  跳转到下载页面 >> 点击下载 Bootstrap 进行下载即可。

 　　➣ Download Bootstrap 。从该链接下载的内容是编译后可以直接使用的文件。默认情况下，下载后的文件分两种：一种是未经历压缩处理的文件 bootstrap.css，一种是经历过压缩处理的文件 bootstrap.min.css。一般网站正式运行的时候使用压缩过的 min 文件以节约网站传输流量；而我们在进行开发调试的时候往往使用原始的、未经压缩的文件，以便进行 debug 跟踪，就像 jQuery 的使用方式一样。
　　➣ Download source 。从该链接下载的是用于编译 CSS 的 Less 源码，以及各个插件的 JS 源码文件。默认情况下，我们将基于未压缩的 bootstrap.css 和 bootstrap.js 文件进行分析使用，不会涉及与 Less 相关的内容。
　　➣ Download Sass 。从该链接下载的是用于编译 CSS 的 Sass 源码，以及各个插件的 JS 源码文件。默认情况下，我们不会涉及与 Sass 相关的内容。
 
　　说明：Less 和 Sass 都是基于 CSS 的高级语言，其目的是使 CSS 开发更灵活、更强大，感兴趣可查阅相关资料进行学习。
　　
　　单击 “Download Bootstrap” 按钮下载相关的 Bootstrap 文件，解压后可以看到结构如下图文件夹和文件（压缩版的目录结构）。

　　说明：

　　　　　1、从文件结构中看到 bootstrap.min.css 和 bootstrap. min.js 是压缩后的文件，用于生产环境使用，而普通的 bootstrap.css 和 bootstrap.js 是用于开发环境进行调试、分析的。可以将该目录结构拖拽到 Web 项目直接使用。
　　　　　2、你可以根据自己的程序结构，对上述的 css、js 文件夹名称进行随意的重命名，但是不能对 fonts 文件夹进行重命名，因为 CSS 文件里的源码使用了相对路径（. ./fonts/），如果重命名，就读取不到这些字体文件了。
　　　　　3、建议大家在学习阶段使用未经压缩的文件，以便进行分析、阅读、学习。

 
HTML 标准模板
　　在项目中如何引用下载的 Bootstrap 框架文件？以下是使用 Bootstrap 框架最基本的 HTML 代码，可以在此基础上进行扩张，只需要确保文件引用顺序一致即可。
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0 ">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 基本模板</title>

    <!-- Bootstrap 的 css 文件-->

    <link href="css/bootstrap.css" rel="stylesheet">

    <!--以下两个插件 HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能，如果不用可以删除 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 （即 Respond.js 不支持 file:// 方式访问）-->

    <!--[if lt IE 9]>

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>这是一个 Bootstrap 框架的最基本 HTML 模板</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) （即如果要使用 Bootstrap 的 JS 插件，必须引入 jQuery ）-->

    <script src="js/jquery-1.12.4.js"></script>

    <!-- Bootstrap 的 JS 插件 -->

    <script src="js/bootstrap.js"></script>

  </body>

</html>

　　由上述模板代码可以看出，从 3.x 版本开始，比起 2.x 一个很大的区别就是多了一行代码：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0 ">
 　说明：
　　　　1、这就是我们前面提到的，Bootstrap 从版本 3.0 开始全面支持移动平台，并贯彻移动先行（MobileFirst）的宗旨。上述代码的意思是，默认情况下，UI 布局的宽度和移动设备的宽度一致，缩放大小为原始大小，强制让文档的宽度与设备的宽度保持 1:1，文档最大的宽度比例是 1，且不允许用户单击屏幕放大浏览器。
　　　　2、尤其要注意的是，content 里多个属性值的设置一定要用逗号和空格来隔开，如果不规范将不会起作用、现在只要明白它是更好地支持移动设备的代码。
　　　　3、我们讲解的是 3.x 版本，它是在 2.x 的基础上开发的，至于 2.x 的一些用法感兴趣的可以查阅相关文档。

移动设备优先

　　在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

　　为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

　　在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
 
Bootstrap 整体架构
 　　大多数 Bootstrap 的使用者都认为 Bootstrap 只提供了 CSS 组件和 JavaScript 插件，其实 CSS 组件和 JavaScript 插件只是 Bootstrap 框架的表现形式而已，它们都是构建在基础平台之上的。
 
　　Bootstrap 的整体架构
　　　　　　　　　　　　　　　　　　　　说明：除了 CSS 组件和 JavaScript 插件之外，另外四部分都是基础支撑平台。

　　

 　　1、CSS 12 栅格系统
　　栅格是以规则的网格列阵来指导和规范网页中的版面布局以及信息的分布。Bootstrap 的 12 栅格系统是把网页的总宽度平分为 12 份，开发人员可以自由地按份组合，以便开发出简洁方便的程序。此外，Bootstrap 也提供了更为灵活的栅格系统，即栅格系统所使用的总宽度可以不固定，你可以针对一个 div 元素使用 12 等分的栅格，因为 Bootstrap 是按照百分比进行 12 等分的。12 栅格系统是整个 Bootstrap 的核心功能，也是响应式设计核心理念的一个实现形式。
 
　　2、基础布局组件
　　在 12 栅格系统的基础上，Bootstrap 提供了多种基础布局组件，如排版、代码、表单按钮等。这些基础组件可以随意应用在页面的任何元素上，包括其顶部的 CSS 组件内部也可以任意使用这些基础组件。在有的地方也会称它为 CSS 全局样式，其实它们表示的是相同的内容。

　　3、jQuery
　　Bootstrap 所有的 JavaScript 插件都依赖于 jQuery 1.10+，如果要使用这些插件，就必须用到 jQuery 库。如果你只使用 CSS 组件，那就可以不要用它了。

　　4、响应式设计
　　页面的设计开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面决定，包括弹性网格和布局、图片、CSS 媒体查询的使用等。无论用户使用笔记本电脑还是平板电脑，我们的页面都应该能够自动切换分辨率、图片尺寸及相应脚本功能等，以适应不同设备。

　　响应式设计是一个理念，为什么把它放在左边? 这是因为 Bootstrap 的所有内容都是以响应式设计为设计理念来实现的。

　　5、CSS 组件
　　在最新的 3.x 版本里提供了 20 种 CSS 组件，分别是下拉菜单（Dropdown）、按钮组（Button group）、按钮下拉菜单（Button dropdown）、导航（Nav）、导航条（Navbar）、面包屑导航（Breadcrumb）、分页导航（Pagination）、标签（Label）、徽章（Badge）、缩略图（Thumbnail）、警告框（Alert）、进度条（Progress-bar）、媒体对象（Media-object）......

　　6、JavaScript 插件
　　JavaScript 插件总共有 12 种，分别是动画效果（Transition）、模态框（Modal）、下拉菜单（Dropdown）、滚动侦测（Scrollspy）、弹出框（Popover）、按钮（Button）......

 
 

初识 Bootstrap的更多相关文章

  1. 【读书笔记《Bootstrap 实战》】1.初识Bootstrap

    作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进 ...

  2. 【Bootstrap】1.初识Bootstrap

    作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进 ...

  3. 第一篇:初识bootstrap

    Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利 ...

  4. bootstrap学习起步篇：初识bootstrap之表单验证（二）

    学习bootstrap是个过程,它提供给我们的文档上有很详细的说明.包括常用的栅栏布局.页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证. 最开始不借助插件,我们需要自己去编写验 ...

  5. bootstrap学习起步篇：初识bootstrap之html5语法构建hello篇（一）

    目前选择使用bootstrap作为前端页面模板,是件很省心的事情.官网上给出的实例和教程也很多.在实际使用过程中,我们也许还要借助文档去了解它的元素和样式.但也不能减少我们使用他的兴趣. 我准备将其整 ...

  6. Python之旅Day15 Bootstrap与Django初识

    Bootstrap初识 Bootstrap简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.(官网http://www.boo ...

  7. 【读书笔记《Bootstrap 实战》】6.单页营销网站

    我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...

  8. 【读书笔记《Bootstrap 实战》】2.作品展示站点

    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...

  9. 【Bootstrap Demo】入门例子创建

    本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...

随机推荐

  1. Metasloit渗透测试魔鬼训练营

    总结一句话  漏洞  攻击   拿权限  维持访问 课程目标 掌握黑客渗透攻击流程 掌握常用攻击软件     渗透测试工程师 掌握常见windows漏洞挖掘和攻击 掌握常见linux漏洞挖掘和攻击 参 ...

  2. UVa 12716 && UVaLive 6657 GCD XOR (数论)

    题意:给定一个 n ,让你求有多少对整数 (a, b) 1 <= b <= a 且 gcd(a, b) = a ^ b. 析:设 c = a ^ b 那么 c 就是 a 的约数,那么根据异 ...

  3. 初窥MySQL性能调优

    本文涉及:MySQL自带的性能测试工具mysqlslap的使用及几个性能调优的方法 性能测试工具—mysqlslap mysqlslap是MySQL自带的一款非常优秀的性能测试工具.使用它可以 模拟多 ...

  4. 模拟 hihoCoder 1177 顺子

    题目传送门 /* 模拟:简单的照着规则做就可以了,把各种情况考虑到,虽然比赛写的丑了点,但能1Y还是很开心的:) */ #include <cstdio> #include <cst ...

  5. 转 Oracle 12c: Managing Resources

    http://www.oracle-class.com/?p=3058 1. Introduction: Oracle database 12c comes with several Resource ...

  6. Java_JDBC连接数据库

    package com.accp.dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Pre ...

  7. 8.JAVA-向上转型、向下转型

    父子对象之间的转换分为了向上转型和向下转型,它们区别如下: 向上转型 : 通过子类对象(小范围)实例化父类对象(大范围),这种属于自动转换 向下转型 : 通过父类对象(大范围)实例化子类对象(小范围) ...

  8. JDBC连接Oracle工具类

    import java.sql.*;import java.util.ResourceBundle; /** * jdbc工具类,负责: * 1. 加载/注册数据库驱动程序 * 2. 获取数据库连接 ...

  9. [BZOJ2002][Hnoi2010]Bounce弹飞绵羊 LCT

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 建图,每次往后面跳就往目标位置连边,将跳出界的点设为同一个点.对于修改操作发现可以用 ...

  10. orcale 数据库的一些知识

    最近学了一些Oracle数据库的知识,我想自己整理一下,以后也方便自己查阅的. orcale 数据库登录(tiger) 1. sql plus 登录 用户名: sys 口令: 主机字符串:orcl a ...