问题1：如何去除bootstap中css中自带的overflow：hidden这个样式
今天遇见在bootstap中轮播图上的 附带图 片不能够显示出来，图片始终有一部分的高度 被隐藏了
后来通过控制台看见是有overflow：hidden这个样式 是由 <div class="carousel-inner">这个类造成的 如何解决
去除 carousel-inner这个类就行了
功能2：导航栏中的菜单实现平滑的过渡到对应的菜单区域
菜单栏的代码 使用锚点href来连接 <br><div class="collapse" id="navbar"> <ul class="nav navbar-nav navbar-right" id="menubox"> <li><a class="nav-link page-scroll" href="#page-top">111</a></li> <li><a class="nav-link page-scroll" href="#features">222</a></li> <li><a class="nav-link page-scroll" href="#contact">333</a></li> </ul> </div>
|
$(function(){ $('.nav-link').click(function(){//.nav-link是导航栏中的菜单 //根据标签的href转换为id选择器，获取id元素所处的位置，并高度减50px（这里根据需要自由设置） $('html,body').animate({scrollTop: ($($(this).attr('href')).offset().top -50 )},1000); });
功能3：使用bootstrap 制作弹出层 动态跟换模态框中的内容
在按钮当中 data-toggle="modal" data-target="#clickmore" 这两个属性是必须的
data-target="#clickmore"中的值必须和模态框中的的id值一样 参数详细你可以去菜鸟教程
<p><a class="navy-link" href="#" role="button" data-toggle="modal" data-target="#clickmore">了解更多»</a></p> //这是按钮 <div class="modal fade" id="clickmore" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="showstep"><img src="../../../static/img/showg/showg1.gif" class="img-fluid" alt="dashboard" id="showStep"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> </div> </div> </div> </div>
动态切换模态框中的内容
// 演示步骤的代码 $('#pic') $(".navy-link").click(function(){ var indexg = $(".navy-link").index(this); if(indexg==1){ $("#showStep").attr("src",'../../../static/img/showg/showg2.gif') }else if(indexg==2){ $("#showStep").attr("src",'../../../static/img/showg/showg3.gif'); }else if(indexg==3){ $("#showStep").attr("src",'../../../static/img/showg/showg4.gif'); } })
