Как я могу использовать таблицу стилей Bootstrap из Twitter с моей существующей таблицей стилей в Rails, не путая все?

Question

Таким образом, я включил URL-адрес таблицы стилей в свое приложение Rails, но он выбрасывает все в haywire.

Я включил его так:

<%= stylesheet_link_tag('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css', 'style', 'css3buttons', 'jquery.lightbox-0.5', :media => 'all') %>

Что я хочу сделать, так это просто применить стили Twitter, когда я применяю класс к тегу html.В идеале, я бы хотел, чтобы он даже переопределил стили в моей таблице стилей, которая является таблицей стилей для всего моего приложения.

Можно ли сделать это простым способом, не имеяизменить стиль для каждого элемента, с которым я хочу работать?

Answer 1

Посмотрите на http://twitter.github.com/bootstrap/1.4.0/bootstrap.css,, вы заметите, что он определяет сброс и стили корневых html-элементов.

Например:

h1 {
  margin-bottom: 18px;
  font-size: 30px;
  line-height: 36px;
}

Итак, если ваш style.css уже определяет стиль для h1 или если ваш макет ожидает, что h1 будет иметь другое поле, ваш макет будет выглядеть не так, как ожидалось.

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

Альтернативой является использование их таблиц стилей LESS , если вы хотите включить, например, только формы и стили таблиц. ( с использованием Bootstrap с Less ).

<link rel="stylesheet/less" type="text/css" href="lib/tables.less">
<link rel="stylesheet/less" type="text/css" href="lib/forms.less">
<script src="less.js" type="text/javascript"></script>

Вы не захотите использовать lib/boostrap.less, поскольку включает все, но вы можете включить другие таблицы стилей LESS, которые вам подходят. Имейте в виду, что только включение подмножества надстройки в твиттере может работать не так, как ожидается, особенно если у вас не определены перезагрузки css. Если это не сработает, используйте вместо этого Preboot.less . Примечание: Rails 3.1 поддерживает LESS-компиляцию

Если вы все еще хотите использовать в своем приложении полную загрузочную версию Twitter, вы можете создать новый шаблон макета rails, который использует загрузочную версию Twitter. Затем создайте свои новые страницы с помощью надстройки Twitter, укажите render :layout => "boostrap" или что-то подобное, чтобы ваши новые страницы использовали макет начальной загрузки Twitter. Затем, когда вы будете готовы, вы можете перенести свои старые страницы в новый шаблон макета.

Answer 2

Я думаю, вам нужно изменить порядок загрузки CSS ..

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

сначала загрузите таблицу стилей приложения, а затем bootstrap.css

 <%= stylesheet_link_tag :default %>

, а затем

 <%= stylesheet_link_tag  ('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css', :media => 'all') %> 

Answer 3

Вы можете использовать меньше или sass mixins для этой цели, Boostrap предлагает несколько хороших.

Например:

<!- our new, semanticized HTML -->
<article>
  <section class="main">...</section>
  <aside></aside>
</article>

<!-- its accompanying Less stylesheet -->
article {
  .makeRow();

  section.main {
    .makeColumn(10);
  }

  aside {
    .makeColumn(2);
  }
}

См. http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html для получения более подробной информации и http://www.sitepoint.com/5-useful-sass-mixins-bootstrap/, а также https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap/mixins

Answer 4

Вы можете просто настроить загрузчик с помощью инструмента настройки Twitter GitHub Настроить загрузчик

Выберите только элементы по вашему выбору и загрузите настроенную версию.

Я тоже долго искал что-то подобное, теперь я сделал и очень помог мне.