Question

我有一个进度条列表，我希望看到动画。我在使用maxcdn时看到它们是动画的，但如果我使用本地引导程序引用则不会。请帮我理解错误...

＆＃13;

.resume {
    width: 816px;
    margin: 48px 48px 48px 48px;
    font-size: 13px;
    line-height: 16px;
}
.header {
    text-align: center;
    line-height: 4px;
}
.header hr {
    margin: 5px;
}
.name {
    text-transform: uppercase;
    font-size: 32px;
}
.contact p {
    margin: 10px;
}
.summary h2, .skills h2, .professionalhistory h2, .education h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.skills {
    line-height: 13px;
}
.skills p {
    margin: 8px 8px 8px 8px;
}
.progress {
    background-color: #BCBEBF;
    text-align: left;
    position: relative;
    height: 13px;
    margin: 8px 8px 8px 8px;
}
.progress-bar {
    background-color: #323232;
    text-align: left;
    line-height: 13px;
    padding: 1px 10px 2px;
}
.progress-bar span {
    padding: 1px 10px 2px;
    position: absolute;
    z-index: 2;
    color: white;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
}
.employer {
    font-size: 16px;
    font-weight: bold;
}
.position {
    text-decoration: underline;
}
.description {
    width: 95%; 
    margin-left: 12px;
}
.results {
    font-weight: bold;
}
.titles {
    text-decoration: underline;
}

＆＃13;

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <p>Microsoft Office SharePoint Services</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:53.85%">
      <span>7 Years</span>
    </div>
  </div>
</body>

＆＃13;

在我使用maxcdn的片段中，但是如果我删除了maxcdn，进度条仍会显示但不动画。我不知道为什么。启动版本为4.0.0 alpha 6.

Answer 1

In Bootstrap 4您需要将班级progress-bar-animated添加到progress-bar元素。

.resume {
    width: 816px;
    margin: 48px 48px 48px 48px;
    font-size: 13px;
    line-height: 16px;
}
.header {
    text-align: center;
    line-height: 4px;
}
.header hr {
    margin: 5px;
}
.name {
    text-transform: uppercase;
    font-size: 32px;
}
.contact p {
    margin: 10px;
}
.summary h2, .skills h2, .professionalhistory h2, .education h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.skills {
    line-height: 13px;
}
.skills p {
    margin: 8px 8px 8px 8px;
}
.progress {
    background-color: #BCBEBF;
    text-align: left;
    position: relative;
    height: 13px;
    margin: 8px 8px 8px 8px;
}
.progress-bar {
    background-color: #323232;
    text-align: left;
    line-height: 13px;
    padding: 1px 10px 2px;
}
.progress-bar span {
    padding: 1px 10px 2px;
    position: absolute;
    z-index: 2;
    color: white;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
}
.employer {
    font-size: 16px;
    font-weight: bold;
}
.position {
    text-decoration: underline;
}
.description {
    width: 95%; 
    margin-left: 12px;
}
.results {
    font-weight: bold;
}
.titles {
    text-decoration: underline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <p>Microsoft Office SharePoint Services</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:53.85%">
      <span>7 Years</span>
    </div>
  </div>
</body>

Answer 2

Jsfiddle示例：https://jsfiddle.net/a2f6g3gs/

添加

scan

进度条不要动画

2 个答案: