有没有一种简单的方法可以开始使用Twitter Bootstrap?

时间:2013-05-09 10:13:31

标签: css twitter-bootstrap web

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

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

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

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

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

有没有一种简单的方法可以开始使用Twiter bootstrap?

此外,我很困惑的事实是我需要“编译CSS和JavaScript”(因为它写成here)。如何编译JavaScript?有可执行文件吗?

3 个答案:

答案 0 :(得分: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样式,元素和组件如何工作的简单方法。

答案 1 :(得分:2)

0。下载正确的包

Click Here.

source

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>

source

2。编译

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

答案 2 :(得分:0)

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

只有在使用版本时才需要编译。

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