//大多数功能都能够指定data属性来指定 但是，有必要的情况下使用jquery由于事件是不同的过程

//活动通常有两种状态show shown 通用和过去的





<!DOCTYPE html>

<html lang="en">





  <head>

    <title>Bootstrap 101 Template</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">





      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">

      </script>

      <script>

          $(document).ready(function(){

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

                  $(this).hide();

              });

              //通过编写jquery 来展示效果，方法和事件的使用

              //$("#myModal").modal({show:true,backdrop:true});

              $('#myModal').on('shown', function () {

                  alert("hahjah");

              })

          });

      </script>





  </head>

  <body>





//通过data属性来查看效果

<!-- Button to trigger modal -->

<a href="#myModal" role="button" class="btn" data-toggle="modal">查看演示案例</a>

//指定data属性data-backdrop backdrop是一个可选參数。能够看文档还有非常多实用的属性

<button type="button" data-backdrop="false" data-toggle="modal" data-target="#myModal">Launch modal</button>

<!-- Modal -->

<div id="myModal"  class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

        <h3 id="myModalLabel">Modal header</h3>

    </div>

    <div class="modal-body">

        <p>One fine body…</p>

    </div>

    <div class="modal-footer">

        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>

        <button class="btn btn-primary">Save changes</button>

    </div>

</div>

<p>假设您点击我。我会消失。</p>





<!--***************************************************************************-->

    <script src="http://code.jquery.com/jquery.js"></script>

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

版权声明：本文博主原创文章。博客，未经同意不得转载。

bootstrap使用汇总的更多相关文章

  1. GitHub托管BootStrap资源汇总（持续更新中…）

    Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...

  2. GitHub托管BootStrap资源汇总

    MESSENGER替换alert()消息和其他用户交互通知. JQUERY.TOCIFY.JS可以用Bootstrap或jQueryUI主题的Jquery表格组件. BOOTSTRAP-PROMPTS ...

  3. Bootstrap后台使用问题汇总（一）

    第一次自己汇总写博客啊,不懂规矩,大家包涵~~ 最近进行的项目中需要一个后台,于是在网上Down了许多Bootstrap后台源码.精挑细选决定用“ACE后台管理系统”(因为是中文的,英文三级狗的小鹿还 ...

  4. ***Bootstrap FileInput插件的使用经验汇总

    插件下载地址: https://github.com/kartik-v/bootstrap-fileinput/ 官方DEMO查看: http://plugins.krajee.com/file-ba ...

  5. 基于bootstrap的漂亮网站后台管理界面框架汇总

    基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...

  6. Bootstrap 常用组件汇总

    Bootstrap 官方文档:http://www.bootcss.com/ Bootstrap Multiselect 多选下拉组件 官方文档:http://www.kuitao8.com/demo ...

  7. bootStrap table 和 JS 开发过程中遇到问题汇总

    1..bootStrap-table表头固定 在table定义的时候给高度属性就可以自动生成滚动条,并且固定表头[height: 220,] 2.为动态生成的DOM元素绑定事件 on("cl ...

  8. Bootstrap table分页问题汇总

    首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...

  9. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

随机推荐

  1. U6Linux的文件权限与目录配置

    1.ll查看文件信息:［权限］［连接］［所有者］［用户组］［文件容量］［修改日期］［文件名］ 2.第一个字符代表文件的属性:若为［d］则是目录．若为[-]则是文件．若为[l]则为连接． 3.chgrp ...

  2. 在mysql数据库中关于日期时间字段的处理

    在mysql数据库中关于日期时间字段的处理 在开发中,日期时间字段一般有如下几种设计 假设要获取2013-08-15日到2013-08-16日之间的记录 1. 直接使用日期时间类字段 相关sql语句如 ...

  3. 伪教练技术培训之殇-2013年9月江西IDC拓行榜与综述

    纠集几个人,然后培训所谓的教练技术培训. 培训的人一期又一期的参与,国学.佛学.超能量,无所不用其极,然后就是疯狂的拿人头,邀请朋友加盟. 有甚者还披上“科技”的外衣,用“水知道答案”这种早被公知指出 ...

  4. MyEclipse中“擅自乱改”项目名导致项目报错的处理

    最近几天培训的过程中,经常有同学手一抖,默默的修改了本来配置部署好的项目名,导致项目报错…… 遇到这种事情,我一般会做的处理就是重新新建项目,然后把包和各种文件ctrl+c ctrl+v,遇到项目小还 ...

  5. vps自己搭建VPN（转）

    1.购买一个VPS: https://www.pzea.com/North-America-openvz-vps.html 2.下载putty软件,进行vpn安装: http://www.chiark ...

  6. 使用oracle数据库，多用户同时对一个表进行增加，删除，修改，查看等操作，会不会有影响？

    使用oracle数据库,多用户同时对一个表进行增加,删除,修改,查看等操作,会不会有影响? 1.问题:各操作间或者性能上会不会有影响? 如果有该如何解决? 多用户操作的影响主要是回锁定记录,oracl ...

  7. Android实现限制EditText输入文字的数量

    一: 声明控件.          TextView hasnumTV;         TextView hasnum;// 用来显示剩余字数         int num = 50;// 限制的 ...

  8. java HashMap中出现反复的key, 求解释

    上代码: Person p1 = new Person("xiaoer",1); Person p2 = new Person("san",4); Map< ...

  9. 编译Nginx支持Tcp_warppers

    Tcp wrappers : Transmission Control Protocol (TCP) Wrappers 为由 inetd 生成的服务提供了增强的安全性.TCP Wrappers 是一种 ...

  10. CSS+DIV+HTML（一）--HTML总结

    一.定义 HTML(Hyper Text Markup Language),标记语言. 二.主要内容: HTML元素分为三类:块级标签.内联标签.可变标签.差别在于: 块级元素:在默认情况下会换行显示 ...