警示框--可关闭的警示框

警示框--默认警示框

7-3警示框

缩略图（二）

缩略图（一）

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

 

模态弹出框--触发模态弹出窗3种方法

方法一：声明式触发

模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）。例如：

<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

方法二：声明式触发

触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性，如：

<!-- 触发模态弹出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
<!-- 模态弹出窗 -->
<div class="modal fade"  id="mymodal" >
    <div class="modal-dialog" >
        <div class="modal-content" >
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

方法三：JavaScript触发

<button class="btn btn-primary" type="button">点击我</button>

<div class="modal" id="themodal" tabindex="-1">

    <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 -->

 

<script>

    $(function(){

        $(".btn").click(function(){

            $("#themodal").modal();

        });

    });

</script>

类

<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">大的模态弹出窗</button>

<div class="modal fade bs-example-modal-lg">

或者ID

<button class="btn btn-primary" data-toggle="modal" data-target="#bs-example-modal-lg">大的模态弹出窗</button>

<div class="modal fade" id="bs-example-modal-lg">

<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>

aria-hidden="true"------图标的可访问性:

        现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。

       如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。

如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。

Boostrap-易用、优雅、灵活、可扩展的前端工具集 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。 基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。 自定义JQuery插件，完整的类库，基于Less等

Boostrap-易用、优雅、灵活、可扩展的前端工具集 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。 基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。 自定义JQuery插件，完整的类库，基于Less等

使用role属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色，属于WAI-ARIA. 例如点击的按钮，就是role="button"；会让这个元素可点击；
　　本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上（例如一个tree组件，html里目前还没有tree这个标签），这样可增强组件的可访问性、可用性和可交互性。

需要设置css样式

.dropdown{

      float: left;

}

一、什么是响应式图片？

根据不同的屏幕分辨率，和设备像素比来尽可能选择高分辨率的图片。
或者换个角度来说，当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽啦。123

1、同样是普通屏幕（相对与retain等高清屏幕而言）上，在手机屏幕上显示小图片，在电脑浏览器上显示大图片。 
2、同样大小的屏幕上，普通设备上显示普清图片，高清屏幕（如 retain屏幕）的设备上显示高清图片。

form-control :换行+填充整行 

form-group : 增加块元素的下部留白或下部边界，从而使块元素的间距变大

control-label :元素内实现包含内容右对齐