04-Bootstrap的插件

1、下拉菜单

代码如下：

<div class="dropdown">

  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

    Dropdown

    <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

    <li><a href="#">Action</a></li>

    <li><a href="#">Another action</a></li>

    <li><a href="#">Something else here</a></li>

    <li role="separator" class="divider"></li>

    <li><a href="#">Separated link</a></li>

  </ul>

</div>

aria-haspopup :true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。

aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的

aria-labelledby：当想要的标签文本已在其他元素中存在时，可以使用aria-labelledby，并将其值为所有读取的元素的id。如下：

当ul获取到焦点时，屏幕阅读器是会读：“选择您的职位”

data-toggle: 表示什么事件类型发生

2、模态框

代码如下：

<h2>创建模态框</h2>

<!-- 按钮触发模态框 -->

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

<!-- 模态框（Modal） -->

<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">&times;</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-danger">确定</button>

        </div>

    </div>

    <!-- /.modal-content -->

</div>

<!-- /.modal -->

</div>

在模态框中需要注意两点：

第一是.modal，用来把 <div>的内容识别为模态框。
第二是.fade class。当模态框被切换时，它会引起内容淡入淡出。
aria-labelledby="myModalLabel" ，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
<div class="modal-header"> ，modal-header 是为模态窗口的头部定义样式的类。
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

通过js控制模态框弹出

代码如下：

    <body>

        <div class="container">

            <div class="row">

                <div class="col-md-4">

                    <div class="panel panel-success">

                        <div class="panel-heading">

                            <div class="panel-title">

                            </div>

                        </div>

                        <div class="panel-body">

                            <h2>创建模态框</h2>

                            <!-- 按钮触发模态框 -->

                            <button class="btn btn-primary btn-lg" data-toggle="modal" id="delete">删除</button>

                            <!-- 模态框（Modal） -->

                            <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">&times;</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-danger">确定</button>

                                        </div>

                                    </div>

                                    <!-- /.modal-content -->

                                </div>

                                <!-- /.modal -->

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script type="text/javascript">

            $(function(){

                //通过jquery控制模态框弹出

                $('#delete').click(function(){

                    $('#myModal').modal({

                        keyboard:false

                    })

                })

            })

        </script>

    </body>

3、滚动监听

代码如下：

<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="#">luffy</a>

        </div>

        <div class="collapse navbar-collapse bs-js-navbar-scrollspy">

            <ul class="nav navbar-nav">

                <li>

                    <a href="#ios">iOS</a>

                </li>

                <li>

                    <a href="#svn">SVN</a>

                </li>

                <li class="dropdown">

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

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

                    </a>

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

                        <li>

                            <a href="#jmeter" tabindex="-1">jmeter</a>

                        </li>

                        <li>

                            <a href="#ejb" tabindex="-1">ejb</a>

                        </li>

                        <li class="divider"></li>

                        <li>

                            <a href="#spring" tabindex="-1">spring</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="ios">iOS</h4>

    <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

    </p>

    <h4 id="svn">SVN</h4>

    <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。

    </p>

    <h4 id="jmeter">jMeter</h4>

    <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。

    </p>

    <h4 id="ejb">EJB</h4>

    <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

    </p>

    <h4 id="spring">Spring</h4>

    <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。

    </p>

    <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。

    </p>

</div>

通过javascript 调用滚动监听，选取要监听的元素，然后调用.scrollspy()函数

$('.navbar-header').scrollspy('.bs-js-navbar-scrollspy')

像后面还介绍了：

　　 0.手风琴效果
data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。

　　href 或 data-target 属性添加到父组件，它的值是子组件的 id。

data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接2

弹出框
警告框
轮播

通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
属性data-slide接受关键字prev或next，用来改变幻灯片相对于当前位置的位置
使用data-slide-to来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
data-ride="carousel"属性用于标记轮播在页面加载时就开始动画播放

Bootstrap的插件的更多相关文章

bootstrap时间插件火狐不显示完美解决方法
原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...
Bootstrap 分页插件 ajax获取数据显示
Bootstrap 分页插件 ajax获取数据显示标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...
Twitter Bootstrap JavaScript插件
Twitter Bootstrap JavaScript插件本文收集了10款非常不错的JavaScript Twitter bootstrap扩展插件,利用Boostrap开发者可以节省大量的时间修复 ...
使用bootstrap的插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
bootstrap table 插件多语言切换
在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...
Bootstrap按钮插件
前面的话按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件加载状态通过按钮可以设计状态提示,当单击按钮时,会显示 ...
结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程
1.bootstrap-fileinpu的简单介绍在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...
利用Bootstrap Paginator插件和KnockoutJS完成分页功能
在最近一个项目中,需要结合一堆条件查询并对查询的结果数据完成一个简单分页功能,可是做着做着,自己的思路越来越模糊,做到心态崩溃!!! 哈哈,特此花点时间重新总结,并从最简单的分页,然后向多条件查询分页 ...
bootstrap分页插件的使用
项目中需要实现文章列表的分页显示,由于使用了bootstrap框架,所以我们选择bootstrap的分页实现方法.网上有一些这方面的介绍文章,并且也有相关的示例程序.这里结合我们的项目,介绍一下使用b ...
Bootstrap分页插件ajax返回数据，工具类的编写
使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别需要引入的css:  <link href=&q ...

随机推荐

Nginx 之六： Nginx服务器的正向及反向代理功能
一:Nginx作为正向代理服务器: 1.正向代理:代理(proxy)服务也可以称为是正向代理,指的是将服务器部署在公司的网关,代理公司内部员工上外网的请求,可以起到一定的安全作用和管理限制作用,正向代 ...
python3 bytes数据类型探讨
python3中str和bytes分开了,那么bytes与str之间到底是什么关系呢?下面从表现形式.处理方式.存储形式三个方面来阐述其区别 1. 在字符串前面加上b,就表示bytes数据类型 s1 ...
判断以及防止SQL注入
SQL注入是目前黑客最常用的攻击手段,它的原理是利用数据库对特殊标识符的解析强行从页面向后台传入.改变SQL语句结构,达到扩展权限.创建高等级用户.强行修改用户资料等等操作. 那怎么判断是否被SQL注 ...
CountDownLatch学习
看了几篇博客,说用CountDownLatch实现一个先执行完子线程,再执行主线程的例子.因此写一篇博客总结一下. 一.CountDownLatch了解 1.CountDownLatch继承了Abst ...
spring cloud（学习笔记）高可用注册中心（Eureka）的实现（二）
绪论前几天我用一种方式实现了spring cloud的高可用,达到两个注册中心,详情见spring cloud(学习笔记)高可用注册中心(Eureka)的实现(一),今天我意外发现,注册中心可以无限 ...
python 的基础学习第三
1,in ,not in 判断子元素是是否在原字符串(字典,列表,集合)中,主要是用在检测敏感字 print('a' in 'abcchhhhd') 有则返回True, print('j' in 'a ...
Element Select 回显
有思考有痛点的朋友可以聊聊(要求:认真看过Element相关文档,对该场景自己有过多角度的探索) 下拉框回显的关键点:要回显的值包含于下拉列表的数组中 demo图最近遇到一个需求抽象下:循环中下拉框 ...
解决Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 问题
通过这里的回答,我们可以知道: Tomcat在 7.0.73, 8.0.39, 8.5.7 版本后,添加了对于http头的验证. 具体来说,就是添加了些规则去限制HTTP头的规范性参考这里具体来说 ...
python-----短信、电话告警
Twilio 1.访问http://twilio.com/并注册.注册了新账户后,你需要验证一个手机号码,短信将发给该号码. 2.Twilio 提供的试用账户包括一个电话号码,它将作为短信的发送者.你 ...
linux 制作U盘启动，和定制系统
找到u盘的路径 fdisk -l 将镜像写入u盘 dd if=/root/Downloads/kali-linux-2017.1-amd64.iso of=/dev/sdc 定制U盘启动系统: 安装完 ...

Bootstrap的插件

04-Bootstrap的插件

1、下拉菜单

2、模态框

通过js控制模态框弹出

3、滚动监听

Bootstrap的插件的更多相关文章

随机推荐

热门专题