Bootstrap 4 中的自定義切換器。無法更改背景顏色和邊框顏色

Question

對不起各位，我是新手。 Dreamweaver 中的 Bootstrap 4。

通過試錯和此處的一些幫助，我已經設法解決了大部分問題。

現在，對於自定義切換器。 我找到了可以更改顏色的地方。 不過好像只有一些顏色。

我的線條是黃色的，但我不能將邊框設為黃色，也不能將按鈕背景設為#0A0A0A。

在我看來，好像我已經遵循了我發現的指導方針，但也許我的一些試驗和錯誤把事情搞砸了？ 黃線藍框白底小漢堡截圖

這是我使用的 CSS：

.custom-toggler .navbar-toggler-icon {

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(243,203,4,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

}

//change toggler color

.custom-toggler.navbar-toggler {
    border-color: #ffcc00;
}
    
//end change toggler color but I need to change the toggler bg color

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.navbar-toggler:hover, .navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

這是HTML

 </head>
  <body>
<div class="container align-content-center"><img src="images/banner7.png" alt="" width="100%" lass="img-fluid"/></div>
<div class="container-fluid">
    <div class="container">
       <nav class="navbar navbar-expand-sm bg-custom navbar-custom">
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent1">
            <ul class="nav justify-content-center">
              <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li>

我是否需要復制和調整 nav-light 和/或 nav-dark 的所有實例以制作完整的 nav-custom 集？

我發誓我會 go 在 W3 學校學習更多，但我真的很想盡快建立這個網站，這樣我就可以在找工作時留下更好的印象。

謝謝，
克萊爾

Answer 1

總體而言，您只需向按鈕添加兩個自定義類即可更改切換器 SVG 樣式：

.custom-toggler .navbar-toggler {
   color: rgba(255, 255, 255, 0.5);
   border-color: #f3cb06;
   background-color: #0A0A0A;
} 

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(243,203,6,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

不要忘記將自定義 class 添加到您的 html：

IE

<nav class="navbar navbar-expand-lg custom-toggler" style="background-color: rgb(0, 0, 0);">

如果您還想更改按鈕輪廓，請修改button:focus class。

示例 1。

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;  
outline: revert; 
}

要么

示例 2

button:focus {
  border: 1px solid black;
  outline-style:ridge;
  outline-color: grey;
}

Answer 2

按鈕的外觀不同於它第一次出現時和我單擊它之后。 起初，它是硬角，邊界上沒有白色。 然后它在邊界處用白色圓化，並且在第二個 state 中邊界從未變黃。代碼中指定的那些特征在哪里？ 它甚至叫什么，點擊后 state？

再次感謝！

預點擊

點擊后

Bootstrap 4 中的自定義切換器。無法更改背景顏色和邊框顏色

問題描述

1 個解決方案

解決方案1
0 2022-12-28 02:01:10

解決方案2
0 2022-12-28 13:35:46

Bootstrap 4 中的自定義切換器。無法更改背景顏色和邊框顏色

問題描述

1 個解決方案

解決方案1 0 2022-12-28 02:01:10

解決方案2 0 2022-12-28 13:35:46

解決方案1
0 2022-12-28 02:01:10

解決方案2
0 2022-12-28 13:35:46