将Bootstrap的“loading”样式进度条更改为点样式进度条。

huangapple
go评论129阅读模式
英文:

Changing Bootstrap 'loading' style progress bar to dot style progress bar

问题

我目前正在使用Bootstrap的“loading”样式进度条来表示调查的进度。进度条的代码如下：

  1. <div class="progress" style="height: 20px;">
  2.   <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  3. </div>

但是，我想将进度条的样式更改为点样式，其中调查的每个步骤都由一个点表示。例如：

将Bootstrap的“loading”样式进度条更改为点样式进度条。

我已经查阅了Bootstrap文档并尝试了不同的CSS样式，但我无法找到一种直接的方法来实现点样式。是否有人可以指导我如何修改进度条以显示为点而不是实心条？非常感谢任何帮助或代码示例。

英文:

I am currently using a Bootstrap "loading" style progress bar to indicate the progress of a survey. The progress bar code looks like this:

  1. &lt;div class=&quot;progress&quot; style=&quot;height: 20px;&quot;&gt;
  2.   &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; style=&quot;width: 25%;&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
  3. &lt;/div&gt;

However, I would like to change the style of the progress bar to a dot style, where each step of the survey is represented by a dot. For example:

将Bootstrap的“loading”样式进度条更改为点样式进度条。

I have searched through Bootstrap documentation and tried different CSS styles, but I couldn't find a straightforward way to achieve the dot style. Can someone please guide me on how to modify the progress bar to display as dots rather than a solid bar? Any help or code examples would be greatly appreciated.

答案1

得分: 2

我从头开始创建了它。如果您有任何问题，请随时提问。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. const previous = document.querySelector('.previous');
  5. const next = document.querySelector('.next');
  6. const progress = document.querySelector('.progress');
  8. let counter = 0;
  10. next.addEventListener('click', function(){
  11.     if(counter <= 35){
  12.         progress.innerHTML += "⚫";
  13.         counter++;
  14.     }
  15. })
  17. previous.addEventListener('click', function(){
  18.     if(counter > 0){
  19.         const textNode = progress.firstChild;
  20.         textNode.data = textNode.data.slice(0, -1);
  21.     }
  22. })
  24. <!-- language: lang-css -->
  25. .progress{
  26.     height: 25px;
  27.     border: 1px solid blue;
  28.     width: 100%;
  29.     margin-bottom: 10px;
  30. }
  32. <!-- language: lang-html -->
  33. <div class="progress"></div>
  34. <button class="previous">Previous</button>
  35. <button class="next">Next</button>
  37. <!-- end snippet -->
英文:

I created it from scratch. If you have any question feel free to ask.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const previous = document.querySelector(&#39;.previous&#39;);
  2. const next = document.querySelector(&#39;.next&#39;);
  3. const progress = document.querySelector(&#39;.progress&#39;);
  5. let counter = 0;
  7. next.addEventListener(&#39;click&#39;, function(){
  8.     if(counter &lt;= 35){
  9.         progress.innerHTML += &quot;⚫&quot;;
  10.         counter++;
  11.     }
  12. })
  14. previous.addEventListener(&#39;click&#39;, function(){
  15.     if(counter &gt; 0){
  16.         const textNode = progress.firstChild;
  17.         textNode.data = textNode.data.slice(0, -1);
  18.     }
  19. })

<!-- language: lang-css -->

  1. .progress{
  2.     height: 25px;
  3.     border: 1px solid blue;
  4.     width: 100%;
  5.     margin-bottom: 10px;
  6. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;progress&quot;&gt;&lt;/div&gt;
  2. &lt;button class=&quot;previous&quot;&gt;Previous&lt;/button&gt;
  3. &lt;button class=&quot;next&quot;&gt;Next&lt;/button&gt;

<!-- end snippet -->

答案2

得分: 1

要创建一个点样式的进度条，您可以利用Bootstrap的flexbox功能，在容器内创建一系列的点。每个点代表调查中的一步，您可以动态更新点的类以显示进度。尝试以下代码。

  1. <div class="container mt-5">
  2.   <div class="progress-dot-container">
  3.     <div class="progress-dot"></div>
  4.     <div class="progress-dot"></div>
  5.     <div class="progress-dot"></div>
  6.     <!-- 为调查中的每一步添加更多进度点 -->
  7.   </div>
  9.   <button id="nextButton">Next</button>
  10. </div>
  1. .progress-dot-container {
  2.   display: flex;
  3.   justify-content: space-between;
  4.   align-items: center;
  5.   width: 200px; /* 根据您的喜好调整宽度 */
  6.   height: 20px; /* 根据您的喜好调整高度 */
  7.   background-color: #f1f1f1; /* 根据需要调整背景颜色 */
  8.   border-radius: 10px; /* 使容器呈圆角形状 */
  9. }
  11. .progress-dot {
  12.   width: 10px; /* 根据您的喜好调整点的大小 */
  13.   height: 10px; /* 根据您的喜好调整点的大小 */
  14.   border-radius: 50%;
  15.   background-color: #007bff; /* 根据您的喜好调整点的颜色 */
  16. }
  18. /* 添加一个类来突出显示进度 */
  19. .progress-dot.active {
  20.   background-color: #00ff00; /* 更改颜色以表示活动进度 */
  21. }
  1. let currentStep = 0; // 我们从0开始，因为这是第一步
  3. function updateProgressDots() {
  4.   const progressDots = document.querySelectorAll('.progress-dot');
  5.   for (let i = 0; i < progressDots.length; i++) {
  6.     if (i < currentStep) {
  7.       progressDots[i].classList.add('active');
  8.     } else {
  9.       progressDots[i].classList.remove('active');
  10.     }
  11.   }
  12. }
  14. function moveToNextStep() {
  15.   currentStep++;
  16.   // 确保currentStep不超过进度点的数量
  17.   const progressDots = document.querySelectorAll('.progress-dot');
  18.   currentStep = Math.min(currentStep, progressDots.length);
  19.   updateProgressDots();
  20. }
  22. // 添加事件监听器到“下一步”按钮
  23. const nextButton = document.getElementById('nextButton');
  24. nextButton.addEventListener('click', moveToNextStep);

请注意，以上代码示例中的HTML、CSS和JavaScript部分是为了创建点样式的进度条而提供的示例代码。您可以根据需要调整样式和功能。

英文:

To create a dot style progress bar, you can make use of Bootstrap's flexbox and create a series of dots within a container. Each dot represents a step in the survey, and you can update the class of the dots dynamically to show the progress.
Try this code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let currentStep = 0; // We start from 0 because it&#39;s the first step
  3. function updateProgressDots() {
  4.   const progressDots = document.querySelectorAll(&#39;.progress-dot&#39;);
  5.   for (let i = 0; i &lt; progressDots.length; i++) {
  6.     if (i &lt; currentStep) {
  7.       progressDots[i].classList.add(&#39;active&#39;);
  8.     } else {
  9.       progressDots[i].classList.remove(&#39;active&#39;);
  10.     }
  11.   }
  12. }
  14. function moveToNextStep() {
  15.   currentStep++;
  16.   // Ensure currentStep doesn&#39;t exceed the number of progress dots
  17.   const progressDots = document.querySelectorAll(&#39;.progress-dot&#39;);
  18.   currentStep = Math.min(currentStep, progressDots.length);
  19.   updateProgressDots();
  20. }
  22. // Add event listener to the &quot;Next&quot; button
  23. const nextButton = document.getElementById(&#39;nextButton&#39;);
  24. nextButton.addEventListener(&#39;click&#39;, moveToNextStep);

<!-- language: lang-css -->

  1. .progress-dot-container {
  2.   display: flex;
  3.   justify-content: space-between;
  4.   align-items: center;
  5.   width: 200px; /* Adjust the width as per your preference */
  6.   height: 20px; /* Adjust the height as per your preference */
  7.   background-color: #f1f1f1; /* Adjust the background color if needed */
  8.   border-radius: 10px; /* To make the container rounded */
  9. }
  11. .progress-dot {
  12.   width: 10px; /* Adjust the dot size as per your preference */
  13.   height: 10px; /* Adjust the dot size as per your preference */
  14.   border-radius: 50%;
  15.   background-color: #007bff; /* Adjust the dot color as per your preference */
  16. }
  18. /* Add a class to highlight the progress */
  19. .progress-dot.active {
  20.   background-color: #00ff00; /* Change the color to indicate active progress */
  21. }

<!-- language: lang-html -->

  1.   &lt;div class=&quot;container mt-5&quot;&gt;
  2.     &lt;div class=&quot;progress-dot-container&quot;&gt;
  3.       &lt;div class=&quot;progress-dot&quot;&gt;&lt;/div&gt;
  4.       &lt;div class=&quot;progress-dot&quot;&gt;&lt;/div&gt;
  5.       &lt;div class=&quot;progress-dot&quot;&gt;&lt;/div&gt;
  6.       &lt;!-- Add more progress dots for each step in your survey --&gt;
  7.     &lt;/div&gt;
  9.     &lt;button id=&quot;nextButton&quot;&quot;&gt;Next&lt;/button&gt;
  10.   &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月4日 02:56:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/76830931.html
  • bootstrap-4
  • bootstrap-5
  • css
  • frontend
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定