bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
问题1:如何去除bootstap中css中自带的overflow:hidden这个样式
今天遇见在bootstap中轮播图上的 附带图 片不能够显示出来,图片始终有一部分的高度 被隐藏了
后来通过控制台看见是有overflow:hidden这个样式 是由 <div class="carousel-inner">这个类造成的 如何解决
去除 carousel-inner这个类就行了
功能2:导航栏中的菜单实现平滑的过渡到对应的菜单区域
菜单栏的代码 使用锚点href来连接
<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>
你要放置的类容区域 需要使用id 和 class并且对应的都是相同的 page-top <section id="page-top" class="page-top">
你要写的内容区域 </section>
$(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');
}
})
bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容的更多相关文章
- vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Bootstrap 学习笔记 项目实战 响应式导航栏
导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法
今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...
- thymeleaf+bootstrap,onclick传参实现模态框中遇到的错误
一个困扰了N久的问题... 网上大多帖子是这么写的 onclick调javascript函数时,不能直接使用onclick=“editUser(${prod.id})”,这样会报错,需要修改成如下的格 ...
- bootstrap下modal模态框中webuploader控件按钮异常(无法点击)问题解决办法【转】
http://bbs.csdn.net/topics/391917552 具体如下: $(function () { var _$modal = $('#MyModal'); ...
- bootstrap模态框嵌套、tabindex属性、去除阴影
模态框嵌套 在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框:即模态框嵌套. 模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发 ...
- 带事件的Bootstrap模态框的使用2
模态框中显示一些基本的数据以及触发一些基本的JS函数 <%@ page language="java" contentType="text/html; charse ...
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
随机推荐
- 27-限制容器的 Block IO
Block IO 是另一种可以限制容器使用的资源.Block IO 指的是磁盘的读写,docker 可通过设置权重.限制 bps 和 iops 的方式控制容器读写磁盘的带宽,下面分别讨论. 注:目前 ...
- 面向对象~~类的成员: 私有成员,公有成员, 实例方法, 类方法, 静态方法, 属性(property), isinstance ,issubclass, 元类(type)
一 私有成员公有成员 公有成员: 在任何地方都能访问 私有成员: 只有在类的内部才能访问 类从加载时,只要遇到类中的私有成员,都会在私有成员前面加上_类名 二 实例方法 实例方法就是类的实例能够使用的 ...
- 数据可视化-matplotlib包
pyplot官网教程https://matplotlib.org/users/pyplot_tutorial.html #导入matplotlib的pyplot模块 import matplotlib ...
- .NET Core 中的命名问题:Startup 中的 ConfigureServices 与 Configure
一直不喜欢 Startup 中这两个可读性很比较差的糟糕命名 ConfigureServices 与 Configure.ConfigureServices 用于配置依赖注入以在运行时根据依赖关系创建 ...
- PHP递归函数return返回null的问题
前段时间在写递归函数的时候碰到个问题,返回值一直为null,这里记录一下. 写个小例子: /** * @param $i * @return mixed */ function recursion($ ...
- git 添加add readme.txt 报fatal: pathspec 'readme.txt' did not match any files错误
刚刚接触git版本管理器,跟着廖雪峰老师的git教程学习,在创建一个新的文件时,使用的是$ git add readme.txt指令,但是报出fatal: pathspec 'readme.txt' ...
- 通过组件实现相同group下字符串拼接
实现效果 组件处理流程如下: 1 使用Sorter组件对ColA进行排序 2 使用expression组件进行如下配置 3 使用aggregate组件进行如下配置 ColA ...
- python保存文字到文件中
使用encode方法即可,举例如下: #-*-coding:utf-8-*- def save(re, name): file = open("index_cut.txt", &q ...
- Protractor - 怎样运行
前一篇设置好了Protractor基本运行环境,那怎样运行Protractor呢? 要运行我们的测试脚本,至少需要配置好两个文件: ---Package.json ---conf.js Package ...
- MongoDB 修改数据Cannot change the size of a document in a capped collection: * != *"
MongoDB修改数据库数据的时候报错 原因: 集合被设置成了 固定集合 .固定集合的数据不能被修改.只能查找-删除-再插入,也就是创建集合的时候设置了capped参数为true 解决: 创建集合的时 ...