你的位置:首页 > Java教程

[Java教程]【Bootstrap基础学习】03 Bootstrap插件示例


 模态框

<h2>创建模态框(Modal)</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal"  data-target="#myModal">  开始演示模态框</button><!-- 模态框(Modal) --><div class="modal fade" id="myModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">  <div class="modal-dialog">   <div class="modal-content">     <div class="modal-header">      <button type="button" class="close"        data-dismiss="modal" aria-hidden="true">         &times;      </button>      <h4 class="modal-title" id="myModalLabel">        模态框(Modal)标题      </h4>     </div>     <div class="modal-body">      在这里添加一些文本     </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 --></div>

滚动监听

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">  <div class="navbar-header">   <button class="navbar-toggle" type="button" data-toggle="collapse"     data-target=".bs-js-navbar-scrollspy">     <span class="sr-only">切换导航</span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>   </button>   <a class="navbar-brand" href="#">教程名称</a>  </div>  <div class="collapse navbar-collapse bs-js-navbar-scrollspy">   <ul class="nav navbar-nav">     <li><a href="#ios">iOS</a></li>     <li><a href="#svn">SVN</a></li>     <li class="dropdown">      <a href="#" id="navbarDrop1" class="dropdown-toggle"        data-toggle="dropdown">Java        <b class="caret"></b>      </a>      <ul class="dropdown-menu" role="menu"        aria-labelledby="navbarDrop1">        <li><a href="#jmeter" tabindex="-1">jmeter</a></li>        <li><a href="#ejb" tabindex="-1">ejb</a></li>        <li class="divider"></li>        <li><a href="#spring" tabindex="-1">spring</a></li>      </ul>     </li>   </ul>  </div></nav><div data-spy="scroll" data-target="#navbar-example" data-offset="0"  style="height:200px;overflow:auto; position: relative;">  <h4 id="ios">iOS</h4>  <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple    TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。  </p>  <h4 id="svn">SVN</h4>  <p>Apache Subversion,通常缩写为 SVN,是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目,因此拥有丰富的开发人员和用户社区。  </p>  <h4 id="jmeter">jMeter</h4>  <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。  </p>  <h4 id="ejb">EJB</h4>  <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。  </p>  <h4 id="spring">Spring</h4>  <p>Spring 框架是一个开源的 Java 平台,为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。  </p>  <p>Spring 框架最初是由 Rod Johnson 编写的,在 2003 年 6 月首次发布于 Apache 2.0 许可证下。  </p></div>

淡入淡出的tab标签页(加fade,初始化淡入加in)

<ul id="myTab" class="nav nav-tabs">  <li class="active">   <a href="#home" data-toggle="tab">     W3Cschool Home   </a>  </li>  <li><a href="#ios" data-toggle="tab">iOS</a></li>  <li class="dropdown">   <a href="#" id="myTabDrop1" class="dropdown-toggle"     data-toggle="dropdown">Java     <b class="caret"></b>   </a>   <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">     <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>     <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>   </ul>  </li></ul><div id="myTabContent" class="tab-content">  <div class="tab-pane fade in active" id="home">   <p>W3Cschoool菜鸟教程是一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。</p>  </div>  <div class="tab-pane fade" id="ios">   <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple    TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p>  </div>  <div class="tab-pane fade" id="jmeter">   <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。</p>  </div>  <div class="tab-pane fade" id="ejb">   <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。   </p>  </div></div>

提示工具

<h4>提示工具(Tooltip)插件 - 锚</h4>这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"  title="默认的 Tooltip">  默认的 Tooltip</a>.这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"  data-placement="left" title="左侧的 Tooltip">  左侧的 Tooltip</a>.这是一个 <a href="#" data-toggle="tooltip" data-placement="top"  title="顶部的 Tooltip">  顶部的 Tooltip</a>.这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom"  title="底部的 Tooltip">  底部的 Tooltip</a>.这是一个 <a href="#" data-toggle="tooltip" data-placement="right"  title="右侧的 Tooltip">  右侧的 Tooltip</a><br><h4>提示工具(Tooltip)插件 - 按钮</h4><button type="button" class="btn btn-default" data-toggle="tooltip"  title="默认的 Tooltip">  默认的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip"  data-placement="left" title="左侧的 Tooltip">  左侧的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip"  data-placement="top" title="顶部的 Tooltip">  顶部的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip"  data-placement="bottom" title="底部的 Tooltip">  底部的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip"  data-placement="right" title="右侧的 Tooltip">  右侧的 Tooltip</button><script>//提示工具(Tooltip)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的提示工具(tooltip)  $(function () { $("[data-toggle='tooltip']").tooltip(); });</script>

弹出框插件

 <button type="button" class="btn btn-default" title="Popover title"    data-container="body" data-toggle="popover" data-placement="left"    data-content="左侧的 Popover 中的一些内容">   左侧的 Popover  </button>  <button type="button" class="btn btn-primary" title="Popover title"    data-container="body" data-toggle="popover" data-placement="top"    data-content="顶部的 Popover 中的一些内容">   顶部的 Popover  </button>  <button type="button" class="btn btn-success" title="Popover title"    data-container="body" data-toggle="popover" data-placement="bottom"    data-content="底部的 Popover 中的一些内容">   底部的 Popover  </button>  <button type="button" class="btn btn-warning" title="Popover title"    data-container="body" data-toggle="popover" data-placement="right"    data-content="右侧的 Popover 中的一些内容">   右侧的 Popover  </button>  </div>  <script>//弹出框(Popover)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover):$(function ()    { $("[data-toggle='popover']").popover();   });  </script>

折叠

<div class="panel-group" id="accordion">  <div class="panel panel-default">   <div class="panel-heading">     <h4 class="panel-title">      <a data-toggle="collapse" data-parent="#accordion"        href="#collapseOne">        点击我进行展开,再次点击我进行折叠。第 1 部分--hide 方法      </a>     </h4>   </div>   <div id="collapseOne" class="panel-collapse collapse in">     <div class="panel-body">      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred       nesciunt sapiente ea proident. Ad vegan excepteur butcher vice       lomo.     </div>   </div>  </div>  <div class="panel panel-success">   <div class="panel-heading">     <h4 class="panel-title">      <a data-toggle="collapse" data-parent="#accordion"        href="#collapseTwo">        点击我进行展开,再次点击我进行折叠。第 2 部分--show 方法      </a>     </h4>   </div>   <div id="collapseTwo" class="panel-collapse collapse">     <div class="panel-body">      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred       nesciunt sapiente ea proident. Ad vegan excepteur butcher vice       lomo.     </div>   </div>  </div>  <div class="panel panel-info">   <div class="panel-heading">     <h4 class="panel-title">      <a data-toggle="collapse" data-parent="#accordion"        href="#collapseThree">        点击我进行展开,再次点击我进行折叠。第 3 部分--toggle 方法      </a>     </h4>   </div>   <div id="collapseThree" class="panel-collapse collapse">     <div class="panel-body">      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred       nesciunt sapiente ea proident. Ad vegan excepteur butcher vice       lomo.     </div>   </div>  </div>  <div class="panel panel-warning">   <div class="panel-heading">     <h4 class="panel-title">      <a data-toggle="collapse" data-parent="#accordion"        href="#collapseFour">        点击我进行展开,再次点击我进行折叠。第 4 部分--options 方法      </a>     </h4>   </div>   <div id="collapseFour" class="panel-collapse collapse">     <div class="panel-body">      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred       nesciunt sapiente ea proident. Ad vegan excepteur butcher vice       lomo.     </div>   </div>  </div></div><script type="text/javascript">  $(function () { $('#collapseFour').collapse({   toggle: false  })});  $(function () { $('#collapseTwo').collapse('show')});  $(function () { $('#collapseThree').collapse('toggle')});  $(function () { $('#collapseOne').collapse('hide')});</script> 

轮播

<div id="myCarousel" class="carousel slide">  <!-- 轮播(Carousel)指标 -->  <ol class="carousel-indicators">   <li data-target="#myCarousel" data-slide-to="0" class="active"></li>   <li data-target="#myCarousel" data-slide-to="1"></li>   <li data-target="#myCarousel" data-slide-to="2"></li>  </ol>   <!-- 轮播(Carousel)项目 -->  <div class="carousel-inner">   <div class="item active">     <img src="http://www.cnblogs.com//wp-content/uploads/2014/07/slide1.png" alt="First slide">     <div class="carousel-caption">标题 1</div>   </div>   <div class="item">     <img src="http://www.cnblogs.com//wp-content/uploads/2014/07/slide2.png" alt="Second slide">     <div class="carousel-caption">标题 2</div>   </div>   <div class="item">     <img src="http://www.cnblogs.com//wp-content/uploads/2014/07/slide3.png" alt="Third slide">     <div class="carousel-caption">标题 3</div>   </div>  </div>  <!-- 轮播(Carousel)导航 -->  <a class="carousel-control left" href="#myCarousel"    data-slide="prev">&lsaquo;</a>  <a class="carousel-control right" href="#myCarousel"    data-slide="next">&rsaquo;</a></div> 

附加导航

附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置。

 <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">        <li class="active"><a href="#section-1">第一部分</a></li>        <li><a href="#section-2">第二部分</a></li>        <li><a href="#section-3">第三部分</a></li>        <li><a href="#section-4">第四部分</a></li>        <li><a href="#section-5">第五部分</a></li>      </ul>

这一章看起来和上一章没什么区别,因为我故意遗漏了不少东西,使得他和上一章差不多。

这些遗漏的东西包括一些没写的插件,还有所有这些插件的方法和事件都没写。

因为这些遗漏的东西其实有很多共通的地方,这里如果写了分得太开对以后来查看也不好看。所以干脆决定放在后面的章节,或者在最后总结的时候直接列出来。