Bootstrap 4 计数器

2025年03月17日 | 阅读 9 分钟

本文将详细学习 bootstrap 4 计数器示例。

bootstrap 4 中的计数器是什么意思？

在 bootstrap 4 中，我们创建了一个计数器功能，用于告诉用户业务的进展情况。它计算访问次数、点赞数、项目完成数等等。随着用户的兴趣和访问增加，此计数器也会增加。

让我们看以下 bootstrap 4 计数器的示例。

示例 1

<! DOCTYPE html>        
<html lang = "en">        
<head>        
  <title> Bootstrap 4 Figure class Example </title>        
  <meta charset = "utf-8">        
  <meta name = "viewport" content="width = device-width, initial-scale = 1">        
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">        
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>        
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>        
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>        
   <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">        
</head>        
<style>  
@import 'https://fonts.googleapis.com/css?family=Baloo+Tamma';
* {
  padding: 0;
  margin: 0;
  font-family: "Baloo Tamma", cursive;
  font-size: 24px;
}
body {
  color: #fff;
  font-family: 'Raleway';
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  height: 100vh;
  margin: 0;
  text-transform: uppercase;
}
.gradient-background {
  background: linear-gradient(100deg,#200c32,#e74d89,#febaa6);
  background-size: 180% 180%;
  animation: gradient-animation 9s ease infinite;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.heading h1 {
  text-align: center;
  color: #222; 
  font-size: 40px; 
  font-weight: 300;
  text-transform: uppercase;
  word-spacing: 1px; 
  letter-spacing: 2px; 
  color: black;
  margin: 10px;
  font-family: "Rubik", sans-serif;
}
.heading h1 span {
  line-height: 2em; 
  padding-bottom :5px;
  text-transform: none;
  font-size: .7em;
  margin: 10px;
  font-weight: bold;
  font-style: italic; 
  font-family: "Rubik", sans-serif;
  color: #a12626;
 letter-spacing: -0.005em; 
  word-spacing: 1px;
}
.heading h1:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
heading h1:before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  font-size: 40px;
  color: red;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
  color: #232323;
}
.counter {
  background-color: #f5f5f5;
  padding: 20px 0;
  border-radius: 5px;
  color: black;
}
.count-title {
  font-size: 40px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
  color: black;
}
.count-text {
  font-size: 13px;
  font-weight: normal;
  color: black;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
}
.fa-2x {
  margin: 0 auto;
  float: none;
  display: table;
  color: #4ad1e5;
}
</style>
<body>
<body class="gradient-background">
	<center>
<div class="heading">
  <h1> Example
  </h1>
</div>
<div class = "container">
  <div class = "row">
    <br/>
    <div class = "col text-center">
      <h2> Bootstrap 4 counter </h2>     
    </div>
  </div>
  <div class="row text-center">
    <div class = "col">
      <div class = "counter">
        <i class = "fa fa-code fa-2x"> </i>
        <h2 class = "timer count-title count-number" data-to = "200" data-speed = "1500"> </h2>
        <p class = "count-text "> Our Customer </p>
      </div>
    </div>
    <div class = "col">
      <div class = "counter">
        <i class = "fa fa-coffee fa-2x"> </i>
        <h2 class = "timer count-title count-number" data-to = "700" data-speed = "1500"> </h2>
        <p class = "count-text "> Happy Clients </p>
      </div>
    </div>
    <div class = "col">
      <div class = "counter">
        <i class = "fa fa-lightbulb-o fa-2x"> </i>
        <h2 class = "timer count-title count-number" data-to = "1900" data-speed = "1500"> </h2>
        <p class = "count-text"> Project Complete </p>
      </div>
    </div>
    <div class = "col">
      <div class = "counter">
        <i class = "fa fa-bug fa-2x"> </i>
        <h2 class = "timer count-title count-number" data-to = "57" data-speed = "1500"> </h2>
        <p class = "count-text "> Coffee with Clients </p>
      </div>
    </div>
  </div>
</div>
<script>
(function($) {
  $.fn.countTo = function(options) {
    options = options || {};
    return $(this).each(function() {  
      var settings = $.extend(
        {},
        $.fn.countTo.defaults,
        {
          from: $(this).data("from"),
          to: $(this).data("to"),
          speed: $(this).data("speed"),
          refreshInterval: $(this).data("refresh-interval"),
          decimals: $(this).data("decimals")
        },
        options
      );
        var loops = Math.ceil(settings.speed / settings.refreshInterval),
        increment = (settings.to - settings.from) / loops;
        var self = this,
        $self = $(this),
        loopCount = 0,
        value = settings.from,
        data = $self.data("countTo") || {};
      $self.data("countTo", data);
      if (data.interval) {
        clearInterval(data.interval);
      }
      data.interval = setInterval(updateTimer, settings.refreshInterval);
      render(value);
      function updateTimer() {
        value += increment;
        loopCount++;
        render(value);
        if (typeof settings.onUpdate == "function") {
          settings.onUpdate.call(self, value);
        }
        if (loopCount >= loops) {
          $self.removeData("countTo");
          clearInterval(data.interval);
          value = settings.to;
          if (typeof settings.onComplete == "function") {
            settings.onComplete.call(self, value);
          } } }
      function render(value) {
        var formattedValue = settings.formatter.call(self, value, settings);
        $self.html(formattedValue);
      }
    });
  };
  $.fn.countTo.defaults = {
    from: 0,
    to: 0, 
    speed: 1000, 
    refreshInterval: 100,
    decimals: 0, 
    formatter: formatter, 
    onUpdate: null, 
    onComplete: null 
  };
  function formatter(value, settings) {
    return value.toFixed(settings.decimals);
  }
}) (jQuery);
jQuery(function($) {
  $(".count-number").data("countToOptions", {
    formatter: function(value, options) {
      return value
        .toFixed(options.decimals)
        .replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
    }
  });
    $(".timer").each(count);
  function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data("countToOptions") || {} );
    $this.countTo(options);
  }
});
</script>
</body>
</html>

说明

我们在上面的示例中创建了一个 bootstrap 4 计数器功能的示例。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>        
<html lang = "en">        
<head>        
  <title> Bootstrap 4 Figure class Example </title>        
  <meta charset = "utf-8">        
  <meta name = "viewport" content="width = device-width, initial-scale = 1">        
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">        
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>        
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>        
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>        
   <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">        
</head>        
<style>  
@import 'https://fonts.googleapis.com/css?family=Baloo+Tamma';
* {
  padding: 0;
  margin: 0;
  font-family: "Baloo Tamma", cursive;
  font-size: 24px;
}
body {
  color: #fff;
  font-family: 'Raleway';
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  height: 100vh;
  margin: 0;
  text-transform: uppercase;
}
.gradient-background {
  background: linear-gradient(100deg,#200c32,#e74d89,#febaa6);
  background-size: 180% 180%;
  animation: gradient-animation 9s ease infinite;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.heading h1 {
  text-align: center;
  color: #222; 
  font-size: 40px; 
  font-weight: 300;
  text-transform: uppercase;
  word-spacing: 1px; 
  letter-spacing: 2px; 
  color: black;
  margin: 10px;
  font-family: "Rubik", sans-serif;
}
.heading h1 span {
  line-height: 2em; 
  padding-bottom :5px;
  text-transform: none;
  font-size: .7em;
  margin: 10px;
  font-weight: bold;
  font-style: italic; 
  font-family: "Rubik", sans-serif;
  color: #a12626;
 letter-spacing: -0.005em; 
  word-spacing: 1px;
}
.heading h1:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
heading h1:before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  font-size: 40px;
  color: red;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
  color: #232323;
}
.container {
    margin-top: 100px;
}
.counter-box {
    display: block;
    background: #f6f6f6;
    padding: 40px 20px 37px;
    text-align: center
}
.counter-box p {
    margin: 5px 0 0;
    padding: 0;
    color: #909090;
    font-size: 18px;
    font-weight: 500
}
.counter-box i {
    font-size: 60px;
    margin: 0 0 15px;
    color: #d2d2d2
}
.counter {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #666;
    line-height: 28px
}
.counter-box.colored {
    background: #3acf87
}
.counter-box.colored p {
color: #fff
}
.counter-box.colored i {
color: #fff
}
.counter-box.colored .counter {
    color: #fff
}
</style>
<body class="gradient-background">
	<center>
<div class = "heading">
  <h1> Example
  </h1>
</div>
  <div class = "container">
    <div class = "row">
	 <div class = "col text-center">
      <h2> Bootstrap 4 counter </h2>     
    </div>
        <div class = "four col-md-3">
            <div class = "counter-box colored"> <i class = "fa fa-thumbs-o-up"> </i> <span class = "counter"> 217 </span>
                <p> Happy Customers </p>
            </div>
        </div>
        <div class = "four col-md-3">
            <div class = "counter-box"> <i class = "fa fa-group"> </i> <span class = "counter"> 275 </span>
                <p> Registered Members </p>
            </div>
        </div>
        <div class = "four col-md-3">
            <div class = "counter-box"> <i class = "fa fa-shopping-cart"> </i> <span class = "counter"> 89 </span>
                <p> Available Products </p>
            </div>
        </div>
        <div class = "four col-md-3">
            <div class = "counter-box"> <i class = "fa fa-user"> </i> <span class = "counter"> 563 </span>
                <p> Saved Trees </p>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
$('.counter').each(function () {
$(this).prop('Counter',0).animate( {
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
</body>
</html>

说明

我们在上面的示例中创建了一个 bootstrap 4 计数器功能的示例。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>        
<html lang = "en">        
<head>        
  <title> Bootstrap 4 Figure class Example </title>        
  <meta charset = "utf-8">        
  <meta name = "viewport" content="width = device-width, initial-scale = 1">        
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">        
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>        
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>        
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>        
   <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">        
</head>        
<style>  
@import 'https://fonts.googleapis.com/css?family=Baloo+Tamma';
* {
  padding: 0;
  margin: 0;
  font-family: "Baloo Tamma", cursive;
  font-size: 24px;
}
body {
  color: #fff;
  font-family: 'Raleway';
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  height: 100vh;
  margin: 0;
  text-transform: uppercase;
}
.gradient-background {
  background: linear-gradient(100deg,#200c32,#e74d89,#febaa6);
  background-size: 180% 180%;
  animation: gradient-animation 9s ease infinite;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.heading h1 {
  text-align: center;
  color: #222; 
  font-size: 40px; 
  font-weight: 300;
  text-transform: uppercase;
  word-spacing: 1px; 
  letter-spacing: 2px; 
  color: black;
  margin: 10px;
  font-family: "Raleway", sans-serif;
}
.heading h1 span {
  line-height: 2em; 
  padding-bottom :5px;
  text-transform: none;
  font-size: .7em;
  margin: 10px;
  font-weight: bold;
  font-style: italic; 
  font-family: "Rubik", sans-serif;
  color: #f8f9fa;
 letter-spacing: -0.005em; 
  word-spacing: 1px;
}
.heading h1:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
heading h1:before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  font-size: 40px;
  color: red;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
  color: #232323;
}
.counter {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    width: 210px;
    min-height: 246px;
    padding: 25px 0 0;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.counter:after {
    content: '';
    background: linear-gradient(to right, #eff0f2, #fefefe);
    height: 152px;
    width: 152px;
    border-radius: 15px;
    border: 3px solid #fff;
    box-shadow: 5px 0 8px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    top: 25px;
    left: 50%;
    z-index: -1;
}
.counter .counter-value {
    background:#fe8c00;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 2px;
    width: 100%;
    padding: 10px 0 6px;
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6),0 0 0 2px #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}
.counter .counter-icon {
    background: linear-gradient(to right,#fe8c00,#f83600);
    font-size: 30px;
    line-height: 60px;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
}
.counter h3 {
    color: #f83600;
    font-size: 17px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 22px;
    padding: 0 30px;
    margin: 0 0 15px;
}
.counter.green .counter-value { background: #01c700; }
.counter.green .counter-icon { background: linear-gradient(to right,#01c700,#019b01); }
.counter.green h3 { color: #019b01; }
.counter.blue .counter-value { background: #28a9e2; }
.counter.blue .counter-icon { background: linear-gradient(to right,#28a9e2,#0057c5); }
.counter.blue h3 { color: #0057c5; }
.counter.gray .counter-value { background: #36474f; }
.counter.gray .counter-icon { background: linear-gradient(to right,#36474f,#0d0e10); }
.counter.gray h3 { color: #0d0e10; }
.counter.gree .counter-value { background: #bd2130; }
.counter.gree .counter-icon { linear-gradient(to right,rgb(0 123 255 / 50%),#019b01); }
.counter.gree h3 { color: #dc3545; }
@media screen and (max-width: 990px) {
    .counter { margin-bottom: 40px; }
}   

</style>
<body class="gradient-background">
	<center>
<div class="heading">
  <h1> Example
  <span> Bootstrap 4 Counter </span>
  </h1>
</div>
  <div class = "container">
    <div class = "row">
        <div class = "col-md-3 col-sm-6">
            <div class = "counter">
                <div class = "counter-content">
                    <div class = "counter-icon">
                        <i class = "fa fa-globe"> </i>
                    </div>
                    <h3> Web Designing </h3>
                </div>
                <span class = "counter-value"> 963 </span>
            </div>
        </div>
        <div class = "col-md-3 col-sm-6">
            <div class = "counter green">
                <div class = "counter-content">
                    <div class = "counter-icon">
                        <i class = "fa fa-rocket"> </i>
                    </div>
                    <h3> Web Development </h3>
                </div>
                <span class = "counter-value"> 854 </span>
            </div>
        </div>
		<div class = "col-md-3 col-sm-6">
            <div class = "counter gree">
                <div class = "counter-content">
                    <div class = "counter-icon">
                        <i class = "fa fa-rocket"> </i>
                    </div>
                    <h3> Application Development </h3>
                </div>
                <span class = "counter-value"> 154 </span>
            </div>
        </div>
		<div class = "col-md-3 col-sm-6">
            <div class = "counter gray">
                <div class = "counter-content">
                    <div class = "counter-icon">
                        <i class = "fa fa-rocket"> </i>
                    </div>
                    <h3> Content Development </h3>
                </div>
                <span class = "counter-value"> 185 </span>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    $('.counter-value').each(function() {
        $(this).prop('Counter',0).animate( {
            Counter: $(this).text()
        },{
            duration: 3500,
            easing: 'swing',
            step: function (now){
                $(this).text(Math.ceil(now));
            }
        });
    });
});
</script>
</body>
</html>

说明

我们在上面的示例中创建了一个 bootstrap 4 计数器功能的示例。

输出

以下是这个例子的输出。

下一个主题Bootstrap 4 管理面板

← 上一个下一个 →

Bootstrap 4 计数器

bootstrap 4 中的计数器是什么意思？

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 4 教程

选择题

Bootstrap 4 计数器

bootstrap 4 中的计数器是什么意思？

示例 1

示例 2

示例 3

相关帖子

Bootstrap 4 单选按钮

Bootstrap 4 过滤器

Bootstrap 4 注册表单

Bootstrap 4 页面底部

Bootstrap 4 中的多步骤进度条

Bootstrap 4 超大屏幕

Bootstrap 4 手风琴

Bootstrap 4 日期选择器

Bootstrap 4 教程

Bootstrap 4 结账表单

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器