Question

我觉得这个问题很傻，但我似乎无法弄明白。

我想试试Twitter的bootstap主题，所以我下载了这些文件，并尝试设置一个非常基本的示例页面。这是代码：

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>With Bootstrap</title>
    <link rel="stylesheet" href="bootstrap.min.css">
 </head>

 <body>
    <p>Hello Bootstrap!</p>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
 </body>
</html>

我很确定我的文件位于正确的位置（我从chrome检查了源代码，然后点击了样式表的链接来验证这一点）。然而，似乎CSS并没有完全处理文档，因为我只获得了默认样式页面而不是引导程序版本。有什么想法吗？

Answer 1

您可能需要将所有内容都放在一个带有“容器”类的div上。还要确保'bootstrap.min.css'与当前HTML文件处于同一级别。如果没有，请更改'href'值。

Answer 2

快速入门方法是使用BootstrapCDN中的Bootstrap文件..

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
            <title></title>
            <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>    
    <div class="container">

    <h1>Bootstrap starter template</h1>
    <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>

    </div>
    </body>
    </html>

如果这样可行，那么您就知道要仔细检查本地Bootstrap文件的路径。

Answer 3

根据您的代码示例，我首先想到的是您没有使用任何引导类来设置标记样式。

试试这个：

<p class="text-error">Hello Bootstrap!</p>

这应该将文本呈现为红色。在http://twitter.github.io/bootstrap/base-css.html的bootstrap文档中有一些很好的例子。您必须在标记中指明要使用的Bootstrap指令。

这是一个更完整的示例，它将提供一个两列布局，并将锚标记转换为按钮：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>With Bootstrap</title>
        <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    </head>
    <body>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span8">
                    <!--Sidebar content-->
                    <a href="#" class="btn btn-primary">This link looks like a button!</a>
                </div>
                <div class="span4">
                    <!--Body content-->
                    <p class="text-success">Isn't this great?</p>
                </div>
            </div>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="bootstrap.min.js"></script>
    </body>
</html>

希望这有助于您开始使用！

设置引导程序

3 个答案: