Итак, меня посетиля идея сделать мой сайт
немного красивее. Однако я не веб-дизайнер, не разбираюсь в современном
мире css и javascript и вообще не очень заинтересован в этом. Так что я
решил поискать, если ли что-то что может мне помочь.
И похоже есть: Twitter Bootstrap -
это фронтенд-фреймворк позволяющий достаточно просто делать симпотичные
сайты. Текущая версия 2.3.1, но следующая версия - 3.0.0 на подходе.
Так что я решил начать сразу с 3.0 чтобы потом не пришлось переезжать с
2.x на 3.x. Проблема только в том что версия 3.0 еще не выпущена, так
что ее невозможно скачать с сайта или хотя бы прочитать документацию.
Хотя это решаемо.
Загрузка и сборка
Готовых сборок bootstrap 3 еще не существует, однако весь код доступен в github. Скачаем его:
1 2 3 4 5 6 7 | git clone git://github.com/twitter/bootstrap.git
cd bootstrap
git checkout 3.0.0-wip
less README.md
|
Теперь надо скомпилировать javascript. Для этого потребуется несколько
утилит из node.js, например jshint. Я не нашел rpm для jshint однако он
доступен через npm - пакетный менеджер node.js (блин, у него тоже свой
пакетный менеджер?). Я пользуюсь Fedora 18, так что мне npm доступен из
стандартного репозитория. Если вы пользуетесь чем-то другим то возможно
придется поискать пакет в сторонних репозиториях.
Установим все что нужно:
1 2 3 | sudo yum install npm
npm install
|
И собирем bootstrap.
make
Ура, сработало... хм, и что дальше?
Документация
В данный момент онлайн-версии докуменации не существует. Если посмотреть
в docs/ репозитория github то можно найти достаточно много всего в
несколько странном формате, так что нужно было разобраться как этим
пользоваться.
Немножко поискав, я выяснил что документация может быть собрано чем-то
называющимся Jekyll. Оказалось что это генератор статических сайтов,
написан он на Ruby, так что воспользуемся очередным пакетным менеджером
(вот блин):
1 2 | sudo yum install ruby-devel
gem install jekyll
|
Бинарник jekyll установися в ~/bin/, воспользуемся им:
1 2 | jekyll . /tmp/bootstrap3-docs/
google-chrome /tmp/bootstrap3-docs/docs/index.html &
|
Chrome открыл документацию, однако все изображения, стили и многие
ссылки были сломаны так как они абсолютные и начинаются с '/'. Это легко
исправить запустив локальный веб-сервер:
1 2 3 | cd /tmp/bootstrap3-docs
python -m SimpleHTTPServer 8000 &
google-chrome http://localhost:8000/ &
|
Готово. Теперь мне есть чем заняться прежде чем писать следующий пост. :)
Источник: http://blog-ru.greenmice.info/2013/04/twitter-bootstrap-3.html
|
Главная 
