Tweaking Bootstrap 2.0 для семантической разметки

Question

Сегодня была выпущена версия 2 фреймворка пользовательского интерфейса Twitters "Bootstrap".Хотя мне это очень удобно, мне не нравится, как это не семантически.

Я бы предпочел избегать установки классов, таких как .span6 .table-striped в моем HTML.

Так как Bootstrap построен на меньшем количестве, я ожидаю, что есть хороший способ использовать меньший лист для конкретного проекта, который может использовать миксины, чтобы приписать определенную добротностью начального уровня хорошим именам семантических классов.

Я клонировал bootstrap.less в myproject.less и скорректировал пути в строках @import, затем добавил внизу следующее:

#call-to-action {
    .span6;
}

Но Лессек подавился этим и жалуется, что:

.span6 is undefined in

Аналогично, попытка .columns (6) приводит к той же ошибке («.columns is undefined»).

Другие дополнения, такие как .table, .table-bordered,и т. д., кажется, работает нормально.

Что мне не хватает?Каковы наилучшие практики для использования начальной загрузки, сохраняя несемантические имена классов из моей красивой, семантической разметки?

Answer 1

Для новой Bootstrap 2.1 (возможно, работает на 2.0):

.content{ .makeRow();
   .main-content{ .makeColumn(5,2);} // (size,offset)
   .sidebar{ .makeColumn(3); }
}

Наконец-то работает!

Answer 2

хорошо, меньше, вот как я это понял. Это лучшее, что я мог сделать, и я не мог понять, как обращаться с .row семантически, ну да ладно.

В основном я создал custom-mixins.less и создал миксин с именем .col, а переменная - @col. Поэтому, когда вы пишете свой селектор и делаете что-то вроде .col (3); .col (4); .col (5); или что-то типа того. Это должно создать правильную ширину. Я не знаю, как это будет работать для вложенных столбцов.

//custom-mixins.less
.col (@col) {
  #gridSystem > .gridColumn(@gridGutterWidth);
  #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @col);
}

//styles.less
.greetings {
  .col(3);
}

lessc сгенерирует следующее в styles.css

//styles.css
.greetings {
  float: left;
  margin-left: 20px;
  width: 220px;
}

Answer 3

Вот статья, которая ссылается на gist в git.

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

Bootstrap с Less

Он использует собственный миксин, чтобы попытаться создать классы с различной шириной страницы точки останова.

Я хотел бы высказать свое мнение здесь, но я еще не совсем решил, что это такое: - /

Answer 4

Что сработало для меня: создать файл .less.

Перейдите на https://github.com/twitter/bootstrap/blob/master/less/mixins.less и скопируйте .span *, .row, .offset * и т. Д. В созданный вами файл. Затем используйте как это:

myfile.css.less:

...<snip>...
.span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
...<snip>...
.offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
...<snip>...

#page_footer {
    .about {
      .span4;
      .offset10;
    }
}

Answer 5

Less предоставляет миксины, что означает, что если вы пишете таблицы стилей в Less, а не в CSS, вы можете включить классы Bootstrap в таблицу стилей, а не в HTML.

Пожалуйста, прекратите встраивать классы Bootstrap в ваш HTML!

Answer 6

если вы используете рельсы, вы можете использовать sass-bootstrap , тогда вы можете использовать mixins

Answer 7

Не согласен с ответом, что вы должны «просто сдаться» и «сделать это простым способом» - манипулирование классами в разметке - не легкий путь. Например: когда ваш сайт просматривается на мобильном телефоне, что такое class = "span4"?

Я использую https://github.com/vwall/compass-twitter-bootstrap, потому что это наиболее часто обновляемый порт Twitter Bootstrap для Sass.

Эта библиотека великолепна, потому что она имеет префикс, чтобы избежать конфликта имен миксинов. Его легко использовать для создания прототипов, а затем вы можете быстро вырасти из него - точно так же, как предполагалось использовать bootstrap.

Answer 8

Я использую https://github.com/thomas-mcdonald/bootstrap-sass с функцией @extend.
, но она работает ужасно: - (

.my-top {
    @extend .span4;
}
.left-top {
    @extend .span4;
}
.right-top {
    @extned .span4;
}

даже в одном ряду ...

===

о! Я нашел свой ответ на этой странице:
Как использовать Twitter начальной загрузки с bootstrap-sass в приложении rails?