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了
例如：
<div role="checkbox" aria-checked="checked"></div>
告诉屏幕阅读器，此处有一个复选框，且已经被选中。
四、
五、
六、
七、
八、
九、
十、
十一、
=================================================================================================================================================================
一、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-width:定义输出设备中的页面最大可见区域宽度
2.min-width:定义输出设备中的页面最小可见区域宽度
// 缩放width<1200px是红色
@media screen and (min-width:1200px){
body{
background-color:red;
}
}
// 960px< 缩放width<1200px是黄色
@media screen and (min-width:960px) and (max-width:1199px){
body{
background-color:yellow;
}
} 缩放width<960px是绿色
@media screen and (max-width: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" ></div>
</div>
<div class="col-md-4 col-md-offset-2">
<div class="thumbnail" ></div>
</div>
</div>
这个盒子是每个4列，共显示3个可以撑满，但是只显示了2个
可以在第二个盒子加上col-md-offset-2向右移动2列栅格
排版
h1~h6标签
p标签
加lead类可以突出显示
