
Bootstrap源码阅读
文章平均质量分 79
前端小菜鸟
这个作者很懒,什么都没留下…
展开
-
Bootstrap插件dropdown源码的学习
使用方法有含有"dropdown"类的容器里面包含下拉触发器(按钮,或链接等),和下拉框的内容下拉触发器必须包含"data-toggle=dropdown"的属性。可以用data-target或href指定包含下拉框的容器,如果没有,则从其父元素内找下拉框内容必须有"dropdown-menu"的类 点击 item1 item1 item3原创 2015-10-18 22:35:16 · 3532 阅读 · 0 评论 -
Bootstrap插件tab源码的学习
使用方法可以分为Tab区和Content区。Tab区为列表,要求带有"nav nav-tabs"或"nav nav-pills"两种类名。下的标签要求带有data-toggle="tab"属性,可以通过data-target或href指定对应的ContentContent区要求带有"tab-content"类名,每个面板要求有"tab-pane"类名以及Id(即Tab里指定的tar原创 2015-10-16 22:57:57 · 1958 阅读 · 1 评论 -
Bootstrap插件scrollspy源码的学习
使用方法可以分为nav(导航区)和content(滚动区)Plugin入口分析/** * 把[data-spy="scroll"]的dom元素,及元素property上的参数传给ScrollSpy构造函数 * @param {object} option 之前绑定在元素上的property对象 * 自定义的包含指定content的对象原创 2015-10-18 18:29:16 · 2476 阅读 · 0 评论 -
Bootstrap插件transition源码的学习
使用说明主要是用于自定义transitionEnd方法,判断是否支持过渡结束事件定义jquery的原型方法emulateTransitionEnd,保证在过渡效果完成后,一定触发transitionEnd初始化在dom树加载完后,自定义bsTransitionEnd事件$(function () { // 储存当前浏览器是否支持,若支持是支持哪种tr原创 2015-10-18 23:03:56 · 1588 阅读 · 0 评论 -
Bootstrap插件carousel源码的学习
使用说明轮播的HTML结构可以分为:容器、项目符号、轮播单元、左右的箭头容器:需要data-ride="carousel"用于初始化;对应的id或class作为子元素的目标项目符号:需要在"carousel-indicators"的容器中;data-target或href指向容器;data-slide-to指向对应的轮播单元;需要有"active"类保证在一开始就激活单元:需要"i原创 2015-10-24 23:43:04 · 2319 阅读 · 0 评论 -
Bootstrap插件modal源码的学习
使用说明两部分需要定义:模态框的触发元素,需要data-toggle="modal",以便被初始化;需要data-target="#example"或href指定模态框模态框,模态框容器需要与data-target对应的类或id,其内容部分可以用"modal-content"的类来美化样式 触发按钮 title原创 2015-10-20 22:55:08 · 2780 阅读 · 0 评论 -
Bootstrap插件collapse源码的学习
使用说明手风琴插件可以分为两部分:可点击的标题区,和展现的内容区标题区,需要定义data-toggle="collapse"和data-parent="#example"(即包含他们的容器),还有data-target或href指向的内容区内容区,需要id或class与标题区定义的一致。添加"collapse"类来默认隐藏该内容区。如果需要在一开始就显示就添加"collapse i原创 2015-10-24 18:28:18 · 2502 阅读 · 0 评论 -
Bootstrap各JavaScript插件的概述
都定义Plugin函数目前来看,定义Plugin是为了作为jquery的原型方法,可以作为jquery对象初始化的入口。function Plugin(option) { return this.each(function () { var $this = $(this) var data = $this.data('bs.tab') if (!data)原创 2015-10-16 22:39:18 · 640 阅读 · 0 评论