英文:
Changing Bootstrap 'loading' style progress bar to dot style progress bar
问题
我目前正在使用Bootstrap的“loading”样式进度条来表示调查的进度。进度条的代码如下:
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
但是,我想将进度条的样式更改为点样式,其中调查的每个步骤都由一个点表示。例如:
我已经查阅了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:
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
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:
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
我从头开始创建了它。如果您有任何问题,请随时提问。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const progress = document.querySelector('.progress');
let counter = 0;
next.addEventListener('click', function(){
if(counter <= 35){
progress.innerHTML += "⚫";
counter++;
}
})
previous.addEventListener('click', function(){
if(counter > 0){
const textNode = progress.firstChild;
textNode.data = textNode.data.slice(0, -1);
}
})
<!-- language: lang-css -->
.progress{
height: 25px;
border: 1px solid blue;
width: 100%;
margin-bottom: 10px;
}
<!-- language: lang-html -->
<div class="progress"></div>
<button class="previous">Previous</button>
<button class="next">Next</button>
<!-- 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 -->
const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const progress = document.querySelector('.progress');
let counter = 0;
next.addEventListener('click', function(){
if(counter <= 35){
progress.innerHTML += "⚫";
counter++;
}
})
previous.addEventListener('click', function(){
if(counter > 0){
const textNode = progress.firstChild;
textNode.data = textNode.data.slice(0, -1);
}
})
<!-- language: lang-css -->
.progress{
height: 25px;
border: 1px solid blue;
width: 100%;
margin-bottom: 10px;
}
<!-- language: lang-html -->
<div class="progress"></div>
<button class="previous">Previous</button>
<button class="next">Next</button>
<!-- end snippet -->
答案2
得分: 1
要创建一个点样式的进度条,您可以利用Bootstrap的flexbox功能,在容器内创建一系列的点。每个点代表调查中的一步,您可以动态更新点的类以显示进度。尝试以下代码。
<div class="container mt-5">
<div class="progress-dot-container">
<div class="progress-dot"></div>
<div class="progress-dot"></div>
<div class="progress-dot"></div>
<!-- 为调查中的每一步添加更多进度点 -->
</div>
<button id="nextButton">Next</button>
</div>
.progress-dot-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 200px; /* 根据您的喜好调整宽度 */
height: 20px; /* 根据您的喜好调整高度 */
background-color: #f1f1f1; /* 根据需要调整背景颜色 */
border-radius: 10px; /* 使容器呈圆角形状 */
}
.progress-dot {
width: 10px; /* 根据您的喜好调整点的大小 */
height: 10px; /* 根据您的喜好调整点的大小 */
border-radius: 50%;
background-color: #007bff; /* 根据您的喜好调整点的颜色 */
}
/* 添加一个类来突出显示进度 */
.progress-dot.active {
background-color: #00ff00; /* 更改颜色以表示活动进度 */
}
let currentStep = 0; // 我们从0开始,因为这是第一步
function updateProgressDots() {
const progressDots = document.querySelectorAll('.progress-dot');
for (let i = 0; i < progressDots.length; i++) {
if (i < currentStep) {
progressDots[i].classList.add('active');
} else {
progressDots[i].classList.remove('active');
}
}
}
function moveToNextStep() {
currentStep++;
// 确保currentStep不超过进度点的数量
const progressDots = document.querySelectorAll('.progress-dot');
currentStep = Math.min(currentStep, progressDots.length);
updateProgressDots();
}
// 添加事件监听器到“下一步”按钮
const nextButton = document.getElementById('nextButton');
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 -->
let currentStep = 0; // We start from 0 because it's the first step
function updateProgressDots() {
const progressDots = document.querySelectorAll('.progress-dot');
for (let i = 0; i < progressDots.length; i++) {
if (i < currentStep) {
progressDots[i].classList.add('active');
} else {
progressDots[i].classList.remove('active');
}
}
}
function moveToNextStep() {
currentStep++;
// Ensure currentStep doesn't exceed the number of progress dots
const progressDots = document.querySelectorAll('.progress-dot');
currentStep = Math.min(currentStep, progressDots.length);
updateProgressDots();
}
// Add event listener to the "Next" button
const nextButton = document.getElementById('nextButton');
nextButton.addEventListener('click', moveToNextStep);
<!-- language: lang-css -->
.progress-dot-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 200px; /* Adjust the width as per your preference */
height: 20px; /* Adjust the height as per your preference */
background-color: #f1f1f1; /* Adjust the background color if needed */
border-radius: 10px; /* To make the container rounded */
}
.progress-dot {
width: 10px; /* Adjust the dot size as per your preference */
height: 10px; /* Adjust the dot size as per your preference */
border-radius: 50%;
background-color: #007bff; /* Adjust the dot color as per your preference */
}
/* Add a class to highlight the progress */
.progress-dot.active {
background-color: #00ff00; /* Change the color to indicate active progress */
}
<!-- language: lang-html -->
<div class="container mt-5">
<div class="progress-dot-container">
<div class="progress-dot"></div>
<div class="progress-dot"></div>
<div class="progress-dot"></div>
<!-- Add more progress dots for each step in your survey -->
</div>
<button id="nextButton"">Next</button>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论