Romych: /* Размер начиная с: */

2020-09-14T11:44:22Z

Размер начиная с:

Нова сторінка

←[[Bootstrap]]

== Сдвиг колонок вправо ==

* Bootstrap 3: <code>col-md-offset-1</code>
* Bootstrap 4: <code>offset-md-1</code>

Пример: этот <code>div</code> будет выглядеть как столбец шириной 10 колонок с отступами в одну колонку слева и справа:

<source lang="html5">
<div class="col-md-10 col-md-offset-1">Test</div>
</source>

Миксин в Sass:

<source lang="css">
@include media-breakpoint-up(md) {
@include make-col-offset(1);
}
</source>

== .container на всю ширину ==

Иногда бывает нужно сделать так, чтобы <code>.container</code> на размерах типа <code>sm</code> или <code>md</code> становился 100% ширины (на <code>xs</code> он и так 100%).

<source lang="css">
@include media-breakpoint-down(md) {
.container { width: 100%; max-width: none; }
}
</source>

== Вертикальное выравнивание ==

Используем Flex:

* добавляем Flex любому <code>div</code> с помощью класса <code>d-flex</code>;
* или используем тот факт, что в Bootstrap 4 у <code>row</code> уже назначен <code>Flex</code>.

<source lang="html">
<div class="d-flex align-items-center" style="min-height: 100px;">
<p>Выровненный по вертикали текст</p>
</div>

<div class="container">
<div class="row align-items-center" style="min-height: 100px;">
<p>Выровненный по вертикали текст</p>
</div>
</div>

<div class="d-flex align-items-center justify-content-center" style="min-height: 100px;">
<p>Выровненный по вертикали и горизонтали текст</p>
</div>

<div class="container">
<div class="row align-items-center justify-content-center" style="min-height: 100px;">
<p>Выровненный по вертикали и горизонтали текст</p>
</div>
</div>
</source>

Готовый сниппет:

<source lang="sass">
.centered {
@extend .d-flex;
@extend .align-items-center;
@extend .justify-content-center;
}
</source>

Или на чистом CSS:

<source lang="sass">
.centered {
display: flex;
align-items: center;
justify-content: center;
}
</source>

== Адаптивная картинка ==

Добавить <code>class</code> к тэгу <code>img</code> ([http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=responsive-images пример]):

* Bootstrap 3: <code>img-responsive</code>
* Bootstrap 4: <code>img-fluid</code>

== Градиент ==

* Bootstrap 4:

<source lang="javascript">
@include gradient-y(dodgerblue, gold, 10%, 100%);
</source>

Здесь:

* <code>gradient-y</code> — вертикальный градиент; для горизонтального используйте <code>gradient-x</code>
* <code>dodgerblue, gold</code> — начальный и конечный цвет градиента;
* <code>10%, 100%</code> — сдвиг начала градиента в начале и в конце. В данном случае 10% означает, что сначала (сверху) 10% занимает чистый цвет, затем идет градиент, а 100% означает, что градиент идет до самого конца. Чтобы сдвинуть нижний край градиента на 10%, нужно второе значение сделать не 100%, а 90%.

== stretched-link — ссылка, включающая в себя враппер ==

К ссылке добавляем класс <code>.stretched-link</code>, к врапперу — <code>position: relative;</code>

Типичный пример — кнопка:

<source lang="html">
<ul class="tag__list">
<li class="tag__item">
<a class="tag__link" href="#">Анкор 1</a>
</li>
<li class="tag__item">
<a class="tag__link" href="#">Анкор 2</a>
</li>
</ul>
</source>

<source lang="sass">
.tag__list {
list-style: none;
}

.tag__item {
position: relative; // Обязательно
display: inline-block;
padding: .5rem 1rem;
background-color: silver;
&:hover {
background-color: orange;
}
}

.tag__link {
@extend .stretched-link; // Обязательно
}
</source>

== Buttons / Кнопки ==

Кнопка с ссылкой внутри:

<source lang="html5">
<button>
<a href="#">Отправить</a>
</button>
</source>

Стиль <code>cta</code> (от Call to Action) с разметкой по BEM:

<source lang="html5">
<button class="cta__button">
<a class="cta__link" href="#">Отправить</a>
</button>
</source>

<source lang="sass">
.cta__button {
@extend .btn; // необязательно — импортируем стандартные стили кнопок Bootstrap
position: relative; // обязательно для .stretched-link
background-color: pink;
&:hover { background-color: red; }
}

.cta__link {
@extend .stretched-link; // расширяем кликабельную область до всей кнопки
text-decoration: none;
&:hover { color: white; }
}
</source>

== Текст ==

Выравнивание

<source lang="html5">
<p class="text-justify">Justified text.</p>
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
</source>

Начертание

<source lang="html5">
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italic text.</p>
</source>

Отключение переноса слов

<source lang="html5">
<p class="text-nowrap">No wrap text.</p>
.nav > li > a { white-space: nowrap; }
</source>

Регистр букв
{|
|-
| <source lang="html5">
<p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>
</source>
|| [[Файл:Text-transformation.png|мини]]
|}

== Списки ==

=== Список без стилей ===

<source lang="html5">
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
</ul>
</source>

=== Список в строку ===

Bootstrap 3:

[http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=inline-list пример]:

<source lang="html5">
<ul class="list-inline">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact</li>
</ul>
</source>

Bootstrap 4 — комбинация двух стилей: <code>.list-inline</code> и <code>.list-inline-item</code>.

<source lang="html">
<ul class="list-inline">
<li class="list-inline-item">Текст</li>
<li class="list-inline-item">Текст</li>
</ul>
</source>

=== Список в виде плашек ===

[http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=list-group пример]:

{|
|-
| [[Файл:List-group.png]] ||
<source lang="html5">
<ul class="list-group">
<li class="list-group-item">Pictures</li>
<li class="list-group-item">Documents</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Videos</li>
</ul>
</source>
|}

=== Список в виде плашек с подсветкой, иконками и количеством элементов ===

[http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=list-group-with-linked-items пример]:

{|
|-
| [[Файл:List-group-with-linked-items.png]]||
<source lang="html5">
<div class="list-group">
<a href="#" class="list-group-item active">
<span class="glyphicon glyphicon-camera"></span> Pictures <span class="badge">25</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-file"></span> Documents <span class="badge">145</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-music"></span> Music <span class="badge">50</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-film"></span> Videos <span class="badge">8</span>
</a>
</div>
</source>
|}

=== Список со ссылками, заголовками и подсветкой ===

[http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=linked-list-group-with-custom-content пример]:

{|
|-
| [[Файл:Linked-list-group-with-custom-content.png|мини]] ||
<source lang="html5">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">What is HTML?</h4>
<p class="list-group-item-text">HTML stands for HyperText Markup Language.
HTML is the main markup language for describing the structure of Web pages.</p>
</a>
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">What is Bootstrap?</h4>
<p class="list-group-item-text">Bootstrap is a powerful front-end framework
for faster and easier web development. It is a collection of HTML and CSS
based design template.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">What is CSS?</h4>
<p class="list-group-item-text">CSS stands for Cascading Style Sheet. CSS allows
you to specify various style properties for a given HTML element such as colors,
backgrounds, fonts etc.</p>
</a>
</div>
</source>
|}

=== Список определений ===

[http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=horizontal-definitoin-list пример]:

{|
|-
| [[Файл:Horizontal-definitoin-list.png|мини|На большом экране]][[Файл:Horizontal-definitoin-list-2.png|мини|На узком экране]] ||
<source lang="html5">
<dl class="dl-horizontal">
<dt>User Agent</dt>
<dd>An HTML user agent is any device that interprets HTML documents.</dd>
<dt>Client-side Scripting</dt>
<dd>Client-side scripting generally refers to the category of computer programs
on the web that are executed client-side i.e. by the user's web browser.</dd>
<dt>Document Tree</dt>
<dd>The tree of elements encoded in the source document.</dd>
</dl>
</source>
|}

== Формы ==

=== Изменение размера полей ===

По умолчанию размеры полей меняются 3 стилями:

.form-control
.form-control-sm
.form-control-lg

Последние два используются только в паре с первым:

<source lang="html">
<input class="form-control form-control-lg">
</source>

Аналогично подписи:

.col-form-label
.col-form-label-sm
.col-form-label-lg

Если нужно сильнее изменить размер поля — например, еще больше увеличить — добавляем в <code>_custom_variables.scss</code> строку и увеличиваем параметры:

<source lang="sass">
$input-height-lg: calc(1.5em + .5rem + 2px);
</source>

Приведены значения параметров по умолчанию. Они вычисляется здесь <code>node_modules/bootstrap/scss/_variables.scss</code>:

<source lang="sass">
$input-height-lg: add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
</source>

где:

<source lang="sass">
$input-line-height-lg = $input-btn-line-height-lg = $line-height-lg: 1.5;
$input-padding-y-lg = $input-btn-padding-y-lg: .5rem;
$input-height-border = $input-border-width * 2;
$input-border-width = $input-btn-border-width = $border-width: 1px;
</source>

<source lang="sass">
$input-padding-x-lg = $input-btn-padding-x-lg: 1rem;
</source>

Соответственно, можно менять не напрямую <code>$input-height-lg</code>, а какие-то из изначальных параметров.

=== Изменение размера текста полей ===

<source lang="sass">
$input-font-size-sm = $input-btn-font-size-sm = $font-size-sm = $font-size-base * .875;
$input-font-size-lg = $input-btn-font-size-lg = $font-size-lg = $font-size-base * 1.25;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
</source>

=== Floating Label ===

* [https://github.com/tkrotoff/bootstrap-floating-label Bootstrap 4 Floating Label] — GitHub
* https://codesandbox.io/s/ly95vkpv8q

[[Файл:Floating-label.gif]]

npm install @tkrotoff/bootstrap-floating-label

main-bootstrap.scss:

<source lang="sass">
@import "bootstrap";
@import '../../../../node_modules/@tkrotoff/bootstrap-floating-label/src/bootstrap4-floating-label';
</source>

HTML:

<source lang="html">
<div class="container">
<form class="row mt-5 mb-5">
<div class="col-6">

<div class="form-group floating-label">
<input id="name1" class="form-control form-control-lg" placeholder=" " />
<label for="name1">Ваше имя</label>
</div>
<div class="form-group floating-label">
<input id="phone1" type="text" class="form-control form-control-lg" placeholder=" ">
<label for="phone1">Ваш номер телефона</label>
</div>
<button type="submit" class="btn btn-primary">Отправить</button>

</div>
</form>
</div>
</source>

[[Файл:Floating-label-bootstrap.png]]

== Media queries ==

=== Bootstrap 4 ===

* https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints
* http://saddamazad.com/2015/12/bootstrap-4-media-queries-using-sass/

==== Размер от: ====

<source lang="scss">
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// @include media-breakpoint-up(xs) {} // не нужен

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { }
@include media-breakpoint-up(sm) {}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { }
@include media-breakpoint-up(md) {}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { }
@include media-breakpoint-up(lg) {}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { }
@include media-breakpoint-up(xl) {}
</source>

==== Обратный порядок — размер до: ====

<source lang="scss">
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { }
@include media-breakpoint-down(xs) {}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { }
@include media-breakpoint-down(sm) {}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { }
@include media-breakpoint-down(md) {}

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { }
@include media-breakpoint-down(lg) {}

// Extra large devices (large desktops)
// @include media-breakpoint-down(xl) {} // не нужен
/* No media query since the extra-large breakpoint has no upper bound on its width */
</source>

==== Точный размер — от и до: ====

<source lang="scss">
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { }
@include media-breakpoint-only(xs) {}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { }
@include media-breakpoint-only(sm) {}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { }
@include media-breakpoint-only(md) {}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { }
@include media-breakpoint-only(lg) {}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { }
@include media-breakpoint-only(xl) {}
</source>

=== Bootstrap 3 ===

<source lang="javascript">
$screen-xs-max: 767px
$screen-sm-min: 768px;
$screen-md-min: 992px
$screen-lg-min: 1200px;

@media(max-width: $screen-xs-max) {} /* Extra Small: ≤ 767px */
@media(min-width: $screen-sm-min) {} /* Small: 768px-991px */
@media(min-width: $screen-md-min) {} /* Medium: 992px-1199px */
@media(min-width: $screen-lg-min) {} /* Large: > 1200px */

/* OR */

@media(max-width: 767px) { } /* Extra Small */
@media(min-width: 768px) and (max-width: 991px) { } /* Small */
@media(min-width: 992px) and (max-width: 1199px) { } /* Medium */
@media(min-width: 1200px) { } /* Large */
</source>

'''Old school CSS values'''

MOBILE FIRST QUERIES

<source lang="javascript">
@media only screen and (min-width : 320px) { } /* Custom, iPhone Retina */
@media only screen and (min-width : 480px) { } /* Extra Small Devices, Phones */
@media only screen and (min-width : 768px) { } /* Small Devices, Tablets */
@media only screen and (min-width : 992px) { } /* Medium Devices, Desktops */
@media only screen and (min-width : 1200px) { } /* Large Devices, Wide Screens */
</source>

DESKTOP FIRST QUERIES

Use this if you are designing a full-width layout first. This is not the recommended way with Bootstrap 3.

<source lang="javascript">
@media only screen and (max-width : 1200px) { } /* Large Devices, Wide Screens */
@media only screen and (max-width : 992px) { } /* Medium Devices, Desktops */
@media only screen and (max-width : 768px) { } /* Small Devices, Tablets */
@media only screen and (max-width : 480px) { } /* Extra Small Devices, Phones */
@media only screen and (max-width : 320px) { } /* Custom, iPhone Retina */
</source>

Note the difference between the two ways of defining media queries: '''mobile''' first use <code>min-width</code> and '''desktop''' first uses <code>max-width</code>.

Which means that the mobile first way will show your default CSS (the stuff outside of any media query) until a larger screen width is used and the desktop first will show your default until a smaller screen width is used.

== Миксины ==

bootstrap/scss/mixins/_grid.scss

=== Ширина колонки ===

https://getbootstrap.com/docs/4.1/layout/grid/#mixins

<source lang="scss">
@include make-col-ready();
@include make-col(12);
</source>

В HTML должен находиться внутри <code>container > row</code>:

<source lang="html">
<div class="container">
<div class="row">
</source>

Удобно использовать, например, так:

<source lang="scss">
div {
@include media-breakpoint-up(xs) { @include make-col(12); }
@include media-breakpoint-up(sm) { @include make-col(6); }
@include media-breakpoint-up(md) { @include make-col(5); }
@include media-breakpoint-up(lg) { @include make-col(3); }
}
</source>

Реальный пример:

<source lang="scss">
// Основной шаблон внутренних страниц: основное поле 8 колонок с отступом слева 1 колонка и справа 3 колонки
.cols-1-8-3 {
@include make-col-ready();
@include make-col(12); // сначала на мобильных размерах ширина контейнера — 12 колонок
@include media-breakpoint-up(md) { // начиная с MD ширина контейнера — 9 колонок
@include make-col(9);
}
@include media-breakpoint-up(lg) { // начиная с LG добавляется отступ слева в 1 колонку, ширина контента — 8 колонок, справа остается 3 колонки
@include make-col-offset(1);
@include make-col(8);
}
}
</source>
<source lang="html">
<div class="container">
<div class="row">
<div class="cols-1-8-3">
<p>Текст</p>
</div>
</div>
</div>
</source>

* [https://www.sitepoint.com/5-useful-sass-mixins-bootstrap/ 5 Useful Sass Mixins in Bootstrap — SitePoint]

=== Анимация ===

<source lang="javascript">
@include transition(all .5s linear);
</source>

=== Retina ===

Используем миксин <code>.img-retina</code>

<source lang="javascript">
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
</source>

Последние два значения — ширина и высота.

[[Категория: Bootstrap]]
[[Категория:CSS]]

Сниппеты Bootstrap - Історія редагувань

Romych: /* Размер начиная с: */