Web 前端框架 Bootstrap
1. 概述
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包，是一个关于 HTML、CSS 和 JS 的框架，用于开发响应式布局、移动设备优先的 Web 项目，是最受欢迎的 Web 前端框架之一；
访问官网 点击这里，获取 Bootstrap 的文件和源码；
Bootstrap 中文网 点击这里，能下载 Bootstrap 软件，还能获取使用说明的中文文档；
注意：
- Bootstrap 框架提供的 JS 和 CSS 文件，分别有压缩和非压缩两个版本；压缩版本的文件名里使用 min
标识，非压缩版本是源码形式，易于分析和研究； - Bootstrap 中的许多组件都要依赖 JavaScript 才能运行；
Bootstrap 包含了丰富的 Web 组件，用这些组件可快速地搭建一个功能齐全且漂亮的网址；
Bootstrap 提供了基本 CSS 样式（表格和按钮等）和常用组件（下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条等）
Bootstrap 是基于 HTML 5 和 CSS 3 开发的，在 jQuery 基础上进行了更为个性化和人性化的完善，形成了一套自己独有的网站风格，兼容大部分 jQuery 插件；
2. Bootstrap 使用基础
在 Web 项目中使用 Bootstrap 的方法为：将 Bootstrap 的两个文件（一个是样式文件，另一个是 JS 文件）和 jQuery 文件复制到相应的文件夹中，再页面头部引入它们；
默认没有启用响应式布局特性；
若加入响应式布局 CSS 文件，栅格系统会自动根据可视窗口的宽度从 724px 到 1170px 进行动态调整；
通过在文档中的 <head> 标签里添加合适的 meta 标签并引入一个额外的样式可启用响应式 CSS；
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
流式栅格系统对每一列的宽度使用百分比，不是像素数量，它和固定栅格系统一样有响应式布局的能力，保证了它能对不同的分辨率和设备做出适当的调整；
无需对 <form> 添加任何类或变标签结构，每个单独的表单控件都已被赋予了样式；
3. CSS 组件
3.1. 表格样式
Bootstrap 提供了用于表格美化及特效的 CSS 组件，表现为以下样式：
- table：为任意
<table>添加基本样式（只有横向分隔线）； - table-striped：添加斑马线形式的条纹（隔行变色）；
- table-borderd：为单元格添加边框；
- table-hover：启用鼠标悬停状态，会出现浅灰色背景；
- table-condensed：让表格更加紧凑；
例子：在制作一个具有各行变色、鼠标悬停功能的条纹状的紧凑表格；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
<link href="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
<title>使用Bootstrap美化表格、增加特效</title>
<style>
th{
text-align: center!important;/*水平居中表格标题栏文本必须提升样式优先级*/
}
</style>
</head>
<body>
<table class="table table-bordered table-striped table-hover table-condensed">
<caption>通讯录</caption>
<tr><th>用户名</th><th>工作单位</th><th>手机</th></tr>
<tr><td>王某</td><td>农学院</td><td>177****8777</td></tr>
<tr><td>李某</td><td>管理学院</td><td>188****0063</td></tr>
<tr><td>谢某</td><td>信息学院</td><td>135****9898</td></tr>
<tr><td>张某</td><td>商业学院</td><td>164****1382</td></tr>
</table>
</body>
</html>
3.2. 表单样式
引入 Botsrap ，需要掌握以下要点：
- 单独的表单控件自动赋予一些全局样式；
- 对 form 标签应用样式
class="form-horzontal"；可让表单元素有较好的排列； - label 标签可对其表单控件，并通过 input 标签的 Id 属性值与其建立关联；
- 类样式 span1 到 span12（从小到大），可调整表单元素的宽度；
- 会改变
<th>等标签默认的样式；如原来表格内<th>的内容不再是居中，居中 的办法是在重新定义 th 样式时 加上
"!important"，其他样式冲突问题的解决方法类似；
例子：表单效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
<link href="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/bootstrap.min.css" rel="stylesheet" />
<title>Bootstrap 美化表单</title>
</head>
<body>
<form class="form-horizontal" style="margin-top: 10px">
<div class="control-group">
<label class="control-group" for="inputEmail">电子邮件地址</label>
<div class="controls">
<!-- label 标签通过 input 标签的 id 属性值建立关联 -->
<input type="text" id="inputEmail" placeholder="请输入 Emali 地址" class="span3" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">密码</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputWorkWhere">工作单位</label>
<div class="controls">
<input type="text" id="inputWorkWhere" placeholder="某某大学某某学院某某系" class="span5" />
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox"><input type="checkbox" />Remember me</label>
<button type="button" class="btn" id="tj">提交</button>
</div>
</div>
</form>
</body>
</html>
3.3. 面包屑导航
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式，表示当前页面在导航层次结构内的位置；
Bootstrap 的面包屑导航是一个应用了类样式 breadcrumb 的无序列表；
例子：面包屑导航设计
面包屑导航有利于用户知道当前所处位置，制作要点如下所示：
对列表应用名为 breadcrumb 的类样式和取值为 inline 的 CSS 样式 display；
定义当前的父页面的超链接和分隔符，放入列表里；
对分隔符应用类样式 divider；
最后一个列表表示当前页，对 li 应用类样式 active</div>;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>制作面包屑导航</title>
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
<link href="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<ul class="breadcrumb" style="display: inline;line-height: 40px;">
<li><a href="#">首页</a><span class="divider">></span></li>
<li><a href="#">Library</a><span class="divider">></span></li>
<li class="active">Date</li>
</ul>
<div style="background-color: rgb(228,216,108);" align="center">
制作要点：<br />
1.对列表应用名为 breadcrumb 的类样式和取值为 inline 的 CSS 样式 display；<br />
2.定义当前的父页面的超链接和分隔符，放入列表里；<br />
3.对分隔符应用类样式 divider；<br />
4.最后一个列表表示当前页，对 li 应用类样式 active;
</div>
</body>
</html>
4. 响应式设计
data 属性是 HTML 5 的新属性，开发者可自由地为其标签添加属性，用来实现 HTML 标签能隐式地附带一些数据；自定义属性一般用 “data-” 开头；
特定的事件中，JavaScript 能对这些属性数据进行读或写操作；
用 Bootstrap 设计响应式菜单，不用写任何媒体查询代码和 JS 脚本代码，只要应用 Bootstrap 的特定 CSS 样式；
控制响应是菜单中的汉堡按钮，要建立折叠菜单所在 div 的 id 值与自定义属性 data-trget 之间的关联，而 data-toggle=“collapse” 表示在菜单折叠时触发；
例子：用 Bootstrap 实现响应式菜单设计
窗口较宽时，菜单项全部展示且是水平样式；缩小窗口宽度到一定程度时，菜单项被隐藏，出现汉堡按钮；单击汉堡按钮，纵向呈现菜单项；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 响应式导航菜单</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header">
<a class="navbar-brand" href="#">网站首页</a>
</div>
<div class="collapsed navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li class="active"><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</nav>
</body>
</html>
注意：
- HTML 5 允许开发者自由为其添加属性，这些自定义属性用 “data-” 开头；
- data-toggle 设置以什么事件触发，data-target 设置事件的目标；
- Bootstrap 框架实现的响应式水平菜单设计，本质上是媒体查询，只是 CSS 样式由框架提供；
4016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
