bootstrap(响应式，进度条，标题栏，字体图标，分页等等)

有HTML，css,js基础去学bootstrap十分的容易，做如下笔记：

var  文本样式= {
	标题样式：[.h1,.h2,.h3],
	加深加重：[<mark></mark><strong></strong>],
	删除线：[<del></del>],
	下划线：[<ins></ins>],
	段落：[<p></p>],
	文本变小：[<small></small>],
	文本左/中/右对齐:[.text-left， .text-center, .text-right ],
	大小写：[.text-lowercase  uppercase caplize]

  }

var 表格={
	斑马线:[.table table-striped],
	表格框:[.table table-bordered],
	鼠标悬浮有反应：[.table table-hover]
	改变某一行的颜色名：[(在某一行的tr上面)class="success"(danger active info warning)]
	}
var 表单={
	大整体:.form-inline（水平排序）.form-horizontal(垂直),
	小整体:class="form-group",
	输入框,文本域，下拉选择：	.form-control,
	输入框大小：.input-lg,
	label提示信息自动判断需不需要有：.sr-only,
	label可控制：.control-label,
	输入框颜色变化：.has-success .has-error .has-warning .has-feedback,
	输入框添加图标：
	按钮：.btn
	按钮默认效果：.btn-default
	按钮颜色变化：.btn-success .btn-primary .btn-info .btn-warning .btn-danger ,
	类似链接的按钮效果：.btn-link,
	按钮大小：.btn-lg .btn-sm .btn-block(全屏大小),
	按钮按下状态:.active
	按钮禁用：disabled="disabled",
	让超链接变成按钮：<a class="btn btn-danger" href="" target="_blank" rel="external nofollow" ></a>
	}
var 单位={
	默认网页的字体大小：16px;
	外国网站改变字体大小习惯于:em,国内习惯于px,
	rem：与em类似，但是他会继承根元素的字体大小，所以一般将html{font-size:62.5%;}（10px）,
	em:部分ie浏览器不支持em,em继承父元素的字体大小，
	px：相对于屏幕分辨率的单位，所有的浏览器都支持px，px不随屏幕放大缩小而改变。
	}
var viewport={
	作用：根据屏幕大小改变内容的大小，小屏幕放大。是一个meta属性。
	}
           

var 响应式栅栏布局：{

}

var 字体图标={
	意思：每一图标是一个字体形式改变大小直接改变字体大小font-size就可以改变图标大小。
	位置：bootstrap的font文件夹，
	使用方法举例 ：<span class="文档中的图标名"></span>
	不会失真：因为他是字体，所以放大后不会失真
	}
var bootstrap组件={
	包含：字体图标 下拉菜单 警告框 弹出框，
	role属性：一般为盲文使用的，
	aria-label:为有障碍人士，
	tabindex:为有障碍人士，
	data-:一般用于js中来绑定事件-后说明具体事件是什么，他是一个属性，
	带有星形图标的按钮：<button class="btn btn-default(在bootstrap中每一个标签都要这样进行class声明，先声明是什么btn 在声明样式)">
	<span class="glyphicon glyphicon-star"></span>
	这是一个按钮
	</button>，
	下拉菜单：{
		带脚标的的下拉菜单：<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	这是一个按钮
	<span class="caret"></span>(带下拉效果)
	</button>
	<ul>
	<li>
		<a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a>
	</li>
	
	<li>
		<a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a>
	</li>

	<li>
		<a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a>
	</li>
	</ul>
		},
	控件组,图标插入input中：{(一组表单写在一个div中  div的class名为input-group)
		<div class="input-group">
			<span class="input-group-addon"></span>
			<input type="text" class="form-control">
		</div>
		}
	}
var 导航={
	<ul class="nav nav-tabs">
	<li class="active"(默认选中)><a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a></li>
	<li><a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a></li>
	<li><a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a></li>
	</ul>
	
	<ul class="nav nav-pills">
	<li class="active"(默认选中)><a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a></li>
	<li><a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a></li>
	<li><a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a></li>
	</ul> 
	<ul class="nav nav-pills nav-stacked(垂直效果)">
	<li class="active"(默认选中)><a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a></li>
	<li><a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a></li>
	<li><a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >慕课网</a></li>
	</ul>
	}
var 分页={
	 <nav>
        <ul class="pager">
            <li class="previous">
                <a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >向左</a>
            </li>
            <li class="next">
                <a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
                    向右
                </a>
            </li>
        </ul>
        <ul class="pagination pagination-lg">
            <li class="active">
                <a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >1</a>
            </li>
            <li>
                <a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >2</a>
            </li>
            <li>
                <a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >3</a>
            </li>
            <li>
                <a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >4</a>
            </li>
            <li>
                <a href="www.imooc.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >5</a>
            </li>
        </ul>
    </nav>
	}
var 进度条={
	实例：<div class="progress">
        <div class="progress-bar progress-bar-danger(success info warning)" style="width: 60%;"></div>
    </div>
	如果再加入类progress-bar-striped效果出现渐变。
	}
var 列表={
	<ul class="list-group">
        <li class="list-group-item active">
            这是一个列表
            <span class="badge">
                10
            </span>
        </li>
        <li class="list-group-item disabled">
            这是一个列表
            <span class="badge">
                10
            </span>
        </li>
        <li class="list-group-item list-group-item-info">
            这是一个列表
            <span class="badge">
                10
            </span>
        </li>
    </ul>
	}
var 面板={
	<div class="panel panel-warning">
        <div class="panel-heading">
            弹出层！
        </div>
        <div class="panel-body">
            这是面板的具体内容
        </div>
        <div class="panel-footer">
            脚注
        </div>
    </div>
	}
var 弹窗实例={
	<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">弹窗</button>
    
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span>&times;</span><span class="sr-only">关闭弹窗</span></button>
                    <h4 class="modal-title" id="myModalLabel">标题</h4>
                </div>
                <div class="modal-body">
                    慕课网
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
	}