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

Чт, 29/12/2016 - 14:20

Многие любят 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
3 недели 2 дня назад Mihail.space #

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

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

0 Спасибо
Аватар пользователя VasyOK
3 недели 2 дня назад VasyOK #

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

0 Спасибо
Аватар пользователя Mihail.space
3 недели 2 дня назад Mihail.space #

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

0 Спасибо
Аватар пользователя gun_dose
3 недели 2 дня назад gun_dose #

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

0 Спасибо
Аватар пользователя VasyOK
3 недели 2 дня назад VasyOK #

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

0 Спасибо
Аватар пользователя gun_dose
3 недели 2 дня назад gun_dose #

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

0 Спасибо
Аватар пользователя Mihail.space
3 недели 2 дня назад Mihail.space #

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

0 Спасибо
Аватар пользователя VasyOK
3 недели 2 дня назад VasyOK #

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

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

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

0 Спасибо
Аватар пользователя bumble
3 недели 2 дня назад bumble #

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

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

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

0 Спасибо
Аватар пользователя VasyOK
3 недели 2 дня назад VasyOK #

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

0 Спасибо
Аватар пользователя bumble
3 недели 2 дня назад bumble #

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

0 Спасибо
Аватар пользователя void
2 недели 6 дней назад void #

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

0 Спасибо
Аватар пользователя gun_dose
2 недели 6 дней назад gun_dose #

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

1 Спасибо
Аватар пользователя Mihail.space
3 недели 2 дня назад Mihail.space #

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

0 Спасибо
Аватар пользователя gun_dose
3 недели 2 дня назад gun_dose #

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

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

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

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

0 Спасибо
Аватар пользователя sergeybelya
3 недели 1 день назад sergeybelya #

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

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

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

0 Спасибо
Аватар пользователя ХулиGUN
3 недели 2 дня назад ХулиGUN #
Mihail.space написал:
А вообще кажется, что раз у тебя появился такой вопрос, то ты чего то о бустрапе еще не знаешь.

Я и половины о нём не знаю и нет никакого желания узнавать. Он действительно убог и избыточен

0 Спасибо
Аватар пользователя Mihail.space
3 недели 2 дня назад Mihail.space #

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

0 Спасибо
Аватар пользователя Orion76
3 недели 2 дня назад Orion76 #

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

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

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

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

0 Спасибо
Аватар пользователя gun_dose
3 недели 2 дня назад gun_dose #

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

0 Спасибо
Аватар пользователя sas@drupal.org
3 недели 2 дня назад sas@drupal.org #

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

1 Спасибо
Аватар пользователя gun_dose
3 недели 2 дня назад gun_dose #

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

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

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

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

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

1 Спасибо
Аватар пользователя fairrandir
3 недели 1 день назад fairrandir #
gun_dose написал:
Бутстрап надо хорошенько изучить

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

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

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

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

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

1 Спасибо
Аватар пользователя gor
3 недели 1 день назад gor #

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

0 Спасибо
Аватар пользователя void
2 недели 6 дней назад void #

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

0 Спасибо
Аватар пользователя gorr
2 недели 6 дней назад gorr #

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

0 Спасибо
Аватар пользователя VasyOK
2 недели 6 дней назад VasyOK #

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

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

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

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

0 Спасибо
Аватар пользователя gun_dose
2 недели 6 дней назад gun_dose #

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

0 Спасибо
Аватар пользователя Mihail.space
2 недели 6 дней назад Mihail.space #

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

0 Спасибо
Аватар пользователя gorr
2 недели 6 дней назад gorr #
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
2 недели 6 дней назад VasyOK #

"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
2 недели 6 дней назад gun_dose #

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

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

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

Именно так.

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

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

0 Спасибо
Аватар пользователя VasyOK
2 недели 5 дней назад VasyOK #

"какие-то минуты на её подключение" - вот именно, что минуты на разгребанние классов Бутстрапа уходят часы.
Согласен - я плохо знаю это:
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
2 недели 3 дня назад marazmus #
Цитата:
Если нужно, чтобы центральная область уходила вверх «боковушек», меняем порядок, чередования контейнеров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0 Спасибо
Аватар пользователя marazmus
2 недели 1 день назад marazmus #

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

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

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

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

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

0 Спасибо

Страницы