起步
简要介绍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状态也存在同样的问题.对于这些问题，除了完全清除这些样式,目前还没有简单的解决方法.
扫一扫
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
