章节
问答
课签
笔记
评论
占位
占位

导入JavaScript插件

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

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

一次性导入:

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

具体使用如下(或见右侧代码编辑器28-29行):

<!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件(压缩版本) -->
<script src="js/bootstrap.min.js"></script>

特别声明:jQuery版本库也可以加载你本地的jQuery版本。

单独导入:

为方便单独导入特效文件,Bootstrap V3.2中提供了12种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”

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

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

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

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

上述单独插件的下载可到github去下载(https://github.com/twbs/bootstrap)。

下载后可查看js文件夹,如下图:

接下来依次向大家介绍这些插件如何使用,至于插件源码分析,在本系列不做过多的阐述,具体源码可以阅读各插件的代码。

注意:在后面的例子中我们为了方便都采用次性导入的方法,即引入“bootstrap.min.js”文件(小伙伴们可以在自己的项目中跟据需要选择单独导入还是一次性导入)。

任务

?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 那时雨luyun
通过mymodal选择器直接跳转到toggle

最新回答 / 诚i
http://pan.baidu.com/s/1dELkmHV

最赞回答 / 相遇是缘_04342302
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script src="https://libs.baidu.com/bootstrap/3.0.3/js/boo...

最新回答 / 慕粉2150457150
我也同样碰到这个问题,可以把js文件下载到本地,然后直接copy代码,稍作修改就可以了,在本地练习。

已采纳回答 / qq_丶尛賤_03821111
HB吧,Hbuilder,挺好的一个编写软件,容易上手

已采纳回答 / 瑜伽兔子
按F12 debug查看错误,具体错误具体分析

已采纳回答 / Kingred_D
找了二十分钟,终于发现了,你的  <script scr="test1/dist/js/bootstrap.min.js"></script>,你写成了‘scr’,本来是‘src’。

最新回答 / 我必win
第六行改为:<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">引用的地址要加http:

最新回答 / qiliu
最后括号里写了个toggle,表示:触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示

已采纳回答 / 翌子涵
CSS文件是可以分类的,但一般下载的模版都是压缩到一个css文件内了。css相对于js代码少很多,所以没必要单独引入。定制Bootstrap这个定制页面可以选择定制哪些你所需要的css组件。
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言