Самые полезные хитрости в Bootstrap
Bootstrap полон невероятного функционала, но может казаться слишком сложным для многих из нас при детальном изучении. Вы просто не сможете запомнить все функции или взять полностью одну неделю, чтобы зазубрить всю документацию. Уже много раз, даже опытные пользователи удивлялись, когда открывали действительно скрытые секреты этого фреймворка.
Я аккауратно выбрал для вас одни из лучших хитростей и советов, которые использовал в Bootstrap за всю карьеру разработчика и хотел бы поделиться ими с вами.
Для более удобного чтения, я разделил статью на 4 группы.
Это перевод статьи. BOOTSTRAP TIPS AND TRICKS
👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️
Bootstrap сетка
Как сделать столбцы одинаковой высоты?
Это вообще классическая проблема. У вас есть контент боксы с разным контентом, но вам нужно сделать их одинаковой высоты. Решение тут в умном использовании flexbox на bootstrap строках.
Этот подход состоит из 4-х шагов.
1. Создайте .row-flex и примените его к родительской строке контент боксов.
2. Колонки с в .row-flex теперь будут одинаковой высоты.
3. Я обычно не мешаю Bootstrap со своими компонентами и у меня всегда есть фоны, внутренние отступы и т.д. контент боксов объявленных в дочернем элементе .content. Чтобы все точно заработало, всё что вам нужно сделать это выставить height: 100% у .content боксов.
/* показывайте этот ряд с флексами и использованием wrap */.row-flex {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}/* vertical spacing between columns */[class*=”col-”] {margin-bottom: 30px;}.content {height: 100%;padding: 20px 20px 10px;color: #fff;}
Добавляем вертикальный спейсинг колонкам
Чтобы добавить вертикальный спейсинг вашим колонкам, используйте следующее простое CSS правило, которые даст нижний внешний отсутп в 30px для колонок в Bootstrap.
[class*=”col-”] {margin-bottom: 30px;}
Как использовать собственные классы, вместо колонок и строк.
Многим просто напросто не нравится способ, которым Bootstrap пишет код, с колонками и строками, как тут:
<div class=”row”><div class=”col-sm-8 col-lg-9"><p>Main content</p></div><div class=”col-sm-4 col-lg-3"><p>Right column</p></div></div>
Но вы можете легко написать свой код, как в следующем примере:
<div class=”content”><div class=”main”><p>Main content</p></div><div class=”right-column”><p>Right column</p></div></div>
Чтобы этого добиться, вам нужно будет использовать LESS(В 4-ой версии Sass, но ничего сильно не изменилось) Bootstrap миксины, такие как .make-row() и .make-*-column().
.content {.make-row();}.main {.make-sm-column(8);.make-lg-column(9);}.right-column {.make-sm-column(4);.make-lg-column(3);}
Как изменить порядок колонок на мобильных устройствах.
Довольно полезное свойство в сетке Bootstrap это возможность расставлять колонки в разном порядке на мобильных устройствах и десктопных.
Все что вам нужно сделать, это использовать .col-(breakpoint)-push-(number) и .col-(breakpoint)-pull-(number) классы, чтобы подтолкнуть и подтянуть колонки в указанный брейкпоинт(момент по ширине экрана) от изначальных позиций.
Да, это звучит немного сложно и обычно нужно немного времени, чтобы визуализировать результат, но давайте посмотрим на этот пример. В коде ниже, первая колонка появится первой на мобильных устройствах, но будет второй планшетах и десктопах.
<div class=”row”><div class=”col-sm-4 col-sm-push-8 “><div class=”content colour-1">4 cols wide right column appears second on SM+ devices<br>but appears first on mobile</div></div><div class=”col-sm-8 col-sm-pull-4"><div class=”content colour-2">8 cols wide left column appears first on SM+ devices<br>but appears second on mobile</div></div></div>
Как показывать или прятать элементы на мобильных устройствах.
Если вам нужно быстро и просто спрятать элемент только на xs устройствах, то .hidden-xs класс вам в помощь.
Обычно, вы можете использовать .hidden-(breakpoint) класс для остальных брейкпоинтов и комбинировать их вместе, то есть использовать классы .hidden-lg, hidden-md и hidden-sm.
С другой стороны, если вам надо показать элемент только на определнном типе устройств, вы можете использовать .visible-(breakpoint)-(display) классы. Обратите внимание на небольшое различие, тут вам нужно будет применять свойство display. Возможные значения для свойства display тут это block, inline-block и inline. Таким образом, если вам надо показать элемент как блочный на больших устройствах, просто добавьте .visible-lg-block класс к нему. Вообще в официальной докментации все написано очень подробно по этой интересной теме.
Отменяем адаптивность.
Могут ситуации, когда вы бы предпочли показывать страницу не адаптивной. Это к примеру, может быть подготовока страницы к печати или генерация выдачи для PDF.
Вот простые шагы, чтобы отрубить её.
1. Пропустите <meta name=”viewport” …>
2. Выставите фиксированную ширину вашему контейнеру .container {width: 1000px !important;}
Компоненты — navbar, footer
Как открыть выпадающее меню при наведении.
Стандартное поведение дропдаунов в Bootstrap в том, что они открываются при клике. У них есть свои плюсы и минусы, и я обычно держу это состояние по дефолту. Если бы вы хотели открывать дропдауны при наведении, то это по сути не сложный процесс.
Нам нужно будет изменить две вещи и мы применим наши изменения только в тех случаях, если viewport шире 768px, то есть панель навигации не свернута.
Во-первых, добавьте это CSS правило в вашу таблицу стилей, после загрузки Bootstrap CSS. Тут все довольно ясно и понятно, если viewport шире, чем 768px и вы наводите на .dropdown ссылку, .dropdown-menu открывается.
@media only screen and (min-width: 768px) {.dropdown:hover .dropdown-menu {display: block;}}
Во-вторых, если ссылка должна указывать тоже на URL, нам понадобится добавить немного JS кода, чтобы сменить .dropdown сслыки для onclick поведения.
$(‘.dropdown-toggle’).click(function(e) {if ($(document).width() > 768) {e.preventDefault();var url = $(this).attr(‘href’);if (url !== ‘#’) {window.location.href = url;}}});
Как изменить высоту панели навигации
Когда вам надо изменить высоту панели навигации, вам надо настроить больше вещей, чем просто добавить новую высоту в .navbar.
В следующем коде я выделил подход, как изменить высоту панели навигации до 80px.
.navbar {min-height: 80px;}.navbar-brand {padding: 0 15px;height: 80px;line-height: 80px;}.navbar-toggle {/* (80px — button height 34px) / 2 = 23px */margin-top: 23px;padding: 9px 10px !important;}@media (min-width: 768px) {.navbar-nav > li > a {/* (80px — line-height of 27px) / 2 = 26.5px */padding-top: 26.5px;padding-bottom: 26.5px;line-height: 27px;}}
Как создать прилипающий футер.
Чтобы создать прилипающий подвал для вашего сайта, следуйте следующим шагам:
1. Создайте футер элемент и выставите его позицию на абсолют с нижним оффсетом 0. Выставите фиксированную высоту для него. В моем примере это будет 80px.
2. Добавьте нижний внутренний отступ <body> элементу, добавьте ему тоже значение, что и высоте подвала.
body {height: 100%;padding-bottom: 80px;}.footer {position: absolute;bottom: 0;width: 100%;height: 80px;background: #fafafa;border-top: solid 1px #eee;}/* additional demo styles */.footer p {margin-top: 30px;}.article {padding-top: 40px;}
Как создать кастомные Bootstrap кнопки
Bootstrap идет с пятью дефолтными стилями кнопок — default, primary, success, danger и т. п.
Когда вам надо сменить вид главной кнопки, сократив border-radius или padding, то лучше способом будет перезаписать .btn класс.
Кроме этого, я бы предпочел создать новый тип кнопки и расширить общий стиль Bootstrap.
В этом примере, давайте создадим кнопку с внешними линиями и темно синюю кнопку.
1. Я создам 2 класса: .btn-outline и .btn-colour-1. Эти классы расширят стандартный стиль .btn.
2. В CSS, я стилизую их дефолтное состояние и также :active, :focus, :hover и .active Все это будет иметь тот же стиль.
3. Когда это будет сделано, я буду готов использовать новую кнопку. <a class=”btn btn-outline”>New button</a>
.btn-outline {color: #4fbfa8;background-color: #ffffff;border-color: #4fbfa8;font-weight: bold;letter-spacing: 0.05em;}.btn-outline {color: #4fbfa8;background-color: #ffffff;border-color: #4fbfa8;font-weight: bold;border-radius: 0;}.btn-outline:hover,.btn-outline:active,.btn-outline:focus,.btn-outline.active {background: #4fbfa8;color: #ffffff;border-color: #4fbfa8;}.btn-colour-1 {color: #fff;background-color: #004E64;border-color: #004E64;font-weight: bold;letter-spacing: 0.05em;border-radius: 0;}.btn-colour-1:hover,.btn-colour-1:active,.btn-colour-1:focus,.btn-colour-1.active {/* let’s darken #004E64 a bit for hover effect */background: #003D4F;color: #ffffff;border-color: #003D4F;}
Как отключить кнопки и другие элементы форм.
Вы можете легко отключит кнопки и инпуты в ваших формах. Когда вы это отмените, кнопки будут выглядеть ярче и не будут иметь курсор при наведении.
Для отключения radio и чекбоксов:
Добавьте disabled класс родителю чекбокса или радио элементов.
Добавьте атрибут disabled инпуту
<div class=”checkbox disabled”><label><input type=”checkbox” value=”” disabled>This checkbox is disabled</label></div><div class=”radio disabled”><label><input type=”radio” name=”optionsRadios” id=”optionsRadios3" value=”option3" disabled>This radio is disabled</label></div>
Для отключения кнопок:
Добавьте этот же атрибут для <button> кнопок
Или добавьте .disabled класс <a> кнопкам
<button type=”button” class=”btn btn-primary” disabled=”disabled”>Disabled button</button><a href=”#” class=”btn btn-primary disabled” role=”button”>Disabled link button</a>
Советы по типографии и шаблону
Как отцентровать блочный элемент.
Чтобы просто горизонтально отцентрировать блочный элемент, просто добавьте ему класс .center-block, как тут <div class=”center-block”></div>
Этот класс добавит следующие CSS стили вашим элементам:
// Class.center-block {display: block;margin-left: auto;margin-right: auto;}// .element {.center-block();}
Как отцентрировать инлайновый контент
Если вам нужно быстро отцентрировать инлайновый контент или inline-block элементы внутри div, добавьте .text-center класс родительскому элементу.
Давайте быстро горизонтально отцентруем текст и кнопку в следующем коде:
<p class=”text-center”>This will be horizontally aligned to the center.</p><p class=”text-center”><a class=”btn btn-primary”>This button will be centered too.</a></p>
Как использовать классы заголовков.
Вы часто сталкиваетесь с проблемой, когда вам нужен визально маленький заголовок, но он должен быть <h2>. Чтобы изобрасить присутствие <h4>, просто добавьте .h4 вашему h2. Посмотрите больше в следующем примере.
<h2 class=”h4">This heading will look like h4 but it is h2.</h2>
Как адаптивно вставить YouTube или Vimeo видео.
Вы можете легко вставить YouTube или Vimeo ведео, используя Bootstrap embed-responsive классы.
Выберите embed-responsive-16by9 или embed-responsive-4by3 основываясь на вашем разрешении экрана.
<div class=”row”><div class=”col-sm-6"><! — 16:9 →<h4>16:9 Aspect Ratio</h4><div class=”embed-responsive embed-responsive-16by9"><iframe class=”embed-responsive-item” src=”//www.youtube.com/embed/zB4I68XVPzQ"></iframe></div></div><div class=”col-sm-6"><! — 4:3 →<h4>4:3 Aspect Ratio</h4><div class=”embed-responsive embed-responsive-4by3"><iframe class=”embed-responsive-item” src=”//www.youtube.com/embed/zB4I68XVPzQ"></iframe></div></div></div>
