2013-05-09 1 views
1

Сегодня я сделал свою первую попытку использовать загрузку Twitter, и это не удалось. Я попытался выполнить инструкции от here.Есть ли простой способ начать использовать Twitter Bootstrap?

Во-первых, я использовал git clone git://github.com/twitter/bootstrap.git для загрузки бутстрапа. В результате я получил каталог с именем bootstrap со всеми подкаталогами и файлами. Затем я создал тестовый html-файл, к которому я скопировал html-код с here. Затем я открыл этот html-файл в своем браузере. Казалось, что это не должно выглядеть.

Тогда я понял, что код html пытается прочитать бутстрап от twitter-bootstrap-v2 не от bootstrap. Хорошо, я переименовал каталог bootstrap. После этого html-файл выглядел лучше, но не так, как предполагалось.

Тогда я понял, что html-код пытается «прочитать» example-fixed-layout.css файл, который не существует. ОК, я создал этот файл с помощью кода copy-paste css с той же страницы, которая содержит html-код. После этого мой html-код выглядел лучше, но все-таки не так, как предполагалось.

Тогда я понял, что код css в example-fixed-layout.css имеет ссылку на /twitter-bootstrap/images/gridbg.gif и в загруженных каталогах у меня нет этого изображения. В этот момент я сдался.

Есть ли простой способ начать использование бутстрапа Twiter?

Кроме того, я смущен тем, что мне нужно «Скомпилировать CSS и JavaScript» (как написано here). Как css с JavaScript может быть скомпилирован? Есть ли такая вещь, как исполняемый CSS?

ответ

6

Нет необходимости компилировать ...

Очень простой способ, чтобы начать это ссылаться на CSS Bootstrap и JS на от BootstrapCDN прямо в HTML.

Полный 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, который является HTML/JS/CSS редактор только для Bootstrap. Это простой способ увидеть, как работают различные стили, элементы и компоненты Bootstrap.

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 уже сделали это за вас.