За что вы любите Bootstrap? Обновлено.

Аватар пользователя VasyOK

Многие любят Bootstrap. Не понимаю за что.

1. Сайдбары заданы в процентах
2. Раскрывающиеся подпункты меню, по умолчанию не показаны.
3. Значение разрешения с которого сайдбар уходит под контент зарыто в дебрях темы
4. Bootstrap имеет слабое представление о селекторах, которые генерит Drupal.
5. Отсюда следствие: элементарные чекбоксисики в фильтре, выдаваемые модулем BEF выглядят ужасно.
6. Еще следствие. Масса модулей drupal.org имеют issue так или иначе связанные с Bootstrap.

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

/*Добавлено*/
Хорошо, давайте рассмотрим конкретный пример.

Вот предпросмотр вьюхи (в большинстве тем все так и выглядит):
bootfilter

Вот настройка Better exposed filter
bootfilter2

Вот что получается в Bootstrap: http://bootstrap.liberty.vps-private.net
bootfilter3

Т.е.:

  • чекбоксы непонятно как (могу решить перекрытием CSS Bootstap-a)
  • опция collapsible не работает

Как бы вы эту проблему решили?

Какие файлы Bootstrap нужно отключить, чтобы этой ерунды не было?
В вашей любимой Bootstarp based теме этот глюк встречается?

Тип материала:
0 Спасибо

Комментарии

Аватар пользователя Mihail.space
Mihail.space 9 месяцев назад

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

А вообще кажется, что раз у тебя появился такой вопрос, то ты чего то о бустрапе еще не знаешь.

0 Спасибо
Аватар пользователя VasyOK
VasyOK 9 месяцев назад

Повторяю проблемы сверху решаемы. Но я не понимаю сакрального смысла Bootstrap.

0 Спасибо
Аватар пользователя Mihail.space
Mihail.space 9 месяцев назад

Человек непознаваем в принципе. Раз любят бустрап, значит нашли за что)

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

Если нужен бутстрап, ставь радикс. Тема бутстрап действительно так себе.

0 Спасибо
Аватар пользователя VasyOK
VasyOK 9 месяцев назад

Когда-то пробовал. Причину не помню, но почему-то не пошло.
regions[sidebar_first] = Sidebar
regions[content] = Content
в ней что всего 2 региона?

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

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

0 Спасибо
Аватар пользователя Mihail.space
Mihail.space 9 месяцев назад

а зачем тебе куча регионов? выпиливать их потом?))

0 Спасибо
Аватар пользователя VasyOK
VasyOK 9 месяцев назад

Да, помню: попробовал несколько Bootstrap тем, регионы в которых предлагалось замещать панелями.

Регионы в теме оформления быть должны. Хотя бы минимум: шапка, подвал, контент и 2 сайдбара. Если в регионе блоков нет - регион не выводится. Не думаю что это как-то влияет на производительность.

И да - регионы не являются проблемой.

0 Спасибо
Аватар пользователя bumble
bumble 9 месяцев назад

Я чот по 1му региону делаю в темах.

VasyOK написал:
Если в регионе блоков нет - ..

..зачем тогда регион?

0 Спасибо
Аватар пользователя VasyOK
VasyOK 9 месяцев назад

Вопрос философский? Чтобы объединить блоки в логическую область. И не использовать панели :)

0 Спасибо
Аватар пользователя bumble
bumble 9 месяцев назад

Но ведь пустой же регион, соответственно и блоков там нет.

0 Спасибо
Аватар пользователя void
void 9 месяцев назад

1. Есть ли радикс без scss (только css)?
2. Возможно ли создать сабтему для радикс без drush?
3. Можете ли посоветовать чистую бутсрап тему с css и бездрашевым созданием подтем?

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад 1

Радикс с цсс нет. А "бездрашевое" создание темы лично для меня огромный минус, поэтому тут не подскажу, т.к. не искал. Поищите на друпал орг - там под бутстрап очень много тем, просто не все популярны, но это ещё не значит, что они плохи.

Аватар пользователя Mihail.space
Mihail.space 9 месяцев назад

бустрап без маржинов был, как новый не знаю, не трогал, но тогда если нужны были отступы типа как тут
src
то проще было свою сетку написать на нужное колличество колонок.

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

Бутстрап - это не сетка. Завтра распишу подробнее

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

Именно. На скрине написано "Бутстрап включает в себя сетку", что означает, что бутстрап не является сеткой, иначе получится фрактал))

Поясню на примере - человек включает в себя печень. Но ведь человек - это не печень. Логично?

0 Спасибо
Аватар пользователя sergeybelya
sergeybelya 9 месяцев назад

да-да, только юзают его в основном из-за сетки.

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

Ну и дураки. Есть много куда более интересных сеток

0 Спасибо
Аватар пользователя Mihail.space
Mihail.space 9 месяцев назад

Я тоже.
Но раз народ с него прикалывается, значит они что - то знают))

0 Спасибо
Аватар пользователя Orion76
Orion76 9 месяцев назад

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

Еще он неплохо пропагандирует и внедряет стандарты организации("архитектуры") проектов, основанных на новых технологиях: less, sass и т.п.

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

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

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

Единственный минус бутстрапа - он не соответствует БЭМ, но тут бэмщиков около нуля. Более того, последние проекты верстал под БЭМ + бутстрап. Т.е. бутстрап и БЭМ при правильном подходе могут синергировать. Вот.

0 Спасибо
Аватар пользователя sas@drupal.org
sas@drupal.org 9 месяцев назад 1

Любовь - от скорости разработки с его использованием. Клиенты хотят быстро и дешево.

Аватар пользователя gun_dose
gun_dose 9 месяцев назад 1

Чтобы была скорость разработки, бутстрап надо хорошенько изучить. Для начала не лишним будет просто ознакомиться со списком компонентов, в который помимо сетки входит ещё много всего интересного. Используя бутстраповские штуки можно очень многое делать, не залазя в стили и джаваскрипты. Засчёт этого значительно сокращается время разработки всяких выпадающих штук, модальных окон, всплывающих подсказок и т.д.

Для тех, кому бутстрап кажется громоздким: смотрим сюда и отключаем ненужные компоненты.

Для тех, кому лень в шаблонах прописывать классы: смотрим сюда

Для тех, кто до сих пор пишет оверрайды стилей: смотрим сюда

При грамотном использовании получится действительно быстро. А при желании не громоздко.

Аватар пользователя fairrandir
fairrandir 9 месяцев назад
gun_dose написал:
Бутстрап надо хорошенько изучить

Это как раз и проблема.

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

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

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад 1
VasyOK написал:
1. Сайдбары заданы в процентах

Что в этом плохого?

Аватар пользователя gor
gor 9 месяцев назад

Я использую для себя  bootstrap lite
Причина проста - позволяет очень быстро прототипировать сайт и получается более менее тема.
Дальнейшие навороты уже когда есть потребность.

0 Спасибо
Аватар пользователя void
void 9 месяцев назад

Не подскажите, можно ли bootstrap lite использовать как базовую тему, если да, то ка сделать к ней сабтему?

0 Спасибо
Аватар пользователя gorr
gorr 9 месяцев назад

Сабтему можно сделать в друпале для любой темы вообще-то. Для этого в файл своей сабтемы subtheme.info добавьте одну строчку:
base theme = bootstrap_lite
Подробнее о создании сабтем например тут:
https://www.drupal.org/docs/7/theming/creating-a-sub-theme

0 Спасибо
Аватар пользователя VasyOK
VasyOK 9 месяцев назад

bootstrap lite пробовал. На момент пробы большинство из пунктов сверху присутствовали так же как и в "обычной" теме bootstrap.

gun_dose написал:
Есть много куда более интересных сеток

Может кого-то шокирую но не понимаю зачем сетки нужны. Лично мне неудобно задавать ширину элемента опираясь на классы сетки. Хотя когда-то клепал сайты на Fusion.

если в ширину 3 одинаковых элемента задаю им width: 33.33%
если в ширину один сравнительно узкий элемент + один широкий, то считаю э\ти элементы "сайдбаром" и "колонкой содержимого"

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

В интересных сетках вместо классов миксины. Помимо ширины, задаются отступы и адаптивность.

0 Спасибо
Аватар пользователя Mihail.space
Mihail.space 9 месяцев назад

ну к примеру тебе надо вьюсом вывести контент в три колонки, ты в регионе прописываешь класс row а в выводе вьюса класс колонок.
тебе не надо ломать голову какой класс придумать.
помимо этого ты можешь еще в каждой колонке вывести по row и в нем еще по три колонки и до бесконечности пока всё не спрячется в одном пикселе и получить html фрактал))
и тебе опять не надо придумывать классы))

0 Спасибо
Аватар пользователя gorr
gorr 9 месяцев назад
VasyOK написал:
Может кого-то шокирую но не понимаю зачем сетки нужны.

Согласен, не понимаете.

VasyOK написал:
если в ширину 3 одинаковых элемента задаю им width: 33.33%

А если на экранах уже, например 768px, вам нужно выстроить эти три элемента один под другой на всю ширину экрана, тогда вы пишете media query.
То есть вы:
1) задаете классы этим 3 элементам
2) прописываете css правило (width: 33.33%) (задаете еще отступы внутри элементов, иначе элементы прилипнут друг к дружке)
3) задаете @media (max-width: 767px) (или наоборот, если используете mobil first верстку)
И эти пункты вы выполняете ко всем элементам на странице, требующим перестройки при разных размерах экрана.

А когда в проекте страниц для верстки много и у каждой свое поведение при разных расширениях экрана, все это верстать и помнить, для каких экранов что ты сверстал, а что нет, становится тяжко. А если потом заказчику потребуется еще что-то изменить в поведении элементов, то совсем весело будет (а заказчику непременно этого захочется ;)).

В отличие от этого, зная сетку бутстрапа вы просто пропишете элементам нужные классы. В данном примере напишете что-то типа class="col-sm-4".
То есть вы один раз подгрузили сетку бутстрапа, а затем вместо перечисленных выше мной 3-х пунктов выполняете только первый - задаете классы. И это все.

0 Спасибо
Аватар пользователя VasyOK
VasyOK 9 месяцев назад

"1) задаете классы этим 3 элементам
2) прописываете css правило (width: 33.33%)"
класс задаю не конкретно для этих элементов а вообще

.columns-3 .views-row {  
    width: 33.33%;
    float: left;
}
.columns-3 .views-row:nth-child(3n+1) {      
    clear: left;
}

собственно когда возникает потребность вывести что-то в 3 колонки - всего лишь вешаю этот класс на вьюху (или не-вьюху).
"А если потом заказчику потребуется еще что-то изменить в поведении элементов" - уберу класс columns-3, повешу класс columns-4.

"3) задаете @media (max-width: 767px)" -может быть. обычно так:

@media only screen and (max-width:767px) {
    .columns-3 .views-row {
        width: 50%;
    }
   .columns-3 .views-row:nth-child(3n+1) {      
        clear: none;
    }
    .columns-3 .views-row-odd { /*или views-row:nth-child(2n+1)*/
        clear: left;
    }            
}
gun_dose написал:
Помимо ширины, задаются отступы и адаптивность.

Адаптивность выше. Отступы:

.columns-3 .views-row .views-row-inner { /*контейнер задан либо в views-view-fields.tpl.php либо через views fieldset*/
       margin: 0 6%;
       width: 88%;
}  

продвинутые отступы

 .columns-3 .views-row:nth-child(3n+1) { /*1-я колонка*/
       margin: 0 12% 0 0;
}
 .columns-3 .views-row:nth-child(3n+3) { /*3-я колонка*/
       margin: 0 0 0 12%;
}

Пока, что ни в сетках ни в Бутстрапе надобности не понял.

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

Если ты этот код таскаешь из проекта в проект, значит ты используешь сетку. Пусть свою собственную, но используешь и даже тратишь какие-то минуты на её подключение.)))

А ведь помимо колонок есть классы смещения колонок, чтобы, например, левый сайдбар выводился после контента.

0 Спасибо
Аватар пользователя gorr
gorr 9 месяцев назад
gun_dose написал:
Если ты этот код таскаешь из проекта в проект, значит ты используешь сетку. Пусть свою собственную, но используешь и даже тратишь какие-то минуты на её подключение.)))

Именно так.

VasyOK написал:
Пока, что ни в сетках ни в Бутстрапе надобности не понял.

А теперь представь, что в приведенном тобой выше примере заказчик передумал и просит переделать, сделав не три, а 4 в линию элемента. В скольких местах правки нужно будет сделать?
А в бутстрапе только поменять класс col-sm-4 на col-sm-3 в одном шаблоне.
И я не говорю, что bootstrap, foundation, susy, tachyons - это панацея от всех бед, но во многих случаях это будет быстрее, чем под каждый проект писать свои стили для .columns-3, columns-5, columns-7 и т.д. Просто там они уже все написаны за нас.

0 Спасибо
Аватар пользователя VasyOK
VasyOK 9 месяцев назад

"какие-то минуты на её подключение" - вот именно, что минуты на разгребанние классов Бутстрапа уходят часы.
Согласен - я плохо знаю это:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss
https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap/mixins

НО: это все стандарт кодинга авторов Бутстрапа. Т.е. врядли они что либо изобретали. На многих фирмах есть свои стандарты кодинга и на то чтобы новоприбывший разработчик въехал в эти стандарты проходит время. В результате с этим новичком быстро делается где-то 5-й сайт. За это время большинство "бригад" распадаются и если на фирме остается данный новичек - вряд ли он будет вспоминать как было "до него". А пока я делаю 5 сайтов - выходит новая версия Бутстрапа.

"классы смещения колонок, чтобы, например, левый сайдбар выводился после контента"
На этот случай код прописан тут: http://drupal.ru/node/128445
CTRL+F "Если нужно, чтобы центральная область уходила вверх «боковушек», меняем порядок, чередования контейнеров"

"В скольких местах правки нужно будет сделать?
А в бутстрапе только поменять класс col-sm-4 на col-sm-3 в одном шаблоне."
В одном месте - там где класс вьюхи задается. В любом случае переделка "сетки" с 3-х на 4 колонки занимает минуты. А подгон размеров прорисованных в PSD к тому, что генерит Бустрап занимает гораздо большее время.

0 Спасибо
Аватар пользователя marazmus
marazmus 9 месяцев назад
Цитата:
Если нужно, чтобы центральная область уходила вверх «боковушек», меняем порядок, чередования контейнеров

В жопу такой подход. Менять код HTML вместо добавления пары классов?

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

Т.е. выводить среднюю колонку впереди левой - это плохо? А хорошо ли на мобиле выводить вторую колонку выше первой?))

0 Спасибо
Аватар пользователя VasyOK
VasyOK 9 месяцев назад

Как ни странно многие сеонисты требуют, чтобы сайдбар был именно под (или над) областью контента в HTML коде. Ну и плюс такого подхода - логика: сверху вниз сначала одно потом другое. И да: я ничего не изобретал. Подобное во многих темах с drupal.org

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

Сеонисты тут ни при чём. Берешь, выводишь сайдбары последовательно, заходишь на сайт с мобилы и покуда прокручиваешь пальцем второстепенный контент, понимаешь, зачем это нужно.

0 Спасибо
Аватар пользователя VasyOK
VasyOK 9 месяцев назад

Крутить пальцем - это уже в зависимости от сайта.
Сеониситы при чем. Очень часто они хотят чтобы по виду информация шла в одном порядке, а по HTML коду в другом.
Ну может у меня публика такая. Хотя люди редко друг с другом знакомы.

0 Спасибо
Аватар пользователя dgastudio
dgastudio 9 месяцев назад

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

0 Спасибо
Аватар пользователя marazmus
marazmus 9 месяцев назад
gun_dose написал:
Т.е. выводить среднюю колонку впереди левой - это плохо? А хорошо ли на мобиле выводить вторую колонку выше первой?))

Мой комментарий не про это.

А про то, что ковырять html-код вместо простановки пары CSS-классов - это полная хня.

Беря выше ваш пример - пусть сперва на десктопе визуально контент расположен так: сайдбар - контент - сайдбар. В примере с бутстрапом или любым популярным CSS-фреймворком можно прописать элементам пару классов так, что они будут вести себя как нужно как на десктопе, так и на телефоне, планшете и т.п. То есть - открыли с ноутбука - схема умещается в экран. Открыли с планшета - контент остался сверху, сайдбары уехали вниз. Все в рамках стилей CSS. Изменять для этого порядок следования HTML-элементов - это как минимум ошибка, как максимум - сознательное вредительство.

0 Спасибо
Аватар пользователя marazmus
marazmus 9 месяцев назад

То есть прошу обратить внимание - это не про бутстрап, а про принцип "выводим html так как нужно (в том числе и сеонистам), а потом расталкиваем его как он должен ВЫГЛЯДЕТЬ на разных разрешениях экрана (в том числе по порядку следования)".

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад
marazmus написал:
Изменять для этого порядок следования HTML-элементов - это как минимум ошибка, как максимум - сознательное вредительство.

так по твоей ссылке и есть перестановка элементов местами. Если на экране видим 123 слева направо, то на мобиле видим сверху вниз 213. Соответственно в коде должно быть 213, а классами 1 и 2 меняются местами)) И это нормально и правильно.

marazmus написал:
А про то, что ковырять html-код вместо простановки пары CSS-классов - это полная хня.

Ээээээ, а как проставить цсс класс, не залазя в хтмл? Ну да, можно в пхп или жс класс присвоить, но ведь в итоге класс всё равно попадёт в хтмл.

0 Спасибо
Аватар пользователя VasyOK
VasyOK 9 месяцев назад

"как проставить цсс класс, не залазя в хтмл" есть модули чтобы задать из Друпала класс блоку или даже региону, но я ими пользуюсь не для того что имеет ввиду Marazmus

0 Спасибо