Встраивание свойств класса Bootstrap в другой класс - PullRequest
Новая
       23

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

4 голосов
/ 30 марта 2012

Я использую 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-жидкость не определена

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

1 Ответ

2 голосов
/ 12 апреля 2012

Это немного сложнее.То, что вы имеете в виду, это, в сущности, "миксины".Во-первых, давайте исправим ошибку.Из всего, что я вижу, моя ставка заключается в том, что вы пытаетесь скомпилировать "нестандартный" файл .less и что вы не @import файла variables.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>
...