Использование Twitter Bootstrap 3 во время разработки

Question

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

Загружен Bootstrap 3, и я делаю настройки до variables.less во время работы grunt watch. Всякий раз, когда я вношу изменения в LESS, grunt перекомпилирует все в каталог dist, который я копирую в свой целевой статический каталог. Все это прекрасно работает, но ...

1. Действительно ли это предназначен для этого? Должен ли я переместить исходный каталог Bootstrap в другой каталог, чтобы работать более эффективно?

2. Если я хочу добавить пользовательский LESS для выражения, например. «скрыть все элементы img, когда на экране будет @screen-md пикселей», как мне получить доступ к @screen-md в моем обычном файле LESS?

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

Answer 1

Мой рабочий процесс похож на Matthew Trow, но вместо клонирования я предпочитаю импортировать файл bootstrap.less.

Я использую bower держать Bootstrap обновляется, поэтому моя структура папок, как это:

> bower_components 
    > bootstrap 
    > font-awesome 
    > requirejs 
    ... 
> css 
    - project.css 
    > less 
    - project.less 
    - variables.less 

Мой project.less выглядит следующим образом:

// Bootstrap framework 
@import "../../bower_components/bootstrap/less/bootstrap.less"; 

// Font-awesome awesomeness 
@import "../../bower_components/font-awesome/less/font-awesome.less"; 

// Project specific stuff 
@import "variables.less"; 
@import "stuff.less"; 

я определяю как мои переменные и переопределить самозагрузки специфические внутри моего variables.less:

// Override Bootstrap variables 
@font-family-sans-serif: "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif; 
@btn-default-border: #bbb; 
@brand-primary: #b02b2c; 
@link-color: #08c; 

// Override Font-Awesome variables (path relative to project.css position) 
@fa-font-path: "../bower_components/font-awesome/fonts"; 

//Map Bootstrap variables to myproject specific names 
@my-customname-float-breakpoint: @grid-float-breakpoint; 
@theme-color: @brand-primary; 

//Project specific variables 
@my-favourite-color: rgb(228, 1, 1); 

Затем я компилирую только project.less для создания сжатого .css со всем (в примере также есть Font Awesome).

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

Импорт bootstrap.less вы можете использовать любую переменную bootstrap везде, где захотите. Так, например:

// Hide all images at a viewport smaller than 992px (aka @screen-md) 
@media (max-width: @screen-sm-max) { 
    img { 
     display: none; 
    } 
} 

Answer 2

Для меня, поскольку они добавляют материал в файл variables.less, я импортирую переменные bs3 в свой собственный файл переменных. Я прикрепляю Bootstrap в своей папке внутри моей меньшей директории.

В mixins.less есть создание сетки, а grid.less - там, где используются эти миксины. Нет никакого конкретного места для всех запросов ширины мини-ширины любого размера. Если для BS3 есть минимальная ширина рабочего стола, они фиксируют ее сразу после материалов, связанных с запросами на носители, так что они близки.

Если вы хотите, чтобы скрыть все изображения на ширине мДа, вы можете использовать адаптивные утилиты ИЛИ

@media (min-width: @screen-md-min) { 

img.md-hide {display:none} 

} 

Однако следующий размер вверх не будет видеть их, так как мД находится перед Lg в укладке. Поэтому лучше всего использовать отзывчивые утилиты на изображении. Я считаю, что «hidden-md» - это класс, который следует использовать на материалах, которые вы хотите скрыть только на md (992px или что бы вы ни установили в переменных .less).

Answer 3

Мой личный способ сделать это - поместить все загрузочные файлы в папку под названием «bootstrap» и не касаться любых из них.

У меня тогда есть пользовательские меньше файлов в папке, которые импортируют загрузочные активы. Я фактически клонирую файл bootstrap.less и добавляю его с именем проекта: project-bootstrap.less Затем он импортирует файлы из папки начальной загрузки.

В базе моего клонированного файла project-bootstrap.less я добавляю свой пользовательский интерфейс меньше, а мой bootstrap переопределяет. Например, у меня будет файл переменных, который только включает в себя части загрузочного файла, которые я переопределял и, конечно же, любые пользовательские переменные. Я делаю это для любого загрузочного файла, где я делаю изменения и комментирую соответственно.

Моя структура папок обычно:

css 
> less 
    > bootstrap 
    - bootstrap files 
    - my custom files 

Я тогда просто скомпилировать мой файл проекта-bootstrap.less.