data-toggle

Bootstrap每天必学之工具提示(Tooltip)插件

Bootstrap每天必学之工具提示(Tooltip)插件

当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用。工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。 如果您想要单独引用该插件的功能,那么您需要引用 tooltip.js。或者,正如Bootstrap ... »

Bootstrap每天必学之弹出框(Popover)插件

Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面。 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。... »

Bootstrap每天必学之按钮(Button)插件

按钮(Button)在 Bootstrap 按钮 一章中介绍过。通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组。 如果您想要单独引用该插件的功能,那么您需要引用 button.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 一、加载状态 如... »

Bootstrap每天必学之折叠

本文主要来学习一下JavaScript插件–折叠。 1、过渡效果 关于过渡效果 对于简单的过渡效果,只需将transition.js和其它JS文件一起引入即可。如果你使用的是编译(或压缩)好的bootstrap.js文件,就无需再单独将其引入了。 What’s inside Transition.js是针对 is a basic helper for transitionE... »

Bootstrap每天必学之下拉菜单

一、下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ☑ LESS版本:对应的源码文件为 dropdowns.less ☑ Sass版本:对应的源码文件为 _dropdowns.sass ☑ 编译后的Bootstrap版本:查看bootstrap.css文件第3004行~第3130行 在... »

Boostrap基础教程之JavaScript插件篇

Boostrap提供了12种JavaScript插件,包括: 动画过渡 Transition 模态 Modal 下拉菜单 Dropdown 滚动侦测 Scrollspy 选项卡 Tab 提示框 Tooltip 弹出框 Popover 警告框 Alert 按钮 Button 折叠 Collapse 旋转轮播 Carousel 自动定位浮标 Affix 模态弹窗 <div class="moda... »

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

在Bootstrap的官网上,提供了一种导航栏的组件: 只要在站点文件夹放好JQ与Bootstrap输入如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns... »

Bootstrap学习笔记之js组件(4)

这次我们来看下js组件的使用,本篇文章会有点长,希望大家可以耐心看,相信收获会有不少。不少园友加我好友,表示喜欢我写文字的风格,简单明了,这里,再次谢谢你们的支持。一方面,自身技术有限,写的东西都比较基础,另一方面,写的东西,都是根据自己的理解,把复杂的东西用最简单的语言表达出来。所以,写的有不对的地方,麻烦各位给予指正哈。  一、js文件引用 注意点:jquery必须在在其它js文件之... »

Bootstrap 折叠(Collapse)插件用法实例详解

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。下面通过本文给大家介绍Bootstrap 折叠(Collapse)插件用法实例,一起看看吧! 折叠(Collapse)插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项。 如果... »

Bootstrap3.0学习教程之JS折叠插件

过渡效果 关于过渡效果 对于简单的过渡效果,只需将transition.js和其它JS文件一起引入即可。如果你使用的是编译(或压缩)好的bootstrap.js文件,就无需再单独将其引入了。 What’s inside Transition.js是针对 is a basic helper for transitionEnd事件的一个基本助手工具,也是对CSS过渡效果的模拟。它被其它插件... »

JS组件Bootstrap按钮组与下拉按钮详解

本文先为大家分享按钮组的使用方法,具体内容如下 一、按钮组(Button Groups) 1、单个按钮组 用.btn-group封装多个带.btn的<button> <div class="btn-group"> <button class="btn">1</button> <button class="btn">2</button... »

Bootstrap实现下拉菜单效果

下拉菜单用于显示链接列表的可切换、有上下文的菜单。单按钮下拉菜单只要改变一些基本的标记,就能把按钮变成下拉菜单开关。Action Action Another action Something else here Separated link 分裂式按钮下拉菜单相似地,分裂式按钮下拉菜单也需要同样的改变标记,但只要多一个分开的按钮。 »

JS组件Bootstrap实现下拉菜单效果代码

Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互。使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 ... »

Bootstrap每天必学之模态框(Modal)插件

本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件。 更多关于Bootstrap模态框插件内容请点击专题《Bootstrap Modal使用教程》进行学习,希望大家喜欢,下面继续 一.基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层)、 dialog(窗口声明层)、content(内容层)。在内容层里面,还... »

bootstrap的工具提示实例代码

Bootstrap 工具提示(Tooltip)插件 当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用。工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。 工具提示实现代码如下所示: <!DOCTY... »

Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)

在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.j... »

bootstrap下拉菜单使用方法解析

bootstrap下拉菜单使用方法解析

Bootstrap框架中的下拉菜单组件是一个独立的组件,具体来学习一下 下拉菜单(Dropdown) ☑ LESS版本:对应的源文件dropdowns.less <h3>示例1</h3> <div class="navbar navbar-default" id="navmenu"> <a href="##" class="navbar-bra... »

bootstrap选项卡使用方法解析

选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项,能切换出对应的内容 Bootstrap框架中的选项卡主要有两部分内容组成: 选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs) 底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示. <!-- 选项卡组件(菜单项nav-tabs)--> <ul id... »

Bootstrap实现提示框和弹出框效果

Bootstrap实现提示框和弹出框效果

首先讲一讲提示框(Tooltip) 的使用方法 样式文件: LESS版本:对应源文件 tooltips.less <style id="jsbin-css"> body { padding: 100px; } .btn { margin: 20px 10px 20px; } </style> </head> <body> <h3>按钮做的... »

Bootstrap基本插件学习笔记之轮播幻灯片(23)

Bootstrap基本插件学习笔记之轮播幻灯片(23)

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。 0x01 基本实例 Bootstrap实现轮播幻灯片的效果,只需要简单地使用class开发就可以了: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name... »

BootStrap tooltip提示框使用小结

提示框 提示框的基本使用方式为: 复制代码 代码如下:<span data-toggle=”tooltip” data-original-title=”this is alert content”>test message</span>   data-original-title可以直接写为title,仍然能正常使用,源码中优... »

Bootstrap 中data-[*] 属性的整理

【1 data-属性】 data属性是HTML5的新属性。允许开发者自由为其标签添加属性.存储数据,这种自定义属性一般用“data-”开头。 存储的(自定义)数据能够被页面的 JavaScript 中利用。 data-* 属性包括两部分: * 属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符。 * 属性值可以是任意字符串。 说直白点就是data属性的应用,让HTML... »

Bootstrap提示框效果的实例代码

本文介绍了Bootstrap提示框,分享给大家,顺便也给自己留个笔记 前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语。本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框,他们都需要满足下列条... »

Bootstrap Table使用整理(一)

相关阅读: Bootstrap Table使用整理(二)  //www.jb51.net/article/115791.htm Bootstrap Table使用整理(三)  //www.jb51.net/article/115795.htm Bootstrap Table使用整理(四)之工具栏 //www.jb51.net/article/115798.htm Bootstr... »

Bootstrap多级菜单的实现代码

最近在用Bootstrap做一个项目的时候遇到一个问题,官网上只给的二级菜单的用法,但是实际运用肯定不止二级。 于是在网上看到一个第三方的工具:bootstrap-submenu,地址:https://github.com/vsn4ik/bootstrap-submenu 可以去下载源码。 将bootstrap-submenu.js和bootstrap-submenu.css文件添加到项目中 在要... »

Page 1 of 212