html - Bootstrap 中的进度条只显示百分比

标签 html css twitter-bootstrap

提醒一下,我是 web 开发的新手,在我的例子中是 CSS3+HTML5+javascript

所以我有一个部分分为两列。左列为 60%,右列为 30%。左边有段落,右边需要有 3 个包含我的技能的进度条。这应该是直截了当的,但不幸的是它似乎不起作用,只显示百分比。没有实际的栏出现。

<section id="about" class="main style1top dark fullscreen">
            <div class="content container 100%">

                <div class="column-left"> 
                    <h3 style="font-size:250%">About me</h3>
                    <hr>
                    <p>
                    Wow look at all my skills, I'm smart.
                    </p>        
                </div>

                <div class="column-right"> 
                    <h3 style="font-size:200%">Skills</h3>      
                        <div class="progress">
                          <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                            60%
                          </div>
                        </div>
                </div>

            </div>

            <a href="#work" class="button style2 down anchored">Next</a>


        </section>

最佳答案

我猜你想要这样的结果。

JSFiddle

要做到这一点,你需要包含 bootstrap

放在<head></head>标签

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

放置在 <body></body> 内的任何位置标签

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

此外,我建议阅读 Get Started Bootstrap 的一部分。这将有助于格式化您的 Bootstrap 应用程序。

关于html - Bootstrap 中的进度条只显示百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28567703/

相关文章:

javascript - 如何在 bootstrap 中添加 particle.js 作为 div 背景

html - 高度 100% 不起作用,div 内有两个 div

html - 使 Bootstrap 导航栏不透明

javascript - html - 如果鼠标点击几秒钟触发事件

html - Chrome @font-face 问题

html - 在页面底部做页脚

jquery - 为什么我的 css 类从未执行过?

html - Twitter Bootstrap CSS 静态流体形式定位

JQuery 悬停意图 : convert "on hover" to "on click"

java - 在 Java 中使用 IE/Chrome HTML-Renderer 或使用 JavaScript 存储文件