Bootstrap基础学习-2

标签：header   rip   快速   jquery   弹出框   红色   cti   oda   点击   

虽然BS在快速搭建HTML方面有着不小的优势，但也涵盖了基本的前端动态效果，其实BS的JS代码方面也是基于JQuery的，所以在引用前首先得引用JQuery,然后在把BS的文件bootstrap.min.js 引用进来。

1.先说说弹出框的特效

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

//下面是弹出框的具体定义，每级代码的关键处都用红色表示出来了。

<div class="modal show">
    <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>

//下面的代码定义了按钮具体点击的行为

<script>
  $(function(){
    $(".btn").click(function(){
      $("#mymodal").modal("toggle");
    });
  });
</script>

这样一个简单的弹出框就完成了，其实BS中还有好几种弹出框的触发方式，但都大同小异，以上这种是最基本的弹出框结构，也是最便于直观的了解的。

Bootstrap基础学习-2

标签：header   rip   快速   jquery   弹出框   红色   cti   oda   点击   

原文地址：http://www.cnblogs.com/Wen-Bo/p/4584991.html