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. Redis学习——Linux环境下Redis的安装（一）

    一.关于Redis Redis最为一款开源的key-value存储系统,自推出到现在一直受到编程人员的喜爱.它支持存储多种value类型,String .List .Set .Zset .Hash.这 ...

  2. redis 系列20 服务器下

    二. serverCron函数 2.3 更新服务器每秒执行命令次数 serverCron函数中的trackOperationsPerSecond函数会以每100毫秒一次的频率执行,这个函数以抽样计算的 ...

  3. 将dylib库嵌入macOS应用的方法

    写作是一种习惯,稍微松懈,也许失去的就很多.过了一个年,居然很多天都没有更新,幸福的代价吧:) 标题的问题其实以前碰到过,不过当时在iOS,所以随手处理了没有重视. 而这次是在macOS,所使用的库, ...

  4. javascript深入理解js闭包(转载)

    此篇文章来源于http://www.jb51.net/article/24101.htm 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全 ...

  5. 【Python3爬虫】Scrapy入门教程

    Python版本:3.5            系统:Windows 一.准备工作 需要先安装几个库(pip,lxml,pywin32,Twisted,pyOpenSSL),这些都比较容易,如果使用的 ...

  6. 使用mpvue开发小程序教程（一）

    前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...

  7. RabbitMQ消息队列（十四）-启用SSL安全通讯

    如果RabbitMQ服务在内网中,只有内网的应用连接,我们认为这些连接都是安全的,但是个别情况我们需要让RabbitMQ对外提供服务.这种情况有两种解决方案: 在RabbitMQ外层在封装一层应用,应 ...

  8. leetcode — remove-duplicates-from-sorted-array-ii

    /** * Source : https://oj.leetcode.com/problems/remove-duplicates-from-sorted-array-ii/ * * * Follow ...

  9. kubernetes系列07—Pod控制器详解

    本文收录在容器技术学习系列文章总目录 1.Pod控制器 1.1 介绍 Pod控制器是用于实现管理pod的中间层,确保pod资源符合预期的状态,pod的资源出现故障时,会尝试 进行重启,当根据重启策略无 ...

  10. Docker公共&本地镜像仓库（七）--技术流ken

    分发镜像 我们已经会构建自己的镜像了,那么如果在多个docker主机上使用镜像那?有如下的几种可用的方法: 用相同的Dockerfile在其他host上构建镜像 将镜像上传到公共registry(比如 ...