Осваиваю Bootstrap-3.3.1. Мои вопросы.

[Светлана Г.]

Здравствуйте!

Я не новичок в верстке, скажу сразу.

 

Вот решила осваивать Bootstrap, т.к. макеты, которые требуется верстать, должны быть адаптивными.

Скачала http://getbootstrap.com/

 

Имею вот такие файлы:

 

 

Работу начала с того, что за основу своей первой страницы взяла файл \bootstrap-3.3.1\docs\examples\sticky-footer.html, как наиболее подходящий.

 

Далее создала свой файл .style.css. в котором прописываю свои стили.

 

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

 

Дебаггер ссылает меня на forms.less, где прописаны такие стили:

 

background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214  border: 1px solid @input-border;  border-radius: @input-border-radius;

Я правильно понимаю, что надо найти этот файл .less, исправить в нем значение переменной?

Мне не совсем понятно, почему дебаггер ссылается на .less, если файл .css уже должен быть скомпилирован на основе этого .less

 

Как правильно мне настроить стили под свой дизайн?

Edited December 21, 2014 by Светлана Г.

[afdw]

Мне не совсем понятно, почему дебаггер ссылается на .less, если файл .css уже должен быть скомпилирован на основе этого .less

 

Потому, что есть файл .map, который он читает и ссылается на правильное место .less файла.

[Светлана Г.]

 

Мне не совсем понятно, почему дебаггер ссылается на .less, если файл .css уже должен быть скомпилирован на основе этого .less

 

Потому, что есть файл .map, который он читает и ссылается на правильное место .less файла.

 

Так, с этим понятно. Спасибо!

[Светлана Г.]

А где находятся значения самих переменных?

 

Открыла файл \bootstrap-3.3.1\less\mixins\forms.less в WebMatrix, а там полно ошибок:

 

 

Что это значит?

[klierik]

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

 

я не однократно отвечал на данный вопрос. для того что бы переопределять Core-стили требуется вносить изменения при помощи LESS\SASS перед компиляцией.

Кратко импорт файлов имеет такой подход:

1) Import bootstrap variables

2) Import bootstrap update variables

3) import bootstrap files

4) compile

Что это значит?

Это значит что твоя IDE не видит где данные переменные определены. а они определены тут: https://github.com/twbs/bootstrap/blob/master/less/variables.less

[Светлана Г.]

Переменные нашла: \bootstrap-3.3.1\less\variables.less

Как исправить, чтобы видел?

 

А если пользоваться генератором: http://getbootstrap.com/customize ?

Edited December 21, 2014 by Светлана Г.

[Светлана Г.]

Обязательно ли папку /less/ загружать на сервер, если я подключаю только bootstrap-3.3.1/dist/css/bootstrap.css?

[klierik]

Как исправить, чтобы видел?

 

Обратитись в службу поддержки IDE.

 

Обязательно ли папку /less/ загружать на сервер, если я подключаю только bootstrap-3.3.1/dist/css/bootstrap.css?

нет 

[cyklop77]

это не поможет?

[Светлана Г.]

это не поможет?

Да, хорошая статья, многое проясняет. Спасибо.

[Great Rash]

Вот решила осваивать Bootstrap, т.к. макеты, которые требуется верстать, должны быть адаптивными.

Ну и зачем тогда бутстрап?

[Светлана Г.]

 

Вот решила осваивать Bootstrap, т.к. макеты, которые требуется верстать, должны быть адаптивными.

Ну и зачем тогда бутстрап?

 

 

Не поняла вопрос.

[Great Rash]

Ну бутстрап для чего тянуть бутстрап если всего-лишь нужна адаптивная сетка? Есть более удобные сетки, опять же свою можно построить.

[Светлана Г.]

Ну бутстрап для чего тянуть бутстрап если всего-лишь нужна адаптивная сетка? Есть более удобные сетки, опять же свою можно построить.

Конечно, не только из-за сетки. Честно говоря, я думаю так, что в нем применяются уже отработанные, проверенные приемы. Я же не могу протестировать на всех возможных устройствах. А тут как бы некоторый залог успеха. Или я наивна и неправа?

[Great Rash]

Ну "на всех возможных" - это слишком сильное утверждение. Как по мне, бутстрап накладывает довольно приличные ограничения в плане дизайна. Если макет не сделан специально под бутстрап, то со стилизацией могут возникнуть определенные проблемы. В этом плане мне вот это больше нравится - http://formstone.it/

[Светлана Г.]

Ну "на всех возможных" - это слишком сильное утверждение. Как по мне, бутстрап накладывает довольно приличные ограничения в плане дизайна. Если макет не сделан специально под бутстрап, то со стилизацией могут возникнуть определенные проблемы. В этом плане мне вот это больше нравится - http://formstone.it/

Я сделала так: воспользовалась генератором и кое-что изменила под свои запросы. Это и загрузила к себе. Но файл bootstrap-theme.css решила не подключать - в нем нет того, что мне нужно на данный момент. Пока буду пробовать, пока не попробуешь - не поймешь.

 

Спасибо за http://formstone.it/ - посмотрю, может быть и для меня это будет более удобное решение.

 

Кстати, генератор накосячил: color: #223311 14; вместо #c23114;

Edited December 24, 2014 by Светлана Г.

[cyklop77]

Спасибо за http://formstone.it/ - посмотрю, может быть и для меня это будет более удобное решение.

 

 

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

Edited December 24, 2014 by cyklop77

[Светлана Г.]

 

Спасибо за http://formstone.it/ - посмотрю, может быть и для меня это будет более удобное решение.

 

 

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

 

 

Да, я знаю. Но пока мы сами выбираем, что использовать.

[Great Rash]

Заказчики и работодатели в 90% случаев вообще не понимают что такое bootstrap, для чего он нужен вообще и конкретно им. Вот яркий пример.