github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html、css、javascript工具集 (2)基于html5、css3的bootstrap,具有大量的诱人特征: 友好的学习曲线、卓越的兼容性、响应式设计、12列格网、样式向导文档 (3)自定义jQuery插件,完整的类库,基于Less
下载
b2 支持更广泛的浏览器 但 有兼容性等历史包袱,代码不够简洁,
b3放弃了ie7 ff3.2,ie8虽然支持 但是对css3支持有限
Bootstrap中的JS插件依赖于jQuery,因此jQuery要在Bootstrap之前引用
1.基本模板(Basic template)
样式表 放在 head里 而 最先加载完毕,而js在body 的 最后面。
<!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 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
bootstrap不支持 ie 兼容模式,运用 以下 在ie 中运行 最新 渲染模式:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
初始化 移动浏览显示,
"width=device-width":宽度=设备 宽度;
"initial-scale"设置 初始缩放比例,值 1 表示 不缩放。
让视口的宽度等于物理设备上真实的分辨率,初始缩放比例为1表示不做任何缩放。(加上以下代码 可 适配 移动浏览器):
<meta name="viewport" content="width=device-width, initial-scale=1">
为IE6、7、8(IE9以下版本) 添加 媒体查询(兼容css3样式)、HTML5标签 的支持
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
全局 CSS 样式
排版与链接(全局样式)
Bootstrap 不再 一味 追求 归零, 更注重 重置可能产生问题 的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,如下:
-
- 移除body的margin声明
- 设置body的背景色为白色
- 为排版设置了基本的字体、字号和行高
- 设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式