При работе с фреймворком Bootstrap обычно сталкиваются с тремя основными проблемами:
- Как поместить контент внизу колонки?
- Как создать многорядную галерею колонок одинаковой высоты в одном .row?
- Как центрировать горизонтально несколько колонок, если их суммарная ширина меньше 12 единиц и оставшаяся ширина нечетна?
Для решения первых двух проблем, необходимо скачать небольшой плагин.
Решение третьей проблемы подсмотрено здесь.
Общий код
<style>
[class*=col-] {position: relative}
.row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
.row-centered {text-align:center}
.row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top}
</style>
<script src="assets/conformity/conformity.js"></script>
<script>
$(document).ready(function () {
$('.row-conformity > [class*=col-]').conformity();
$(window).on('resize', function() {
$('.row-conformity > [class*=col-]').conformity();
});
});
</script>1. Как поместить контент внизу колонки?
<div class="row row-conformity">
<div class="col-sm-3">
Я<br>самая<br>высокая<br>колонка
</div>
<div class="col-sm-3">
<div class="to-bottom">
Я прижат книзу
</div>
</div>
</div>2. Многорядная галерея колонок одинаковой высоты в одном .row
<div class="row row-conformity">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>3. Горизонтальное центрирование нескольких колонок, если их суммарная ширина меньше 12 единиц и оставшаяся ширина нечетна
<div class="row row-centered">
<div class="col-sm-3">...</div>
<div class="col-sm-4">...</div>
</div>Оба класса могут работать вместе
<div class="row row-conformity row-centered">
...
</div>Комментарии (32)
sashabeep
26.03.2017 01:15Еще можно почитать, например, тут.
Хочется чего-то production ready? посмотреть на Foundation, там флексовая сетка есть со всеми необходимыми автору плюшками. Выравнивание колонок по центру при нечетном количестве и эквализация по высоте есть и без флексов. По какому принципу эта статья вообще попала в RSS — непонятно
Fractalzombie
26.03.2017 04:11-8Та ещё и jQuery в 2017 году то.
DaneSoul
26.03.2017 05:24+7JQuery уже 10 лет, она проверена временем и по-прежнему очень активно используется там, где нет нужды в мега-комбайне, рано Вы ее списываете со счетов.
SerafimArts
26.03.2017 08:07-2А что, если я скажу вам, что вообще всё, что есть в JQuery решается аналогичным способом на чистом JS + CSS и местами ванильный код даже лаконичнее?
Жизнеспособность Jq обуславливается лишь тучей плагинчиков, написанных в бородатые годы.
DaneSoul
26.03.2017 08:21+10Так оно и раньше решалось, JQuery просто сделало для этого более удобный синтаксис и решило проблемы кросс-браузерности. А потом это все уже обросло плагинами и производными типа JQueryUI и стало полноценной экосистемой по сути.
И в своей нише JQuery будет рулить еще долгие годы, хотя снизу ее будут подпирать чистый JS+CSS, а сверху Angular, React и т.п. — разные задачи, разные средства для решения.
saggid
26.03.2017 10:54+6Я уже много раз писал про это в разных местах: jQuery всё равно более удобен в некоторых случаях, чем нативный JS.
Возьмите, скажем, ту же возможность повесить отслеживатель события на какой-то DOM элемент, который будет перехватывать какие-то конкретные события внутри него на нижележащих DOM элементах. Как такое дело на нативном JS написать быстро и просто?
Простые и удобные методы для простой анимации, вроде toggle и fadeToggle
Метод closest для быстрого нахождения ближайшего элемента в вышеидущем дереве.
Всякие короткие методы для ajax запросов, вроде post и load. Просто делающие код более лаконичным.
Метод html, который позволит вставить в ваш DOM элемент любой HTML код, и даже если внутри него будут теги
<script>— все они будут корректно обработаны, тоже благодаря jQuery. А вы думали что оно само по себе в браузерах заработает через какой-нибудьelement.innerHTML = newHtmlData? Не заработает.
Методы serialize и serializeArray, позволяющие легко получить готовые для отправки POST запросом данные из вашей формы, или получить массив всех её данных.
Возможно, есть ещё что-то, о чём я и сам до сих пор не знаю. В любом случае, на мой взгляд, jQuery ещё очень рано списывать со счетов. У него достаточно удобных и приятных возможностей, вместе с которыми разработка становится более приятной.
franzose
26.03.2017 11:50С событиями сложновато, да.
Простые и удобные методы для простой анимации, вроде toggle и fadeToggle
Что-то подобное можно реализовать с помощью CSS 3.
Метод closest для быстрого нахождения ближайшего элемента в вышеидущем дереве.
В современных браузеров он уже реализован, для остальных есть полифилл на MDN.
Всякие короткие методы для ajax запросов, вроде post и load. Просто делающие код более лаконичным.
Для этого есть библиотека axios.
Метод html, который позволит вставить в ваш DOM элемент любой HTML код
Тут знаний не хватает. А
documentFragmentтак не работает?
Методы serialize и serializeArray, позволяющие легко получить готовые для отправки POST запросом данные из вашей формы, или получить массив всех её данных.
Для этого можно один раз найти вменяемую реализацию где-нибудь на StackOverflow и использовать потом везде. Например, serialize.
saggid
26.03.2017 11:53+6В этом ведь и дело: зачем париться с установкой другой ajax библиотеки и написанием своих реализаций того, что уже реализовано и протестировано?) Совсем не спорю насчёт CSS3, и я даже делаю так в большинстве случаев. Но иногда хочется сделать всё быстро и просто, и в эти моменты slideToggle и fadeToggle спасают)
Спасибо за ваше сообщение в любом случае, особенно про closest: не знал про него)
franzose
26.03.2017 11:57зачем париться с установкой другой ajax библиотеки
Ну, например для того, чтобы отказаться от jQuery полностью в пользу чистого JS. Поддержка браузерами сейчас очень хорошая, а для особых случаев почти всегда можно полифилл найти)
Caravus
26.03.2017 18:51+4А зачем отказываться от jQuery-то? Что он вам такого сделал, что вы готовы писать кучу кода вручную, лишь бы не пользоваться уже готовыми решениями?
saggid
26.03.2017 12:04Тут знаний не хватает. А documentFragment так не работает?
Почитал про documentFragment здесь. Конкретно эта штука работает по-другому, как я понял, но там есть указание на метод insertAdjacentHTML. Который мог бы помочь, но он тоже не заставляет исполняться скрипты, только что проверил)
Я просто таким образом многие сайты написал, у меня есть свой маленький компонент ajax навигации по страницам сайта. И вот там как раз эта особенность jQuery и проявила себя: чтобы скрипты в новом html коде "исполнялись", приходится использовать метод из jQuery, ибо по-другому оно не работает. Интернет полон предложениями решения этой проблемы, вот, например. Ну а я просто решил использовать jQuery, ибо он из коробки эту проблему решает.
pudovMaxim
26.03.2017 13:59+6С *** сложновато, да.
Что-то подобное можно
для остальных есть полифилл
Для этого есть библиотека
Тут знаний не хватает. А **** не работает?
Для этого можно один раз найти вменяемую реализацию где-нибудь на StackOverflow и использовать потом везде. Например, ***.
Зачем? Есть уже jQuery. Он стандарт «де факто». Он понятен. Он распространен (+ CDN/кэш). Он лаконичен.
А что делать с Вашими «это отсюда, это оттуда, здесь я сам накостылял, тут не работает»? Как потом коллегам в глаза смотреть? Нет, забывать корни не стоит и не стоит сравнивать знание js и jquery. Но и тиражировать велосипеды тоже не надо.franzose
26.03.2017 14:04Нормально коллегам в глаза смотреть, если постепенно код рефакторить и не плодить костыли.
pudovMaxim
26.03.2017 14:41+5А рефракторить Вы будете за свой счет? Или это будет opensource библиотека? Но тогда почему она, а не jquery(или какая-то другая)?
Я понимаю, что в каждой разработке можно найти фатальный недостаток, но нужны какие-то экономико-технические показатели для смены библиотеки.franzose
26.03.2017 14:57Что значит «за чей счёт»? Идеального кода не существует, поэтому есть необходимость его постепенно улучшать. И фатальные недостатки тут ни при чем, к тому же я говорил не о смене библиотеки, а об отказе от jQuery конкретно, что обусловит меньший размер итогового подключаемого на странице файла как минимум.
pudovMaxim
26.03.2017 15:34+7Кто будет платить за то время, пока Вы разбираетесь как сделать то, что уже реализовано и стабильно работает в jQuery, вместо реализации поставленной задачи? И кто будет платить за обучение новых программистов, если они придут на этот проект?
Какие другие библиотеки и на сколько они снизят нагрузку?
Я тоже люблю когда всё по-минимуму грузится, но зайдите на любой крупный сайт, юлмарт например, да тот же хабр, посмотрите сколько там картинок, взгляните сколько там маркетинговогобулшитаджаваскрипта и вот вопрос: а что изменится в этом мире, если выбросить с подобного сайта jQuery?
Почему мы все должны сегодня же выкинуть jQuery?
saggid
28.03.2017 22:18+1Чисто для дополнительного расширения кругозора: нашёл тут сейчас набор рекомендаций о том, как обойтись без жиквери ))
franzose
29.03.2017 00:58+1Хм, это мой gist)
saggid
29.03.2017 14:40Из ваших гистов, кстати, больше всего нам понравились миксины для джейда для компиляции кода в blade шаблоны. Используем с большим удовольствием, своих миксинов потом понаписали вдобавок. И добавили возможность указывать вложенные массивы данных при передаче данных из миксина в blade шаблон.
vladalivan
29.03.2017 12:52-1Нападки на jquery мне напомнили одну историю, непосредственно касающуюся данной статьи. В былые времена людей, которые для верстки пользовались table, побивали камнями во всех публичных местах. Потому что они выравнивали к низу вот таким образом:
<table> <tr> <td style="vertical-align:bottom"> Прижато книзу </td> ... </tr> </table>
Теперь самый распространенный прием выравнивания к низу (не бутстраповский) такой:
<div style="display:table; table-layout:fixed; height:100%; width:100%"> <div style="display:table-cell; height:100%; vertical-align:bottom"> Прижато книзу </div> ... </div>
Те же яйца — только в профиль и более пасхальные!
dom1n1k
26.03.2017 14:56+4Не решается аналогично и тем более лаконичнее (ну за исключением некоторых самых элементарных случаев).
Даже несмотря на большой прогресс браузеров последних лет, ванильная работа с домом все равно громоздка и неудобна. Во-первых, тупо длинее. Во-вторых, всплывает куча мелких нюансов, которые надо учитывать.
Даже используя современный фреймворк, я все равно подключаю библиотеку для вспомогательных действий с домом, потому что иначе я начинаю медленно, но верно тонуть в лапше (правда, это не jQuery, а аналог полегче).
И плагины написаны не только в бородатые годы, но и продолжают развиваться сейчас (та же карусель Slick живее всех живых).
Плеваться от jQuery — это просто хипстерская мода.
sashamorozov
26.03.2017 10:22+6Зачем так страдать, если flex отлично поддерживается современными браузерами.
vladalivan
26.03.2017 10:22-5Годик придется еще подождать
Odrin
27.03.2017 10:04+2Подождать чего? caniuse.com
vladalivan
27.03.2017 11:59-1Не поймите, что я против flex. Просто, у нас еще есть клиенты, которые сидят даже на IE8
NeoCode
26.03.2017 11:50+1А зачем это вообще надо, если обычные html и css вполне высокоуровневые удобные языки с очень широкими возможностями?
JTG
26.03.2017 14:04+2Ну поэтому и пишут статьи «7 методов создания колонок одинаковой высоты на удобном высокоуровневом HTML+CSS [путём эксплуатации широких возможностей через задницу]»
DaneSoul
Краткость сестра таланта?