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

Я пытаюсь установить 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 ruby-on-rails twitter-bootstrap-3
person megashigger    schedule 22.08.2013    source источник

Ответы (10)


arrow_upward
272
arrow_downward

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

  • Загрузить Bootstrap

  • Копировать:

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

    To: vendor/assets/stylesheets

  • Копировать:

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

    To: vendor/assets/javascripts

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

    *= require bootstrap.min

  • Обновление: app/assets/javascripts/application.js путем добавления:

    //= require bootstrap.min

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

person hawk    schedule 22.08.2013
comment
Я согласен. Я также обнаружил, что прямая вставка файлов вызывает меньше проблем при предварительной компиляции ресурсов (например, при отправке в Heroku). - person Amy.js; 10.09.2013
comment
Я получаю эту ошибку после выполнения этой процедуры: ActionController :: RoutingError (Нет совпадений маршрута [GET] /assets/fontawesome-webfont.svg): actionpack (3.2.14) lib / action_dispatch / middleware / debug_exceptions.rb: 21: in ` вызов' - person Don Giulio; 04.10.2013
comment
Есть ли какие-то преимущества во включении миниатюрных файлов в vendor/assets/{stylesheets|javascripts}? Звездочки должны минимизировать файлы, включенные в app/assets/{stylesheets|javascripts}. - person jrhorn424; 22.10.2013
comment
Как включить файлы изображений и шрифтов? - person wwli; 26.10.2013
comment
@wwli - См. мой ответ ниже. В нем объясняется, как добавлять глификоны и шрифты. - person rvg; 10.11.2013
comment
@don giulio Нет, в рельсах он автоматически будет minifi, поэтому вам нужны только bootstrap.css и bootstrap.js в папке app / assets, и вам не нужно ничего требовать, чтобы рельсы автоматически загружали любые новые таблицы стилей или файлы js в этих папки автоматически! - person Casey Clayton; 22.12.2013
comment
У меня это не сработало, похоже, что CSS и Javascript не обслуживаются моим веб-сервером. Я публикую здесь вопрос: stackoverflow.com/questions/22947476/. Я использую rails 3.2.17, но не думаю, что это влияет на такое «базовое» поведение, как расположение CSS и JS поставщика. - person AgostinoX; 09.04.2014
comment
имейте в виду, что его ссылка на bootstrap является версионной, поэтому лучше убрать свои собственные файлы с сайта. это просто - person light24bulbs; 09.05.2014
comment
Вы не упомянули порядок добавляемых строк. Должен быть примерно такой: * = require bootstrap.min * = require_self * = require_tree. * / - person pabloverd; 07.06.2014
comment
почему вы копируете и bootstrap, и bootstrap.min? - person JohnMerlino; 10.08.2014
comment
Для таких новичков, как я: вам нужно добавить '* = require bootstrap.min' в 'app / assets / stylesheets / application.css' перед '* /', а не после. В противном случае загрузочный css не будет применяться. Потребовалось время, чтобы понять это. - person Marat; 25.12.2015
comment
Может ли кто-нибудь объяснить смысл даже использования конвейера ресурсов для этого вместо простого добавления ссылок, найденных здесь в голову в application.html.erb? Я предпочитаю загружать свои активы с CDN, чем с моего собственного сервера. - person Mark Kramer; 09.03.2017

arrow_upward
63
arrow_downward

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

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

  1. Download Bootstrap

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

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

    to: app/assets/stylesheets

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

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

    to: app/assets/javascripts

  4. # P5 #
    # P6 #
  5. # P7 #
    # P8 #

Вот и все. Вы готовы добавить новый крутой шаблон 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

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

person givanse    schedule 18.12.2013
comment
Разве порядок операторов require в файле application.css не управляет порядком загрузки файлов, а не порядком каталогов в списке путей? Порядок путей обычно определяет, какая версия файла жестов загружена, если он находится в нескольких каталогах, включенных в список путей. Если нет, то как влияет порядок операторов require? - person Kickingbull; 17.07.2014
comment
Пожалуйста, не копируйте минифицированные версии, иначе вы получите двойное включение позже (похоже, что «require_tree.» Работает таким образом?). Мне не удалось открыть ни один выпадающий список после установки гема bootsy только из-за этого двойного включения. - person Kourindou Hime; 25.07.2014
comment
Комментарий @Kourindou Hime, кажется, заслуживает внимания. Я не мог открывать раскрывающиеся списки, пока не удалил файлы .min. - person Paco Abato; 30.10.2016

arrow_upward
35
arrow_downward

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

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

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

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

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

arrow_upward
22
arrow_downward

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

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

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

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

Также имеется поддержка компаса и sass-only: https://github.com/twbs/bootstrap-sass < / а>

person Eneko Alonso    schedule 02.01.2014
comment
Спасибо. Ключевой момент из ридми github для новичков; Если вы только что создали новое приложение Rails, оно может содержать файл .css. Если этот файл существует, он будет использоваться вместо Sass, поэтому переименуйте его ... - person Brett; 09.10.2016

arrow_upward
11
arrow_downward

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

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

person Nick Ginanto    schedule 22.08.2013
comment
Этот драгоценный камень устарел (как они сами указывают). Вместо этого используйте официальный порт SASS: github.com/twbs/bootstrap-sass (также см. ответ: stackoverflow.com/a/20875719/3451975) - person Jeehut; 22.08.2015

arrow_upward
5
arrow_downward

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

person Bruno    schedule 16.01.2014

arrow_upward
3
arrow_downward

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

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

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

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

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

в css *= require css/bootstrap

in js //= require js/bootstrap

Сделанный!

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

person vinhboy    schedule 14.12.2015

arrow_upward
3
arrow_downward

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

gem 'twitter-bootstrap-rails',
  git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
  branch: 'bootstrap3'
person chanakya devraj    schedule 18.07.2014

arrow_upward
1
arrow_downward

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

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

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

arrow_upward
0
arrow_downward

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

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

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

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

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

person therealadrain    schedule 23.07.2018