全面解析Bootstrap中nav、collapse的使用方法

网络编程 2024/11/17 佚名

3 1 2

一、导航分析（nav)
源码文件：
_navs.scss：导航模块
Mixins/_nav-divider.scss：分隔线
Mixins/_nav-vertical-align.scss：垂直对齐

1、只是用css进行了样式修饰，对Js没有任何依赖
2、导航模块可以包含下拉模块
3、实现了水平、垂直、水平平均分配（table-cell实现，4.0移除）、tabs、胶囊等样式
4、Nav-divider：有一个像素的高度实现分隔线
5、Nav-stacked：垂直对齐实现
6、提供了tab-content类，用于包裹tab，然后tab-pane做为内容区域，用于tab页的扩展
7、Nav-tabs下的dropdown做了位置向上收缩一个像素的处理，因为nav-tabs会一条底线，不向上收缩一个像素，会有空白间隙出现

// Specific dropdowns
.nav-tabs .dropdown-menu {
 // make dropdown border overlap tab border
 margin-top: -1px;
 // Remove the top rounded corners here since there is a hard edge above the menu
 @include border-top-radius(0);
}

二、折叠效果(collapse)
源码文件：
Mixins/_component-animations.scss：collapse实现，实现折叠效果
Javascripts/bootstrap/collapse.js：折叠效果实现

1、$this.data()收集所有data-*数据
2、Parent属性：指定当前这个collapse被那个父级所控制，主要实现一控多的效果，以下是隐藏同一父级下所有子列表代码：

return $(this.options.parent)
   .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
   .each($.proxy(function (i, element) {
    var $element = $(element)
    this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
   }, this))
   .end()

3、Praent的实现，还需要整合.panel类，因为查找时认为所有子列表都是放在.panel类下的
4、Jquery的end（）方法：结束当前筛选链，并将匹配元素集还原为之前的状态（链开始的位置）
$(“p”).find(‘.bak').find(‘span').end()：还原到$(“p”)
5、scrollHeight：页面的高度（获取为要展开的实际高度/宽度），包含视窗不可见的部分，在collapse中用于识别要展开的最大值，在运动完成后都会对height/widht清空处理

var scrollSize = $.camelCase(['scroll', dimension].join('-'))
  this.$element
   .one('bsTransitionEnd', $.proxy(complete, this))
   .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])

6、对处理元素分为两类，一是要展开或隐藏的元素本身（$element），二是触发展开或隐藏元素的按钮（$trigger）
7、在hiden方法中，会重绘折叠区域的高度，然后获取实际区域的高度：
this.$element[dimension](this.$element[dimension]())[0].offsetHeigh
8、Hiden方法的触发默认情况下都是通过show方法中的判断触发的：

if (actives && actives.length) {
  Plugin.call(actives, 'hide')
   activesData || actives.data('bs.collapse', null)
  }

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

Bootstrap,nav,collapse

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“全面解析Bootstrap中nav、collapse的使用方法”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

全面解析Bootstrap中nav、collapse的使用方法

为什么JavaScript没有块级作用域

全面解析bootstrap格子布局

评论“全面解析Bootstrap中nav、collapse的使用方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接