Как использовать twitter bootstrap с bootstrap-sass в приложении rails?

Ответ 1

Это ваше использование @extend, или, скорее, Sass 'неспособность справиться с подстановочным сопоставлением классов, что довольно неудивительно, так как оно становится довольно сложным.

Bootstrap использует несколько методов, которые я могу назвать "нестандартными" для решения некоторых классов. Вы упомянули одного из них в своем сообщении выше - [class*="span"].

Естественно, когда вы используете @extend x, Sass расширяет класс x. К сожалению, он (в настоящее время) не знает, что подстановочный знак также влияет на выход класса. Итак, да, в идеальном мире [class*="span"] также будет расширен, чтобы определить [class*="span"], .user-filter, но Sass в настоящее время этого не может сделать.

Расширение .row-fluid достаточно, чтобы включить в него правила, вложенные под ним. классы span, как указано выше, он не будет настраивать подстановочные знаки для расширенных интервалов.

bootstrap-sass уже имел mixin для столбцов/строк фиксированной ширины, makeRow() и makeColumn(). Я просто нажал микс makeFluidColumn(), который, ну, делает промежуток жидкости. Тогда ваш код будет выглядеть следующим образом:

.user-container {
  @extend .row-fluid;
}

.user-filter {
  @include makeFluidColumn(2);
}

.user-list {
  @include makeFluidColumn(10);
}

К сожалению (как обычно) это не совсем так просто. Bootstrap использует этот фрагмент для reset поля в первом классе spanx, который является дочерним элементом строки.

> [class*="span"]:first-child {
  margin-left: 0;
}

Однако мы не можем переопределить это для каждого вызова makeFluidColumn, поэтому мы должны вручную установить маркер слева на любой элемент, который будет первым дочерним слоем жидкости. Также стоит отметить, что смешение классов spanx и классов makeFluidColumn приведет к тому, что первый класс spanx будет иметь свой margin reset, независимо от того, действительно ли это первый столбец в строке.

Таким образом, ваш код будет

.user-container {
  @extend .row-fluid;
}

.user-filter {
  @include makeFluidColumn(2);
  margin-left: 0; // reset margin for first-child
}

.user-list {
  @include makeFluidColumn(10);
}

Это не очень красивое решение, но оно работает, и все связано с тем, как Bootstrap использует подстановочный шаблон, как вы собрали в своем обновлении вопроса. Я только что нажал это на ветку 2.0.2, поэтому вам придется использовать Bundler с Git, чтобы установить его, но я надеюсь на выпуск в ближайшие пару дней.

Ответ 2

Вы правы. Твиттер подталкивает анимировать здесь. См. Эту статью.

http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

Ответ 3

Используя boostrap-sass 2.3.2.2 gem, мне пришлось создать свой собственный mixin на основе бутстрапов-микшинов, чтобы классы CSS действовали как классы bootstrap .span.

// private mixin: add styles for bootstrap spanX classes
@mixin _makeFluidSpan($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
  @include input-block-level();
  float: left;
  margin-left: $fluidGridGutterWidth;
  *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
  @include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
}

// thats what you should use
@mixin makeFluidSpan($gridColumns) {
  @media (min-width: 980px) and (max-width: 1199px) {
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
  }
  @media (min-width: 1200px) {
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth1200, $fluidGridGutterWidth1200);
  }
  @media (min-width: 768px) and (max-width: 979px) {
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth768, $fluidGridGutterWidth768);
  }
  &:first-child {
    margin-left: 0;
  }
  @media (max-width: 767px) {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

Пример:

  .like-span3 { // this class acts like .span3
    @include makeFluidSpan(3);
  }