Bootstrap

一、Bootstrap多个模态框按钮的使用方法

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="新增作者">新增作者</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="新增出版社">新增出版社</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="新增图书">新增图书</button>
---------------

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // 触发模态框的按钮，1个jQuery对象，表示点的那个按钮
  var recipient = button.data('whatever'); // 从 data-* 属性中提取信息，就是按钮的data-whatever属性
  // 如果需要，可以在这里启动一个Ajax请求（然后在回调中进行更新）.
  // 更新模态框的内容。我们将在这里使用jquery，但您可以使用数据绑定库或其他方法。
  //以下是更新各自的模态框内容  
  var modal = $(this);
  if(recipient==='新增作者'){
      modal.find('.modal-title').text('' + recipient); //更新模态框标题
      modal.find('.modal-body input').val(1111); //更新模态框1内容
  }else if(recipient==='新增出版社'){
      modal.find('.modal-title').text('' + recipient); //更新模态框标题
      modal.find('.modal-body input').val(2222);//更新模态框2内容
  }else if(recipient==='新增图书'){
      modal.find('.modal-title').text('' + recipient); //更新模态框标题
      modal.find('.modal-body input').val(3333);//更新模态框3内容
  }
})

二、label，aria-label，aria-labelledby属性

当这些元素被选中时，屏幕阅读器(盲人用的)会阅读label ，aria-label的属性值或者aria-labelledby指向的元素内容。

三、role属性

比如输入密码，对于正常人可以用placaholder提示输入密码，但是对于残障人士是无效的，这个时候就需要role了

例如：

告诉屏幕阅读器，此处有一个复选框，且已经被选中。

四、

五、

六、

七、

八、

九、

十、

十一、

=================================================================================================================================================================

一、Bootstrap引子：响应式布局介绍

响应式布局：根据浏览器的页面放大或缩小，内容也跟着缩小
第一步：
要做响应式布局要在head中加：
<meta name="viewport" content=“width=device-width,initial-scale=1.0,user-scalable=no”>
第二步：加载兼容文件js，如果不需要支持IE8可以不用这一步
第三步：
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

代码示例：
css3的@media媒体查询
使用@media媒体查询可以针对不同的屏幕大小定义不同的样式
@media mediaType and|not|only(media feature){
/*CSS-Code*/
}
mediaType:
screen:用于电脑屏幕，平板，手机等
speech:用于屏幕阅读器等发声设备
media feature:
1.max-定义输出设备中的页面最大可见区域宽度
2.min-定义输出设备中的页面最小可见区域宽度

// 缩放width<1200px是红色
@media screen and (min-1200px){
body{
background-color:red;
}
}
// 960px< 缩放width<1200px是黄色
@media screen and (min-960px) and (max-1199px){
body{
background-color:yellow;
}
} 缩放width<960px是绿色
@media screen and (max-960px){
body{
background-color:yellow;
}
}

Bootstrap基本使用：
广泛使用的是Bootstrap3.0版本
看官网--起步--右边的侧边栏里的“基本模板”
下载Bootstrap后，css要用的是里面的css/bootstrap.css和bootstrap.min.css
js要用的是里面的js/bootstrap.js和bootstrap.min.js
bootstrap的样式是全局css样式
Less/Sass是更高级的css语言。里面有逻辑的体现有复用
浏览器只识别css、需要用编译器把Less/Sass编译成css

栅格系统
12列
如果一行三个盒子，每个盒子占4列，中间还有等间距的间隙
把网页的每一行布局分隔成12列
任何官网可以用栅格系统来划分
缩写视口尺寸时，4个盒子每个盒子4列，变成3个盒子，每个盒子占4列
每个行定义row 每个row定义col

例如做一个1行4列的栅格系统,
缩小时变成3列， 2列
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail"></div> //可以定义宽高
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail"></div> //可以定义宽高
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail"></div> //可以定义宽高
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail"></div> //可以定义宽高
</div>
</div>

布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，有两个
分别是：
1.左右边距各15px的
<div class="container">
...
</div>
2.用于100%宽度，占据全部视口的容器
<div class="container-fluid">
...
</div>

修改类的样式时，不要修改bootstrap固定的类名

列偏移：
<div class="row">
<div class="col-md-4">
<div class="thumbnail" style="height:336px"></div>
</div>
<div class="col-md-4 col-md-offset-2">
<div class="thumbnail" style="height:336px"></div>
</div>
</div>
这个盒子是每个4列，共显示3个可以撑满，但是只显示了2个
可以在第二个盒子加上col-md-offset-2向右移动2列栅格

排版
h1~h6标签
p标签
加lead类可以突出显示