如何自定义 bootstrap 弹窗设计？

Question

我想在我也使用 node-js 的项目中使用 bootstrap popovers。问题是，当我想自定义它的设计时，我无法设置任何样式来更改启动弹出窗口的小箭头的颜色或边框。

您可以看到，在文档选项部分介绍的自定义 class 和 bootstrap template 的帮助下，我成功地更改了 .pop-class 自定义 [=37] 的颜色和设计=] 和 .popover-header 元素。但我无法理解 .popover-arrow 的哪些属性值必须更改为我的小箭头具有不同的颜色或边框？

/* define varible for getting button from html */
let myButton = document.getElementById("btnSearch");
/* define bootstrap popover */
var pop = new bootstrap.Popover(myButton, {
  trigger: "manual",
  title: "You must enter some text for searching in our site!",
  placement: "bottom",
  customClass: "pop-class"
});

/* if user clicks on button checks that the input search bar is "empty" or not, if it is empty "shows" the popover */
myButton.addEventListener("click", function() {
  let searchText = document.getElementById("search-bar").value;

  if (searchText.length < 1) {
    pop.show();
  }
});

/* if user clicks outside the search button this function hides the popover */
myButton.addEventListener("blur", function() {
  pop.hide();
});

:root {
    --color1: rgb(65, 129, 171);
    --color2: rgb(124, 201, 222);
    --color3: rgb(229, 131, 185);
    --color4: white;
    --color5: rgb(236, 215, 110);
}

.pop-class {
  color: var(--color3);
  border-color: var(--color3);
}

.pop-class .popover-header {
  background-color: var(--color4);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css" integrity="sha512-1fPmaHba3v4A7PaUsComSM4TBsrrRGs+/fv0vrzafQ+Rw+siILTiJa0NtFfvGeyY5E182SDTaF5PqP+XOHgJag==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- bootstrap search bar -->
<div class="container-fluid" id="parentAll">
  <div class="row">
    <div class="col-md-9 mx-auto">
      <div class="input-group my-5">
        <button id="btnSearch" class="btn btn-outline-secondary px-5" type="button">
                    <i id="iconSearch" class="bi bi-search"></i>
                </button>
        <input type="text" class="form-control form-control-lg" id="search-bar">
      </div>

    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

虽然在问题中添加了bootstrapCDN，但是我本地开发环境的输出和这里的输出不一样。所以我也把我的输出图像放在下面：

Answer 1

感谢@isherwood 在我的回答中提出的评论，我终于发现这些代码可以改变我的弹出框的边框设计：

/* define varible for getting button from html */
let myButton = document.getElementById("btnSearch");
/* define bootstrap popover */
var pop = new bootstrap.Popover(myButton, {
    trigger: "manual",
    title: "You must enter some text for searching in our site!",
    placement: "bottom",
    customClass: "pop-class"
});

/* if user clicks on button checks that the input search bar is "empty" or not, if it is empty "shows" the popover */
myButton.addEventListener("click", function() {
    let searchText = document.getElementById("search-bar").value;

    if (searchText.length < 1) {
        pop.show();
    }
});

/* if user clicks outside the search button this function hides the popover */
myButton.addEventListener("blur", function() {
    pop.hide();
});

:root {
    --color1: rgb(65, 129, 171);
    --color2: rgb(124, 201, 222);
    --color3: rgb(229, 131, 185);
    --color4: white;
    --color5: rgb(236, 215, 110);
}

/* ------------------------------- */
/* customizing the style of popover */
/* ------------------------------- */

.pop-class {
    color: var(--color3);
    border-radius: 0px;
    border: 3px solid var(--color3);
}

.pop-class .popover-header {
    background-color: var(--color4);
}

.pop-class .popover-header::before {
    border-bottom: transparent;
}

.pop-class .popover-arrow {
    top: calc(-.5rem - 2px);
}


.pop-class .popover-arrow::before {
    border-color: var(--color3);
    border-right-color: transparent;
    border-left-color: transparent;
}


.pop-class .popover-arrow::after {
    border-top-width: 3px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css" integrity="sha512-1fPmaHba3v4A7PaUsComSM4TBsrrRGs+/fv0vrzafQ+Rw+siILTiJa0NtFfvGeyY5E182SDTaF5PqP+XOHgJag==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- bootstrap search bar -->
<div class="container-fluid" id="parentAll">
  <div class="row">
    <div class="col-md-9 mx-auto">
      <div class="input-group my-5">
        <button id="btnSearch" class="btn btn-outline-secondary px-5" type="button">
                    <i id="iconSearch" class="bi bi-search"></i>
                </button>
        <input type="text" class="form-control form-control-lg" id="search-bar">
      </div>

    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

虽然我在回答中添加了bootstrap个CDN，但是stack overflow的输出和我本地的开发环境不一样。所以我将在这里添加我的最终输出图像：

如何自定义 bootstrap 弹窗设计？

How to customize bootstrap popover design?

css

twitter-bootstrap

customization