个人中心
gpt4 book ai didi

html - 自定义 Bootstrap 4.1 Toggler 动画

转载 作者：行者123 更新时间：2023-11-28 05:13:04 25 4
gpt4 key购买 nike

我正在尝试将自定义菜单切换添加到 Bootstrap 4.0 的导航栏菜单。我使用的代码来自 Codeply HERE .我正在尝试将 X 切换样式应用于我网站的 Bootstrap 导航栏。这是我目前拥有的。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Meta tag for responsive webpages -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <!-- Stylesheet for Bootstrap Minimized -->
    <link rel="stylesheet" href="CSS/main.css"> <!-- Stylesheet for Main CSS -->
    <link rel="stylesheet" href="CSS/Bootstrap-Overrides.css"> <!-- Stylesheet for Bootstrap Overrides -->
</head>  
<body>
    <nav class="navbar navbar-expand-md navbar-custom">
        <a href="/" class="navbar-brand"><img src="Blank" alt="blank" height="80" width="185"></a>
    <div class="container-fluid">  
            <div class="row">
                <div class="col-sm-4">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle x collapsed" data-toggle="collapse" data-target="#navbar-collapse-x">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse" id="navbar-collapse-x">
                            <ul class="nav navbar-nav navbar-right">
                            <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
                            <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
                            </ul>
                        </div> .navbar-collapse 
                    </nav>
                </div>
            </div>
        </div>
        <div class="navbar-collapse collapse" id="navbar2">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Info<span class="sr-only">Information Section</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services<span class="sr-only">Services Section</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact<span class="sr-only">Contact Section</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">FAQ<span class="sr-only">Frequently Asked Questions</span></a>
                </li>
            </ul>
        </div>
    </nav>

我在这里做错了什么？？这看起来像个狗屎节目，在我添加自定义切换之前看起来非常好......不确定为什么它不起作用？

最佳答案

如果您使用最新的 bootstrap v4.0，那么 codepen 代码将无法工作，因为它使用的是 bootstrap v3.3。

bootstrap 4.0 导航栏文档非常好。很多例子。

https://getbootstrap.com/docs/4.0/components/navbar/

当然一切皆有可能，这是一个 bootstrap 4 解决方案。

参见 sass fiddle... https://jsfiddle.net/joshmoto/7syc3hfu/1/ 

/* remove navbar button stying */
.navbar-toggler {
  background: none;
  border: none;

  /* remove the blue outline when active or focused */
  &:active, &:focus {
    outline: 0;
  }

  /* basic styles for each icon bar */
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin: 4px 0 4px 0;
    transition: all 0.2s;

    /* custom .navbar-dark .icon-bar background */
    .navbar-dark & {
      background: #ffffff;

    }

    /* .navbar open top .icon-bar rotated down 45° */
    &:nth-of-type(1) {
      transform: rotate(45deg);
      transform-origin: 10% 10%;
    }

    /* .navbar open middle .icon-bar invisible */
    &:nth-of-type(2) {
      opacity: 0;
      filter: alpha(opacity=0);
    }

    /* .navbar open bottom .icon-bar rotated up 45° */
    &:nth-of-type(3) {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
    }

  }

  /* styles for when .navbar is closed */
  &.collapsed {

    .icon-bar {

      /* .navbar closed top .icon-bar no rotation - straight */
      &:nth-of-type(1) {
          transform: rotate(0);
      }

      /* .navbar open middle .icon-bar visible */
      &:nth-of-type(2) {
          opacity: 1;
          filter: alpha(opacity=100);
      }

      /* .navbar open bottom .icon-bar no rotation - straight */
      &:nth-of-type(3) {
          transform: rotate(0);
      }

    }

  }

}

sass 输出这个 css。

.navbar-toggler {
  background: none;
  border: none;
}

.navbar-toggler:active,
.navbar-toggler:focus {
  outline: 0;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin: 4px 0 4px 0;
  transition: all 0.2s;
}

.navbar-dark .navbar-toggler .icon-bar {
  background: #ffffff;
}

.navbar-toggler .icon-bar:nth-of-type(1) {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler .icon-bar:nth-of-type(2) {
  opacity: 0;
  filter: alpha(opacity=0);
}

.navbar-toggler .icon-bar:nth-of-type(3) {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
  transform: rotate(0);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
  transform: rotate(0);
}

如果您需要 css 版本，请参阅此 fiddle 。 https://jsfiddle.net/joshmoto/9r8ux6p5/

关于html - 自定义 Bootstrap 4.1 Toggler 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51488523/

25 4 0
文章推荐： javascript - 点击打印页面后，CSS 与实际页面不同
文章推荐： javascript - 操作对象数组时 For 循环未按预期工作
文章推荐： c++ - 使用下推自动化创建语法树？
文章推荐： javascript - 将单词拆分为字母并获取每个字母的数据？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com