Подтвердить что ты не робот

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

Я новичок в этом, но я не могу понять проблему.

В twitter bootstrap я бы использовал:

<div class="row-fluid">
  <div class="span2">Column1</div>
  <div class="span6">Column2</div>
</div>

И все работает отлично. Но я не хочу писать spanX и spanY непосредственно в свой html файл, скорее я бы хотел дать осмысленные имена классов, например:

<div class="user-container">
  <div class="user-filter">First Column</div>
  <div class="user-list">Second Column</div>
</div>

Учитывая тот факт, что я использую https://github.com/thomas-mcdonald/bootstrap-sass, как мне написать свой файл scss? Я пробовал следующее, и он не работает (два столбца не отображаются):

@import "bootstrap";
@import "bootstrap-responsive";

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

.user-filter {
    @extend .span2;
}

.user-list {
    @extend .span10;
}

Если я посмотрю на сгенерированный код, мне кажется, что все должно быть в порядке:

/* line 164, ../../../../../.rvm/gems/ruby-1.9.3-p125/gems/bootstrap-sass-2.0.0/vendor/assets/stylesheets/bootstrap/_mixins.scss */
.span2, .user-filter {
  width: 140px;
}

и т.д.

Что я делаю неправильно?

UPDATE:

ok, просто чтобы понять, что не так - столбцы выложены как строки (один за другим), а скорее как истинные столбцы (один рядом друг с другом), например:

с бутстрапом: Column1 Column2
с моими пользовательскими классами:
Первая колонка
Вторая колонка

Я проверил макет элементов в Chrome, и кажется, что классы начальной загрузки имеют свойство float, а my - нет. Посмотрев на источник css, я вижу такие классы:

[class*="span"] {
  float: left;
  margin-left: 20px;
}

Так что в моем случае я думаю, что он должен генерировать что-то вроде:   [class * = "user-filter" ] {     плыть налево;     margin-left: 20px;   }

или нет?

4b9b3361

ОТВЕТЫ

Ответ 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, чтобы установить его, но я надеюсь на выпуск в ближайшие пару дней.

Ответ 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);
  }