Встраивание свойств класса Bootstrap в другой класс

Я использую Bootstrap для настройки макета сайта и имею что-то вроде:

  <div class="row-fluid">
    <div class="span3">    
    </div>
    <div class="span9">
    </div>
  </div>

Это прекрасно работает. Однако меня немного беспокоит тот факт, что это определяет представление в разметке, и чтобы упростить внесение изменений в будущем, я хотел бы добавить еще один уровень косвенности. Я хотел бы добавить свой собственный класс, который определяет семантику, а затем включить класс Bootstrap, который определяет представление макета. Например:

  <div class="main-block">
    <div class="side-bar">    
    </div>
    <div class="content-area">
    </div>
  </div>

и мой соответствующий файл меньше...

@import "twitter/bootstrap";
.main-block { .row-fluid }
.side-bar { .span3 }
.content-area { .span9 }

В меньшей документации говорится, что вы можете «встроить все свойства класса в другой класс, просто включив имя класса в качестве одного из его свойств», поэтому похоже, что это должно работать, но я получаю сообщение об ошибке:

.row-fluid не определен

Есть ли что-то, чего мне не хватает? Или есть лучший способ сделать это? Это в проекте rails 3.2 с использованием драгоценного камня less-rails-bootstrap, если это имеет значение.


css twitter-bootstrap less
person g .    schedule 30.03.2012    source источник
comment
Я только что нашел этот вопрос (stackoverflow .com/questions/9090238/), который похож, но ориентирован на систему сетки. Только некоторые классы могут быть встроены в другие классы?   -  person g .    schedule 30.03.2012

Ответы (1)


arrow_upward
2
arrow_downward

Это немного сложнее. То, о чем вы говорите, это, по сути, то, что такое «миксины». Во-первых, давайте устраним ошибку. Из того немногого, что я вижу, моя ставка заключается в том, что вы пытаетесь скомпилировать «пользовательский».less файл и что вы не @импортировали файлы variable.less и mixins.less в верхней части страницы. Это правильно? Если это так, посмотрите, компилируется ли код должным образом.

Однако, как только вы получите код для компиляции, вы увидите, что у вас есть новая проблема. В этом конкретном случае, пытаясь использовать имя, отличное от .span, вы потеряете все стили, применяемые селекторами атрибутов в примеси сетки, а именно [class*="span"]. В скомпилированном виде это выглядит так:

[class*="span"] { float: left; margin-left: 20px; }
.row-fluid [class*="span"] {}
.row-fluid [class*="span"]:first-child { margin-left: 0; }

Таким образом, в этом случае селекторы атрибутов применяют свои стили к любому классу, который начинается с «span».

Вот несколько вариантов, которые могут быть лучше для вас:

1) Добавление слова "span" перед именами ваших пользовательских классов должно работать

<div class="row main-block">
  <div class="span-side-bar">
  </div>
  <div class="span-content-area">
  </div>
</div>

2) И использование нескольких классов будет работать, но только если вы не применяете к пользовательским классам какие-либо стили, которые сводят на нет любые стили в собственных классах сетки:

<div class="row main-block">
  <div class="span3 side-bar">
  </div>
  <div class="span9 content-area">
  </div>
</div>

3) Я рекомендую использовать небольшую дополнительную разметку, необходимую для поддержки системы сетки Bootstrap по умолчанию. Переименование звучит здорово сейчас, но если у вас есть желание объединиться в будущих обновлениях, я бы оставил один миксин в покое — это сетка.

  <div class="row">
    <div class="span3">
      <div class="side-bar">
      </div>      
    </div>
    <div class="span9">
      <div class="content-area">
      </div>      
    </div>
  </div>
person Community    schedule 12.04.2012