【Bootstrap基础学习】03 Bootstrap插件示例

时间：2023-03-09 06:49:31
【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="/wp-content/uploads/2014/07/slide1.png" alt="First slide">

         <div class="carousel-caption">标题 1</div>

      </div>

      <div class="item">

         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">

         <div class="carousel-caption">标题 2</div>

      </div>

      <div class="item">

         <img src="/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>

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

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

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

相关文章