1

今天我第一次尝试使用 Twitter 引导程序,但失败了。我尝试按照此处的说明进行操作。

首先,我曾经git clone git://github.com/twitter/bootstrap.git下载引导程序。结果我得到了一个名为的目录bootstrap包含所有子目录和文件的目录。然后我创建了一个测试 html 文件,我从这里复制粘贴了 html 代码。然后我在浏览器中打开了这个 html 文件。它看起来不像它应该的样子。

然后我意识到 html 代码试图从twitter-bootstrap-v2not from读取引导程序bootstrap读取引导程序。好的,我已经重命名了bootstrap目录。之后,html 文件看起来更好,但不像它应该看起来的那样。

然后我意识到html代码试图“阅读”example-fixed-layout.css不存在的文件。好的,我通过从包含 html 代码的同一页面复制粘贴 css 代码创建了此文件。在那之后,我的 html 代码看起来更好,但仍然不像它应该看起来的那样。

然后我意识到其中的css代码example-fixed-layout.css有一个链接/twitter-bootstrap/images/gridbg.gif下载的目录中我没有这个图像。这时我放弃了。

有没有一种简单的方法可以开始使用 Twiter 引导程序?

此外,我对我需要“编译 CSS 和 JavaScript”这一事实感到困惑(正如这里所写的那样)。css ot JavaScript如何编译?有没有可执行的css之类的东西?

4

3 回答 3

6

不需要编译...

一个非常简单的入门方法是在您的 HTML 中直接从BootstrapCDN引用 Bootstrap CSS 和 JS。

完整的 CSS

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

完整的 JavaScript

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

还可以查看Bootply,它是一个仅用于 Bootstrap 的 HTML/JS/CSS 编辑器。这是查看不同 Bootstrap 样式、元素和组件如何工作的任何简单方法。

于 2013-05-09T10:44:36.717 回答
2

0.下载合适的包

点击这里。

来源

1.添加到页面

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link href="/bootsrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Bootstrap JS -->
    <script src="/bootsrap/js/bootstrap.min.js"></script>
  </body>
</html>

来源

2. 编译

...不是必需的,它已经在包中编译。之所以提到编译,是因为 Bootstrap 最初是用 SASS 编写的,需要编译成普通的 CSS 文件,但是 @bootstrap 的家伙已经为你做了。

于 2013-05-09T10:18:58.767 回答
0

只需下载已编译版本的 zip 文件 ( http://twitter.github.io/bootstrap/assets/bootstrap.zip ) 并将 CSS/JS 包含在您的页面模板中。

仅当您使用源版本时才需要编译。

http://twitter.github.io/bootstrap/getting-started.html

于 2013-05-09T10:16:42.843 回答