Установка Bootstrap 3 в приложении Rails

112

Я пытаюсь установить Bootstrap 3.0 в свое приложение Rails. Я недавно закончил учебник Майкла Хартла и сейчас пытаюсь создать свою собственную систему, используя эту новую версию Bootstrap, но у меня есть несколько вопросов, в которых я не уверен.

Мои системные характеристики:

  • OS X Mountain Lion на MBP
  • Рельсы 4.0
  • Рубин 2.0

У меня есть вопросы:

  1. Какой драгоценный камень лучше всего использовать в моем Gemfile? Я нашел несколько из них.
  2. Что мне импортировать на моем custom.css.scss? Где-то читал, что отличается от 2.3.2.
  3. Что еще мне нужно сделать, чтобы заставить Bootstrap работать, или оставшиеся шаги идентичны тем, которые я выполнил для Bootstrap 2.3.2?

редактировать

Вот что сначала говорит проект bootstrap-rails на GitHub :

gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
                              :github => 'anjlab/bootstrap-rails'

Затем он говорит:

gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'

Они делают одно и то же, или вам нужно делать и то, и другое?

ruby-on-rails ruby twitter-bootstrap-3 мегашиггер
источник

Ответы:

272

На самом деле вам не нужен гем для этого, вот шаг, чтобы установить Bootstrap 3 в RoR

  • Скачать Bootstrap

  • Копия:

    bootstrap-dist/css/bootstrap.css и bootstrap-dist/css/bootstrap.min.css

    Кому: vendor/assets/stylesheets

  • Копия:

    bootstrap-dist/js/bootstrap.js и bootstrap-dist/js/bootstrap.min.js

    Кому: vendor/assets/javascripts

  • Обновление: app/assets/stylesheets/application.css добавив:

    *= require bootstrap.min

  • Обновление: app/assets/javascripts/application.js добавив:

    //= require bootstrap.min

Благодаря этому вы можете обновлять загрузочную программу в любое время, без необходимости ждать обновления гема. Также с этим подходом конвейер ресурсов будет использовать минифицированные версии в производстве.

ястреб
источник
2
Я согласен. Я также обнаружил, что прямая вставка файлов вызывает меньше проблем при предварительной компиляции ресурсов (например, при отправке в Heroku).
Amy.js
26
Есть ли какие-то преимущества во включении миниатюрных файлов vendor/assets/{stylesheets|javascripts}? Звездочки должны минимизировать файлы, включенные в app/assets/{stylesheets|javascripts}.
jrhorn424
16
Как включить файлы изображений и шрифтов?
wwli
5
@wwli - См. мой ответ ниже. В нем объясняется, как добавлять глификоны и шрифты.
rvg 09
4
почему вы копируете и bootstrap, и bootstrap.min?
JohnMerlino
62

Как многие знают, в драгоценном камне нет необходимости.

Что нужно сделать:

  1. Скачать Bootstrap

  2. Копировать 

    bootstrap/dist/css/bootstrap.css
bootstrap/dist/css/bootstrap.min.css

    кому: app/assets/stylesheets

  3. Копировать 

    bootstrap/dist/js/bootstrap.js
bootstrap/dist/js/bootstrap.min.js

    кому: app/assets/javascripts

  4. Добавить к: app/assets/stylesheets/application.css

    * = требуется начальная загрузка

  5. Добавить к: app/assets/javascripts/application.js

    // = требуется начальная загрузка

Вот и все. Вы готовы добавить новый крутой шаблон Bootstrap.

Почему app/вместо vendor/?

Важно добавить файлы в app / assets , чтобы в будущем вы могли перезаписывать стили Bootstrap.

Если позже вы захотите добавить custom.css.scssфайл с пользовательскими стилями. У вас будет что-то похожее на это application.css:

 *= require bootstrap                                                            
 *= require custom

Если вы разместили файлы начальной загрузки в app / assets , все работает как положено. Но, если вы поместили их в vendor / assets , файлы Bootstrap будут загружены последними. Как это:

<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet">
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet">

Таким образом, некоторые из ваших настроек не будут использоваться, поскольку стили Bootstrap переопределят их.

Причина этого

Rails будет искать ресурсы во многих местах; чтобы получить список этих мест, вы можете сделать это:

$ rails console
> Rails.application.config.assets.paths

В выводе вы увидите, что приложение / активы имеют приоритет, поэтому сначала загружаются.

Givanse
источник
4
Разве порядок инструкций require в файле application.css не определяет порядок загрузки файлов, а не порядок каталогов в списке путей? Порядок путей обычно определяет, какая версия файла жестов загружена, если он находится в нескольких каталогах, включенных в список путей. Если нет, то как влияет порядок операторов require?
Kickingbull
2
Пожалуйста, не копируйте минифицированные версии, иначе вы получите двойное включение позже (похоже, что «require_tree.» Так работает?). Я не мог открыть ни один выпадающий список после установки booty gem только из-за этого двойного включения.
Kourindou Hime
1
Комментарий @Kourindou Hime, кажется, заслуживает внимания. Я не мог открывать раскрывающиеся списки, пока не удалил файлы .min.
Пако Абато,
35

Этот ответ предназначен для тех из вас, кто хочет установить Bootstrap 3 в свое приложение Rails без использования гема. Есть два простых способа сделать это менее чем за 10 минут. Выберите тот, который лучше всего соответствует вашим потребностям. Глификоны и Javascript работают, и я также тестировал их с последней бета-версией Rails 4.1.0.

  1. Использование Bootstrap 3 с Rails 4 - Файлы Bootstrap 3 копируются в каталог vendor вашего приложения.

  2. Добавление Bootstrap из CDN в ваше приложение Rails - файлы Bootstrap 3 обслуживаются из Bootstrap CDN .

Номер 2 выше самый гибкий. Все, что вам нужно сделать, это изменить номер версии, хранящийся в помощнике по макету. Таким образом, вы можете запустить любую версию Bootstrap по вашему выбору, будь то 3.0.0, 3.0.3 или даже более старые версии Bootstrap 2.

RVG
источник
Кажется, это не работает. Он продолжает поиск localhost:3000/fonts/glyphicons-halflings-regular.svgв качестве примера в консоли Chrome, а глификоны не появляются (как 404).
Стив
1
@Steve - Я предполагал, что у вас проблема в разработке, и вы выбрали №1 выше. Если это так, я бы дважды проверил, скопировали ли вы каталог шрифтов Bootstrap и все его содержимое /vendor/assets/в свой проект. Вы также должны проверить свой application.css, чтобы убедиться, что вам требуется bootstrap.min и что у вас есть переопределения @ font-face. SCSS широко используется в наши дни. Если вы используете это, вам нужно изменить src: url на src: asset-url в переопределениях @ font-face. Внизу поста также есть образец проекта, который может помочь.
rvg
У меня были бесконечные проблемы со шрифтами - они отлично работали в разработке, но не в продакшене. В итоге просто
выложил
22

У Twitter теперь есть готовая к использованию sass версия bootstrap с включенным gem, поэтому добавить ее в Rails стало проще, чем когда-либо.

Просто добавьте в свой гем-файл следующее:

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'

bundle install и перезапустите сервер, чтобы файлы стали доступными через конвейер.

Также есть поддержка compass и sass-only: https://github.com/twbs/bootstrap-sass

Энеко Алонсо
источник
Спасибо. Ключевой момент из readme на github для новичков; «Если вы только что сгенерировали новое приложение Rails, вместо него может быть файл .css. Если этот файл существует, он будет использоваться вместо Sass, поэтому переименуйте его ...»
Бретт,
11

Я использую https://github.com/yabawock/bootstrap-sass-rails

Это довольно простая установка, быстрое обновление гемов и последующие действия, а также быстрые исправления в случае необходимости.

Ник Гинанто
источник
1
Этот драгоценный камень устарел (как они сами указывают). Вместо этого используйте официальный порт SASS: github.com/twbs/bootstrap-sass (также см. Этот ответ: stackoverflow.com/a/20875719/3451975 )
Jeehut
5

gem bootstrap-sass

bootstrap-sass легко добавить в Rails с помощью конвейера ресурсов.

В свой Gemfile вам нужно добавить гем bootstrap-sass и убедиться, что гем sass-rails присутствует - он добавляется в новые приложения Rails по умолчанию.

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2 gem 'bootstrap-sass', '~> 3.0.3.0'

bundle install и перезапустите сервер, чтобы файлы стали доступными через конвейер.

Источник: http://rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames

Bruno
источник
3

Для меня самый простой способ сделать это

1) Загрузите и разархивируйте bootstrap в vendor

2) Добавьте путь начальной загрузки в свою конфигурацию

config.assets.paths << Rails.root.join("vendor/bootstrap-3.3.6-dist")

3) Требовать их

в css *= require css/bootstrap

в js //= require js/bootstrap

Готово!

Эти методы заставляют шрифты загружаться без какой-либо другой специальной настройки и не требуют перемещения файлов начальной загрузки из их автономного каталога.

Винхбой
источник
3

Надеемся, что использование этой ветки решит проблему:

gem 'twitter-bootstrap-rails',
  git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
  branch: 'bootstrap3'
Чанакья Деврадж
источник
1

Я думаю, что самая свежая жемчужина для новой версии начальной загрузки - это форма anjlab .

Но я не знаю, хорошо ли он в настоящее время работает с другими драгоценными камнями, такими как simple_form, когда вы это делаете rails generate simple_form:install --bootstrap, и т.д., вам, возможно, придется отредактировать некоторые инициализаторы или конфигурации, чтобы они соответствовали новой версии начальной загрузки.

tbraun89
источник
Спасибо за ответ. Так что «gem anjlab» в моем Gemfile - это все, что мне нужно сделать @ tbraun89?
megashigger
Ридми находится на странице github. Текущая жемчужина - gem "anjlab-bootstrap-rails", "~> 3.0.0.1".
tbraun89
В ридми они делают это:gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'
tbraun89
Спасибо! Я кое-что добавил в вопрос. Не могли бы вы прояснить часть после «редактирования»?
мегашиггер
Первый загружает файлы прямо из github, поэтому, когда вы выполняете обновление пакета, у вас будет самая новая версия, второй загрузит гем из rubygems, который на данный момент имеет версию 3.0.0.1. (2 дня)
tbraun89
0

На самом деле у меня был простой обходной путь, в котором я почти ломал голову над тем, как заставить его работать. Хаха!

Ну, сначала я скачал Bootstrap (скомпилированные версии css и js).

Затем я вставил все файлы начальной загрузки css в папку app/assets/stylesheets/ .

Затем я вставил все js-файлы начальной загрузки в папку app/assets/javascripts/ .

Перезагрузил страницу и валлах! Я только что добавил бутстрап в свой RoR!

Aladrain
источник