初识Bootstrap
一，认识Bootstrap
Bootstrap来自Twitter,是目前流行的前端框架。它是基于HTML,CSS,JavaScript的一个简洁，灵活的开源框架。
前面了解到媒体查询，开发和维护起来很麻烦！bootstrap库包含很多现成样式和功能。只需找到合适的代码插入即可。大大加快的响应式开发。
bootstrap的使用，直接引入文件即可。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
二，使用Bootstrap栅格系统
Bootstrap的精髓，栅格系统！把每一行都分成了相等的12份。
一行数据(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中。
列组合：使用.col-lg-* ,.col-md-* ,.col-sm-* ,.col-xs-*进行响应式布局。
列偏移：.col-md-offset-*等进行移动。
列嵌套：表面意思理解即可。
列排序：改变列的方向，也就是改变左右浮动。.col-md-push- * ,.col-md-pull- *来实现。
三，使用Bootstrap CSS全局样式
1，排版
标题：提供了h1-h6，与标签h1-h6有区别！
网页主体:设置了全局的字体大小为12px,行间距line-height为字体大小的1.428倍(即20px)。
强调文本：提供了small,strong,b,em等。
text-left左对齐，lext-center中间对齐，lext-right右对齐，text-justify两端对齐
列表：提供了.list-inlene(内联列表),.dl-horizontal(水平定义列表)。
表单：.form-inline(内联表单),.form-horizontal(横向表单)。
提供验证：.has-warning(警告),.has-error(错误),.has-success(成功)三种。
控件大小：.input-lg,.input-md,.input-sm,.input-xs等，都提供了类似的。
2，按钮
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
禁用按钮元素 添加 disabled 属性 到 按钮。
3，Bootstrap图片
1，响应式图片，添加.img-responsive让图片支持响应式布局(实质是设置了宽度为100%,高度自适应，dispaly:block)。
2,图片形状。提供了3种，.img-rounded(圆角),.img-circle(圆形),img-thumbnail(圆角边框)。
注意：具体的使用查看Bootstrap API。
上一篇： 南邮汇编实验2