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. 在tomcat中加入SSL腾讯云证书的步骤

    在tomcat中加入SSL证书,可以用https方式访问域名,增加域名的安全性.当然也有很多应用要求https访问,也是安全性的考虑.阿里云和腾讯云都提供SSL证书,还有一些其他的大公司也提供,我这里 ...

  2. ASP.Net Core项目在Mac上使用Entity Framework Core 2.0进行迁移可能会遇到的一个问题.

    在ASP.Net Core 2.0的项目里, 我使用Entity Framework Core 2.0 作为ORM. 有人习惯把数据库的连接字符串写在appSettings.json里面, 有的习惯写 ...

  3. SQLplus下命令输入错误如何删掉重新输入

    如下当我们输入命令出错时想删掉重新输入,按delete或者backspace键无法删除且出现如下情况: SQL> show urerej  ^H^H^H^H^H 可以是使用ctrl+backsp ...

  4. Unity资源打包学习笔记（一）、详解AssetBundle的流程

    转载请标明出处:http://www.cnblogs.com/zblade/ 本文参照unity官网上对于assetBundle的一系列讲解,主要针对assetbundle的知识点做一个梳理笔记,也为 ...

  5. 离线批量数据通道Tunnel的最佳实践及常见问题

    基本介绍及应用场景 Tunnel是MaxCompute提供的离线批量数据通道服务,主要提供大批量离线数据上传和下载,仅提供每次批量大于等于64MB数据的场景,小批量流式数据场景请使用DataHub实时 ...

  6. 痞子衡嵌入式：常用的数据差错控制技术（3）- 和校验(Checksum)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式里数据差错控制技术-和校验. 在系列前一篇文章里,痞子衡给大家介绍了比较简单的校验法-奇偶校验,该校验法主要是针对byte传输校验而 ...

  7. MariaDB官方手册翻译

    MariaDB官方手册 翻译:create database语句(已提交到MariaDB官方手册) 翻译:rename table语句(已提交到MariaDB官方手册) 翻译:alter table语 ...

  8. 【Zabbix】Zabbix Server自动发现

    Zabbix自动发现 由于有上百台的虚拟机需要监控,如果一个个去添加配置,费时费力.Zabbix的自动发现,可以自动发现需要监控的机器,监控相应指标. 前置条件 安装部署好Zabbix Server. ...

  9. eclipse导入别人工程项目后，出现红叉的各种情况

    原文:http://www.cnblogs.com/mmzs/p/7662863.html 1.多半是因为jdk版本的原因,调整一下即可: 解决方法:Build Path ==> Configu ...

  10. Go中局部全局变量的区分

    这是可能也许是容易混淆滴,先上1个例子: package main import "fmt" var nickname = "大虾" func main() { ...