0

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

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

<!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 在文档上的工作并不完全正常，因为我只得到了一个默认样式的页面，而不是引导程序版本。有任何想法吗？

4

3 回答 3

0

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

于 2013-06-12T20:37:19.353 回答
0

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

尝试这个：

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

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

这是一个更完整的示例，它将给出一个两列布局，其中一个锚标记变成了一个按钮：

<!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>

希望这可以帮助您入门！

于 2013-06-12T20:57:22.970 回答
0

一个快速入门的方法是使用 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>

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

于 2013-06-12T20:38:19.140 回答