简介

- 框架：库 lib library
- jQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式
- 把大家都需要的功能预先写好到一些文件 这就是一个框架
- Bootstrap 让我们的 Web 开发更简单，更快捷；

- 注意是 Bootstrap 不是 BootStrap！这是一个词，不是合成词，其含义为：n. 引导指令,引导程序

- Bootstrap 是当下最流行的前端框架（界面工具集）；
- 特点就是灵活简洁，代码优雅，美观大方；
- 其目的是为了让 Web 开发更敏捷；
- 是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发；

为什么使用Bootstarp？

- 生态圈火，不断地更新迭代；
- 提供一套美观大方地界面组件；
- 提供一套优雅的 HTML+CSS 编码规范；
- 让我们的 Web 开发更简单，更快捷；

注意：

> 使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式

准备

下载Bootstrap

- https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
- https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip

安装Bootstrap

  1. `html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>页面标题</title>
  7.   <!-- 引入Bootstrap核心样式文件（必须） -->
  8.   <link rel="stylesheet" href="css/bootstrap.min.css">
  9.   <!-- 引入Bootstrap默认主题样式（可选） -->
  10.   <link rel="stylesheet" href="css/bootstrap.theme.min.css">
  11.   <!-- 你自己的样式或其他文件 -->
  12.   <link rel="stylesheet" href="example.css">
  13. </head>
  14. <body>
  15.   <!-- 你的HTML结构...... -->
  16.   <!-- 以下代码，如果不使用JS插件则不需要 -->
  17.   <!-- 由于Bootstrap的JS插件依赖jQuery，so 引入jQuery -->
  18.   <script src="js/jquery.min.js"></script>
  19.   <!-- 引入所有的Bootstrap的JS插件 -->
  20.   <script src="bootstrap.min.js"></script>
  21.   <!-- 你自己的脚本文件 -->
  22.   <script src="example.js"></script>
  23. </body>
  24. </html>

基础的Bootstrap模板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  9.     <title>Bootstrap 101 Template</title>
  10.     <!-- Bootstrap -->
  11.     <link href="css/bootstrap.min.css" rel="stylesheet">
  12.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  13.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  14.     <!--[if lt IE 9]>
  15.       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  16.       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  17.     <![endif]-->
  18.   </head>
  19.   <body>
  20.     <h1>Hello, world!</h1>
  21.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  22.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  23.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  24.     <script src="js/bootstrap.min.js"></script>
  25.   </body>
  26. </html>

Compatible

`html

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

此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档

视口

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

- 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
- 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
+ width:视口的宽度
+ initial-scale：初始化缩放
+ user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
+ minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
+ maximum-scale:最大缩放

条件注释

- 条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉

第三方依赖

- [jQuery](https://github.com/jquery/jquery)

> Bootstrap框架中的所有JS组件都依赖于jQuery实现

- [html5shiv](https://github.com/aFarkas/html5shiv)

> 让低版本浏览器可以识别HTML5的新标签，如header、footer、section等

- [respond](https://github.com/scottjehl/Respond)

> 让低版本浏览器可以支持CSS媒体查询功能

## 建议以后在HTML中将脚步的引入放到页面最底下

`css

  1. `css
  2. @media (判断条件（针对于当前窗口的判断）){
  3.     /*这里的代码只有当判断条件满足时才会执行*/
  4. }
  5.  
  6. @media (min-width: 768px) and (max-width: 992px) {
  7.   /*这里的代码只有当(min-width: 1280px)满足时才会执行*/
  8.   .container {
  9.     width: 750px;
  10.   }
  11. }

当使用min-width作为判断条件一定要从小到大，其原因是CSS从上往下执行

基础CSS样式

[栅格系统](http://v3.bootcss.com/css/#grid)
+ __xs__ : 超小屏幕 手机 (<768px)
+ __sm__ : 小屏幕 平板 (≥768px)
+ __md__ : 中等屏幕 桌面显示器 (≥992px)
+ __lg__ : 大屏幕 大桌面显示器 (≥1200px)
- [响应式工具类](http://v3.bootcss.com/css/#responsive-utilities)
+ __hidden-xx__ : 在某种屏幕下隐藏
+ __visible-xx__ : 在某种屏幕尺寸下显示

什么是Bootstrap？的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. Keil STM32调试，使用ST-Link下载程序时提示“flash timeout.reset the target and try it again”

    参考: 很郁闷,买来没多久的 STM32F4-DISCOVERY 就挂了? STM32F103RB   Jlink调试的时候出现flash timeout.reset the target and t ...

  2. iOS开发——工厂模式

    工厂模式很好用,为表诚意,我直接搞个实用的例子放这,解析一个订单的数据,并且这个订单里面可能不止一件商品的做法. 还是直接上代码,不懂的地方,再提出来. 1.在MyOrderDeals.h文件中 #i ...

  3. 【转】Linux 上的最佳 C/C++ IDE

    IDE介绍收藏篇: 个人linux下开发经验不多,一般也都使用shell远程连接使用命令行模式开发.如果自己在自己机器上开发还是有IDE要方便很多,看到这篇帖子就果断的转过来先收藏下,之前自己使用过E ...

  4. 开源免费的C/C++网络库(c/c++ sockets library)补充

    (1)ACE 庞大.复杂,适合大型项目.开源.免费,不依赖第三方库,支持跨平台. http://www.cs.wustl.edu/~schmidt/ACE.html (2)Asio Asio基于Boo ...

  5. ndk-stack 调试 android c++ 代码崩溃位置

    在android下面使用jni来调用c++,在开发游戏是非常正常的.但是要调试c++部分却是非常麻烦的问题.如果快速定位崩溃位置呢.NDK提供了一个小工具ndk-stack. 首先,我们先配置环境,把 ...

  6. 配置tomcat及如何自动编译jsp文件

    1.myeclipse如何关联tomcat? 四个注意点...  必须一致! 2.别人修改过jsp不用重启服务器,我的却要每次重启服务器,网上找了很多方法都没有用,很是郁闷...最后发现了原来是bui ...

  7. Grunt插件之LiveReload 实现页面自动刷新，所见即所得编辑

    苦B的前端每次在制作和修改页面时,都有一个特定的三部曲:coding-save-F5.很多时候都希望自己一改东西,页面就能立刻显示,而现在LiveReload就能做到这点. LiveReload会监控 ...

  8. tomcat 修改网站路径（Java之负基础实战）

    1.找到server.xml 在tomcat安装路径/conf/server.xml 2.搜索webapps 添加 <Context path="" docBace=&quo ...

  9. event.returnValue和return false的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. easyui datagrid 列排序

    1.js设置 //=====================数据加载===================== /** * grid加载数据 * * @returns */ function grid ...