bootsrap笔记

详细内容参考http://www.imooc.com/learn/141

1.bootstrap响应式实现的原理

媒体查询，根据屏幕大小适用不同的屏幕宽度，百分比布局。

2.下拉菜单创建方法（示例）

<div class="dropdown">
//添加"dropup"类就是上拉菜单
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单//data-toggle="dropdown",值与外层class相同
    //class="dropdown-toggle",似乎没有影响
    <span class="caret"></span>//下拉标志
  </button>
  <ul class="dropdown-menu  pull-right" role="menu" aria-labelledby="dropdownMenu1">
  //class="dropdown-menu"，设置下拉菜单隐藏
  //class="pull-right",设置右对齐，不加默认左对齐，"dropdown-menu-right"也是一样的
    <li role="presentation" class="dropdown-header">第一部分菜单头部</li>
    //class="dropdown-header"，设置菜单头
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    //class="active"，设置当前活动项，class="disabled"则是禁用
    <li role="presentation" class="divider"></li>
    //class="divider"，设置分割线
  </ul>
</div> 

3.按钮组的创建方法（示例）

<div class="btn-toolbar">
//最外层设置按钮工具栏div
  <div class="btn-group btn-group-lg">
  //"btn-group-lg"控制按钮组的大小
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>
  <div class="btn-group-vertical btn-group-justified">
  //class="btn-group-vertical"，竖直按钮组
  //class="btn-group-justified"，等分按钮组,按钮组大小自适应
  //在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
    <div class="btn-group dropdown">
    //按钮组嵌套下拉列表
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
      <ul class="dropdown-menu">
    	<li><a href="##">公司简介</a></li>
    	<li><a href="##">企业文化</a></li>
    	<li><a href="##">组织结构</a></li>
    	<li><a href="##">客服服务</a></li>
      </ul>
  	</div>
  </div>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
  </div>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
  </div>
</div>

4.导航的创建方法（示例）

<ul class="nav nav-tabs">
//"nav"没有基础样式，所以要加"nav-tabs"
//"nav-pills"是胶囊型样式
//"nav-stacked"将导航栏垂直排列
//"nav-justified"将样式变为自适应
//"breadcrumb"变为面包屑样式
    <li><a href="##">Home</a></li>
    //li标签同样可以使用"active"和"disabled"
    <li class="nav-divider"></li>
    //导航栏用的分隔
</ul>

4.导航条的创建方法（示例）

//在最外层添加navbar盒子，默认样式是"navbar-default"
//" navbar-fixed-top"可以固定导航
<div class="navbar navbar-default" role="navigation">
     <ul class="nav navbar-nav">
     //导航使用"navbar-nav"类
	 	<li class="active"><a href="##">网站首页</a></li>
</div>

//导航中的表单
<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>

5.响应式导航条的创建方法（示例）

<div class="collapse navbar-collapse navbar-responsive-collapse">
//"collapse navbar-collapse"是响应式的样式，"navbar-responsive-collapse"是自己添加的
   	<ul class="nav navbar-nav">
     		<li class="active"><a href="##">网站首页</a></li>
     		<li><a href="##">系列教程</a></li>
 	</ul>
 </div>

```javascript
//窄屏时图片写法
<div class="navbar-header">
     　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
       <a href="##" class="navbar-brand">慕课网</a>
  </div>

6.分页导航的创建方法（示例）

<ul class="pagination pagination">
//第二个"pagination"后面可以跟"-lg"或"-sm"改大小
  <li><a href="#">&laquo;第一页</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="#">最后一页&raquo;</a></li>
</ul>   

7.略缩图的创建方法（示例）

<div class="col-xs-6 col-md-3">
//.img-rounded 圆角图片
//.img-circle 圆形图片
//.img-thumbnail 略缩图(只是一个样式，不是真的略缩)
//.img-responsive 会自己调整大小的响应式图片
	<a href="#" class="thumbnail">
		<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
	</a>
</div>

8.可关闭的警示框的创建方法（示例）

<div class="alert alert-info alert-dismissable" role="alert">
	<button class="close" type="button" data-dismiss="alert">&times;</button>
	<a href="#" class="alert-link">this important alert message</a>
	//警示框链接
	请输入正确的密码
</div>

8.进度条的创建方法（示例）

<div class="progress active">
	//层叠进度条，"progress-striped"、"active"等属性可以写内层也可以写外层
    <div class="progress-bar progress-bar-success progress-striped" style="width:40%"></div>
    <div class="progress-bar progress-bar-info" style="width:10%"></div>
</div> 

9.模态弹出窗的创建方法（示例）

<div class="modal fade" id="mymodal-link">
//modal可以调节尺寸
    <div class="modal-dialog">
        <div class="modal-content">
        	<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</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 -->

//方法1，jq方法触发
$(function(){
    $(".btn").click(function(){
      $("#mymodal").modal("toggle");
    });
  });
//方法2
<a data-toggle="modal" href="#mymodal-link" class="btn btn-primary">通过链接href属性触发</a>
//方法3
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#mymodal-data">通过data-target触发</button>

按钮属性

jq传参

10.bootstrap响应式实现的原理

媒体查询，根据屏幕大小适用不同的屏幕宽度，百分比布局。

11.bootstrap中栏栅的24个是怎么做的？

分别在十二的基础上嵌套，每个嵌套一个。