Bootstrap 进度条点（要点）答案

【问题标题】：Bootstrap Progress bar dots (bullet-point)Bootstrap 进度条点（要点）
【发布时间】：2022-02-16 21:52:46
【问题描述】：

我想使用 Bootstrap 制作一个进度条，该进度条上有一些点，如下图所示。我怎样才能做到这一点？或者我应该在哪里研究？

.progress {
  width: 278px;
  height: 7px;
  left: 597px;
  top: 489px;
}

.progress-bar {
  background: #007BFF;
  border-radius: 100px;
}

<html>
  <head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  </head>
  <body>
    <div class="card">
      <div class="card-body">
        <div class="justify-content-center">
          <div class="progress" style="width: 100%">
            <div class="progress progress-bar" aria-valuenow="15%" aria-valuemin="0%" aria-valuemax="100%"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

标签： html css bootstrap-4 progress-bar

【解决方案1】：

尝试使用范围栏

https://getbootstrap.com/docs/5.1/forms/range/

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <label for="customRange1" class="form-label">Range bars</label>
    <input type="range" class="form-range" id="customRange1" />
  </body>
</html>

【讨论】：

它不起作用，因为我想在进度条的开头和进度条的末尾使用那个点。我将问题编辑为更清楚。
你能更清楚一点，你为什么需要这个（开始和结束两个点）？
没有理由。起始点和结束点仅用于设计。
所以你只需要一个设计，没有特定的功能对吧？
对。对于中间点，我需要特定的功能，但对于两个极端部分，我不需要。