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)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
随机推荐
- SQL Server通过函数把逗号分隔的字符串拆分成数据列表的脚本-干货
CREATE FUNCTION [dbo].[Split](@separator VARCHAR(64)=',',@string NVARCHAR(MAX)) RETURNS @ResultTab ...
- (办公)访问其他系统接口httpClient,异步访问
访问其他系统接口httpClient,但是都是同步的,同步意味当前线程是阻塞的,只有本次请求完成后才能进行下一次请求;异步意味着所有的请求可以同时塞入缓冲区,不阻塞当前的线程; httpClient请 ...
- shiro授权、注解式开发
在ShiroUserMapper.xml中新增内容 <select id="getRolesByUserId" resultType="java.lang.Stri ...
- RabbitMQ默认情况下不保证每次都把消息传递
有意思,RabbitMQ默认情况下是不保证每次都把消息传递的,很多情况下我们都是这样发送数据的, channel.BasicPublish(QUEUE_NAME, String.Empty, n ...
- Filter 原理
二.Filter 原理 2.1 Filter 概述 Filter(过滤器)是 DirectShow 中最基本的概念.DirectShow 是通过 Filter Graph 来管理 Filter 的.F ...
- 瓜子IM智能客服系统的数据架构设计(整理自现场演讲)
本文由ITPub根据封宇在[第十届中国系统架构师大会(SACC2018)]现场演讲内容整理而成. 1.引言 瓜子业务重线下,用户网上看车.预约到店.成交等许多环节都发生在线下.瓜子IM智能客服系统的目 ...
- vue动画实现方式
vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- 前端框架Easyui学习积累
前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...
- PHP判断设备访问来源
/** * 判断用户请求设备是否是移动设备 * @return bool */ function isMobile() { //如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (is ...
- docker 集群管理gui
k8s: https://www.rancher.cn/ swarm: https://github.com/dockersamples/docker-swarm-visualizer https:/ ...