twitter-bootstrap – 如何通过blueimp更改Bootstrap Image Gall

发布时间：2020-12-17 21:23:39 所属栏目：安全来源：网络整理

导读：这个完全让我难过.我调整了我的CSS,所以常规的bootstrap模式只是在没有滑动的情况下通过改变开始和结束位置来淡入： .modal.fade.in { top: 50%;}.modal { top: 50%;} 这导致了一个很好的逐渐出现. 我想为Bootstrap Image Gallery创建的图库模式实现相同的效

这个完全让我难过.我调整了我的CSS,所以常规的bootstrap模式只是在没有滑动的情况下通过改变开始和结束位置来淡入：

.modal.fade.in {
    top: 50%;
}
.modal {
    top: 50%;
}

这导致了一个很好的逐渐出现.

我想为Bootstrap Image Gallery创建的图库模式实现相同的效果,它扩展了bootstrap的modal.js.它可以找到here.虽然它在功能方面非常吸引人,但在本周的过程中,我使用js和css都无法简化过渡.对于我的生活,我无法弄清楚如何使每个图像淡入,但在适当的位置,而不是滑下或跨越,这真的是分散注意力.

我所能做的就是删除’淡入淡出’类以完全消除过渡.我本以为我为其他模态所做的css改变也会应用于画廊模态,但它们不是.我已经浏览了bootstrap.js的源代码,无法弄明白.我不是一个完整的润滑剂,但远非js / css专家,需要一只手.谢谢！

解决方法

我将从Chrome开发人员工具或Firebug开始,了解您的CSS规则被覆盖的原因.在带有Chrome的Mac上,按住控件并在要检查的元素顶部时单击鼠标/滚动框(这将打开一个对话框,您将单击“检查元素”).然后,这将打开开发人员工具,这些工具将以蓝色突出显示您单击的元素,在本例中为.modal-gallery.

我刚检查了这个模态库的源代码,并在CSS中注意到了
bootstrap.min.css中的这段代码：682：

.modal.fade.in {
   top: 50%;
}

可以通过bootstrap.responsive.css中的以下代码调整屏幕大小来覆盖：10：

modal.fade.in {
  top: auto;
}

另一个建议是检查bootstrap-image-gallery.css文件,因为该库有一个应用于它的.modal-gallery类,而Twitter Bootstrap本身并不存在.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!