位置: 编程技术 - 正文

Bootstrap每天必学之js插件(bootstrap需要学多久)

编辑:rootadmin

推荐整理分享Bootstrap每天必学之js插件(bootstrap需要学多久),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap怎么学,bootstrap快速入门,bootstrap基础教程,bootstrap学习,bootstrap入门,bootstrap学习,bootstrap要学到什么程度,bootstrap学习,内容如对您有帮助,希望把文章链接给更多的朋友!

1、Bootstrap 插件概览

在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发。

2、导入JavaScript插件

Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。

Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库。

一次性导入:

Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js)。

单独导入:

为方便单独导入特效文件,Bootstrap V3.2中提供了种JavaScript插件,他们分别是:

&#; 动画过渡(Transitions):对应的插件文件“transition.js”

&#; 模态弹窗(Modal):对应的插件文件“modal.js”

&#; 下拉菜单(Dropdown):对应的插件文件“dropdown.js”

&#; 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js”

&#; 选项卡(Tab):对应的插件文件“tab.js”

&#; 提示框(Tooltips):对应的插件文件“tooltop.js”

&#; 弹出框(Popover):对应的插件文件“popover.js”

&#; 警告框(Alert):对应的插件文件“alert.js”

Bootstrap每天必学之js插件(bootstrap需要学多久)

&#; 按钮(Buttons):对应的插件文件“button.js”

&#; 折叠/手风琴(Collapse):对应的插件文件“collapse.js”

&#; 图片轮播Carousel:对应的插件文件“carousel.js”

&#; 自动定位浮标Affix:对应的插件文件“affix.js”

3、data 属性

你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API,也应该是你的首选方式。

话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭 data 属性 API 的方法,即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样:

$(document).off('.data-api')

如需关闭一个特定的插件,只需要在 data-api 命名空间前加上该插件的名称作为命名空间即可,如下所示:

$(document).off('.alert.data-api')

4、编程方式的 API

我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。例如:

$(".btn.danger").button("toggle").addClass("fat")

所有的方法都可以接受一个可选的选项对象作为参数,或者一个代表特定方法的字符串,或者不带任何参数(这种情况下,将会初始化插件为默认行为),如下所示:

每个插件在 Constructor 属性上也暴露了其原始的构造函数:$.fn.popover.Constructor。如果您想获取某个特定插件的实例,可以直接通过页面元素获取:

$('[rel=popover]').data('popover').

5、避免命名空间冲突

某些时候 Bootstrap 插件可能需要与其他 UI 框架一起使用。在这种情况下,可能会发生命名空间冲突。如果不幸发生了这种情况,你可以通过调用插件的 .noConflict 方法恢复其原始值。

6、事件

Bootstrap 为大多数插件的独特行为提供了自定义事件。一般来说,这些事件有两种形式: 动词不定式:这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

过去分词形式:这会在动作执行完毕之后被触发。例如 ex: shown。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

标签: bootstrap需要学多久

本文链接地址:https://www.jiuchutong.com/biancheng/386336.html 转载请保留说明!

上一篇:Bootstrap每天必学之面板(bootstrap要学到什么程度)

下一篇:javascript作用域链(Scope Chain)用法实例解析(javascript作用域链)

  • 转让费和押金的区别
  • 开私家车出差如何报销差旅费
  • 免税蔬菜税额用什么表示
  • 生产研发设备
  • 房产税存在往期滞纳金吗
  • 工商年报实缴出资额是实收资本吗
  • 购买土地自建厂房的会计处理
  • 土地使用税什么意思
  • 留抵税额抵税怎么做分录
  • 销售退回的会计分录金额怎么写
  • 营业收入管理也是企业财务管理的基本内容
  • 建筑施工企业预交税款
  • 公司部分公积金计入什么科目
  • 资质挂靠人员需要交个税吗?
  • 会务费发票税率是
  • 跨年度发票退回如何记账
  • 证券投资基金管理人的职权
  • 正常消耗的直接材料计入当期损益
  • 一般纳税人有进项无销项
  • 领用库存商品的消费税
  • 收回委托加工物资的账务处理
  • 联营企业分得的利润应计入什么科目
  • 融资租赁的利息可以税前扣除吗
  • 华为鸿蒙harmony os
  • vue项目中的package.json是( )?
  • 偶然所得是什么科目
  • 不良资产购买流程
  • 公司收到个人的款怎么做账务处理
  • PHP:session_get_cookie_params()的用法_Session函数
  • 净损益是
  • 土地使用税滞纳金不得超过
  • .hpp是什么文件
  • 统一社会保险费征收
  • mac m1 rosetta编译
  • 库存商品出库怎么计算
  • thinkphp生成html
  • Vue2 Element description组件 列合并
  • 利息收入如何会计分录
  • html5简单吗
  • 代理进口业务应纳的关税
  • 购买的商品作为赠品怎么入账
  • 调整汇兑损益的摘要怎么写?
  • 税收种类包括哪几种
  • 超市的小票能入账吗
  • 用负数表示的例子
  • 费用可以抵扣什么税
  • 小规模纳税人无票收入申报表怎么填
  • 个体户没有税务登记怎么开发票
  • 旅游发票可以做差旅费吗
  • 承包费会计处理
  • 可抵扣的进项税额要减去进项转出吗
  • 缴纳残保金会计分录怎么做
  • 建筑业收入叫什么
  • 应收款钱已收回会计分录
  • 咨询服务费可以全额扣除吗
  • 免征增值税账务处理办法
  • 小规模纳税人购入货物收到增值税专用发票
  • 分公司开票总公司付款可以吗
  • 领用包装物的会计处理
  • 中标服务费计入合同取得成本
  • 新担保法2021和担保期限
  • 暂估入账的材料对材料成本差异率
  • 如何计提当期费用成本
  • 借主营业务成本贷库存商品什么意思
  • 固定资产如何管理
  • windows10bug严重
  • Win10 Mobile/PC Build 10586.550曝光:主要修复bug和优化性能
  • 如何修改win7电脑用户密码
  • winpe 系统还原
  • linux命令行技巧
  • Unity3D Editor类(Inspector) 编写经验总结
  • CCProgressTimer 进度条动画在cocos2dx+lua中的使用
  • unityai寻路
  • nodejs import
  • android studio警告
  • gradle手动安装
  • jquery滚动到底部加载数据
  • 手机sd卡满了怎么办
  • 企业个税网上申报时间
  • 南通医保2023年新政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设