Bootstrap起步介绍

起步

简要介绍Bootstrap,以及如何下载、使用，还有基本模板案例等等.

下载

下载bootstrap有三种形式.

用于生产环境的Bootstrap

编译并压缩后的Css、Javascript和字体文件.不包含文档和源文件.

Bootstrap基于Less的源码

Less、Javascript和字体的源文件,并且带有文档，需要Less编译后方可用于生产环境.

Bootstrap基于Sass的源码

Sass、Javascript和字体的源文件,并且带有文档，需要Sass编译后方可用于生产环境.

安装

通过Bower进行安装

bower install bootstrap

通过npm进行安装

npm install bootstrap

文件目录

预编译版

bootstrap/
- css/
  - bootstrap.css
  - bootstrap.css.map
  - bootstrap.min.css
  - bootstrap-theme.css
  - bootstrap-theme.css.map
  - bootstrap-theme.min.css
- js/
  - bootstrap.js
  - bootstrap.min.js
- fonts/
  - glyphicons-halflings-regular.eot
  - glyphicons-halflings-regular.svg
  - glyphicons-halflings-regular.ttf
  - glyphicons-halflings-regular.woff
  - glyphicons-halflings-regular.woff2

Less源码

bootstrap/
- less/
- js/
- fonts/
- dist/
  - css/
  - js/
  - fonts/
- docs/
  - examples/

Less源码的编译

在程序员需要对Bootstrap进行定制时我们会用到Less源码的编译,Bootstrap使用Grunt作为编译系统.对grunt还不了解的可以到http://gruntjs.com/先了解一下.这里编译需要用到的命令如下:

grunt dist

重新生成/dist/目录,并将编译压缩后的Css和Javascript放入这个目录中.作为一名Bootstrap用户,大部分情况你只需要执行这个命令.

grunt watch

监测Less源码文件的改变,并自动重新将其编译为Css文件.

grunt test

在PhantomJS环境中运行JSHint和QUnit自动化测试用例.

grunt docs

编译并测试CSS、Javascript和其他资源文件.在本地环境下通过jekyll serve运行Bootstrap文档时需要用到这些资源文件.

grunt

编译并压缩CSS和Javascript文件、构建文档站点、对文档做html5校验、重新生成定制工具所需的资源文件等.都需要jekyll工具.这些只有你对Bootstrap深度研究时才有用.

基本模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv='X-UA-Compatible' content="IE=edge"/>
    <meta name='viewport' content='width=device-width,initial-scale=1'/>
    <title>Bootstrap Template</title>
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>
    <h1>hello world!</h1>
    <script src='../bower_components/jquery/dist/jquery.js'></script>
</body>
</html>

禁止响应式布局

Bootstrap会自动帮你针对不同的屏幕尺寸调整你的页面.使其在个个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性.

移除设置浏览器视口的标签：<meta>
通过为.container类设置一个width值从而覆盖框架的默认width设置,例如width:970px !important;.请确保这些设置全部放在默认的Bootstrap Css文件的后面.
如果使用了导航条,需要移除所有导航条的折叠和展开行为.
对于栅格系统布局，额外增加.col-xs-*类或替换掉.col-md-*和.col-lg-*.针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开.

浏览器和设备的支持情况

被支持的浏览器

在Windows平台下,我们支持ie8+.
图片描述

Bootstrap在Chromium和Linux版Chrome、Linux版Firefox和IE7上的表现也很不错,虽然我们不对其进行官方支持.

IE8和IE9是被支持的,然而，你要知道很多CSS3属性和HTML5元素(例如,圆角,矩形和投影)是不被支持的.另外,IE8需要Respond.js配合才能实现对媒体查询的支持
图片描述

IE8与Respond.js

Respond.js与Css文件不在同一域下时需要额外的设置.请参考respond.js文档获取更多信息.
Respond.js在file://协议下无效
Respond.js对通过@import引入的css无效.

IE8与box-sizing

当box-sizing:border-box;与min-width max-width min-height max-height一起使用时,IE8不能完全支持box-sizing属性.由于此原因，从BootstrapV3.0.1版本开始,我们不再为.container赋予max-width属性.

IE8与@font-face

当@font-face与:before在IE8下共同使用时会出现问题.由于BootStrap对Glyphicons的样式设置使用了这一组合方式,如果某个页面被浏览器缓存了,并且此页面不是通过点击刷新按钮或通过iframe加载的,那么就会导致字体文件尚未加载的情况下就开始绘制此页面.当鼠标滑过页面时，页面上的某些图标就会显现，鼠标滑过其他没有显现的图标时,这些图标就能显示出来了.

IE兼容模式

Bootstrap不支持IE古老的兼容模式.为让IE有更好的渲染,建议将下面标签添加到页面中:

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

360极速模式

将下面代码添加到页面中：

<meta name='renderer' content="webkit"/>

模态框、导航条和虚拟键盘.

超出范围和滚动

body元素在ios和android上对overflow:hidden的支持很有限,导致的结果就是在这两种设备上的浏览器，当你滚动屏幕超过模态框的顶部或底部时,body中的内容开始随着滚动.

虚拟键盘

如果你正在使用fixed定位的导航条或在模态框上面使用输入框,还会遇到IOS在页面绘制上的bug.当触发虚拟键盘后，其不会更新fixed定位的元素,这里有几种解决方案.包括将fixed定位转换为position:absolute定位.或者启动一个定时器手工修正组件的位置.

导航条上的下拉菜单

在IOS设备上,用于导航组件的复杂的z-indexing属性，.dropdown-backdrop元素并未被使用.因此,为了关闭导航条上的下拉菜单，必须直接点击下拉菜单上的元素(或者任何其他能够触发IOS上click事件的元素).

移动设备上应用 :hover/:focus

尽管在大多数触屏上没有真正的悬停状态,大多数移动设备浏览器模拟了悬停（hover）状态并让:hover状态多展现一会儿.换句话说,轻触元素后开始应用:hover样式,并且在用户轻触其他的元素之后停止应用:hover样式.在这些浏览器中，Bootstrap的hover状态可能不是你所期望的.某些移动浏览器中的:focus状态也存在同样的问题.对于这些问题，除了完全清除这些样式,目前还没有简单的解决方法.