Bootstrap -- 插件: 模态框、滚动监听、标签页

1. 模态框（Modal）: 覆盖在父窗体上的子窗体。

使用模态框：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <h3>模态框（Modal）</h3>

    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">演示</button>

    <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">Test</button>

                    <h4 class="modal-title" id="myModalLabel">标题：模态框</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>

        </div>

    </div>

</body>

</html>

样式效果：

2. 滚动监听（Scrollspy）：会根据滚动条的位置自动更新对应的导航目标。

使用滚动监听：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">

    <div class="container-fluid">

    <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="#csharp">C#</a></li>

            <li><a href="#java">Java</a></li>

            <li class="dropdown">

                <a href="#" id="navbarDrop1" class="dropdown-toggle"

                   data-toggle="dropdown">Others

                    <b class="caret"></b>

                </a>

                <ul class="dropdown-menu" role="menu"

                    aria-labelledby="navbarDrop1">

                    <li><a href="#php" tabindex="-1">PHP</a></li>

                    <li><a href="#asp" tabindex="-1">Asp.net</a></li>

                    <li><a href="#python" tabindex="-1">Python</a></li>

                </ul>

            </li>

        </ul>

    </div>

    </div>

</nav>

<div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;">

    <h4 id="csharp">C#</h4>

    <p>

        C#编程语言<br/>

        C#编程语言<br/>

        C#编程语言<br/>

        C#编程语言<br/>

        C#编程语言<br/>

        C#编程语言<br/>

        C#编程语言<br/>

        C#编程语言<br/>

        C#编程语言<br/>

        C#编程语言<br/>

    </p>

    <h4 id="java">Java</h4>

    <p>

        Java编程语言<br/>

        Java编程语言<br/>

        Java编程语言<br/>

        Java编程语言<br/>

        Java编程语言<br/>

        Java编程语言<br/>

        Java编程语言<br/>

        Java编程语言<br/>

        Java编程语言<br/>

    </p>

    <h4 id="php">PHP</h4>

    <p>

        PHP编程语言<br/>

        PHP编程语言<br/>

        PHP编程语言<br/>

        PHP编程语言<br/>

        PHP编程语言<br/>

        PHP编程语言<br/>

    </p>

    <h4 id="asp">Asp.NET</h4>

    <p>

        Asp.NET编程语言<br/>

        Asp.NET编程语言<br/>

        Asp.NET编程语言<br/>

        Asp.NET编程语言<br/>

        Asp.NET编程语言<br/>

        Asp.NET编程语言<br/>

    </p>

    <h4 id="python">Python</h4>

    <p>

        Python编程语言<br/>

        Python编程语言<br/>

        Python编程语言<br/>

        Python编程语言<br/>

        Python编程语言<br/>

        Python编程语言<br/>

        Python编程语言<br/>

    </p>

</div>

</body>

</html>

样式效果：

3. 标签页（Tab）：通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。

使用标签页：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<ul id="myTab" class="nav nav-tabs">

    <li class="active">

        <a href="#codeLanguage" data-toggle="tab">

            编程语言

        </a>

    </li>

    <li><a href="#csharp" data-toggle="tab">C#</a></li>

    <li class="dropdown">

        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">

        Asp.Net<b class="caret"></b>

        </a>

        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">

            <li><a href="#mvc" tabindex="-1" data-toggle="tab">MVC</a></li>

            <li><a href="#webpage" tabindex="-1" data-toggle="tab">WebPage</a></li>

        </ul>

    </li>

</ul>

<div id="myTabContent" class="tab-content">

    <div class="tab-pane fade in active" id="codeLanguage">

        <p>

            编程语言<br/>

            编程语言<br/>

            编程语言<br/>

            编程语言<br/>

            编程语言<br/>

        </p>

    </div>

    <div class="tab-pane fade" id="csharp">

        <p>

            C#<br/>

            C#<br/>

            C#<br/>

            C#<br/>

            C#<br/>

        </p>

    </div>

    <div class="tab-pane fade" id="mvc">

        <p>

            MVC<br/>

            MVC<br/>

            MVC<br/>

            MVC<br/>

            MVC<br/>

            MVC<br/>

        </p>

    </div>

    <div class="tab-pane fade" id="webpage">

        <p>

            Web Page<br/>

            Web Page<br/>

            Web Page<br/>

            Web Page<br/>

            Web Page<br/>

        </p>

    </div>

</div>

</body>

</html>

样式效果：

Bootstrap -- 插件: 模态框、滚动监听、标签页的更多相关文章

  1. bootstrap 滚动监听 标签页 和 工具提示

    标签   <div class="container">     <h4>Tabs</h4>     <ul id="myTab ...

  2. Bootstrap入门（二十六）JS插件3：滚动监听

    很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...

  3. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

  4. bootstrap源码之滚动监听组件scrollspy.js详解

    其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...

  5. bootstrap课程12 滚动监听如何实现（bootstrap方式和自定义方式）

    bootstrap课程12 滚动监听如何实现(bootstrap方式和自定义方式) 一.总结 一句话总结:通过监听滚动的高,判断滚动的高是否大于元素距离顶端的距离 1.如何知道屏幕滚动的高? st=$ ...

  6. 【bootstrapV3】移动端和PC端的 滚动监听

    1.本代码适用于 bootstrap V3 的 页面滚动监听 2.效果: 3.代码: <!DOCTYPE html> <html lang="zh-CN"> ...

  7. 2020-2-27今日总结——滚动监听&导航

    利用Bootstrap 开发工具实现滚动监听 (此文只做学习路上的归纳分享总结用,如有侵权,请联系我删除) 使用滚动监听,比较特殊,要在body中设置scroll,以及触点. 很好理解,因为滚动是多对 ...

  8. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  9. Bootstrap 下拉菜单和滚动监听插件

    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

随机推荐

  1. python传入不确定个数参数

    Python3自带的一个函数为 zip ,使用方式如下: In: print zip([1, 2],[3, 4]) Out: [(1, 3), (2, 4)] In: print zip([1, 2] ...

  2. 网络协议 4 - 交换机与 VLAN：办公室太复杂，我要回学校

        上一次,我们通过宿舍联网打魔兽的需求,认识了如何通过物理层和链路层组建一个宿舍局域网.今天,让我们切换到稍微复杂点的场景,办公室.     在这个场景里,就不像在宿舍那样,搞几根网线,拉一拉, ...

  3. JVM基础系列第8讲：JVM 垃圾回收机制

    在第 6 讲中我们说到 Java 虚拟机的内存结构,提到了这部分的规范其实是由<Java 虚拟机规范>指定的,每个 Java 虚拟机可能都有不同的实现.其实涉及到 Java 虚拟机的内存, ...

  4. Redis基本使用及百亿数据量中的使用技巧分享（附视频地址及观看指南）

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9941208.html 主讲人:大石头 时间:2018-11-10 晚上20:00 地点:钉钉群(组织代码 ...

  5. 论JavaScript的作用域

    一直以来本人认为想深入了解一门语言,不光是让自己变成撸sir,更需要时间的锤炼.能经得起时间考验的东西更值得拥有.学习和使用Javascript一晃都7年了,最近才感觉自己对他才有顿悟,不知道是否来得 ...

  6. 一段奇葩Javascript代码引发的思考

    今天与一挚友加同事调试一段奇葩的javascript代码,在分析出结果后,让我萌生了写此篇文章的想法,如有不对之处望指正,也欢迎大家一起讨论.缩减后的js代码如下,你是否能准确说明他的输出值呢? fu ...

  7. 『没有上司的舞会 树形DP』

    树形DP入门 有些时候,我们需要在树形结构上进行动态规划来求解最优解. 例如,给定一颗\(N\)个节点的树(通常是无根树,即有\(N-1\)条无向边),我们可以选择任意节点作为根节点从而定义出每一颗子 ...

  8. 服务器Windows 2008R2 C盘清理

    今天因为连服务器的时间慢了很多,然后看了一下C盘的空间,OMG剩下222K.然后一直上网找解决方案. 按照惯例,应该开一个360看看,C盘清理啊,搬家什么的.360告知的竟然是没有可以搬移的,所以,这 ...

  9. Docker实用技巧之更改软件包源提升构建速度

    一.开篇 地球,中国,成都市,某小区的阳台上,一青年负手而立,闭目沉思,阵阵的凉风吹得他衣衫呼呼的飘.忽然,他抬起头,刹那间,睁开了双眼,好似一到精光射向星空,只见这夜空......一颗星星都没有.他 ...

  10. Spring系列之手写一个SpringMVC

    目录 Spring系列之IOC的原理及手动实现 Spring系列之DI的原理及手动实现 Spring系列之AOP的原理及手动实现 Spring系列之手写注解与配置文件的解析 引言 在前面的几个章节中我 ...