问题1:如何去除bootstap中css中自带的overflow:hidden这个样式

今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了

后来通过控制台看见是有overflow:hidden这个样式 是由  <div class="carousel-inner">这个类造成的  如何解决

去除 carousel-inner这个类就行了

功能2:导航栏中的菜单实现平滑的过渡到对应的菜单区域

  1. 菜单栏的代码  使用锚点href来连接  
    <div class="collapse" id="navbar">
  2. <ul class="nav navbar-nav navbar-right" id="menubox">
  3. <li><a class="nav-link page-scroll" href="#page-top">111</a></li>
  4. <li><a class="nav-link page-scroll" href="#features">222</a></li>
  5. <li><a class="nav-link page-scroll" href="#contact">333</a></li>
  6.  
  7. </ul>
  8. </div>
  1. 你要放置的类容区域 需要使用id class并且对应的都是相同的 page-top
  2.  
  3. <section id="page-top" class="page-top">
    你要写的内容区域
  4.  
  5. </section>

  

  1. $(function(){
  2. $('.nav-link').click(function(){//.nav-link是导航栏中的菜单
  3. //根据标签的href转换为id选择器,获取id元素所处的位置,并高度减50px(这里根据需要自由设置)
  4. $('html,body').animate({scrollTop: ($($(this).attr('href')).offset().top -50 )},1000);
  5. });

功能3:使用bootstrap 制作弹出层   动态跟换模态框中的内容

在按钮当中  data-toggle="modal"   data-target="#clickmore" 这两个属性是必须的  

data-target="#clickmore"中的值必须和模态框中的的id值一样  参数详细你可以去菜鸟教程

  1. <p><a class="navy-link" href="#" role="button" data-toggle="modal" data-target="#clickmore">了解更多&raquo;</a></p> //这是按钮
  2.  
  3. <div class="modal fade" id="clickmore" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  4. <div class="modal-dialog">
  5. <div class="modal-content">
  6. <div class="modal-body">
  7. <div class="showstep"><img src="../../../static/img/showg/showg1.gif" class="img-fluid" alt="dashboard" id="showStep"> </div>
  8. </div>
  9.  
  10. <div class="modal-footer">
  11. <button type="button" class="btn btn-default" data-dismiss="modal">关闭
  12. </button>
  13.  
  14. </div>
  15. </div>
  16. </div>
  17. </div>

动态切换模态框中的内容

  1. // 演示步骤的代码 $('#pic')
  2. $(".navy-link").click(function(){
  3. var indexg = $(".navy-link").index(this);
  4. if(indexg==1){
  5. $("#showStep").attr("src",'../../../static/img/showg/showg2.gif')
  6. }else if(indexg==2){
  7. $("#showStep").attr("src",'../../../static/img/showg/showg3.gif');
  8. }else if(indexg==3){
  9. $("#showStep").attr("src",'../../../static/img/showg/showg4.gif');
  10. }
  11. })

bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容的更多相关文章

  1. vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  2. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  3. Bootstrap 学习笔记 项目实战 响应式导航栏

    导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  4. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

  5. thymeleaf+bootstrap,onclick传参实现模态框中遇到的错误

    一个困扰了N久的问题... 网上大多帖子是这么写的 onclick调javascript函数时,不能直接使用onclick=“editUser(${prod.id})”,这样会报错,需要修改成如下的格 ...

  6. bootstrap下modal模态框中webuploader控件按钮异常(无法点击)问题解决办法【转】

    http://bbs.csdn.net/topics/391917552 具体如下:   $(function () {         var _$modal = $('#MyModal');    ...

  7. bootstrap模态框嵌套、tabindex属性、去除阴影

    模态框嵌套 在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框:即模态框嵌套. 模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发 ...

  8. 带事件的Bootstrap模态框的使用2

    模态框中显示一些基本的数据以及触发一些基本的JS函数 <%@ page language="java" contentType="text/html; charse ...

  9. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

随机推荐

  1. SQL Server通过函数把逗号分隔的字符串拆分成数据列表的脚本-干货

    CREATE FUNCTION [dbo].[Split](@separator VARCHAR(64)=',',@string NVARCHAR(MAX))  RETURNS @ResultTab ...

  2. (办公)访问其他系统接口httpClient,异步访问

    访问其他系统接口httpClient,但是都是同步的,同步意味当前线程是阻塞的,只有本次请求完成后才能进行下一次请求;异步意味着所有的请求可以同时塞入缓冲区,不阻塞当前的线程; httpClient请 ...

  3. shiro授权、注解式开发

    在ShiroUserMapper.xml中新增内容 <select id="getRolesByUserId" resultType="java.lang.Stri ...

  4. RabbitMQ默认情况下不保证每次都把消息传递

    有意思,RabbitMQ默认情况下是不保证每次都把消息传递的,很多情况下我们都是这样发送数据的,    channel.BasicPublish(QUEUE_NAME, String.Empty, n ...

  5. Filter 原理

    二.Filter 原理 2.1 Filter 概述 Filter(过滤器)是 DirectShow 中最基本的概念.DirectShow 是通过 Filter Graph 来管理 Filter 的.F ...

  6. 瓜子IM智能客服系统的数据架构设计(整理自现场演讲)

    本文由ITPub根据封宇在[第十届中国系统架构师大会(SACC2018)]现场演讲内容整理而成. 1.引言 瓜子业务重线下,用户网上看车.预约到店.成交等许多环节都发生在线下.瓜子IM智能客服系统的目 ...

  7. vue动画实现方式

    vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  8. 前端框架Easyui学习积累

    前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...

  9. PHP判断设备访问来源

    /** * 判断用户请求设备是否是移动设备 * @return bool */ function isMobile() { //如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (is ...

  10. docker 集群管理gui

    k8s: https://www.rancher.cn/ swarm: https://github.com/dockersamples/docker-swarm-visualizer https:/ ...