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. Java IO 导入导出TXT文件

    字节流和字符流 区别: 读写单位:顾名思义,字节流以字节(byte)为读写单位,而字符流以字符为读写单位,根据码表映射字符,一次可能读入多个字符. 处理对象:字节流可以处理所有类型的数据(包括图片等) ...

  2. Python内置函数(30)——hex

    英文文档: hex(x) Convert an integer number to a lowercase hexadecimal string prefixed with “0x”, for exa ...

  3. SpringCloud(1)---基于RestTemplate微服务项目案例

    基于RestTemplate微服务项目 在写SpringCloud搭建微服务之前,我想先搭建一个不通过springcloud只通过SpringBoot和Mybatis进行模块之间额通讯.然后在此基础上 ...

  4. 源码安装zabbix_agent4.0.3

    1.源码包下载地址:https://www.zabbix.com/download_sources 2.下载完后上传在任意目录用root用户创建以下脚本server_ip为服务端ip然后执行. gro ...

  5. C# 8中的范围类型(Range Type)

    C# 8.0中加入了一个新的范围类型(Range Type). 这里我们首先展示一些代码,并一步一步为代码添加一些不同的东西, 为大家展示一下范围类型的功能和用法. 我们最原始的代码如下: stati ...

  6. Leetcode 137. 只出现一次的数字 II - 题解

    Leetcode 137. 只出现一次的数字 II - 题解 137. Single Number II 在线提交: https://leetcode.com/problems/single-numb ...

  7. Chapter 4 Invitations——16

    While I was sitting there, looking everywhere but at the car in front of me, I heard a knock on my p ...

  8. C语言实现链栈的初始化&进栈&出栈&读取栈顶元素

    /*链表实现栈的一系列操作*/ #include<stdio.h> #include<stdlib.h> #define OK 1 #define ERROR 0 typede ...

  9. 设计模式总结篇系列：单例模式（SingleTon）

    在Java设计模式中,单例模式相对来说算是比较简单的一种构建模式.适用的场景在于:对于定义的一个类,在整个应用程序执行期间只有唯一的一个实例对象.如Android中常见的Application对象. ...

  10. -1-7 java 网络编程基本知识点 计算机网络 TCP/IP协议栈 通信必备 tcp udp

    计算机网络 是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来, 在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享和信息传递的计算机系统. 网络编程 ...