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

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

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

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

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

#call-to-action {
    .span6;
}

Но lessc задыхается от этого и жалуется, что:

.span6 is undefined in

Аналогично, попытка .columns(6) создает ту же ошибку ( ".columns is undefined" ).

Другие миксы, такие как .table,.table-border и т.д., похоже, работают нормально.

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

Ответ 1

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

В основном я создал custom-mixins.less и создал mixin с именем .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;
}

Ответ 2

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

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

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

Ответ 3

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

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

Bootstrap with Less

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

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

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

это не было даже в одной строке...

===

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

Ответ 8

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

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

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