CSS Bootstrap简介

来源：互联网发布：99宿舍软件编辑：程序博客网时间：2024/06/16 16:47

一、简介：

1、Bootstrap 是基于Html5和CSS3的。下载地址：http://getbootstrap.com/

2、Bootstrap2支持更多的浏览器，因为兼容性的问题，功能不够强大，代码不够简洁。

3、Bootstrap3放弃了IE7和火狐3.x版本的支持，虽然支持IE8，但是由于IE8对CSS3的支持不够，所以效果并不理想。

注意：Bootstrap中的js插件依赖于jQuery，因此jQuery要在Bootstrap之前引用

4、标准模版：

<!DOCTYPE html><span style="color:#cc0000;background-color: rgb(255, 255, 51);"><strong>(Html5的定义)</strong></span><html lang="en">  <head>    <meta charset="utf-8"><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 51);"><strong><span style="color:#cc0000;">(页面编码格式)</span></strong></span>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><span style="color:#cc0000;">(Bootstrap不支持IE的兼容模式，在IE运行最新的渲染模式)</span>    <meta name="viewport" content="width=device-width, initial-scale=1"><span style="color:#cc0000;">(初始化移动浏览显示，<span style="font-family: Arial, Helvetica, sans-serif;">width=device-width意思是宽度等于设备的宽度，</span><span style="font-family: Arial, Helvetica, sans-serif;">initial-scale=1初始缩放的比例 1是不缩放，适配移动端浏览器，一般会加上这段代码</span><span style="font-family: Arial, Helvetica, sans-serif;">)</span></span><span style="font-family: Arial, Helvetica, sans-serif;"></span>    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->    <title>Bootstrap 101 Template</title>    <!-- Bootstrap -->    <link href="__PUBLIC__/frame/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><span style="color:#cc0000;">(IE浏览器版本低于9时)</span>    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><span style="color:#cc0000;">(引入支持Html5)</span>      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body>    <h1>Hello, world!</h1>    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->    <script src="__PUBLIC__/js/jquery.min.js"></script>    <!-- Include all compiled plugins (below), or include individual files as needed -->    <script src="__PUBLIC__/frame/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>  </body></html>

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

5、全局样式：

Bootstrap框架在这一部分做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下：
移除body的margin声明
设置body的背景色为白色
为排版设置了基本的字体、字号和行高
设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式

0 0