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. Spring系列之手写一个SpringMVC

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

  2. 补习系列-springboot-使用assembly进行项目打包

    目录 springboot-maven插件 1. 项目打包Jar 2. 项目完整构建 3. 本地包依赖 参考文档 springboot-maven插件 springboot-maven插件 repac ...

  3. linux 远程复制 scp

    把本地/home/crawler/warning/python/alarmRun.sh 复制到67cralwer用户/home/crawler/warning/python/ 下面 scp -r /h ...

  4. Magicodes.NET框架之路——产品之路（谈谈产品管理）

    虽然Magicodes.NET现在还不属于产品,但是却不妨碍她想成为产品的心. 为什么突然有了此篇,这篇不是空穴来风,而是我思考良久的结果: 为了让大家知道我在干什么,我想干什么,我将要干什么还有我干 ...

  5. 痞子衡嵌入式：PCM编码与Waveform音频文件(.wav)格式详解

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是PCM编码及Waveform音频文件格式. 嵌入式里有时候也会和音频打交道,比如最近特别火的智能音箱产品,离不开前端的音频信号采集.降噪 ...

  6. lua的String

    基础字符串函数 字符串库中有一些函数非常简单,如:    1). string.len(s) 返回字符串s的长度:    2). string.rep(s,n) 返回字符串s重复n次的结果:    3 ...

  7. .Net语言 APP开发平台——Smobiler学习日志：如何调用API进行短信发送

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 二.发送短信代码 VB: Pr ...

  8. [MySQL] 5.7版本以上group by语句报1055错误问题

    1. 在5.7版本以上mysql中使用group by语句进行分组时, 如果select的字段 , 不是完全对应的group by后面的字段 , 有其他字段 , 那么就会报这个错误 ERROR 105 ...

  9. python学习笔记(十 四)、web.py

    使用web.py 通过python进行网页的编写,下面我们来简单了解一哈web.py 的使用 1 url处理 使用特定的url结构来解析我们发送的请求.如下面所示: urls = ( '/login' ...

  10. asp.net引用System.Speech实现语音提示

    using System; using System.Speech.Synthesis; namespace testvoice { class Program { static void Main( ...