昨天做完标签页之后，认真地思考了一下。昨天迅速完成任务得益于之前看过bootstrap，知道他能够实现标签页。
所以今天在这里把我目前知道的bootstrap的功能总结一下，以便今后的使用。
一、使用前
1.引用css和js
<!DOCTYPE html>
<html lang="en">
<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的HTML标准模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--你自己的样式文件 -->
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>2.bootstrap中的reset.css
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
......后面的省略了在之前的文章中提到过reset.css，实际上就是对浏览器基础样式的“归零”（在我看的教程中，他被称作全局样式）。这里是bootstrap的reset.css，更加优化。他在bootstrap.css中，我们知道他的存在就好了，不用去对他做什么。
二、一些很方便的功能
其实，bootstrap的中心思想就是，给标签加class，然后对class的css他本身已经写好的，你用就可以达到相应的功能。
我学习bootstrap是根据慕课网的教程来学习的（http://www.imooc.com/learn/141），他之前介绍了一些很简单的样式，比如说标题啊，居中啊什么的，还有一些表格表单按钮之类的，这些就不赘述了。写一些我觉得平时还比较有用又好用的吧。
附一个比较有用的，就是他的丰富的icon（http://getbootstrap.com/components/#glyphicons），使用方法如下：
在任何内联元素上运用这个class就可以。
<span class="glyphicon glyphicon-search"></span>1.栅格系统
对于css来定位div还是有一些难度的，bootstrap的栅格系统用一种简单的方式解决了这个问题。
栅格系统是把页面的一行分成了12份，你可以选择你的元素占份。示例用法：
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
</div>
那么说一下，他根据屏幕大小的不同，有四种用法：
可以根据自己的需要使用相应的class。
如果不想挨着，可以用列偏移。用法是这样的：
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div> <div class="row">
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div> 最后给大家看一下效果，就是分别是正常使用、列偏移和列嵌套的效果。
2.一些好用的东西
（1）下拉菜单
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
（2）按钮
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
</div>
（3）标签
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
<br />
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
<br />
（4）导航条
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">JavaScript</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
（5）页码
<ul class="pagination pagination">
<li><a href="#">«第一页</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li class="active"><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li class="disabled"><a href="#">最后一页»</a></li>
</ul> 
（6）缩略图
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
</a>
<div class="caption">
<h3>Bootstrap框架系列教程</h3>
<p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
<p>
<a href="##" class="btn btn-primary">开始学习</a>
<a href="##" class="btn btn-info">正在学习</a>
</p>
</div>
</div>
（7）可关闭的警示框
代码长这样：（因为已经不想说效果长这样了啊
）
<div class="alert alert-info alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
请输入正确的密码
</div>
（8）进度条
<div class="progress">
<div class="progress-bar" style="width:40%">
<span style="white-space:pre"> </span></div>
</div>
<div class="progress">
<div class="progress-bar" style="width:80%">
</div>
</div> 
这里进度条的长度是由宽度的百分数决定的
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>
</div> aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"（9）媒体对象
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">系列：十天精通CSS3</h4>
<div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
</div>
</div>左边是图，右边是文字介绍就称为一个媒体对象。
上图展示了媒体对象的组成部分，浮动可以用pull-left和pull-right来控制。媒体对象可以嵌套，也可以用列表展示。
（10）列表组
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>可以用来做垂直的导航，或者就是它原本的功能，列表啦。
（11）面板
<div class="panel panel-primary">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
<div class="panel-footer">作者：大漠</div>
</div>
没什么好说的吧 heading、body和footer。
（12）弹出框
<span style="font-size:10px;"><div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal --></span>这是一个弹出框的结构， header，body和footer。
要通过一个按钮来控制他的弹出，有三种做法：
第一是用jquery
<script>
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
});
</script><button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>还有一种是href来实现的
<a class="btn btn-primary" data-toggle="modal" href="#mymodal-link">通过链接href属性触发</a>
<div class="modal fade " id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">还有另外一些效果，比如单击背景弹出框会不会消失啊之类的，看下图
终于把内置的一些小插件说完了，整理果然是一件很恼火的事情啊。
其实上面说到的一些功能都是一些很基本的啦，还有彩色的啊或者什么带图标的带徽章的之类很炫酷的功能没有介绍，需要的时候再去教程找就好了。
以后要用直接就来这里找到直接拿去用。看到会持续更新。
分割线
图片滚动播放
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" ></li>
<li data-target="#carousel-example-generic" data-slide-to="2" ></li>
<li data-target="#carousel-example-generic" data-slide-to="3" ></li>
<li data-target="#carousel-example-generic" data-slide-to="4" ></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/wuxi.jpg" alt="0 slide">
<div class="carousel-caption">
无锡
</div>
</div>
<div class="item">
<img src="images/suzhou.jpg" alt="1 slide">
<div class="carousel-caption">
苏州
</div>
</div>
<div class="item">
<img src="images/wuzhen.jpg" alt="2 slide">
<div class="carousel-caption">
乌镇
</div>
</div>
<div class="item">
<img src="images/zhouzhuang.jpg" alt="3 slide">
<div class="carousel-caption">
周庄
</div>
</div>
<div class="item">
<img src="images/hangzhou.jpg" alt="4 slide">
<div class="carousel-caption">
杭州
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">上一页</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">下一页</span>
</a>
</div>
875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
