Bootstrap是Twitter推出的一个用于前端开发的开源工具包，由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架，不用请UI设计师也能开发出中规中矩的网页，并且最重要的是支持html5、css3移动端自适应，现在很多所谓的三合一五合一网站是基于bootstrap搭建的。
我们来看一个简单的例子
<!DOCTYPE html><!-- html5格式 -->
<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">
<!-- 上述3个meta标签放在最前面，其他内容跟随其后！ -->
<meta name="description" content="这是描述">
<title>这是标题</title>
<!-- 新 Bootstrap 核心 CSS 文件 cdn加速 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
</div>
</nav>
<!-- 主题内容 -->
<div class="container">
</div>
</body>
</html>
笔记：
1.Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。
2.Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到你的页面中 IE=edge
3.Bootstrap 3 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。可选设置（viewport）设置 meta 属性为 user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感 觉。
4.jquery用1.*版本，2.0版本不支持ie6/7/8
5.<nav>是bootstrap中内置的导航样式，pc端可以展示完整的一行，移动端会收缩到右上角的菜单menu中
6.内容主体div可以用container，有固定宽度并支持响应式布局的容器，container-fluid用于 100% 宽度
时间： 2024-10-08 08:19:34