Bootstrap адаптивный текст: Типографика. Содержание · Bootstrap v5.0.2

Leave a Comment / Адаптив / By alexxlab / 03.11.1977

Содержание

Типографика · Bootstrap 4 на русском v4.5

Смотреть на GitHub

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

Глобальные настройки

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

Используйте набор встроенных шрифтов, который выберет лучшее семейство шрифтов font-family для всех ОС и девайсов.
Для более широкой и доступной шкалы шрифтов Bootstrap использует шрифт браузера по умолчанию font-size (обычно 16px), так что юзеры могут сами настроить шрифты через настройки шрифтов браузера.
Используйте атрибуты $font-family-base, $font-size-base и $line-height-base как типографическую базу для <body>.
Задавайте глобальные цвета ссылок через $link-color и применяйте подчеркивание ссылок только в :hover.
Используйте $body-bg для задания background-color для <body> (по умолчанию стоит #fff).

Эти стили находятся в _reboot.scss, а глобальные переменные определены в _variables.scss. Задавайте $font-size-base в rem.

Заголовки

Все HTML-заголовки (<h2>—<h6>) доступны в Bootstrap.

Заголовок	Пример
`<h2></h2>`	h2. Заголовок bootstrap
`<h3></h3>`	h3. Заголовок bootstrap
`<h4></h4>`	h4. Заголовок bootstrap
`<h5></h5>`	h5. Заголовок bootstrap
`<h5></h5>`	h5. Заголовок bootstrap
`<h6></h6>`	h6. Заголовок bootstrap

<h2>h2. Заголовок bootstrap </h2>
<h3>h3. Заголовок bootstrap </h3>
<h4>h4. Заголовок bootstrap </h4>
<h5>h5. Заголовок bootstrap </h5>
<h5>h5. Заголовок bootstrap </h5>
<h6>h6. Заголовок bootstrap </h6>

Если вы хотите, чтобы стилизация шрифта совпадала с заголовком, но не можете использовать соотнесенный HTML-элемент, классы .h2 — .h6 также доступны.

h2. Заголовок bootstrap

h3. Заголовок bootstrap

h4. Заголовок bootstrap

h5. Заголовок bootstrap

h6. Заголовок bootstrap

<p>h2. Заголовок bootstrap </p>
<p>h3. Заголовок bootstrap </p>
<p>h4. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h6. Заголовок bootstrap </p>

Настройка заголовков

Используйте имеющиеся общие классы для воссоздания маленького вторичного текста-подзаголовка из Bootstrap 3.

Заголовок отображения С выцветшим вторичным текстом

<h4>
  Заголовок отображения
  <small>С выцветшим вторичным текстом</small>
</h4>

Отображение заголовков

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

Display 1

Display 2

Display 3

Display 4

<h2>Display 1</h2>
<h2>Display 2</h2>
<h2>Display 3</h2>
<h2>Display 4</h2>

Лид

Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p>
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Блочные текстовые элементы

Стили для обычных блочных элементов HTML5.

тег-выделитель для подсветки текста.

~~Удаленный текст.~~

~~Зачеркнутый.~~

Строка — дополнение к документу.

Подчеркнутая

Мелкий шрифт (типа нижний индекс).

Жирный текст.

Курсив.

<p>тег-выделитель для <mark>подсветки</mark> текста.</p>
<p><del>Удаленный текст.</del></p>
<p><s>Зачеркнутый.</s></p>
<p><ins>Строка - дополнение к документу.</ins></p>
<p><u>Подчеркнутая</u></p>
<p><small>Мелкий шрифт (типа нижний индекс).</small></p>
<p><strong>Жирный текст.</strong></p>
<p><em>Курсив.</em></p>

Классы .mark и .small дают стили, одинаковые с тегами <mark>

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

Также, свободно пользуйтесь тегами <b> и <i> в HTML5. <b> создан для выделения слов или фраз, когда выделение не придает словам дополнительной важности, а <i> выделяет цитаты, прямую речь, термины и т.д.

Классы текстовых утилит

Изменяйте выравнивание текста, стиль, жирность и цвет с помощью текстовых утилит и утилит цвета.

Сокращения

Реализация элемента <abbr> нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.

Добавьте класс .initialism к сокращению для создания слегка уменьшенного шрифта.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>

Цитаты

Для цитат с другого источника в вашем документе. Оберните любой элемент в <blockquote> для создания цитаты.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Наименование источника

Добавьте <footer> для идентификации источника. Оберните имя источника в <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Source Title</cite></footer>
</blockquote>

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

Используйте текстовые утилиты, если необходимо изменить выравнивание блока цитат.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>

Списки

Без элементов стилизации

Удаляет свойство по умолчанию list-style

и левый марджин элементов списка (только прямые потомки).

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Блочные

Удаляет у элементов списка значок слева и создает небольшой отступ margin с помощью сочетания классов . list-inline и .list-inline-item.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul>
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

Описание и выравнивание

Выравнивайте термины и описания по горизонтали, используя предустановленные классы сеточной системы Bootstrap (или семантические миксины). Для более длинных терминов вы можете добавить класс .text-truncate чтобы усечь текст эллипсом.

Списки описания

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Truncated term is truncated

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Вложенность

Список вложенных определений: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>

  <dt>Euismod</dt>
  <dd>
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt>Truncated term is truncated</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </dd>

  <dt>Nesting</dt>
  <dd>
    <dl>
      <dt>Nested definition list</dt>
      <dd>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Отзывчивая типографика

В Bootstrap включена опция возможность адаптивного изменения размера шрифта, что позволяет тексту более естественно масштабироваться в зависимости от размеров устройства и области просмотра. RFS можно включить, изменив переменную $enable-responsive-font-sizes в Sass на true и перекомпилировав Bootstrap.

Для поддержки RFS мы используем миксин Sass, чтобы заменить наши обычные свойства размера шрифта font-size. Размеры адаптивного шрифта будут скомпилированы в функции calc() со смесью блоков rem, чтобы включить адаптивное масштабирование. Больше информации о RFS и его конфигурации можно найти в репозитории GitHub.

Bootstrap размер шрифта или адаптируем символы под любые разрешения экрана

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

Я расскажу, какие элементы управления присутствуют в фреймворке для редактирования текста, каким образом видоизменяется текстовый контент при масштабировании и как сделать так, чтобы размер символов изменялся вместе с изменением размеров окна. Как обычно, я приведу примеры кода. А теперь за дело!

Все о Bootstrap Typography

В изучаемом фреймворке есть целый раздел, выделенный под редактирование и форматирование текстового контента. Для начала стоит отметить, что некоторые параметры, установленные по умолчанию в Бутстрапе, несколько отличаются от стандартных установок в браузерах. По ходу статьи вы сами заметите какие именно.

Итак, в Bootstrap 3 по умолчанию выставлен шрифт размером в 14 пикселей и межстрочным интервалом в 1.428.

Присутствуют все 6 уровней заголовков при этом первый уровень равен 36px, а шестой – 12px.

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

<div>
  <h2>Первый заголовок <small>вспомогательный текст</small></h2>
  <p>Содержание абзаца.</p>
</div>

Интересным тегом является <mark>. Текст, обрамленный в такой парный элемент, выглядит так, будто выделен хайлайтером.

<p>Предложение с <mark>важным</mark> словом.</p>

Не менее интересным, по моему мнению, является и элемент <abbr>. Как вы уже догадались, с его помощью можно расшифровывать аббревиатуры.

<p>Вчера был замечен <abbr title=»Неопознанный летающий объект»>НЛО</abbr> прямо над столицей.</p>

Для того чтобы выделить, например, комбинацию клавиш, можно использовать тег <kbd>:

<p>Используйте <kbd>ctrl + U</kbd> для открытия исходного кода веб-страниц.</p>

Помимо перечисленных инструментов управления текстом, существуют также и классы, которые расширяют возможности фреймворка.

Наиболее интересные для текущей темы являются .lead и .pre-scrollable. Их описание я поместил в таблицу.

Класс	Описание
.lead	Выделяет некий параграф текста более крупным и жирным начертанием шрифта. При этом размер и толщина символов изменяется во время горизонтального масштабирования.
.pre-scrollable	Добавляет горизонтальное скроллирование для объектов тега <pre> в зависимости от разрешения экрана.

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

Решение найдено!

Для выхода из сложившейся ситуации в css3 было найдено решение в виде таких размерностей, как vw, vh, vmin и vmax. С их помощью шрифт изменяется вместе с масштабированием экрана. При чем по разным координатным осям.

Размерность	Описание
vw	Изменения происходят на 1% в зависимости от ширины окна просмотра.
vh	Размер шрифта меняется на 1% в зависимости от высоты веб-страницы.
vmin	Изменение шрифта происходит по двум осям, однако в этом случае текст увеличивается до определенного момента, а уменьшается неограниченно.
vmax	Аналогично предыдущему, однако увеличивается неограниченно, а уменьшается до определенного момента.

Для сравнения рассмотрите пример и проанализируйте соотношение размеров предложений и окна.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Пример для сравнения</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap. min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div>
  <h2>Первый заголовок</h2>
<h2> Второй заголовок </h2>
<h2> Третий заголовок </h2>
<h2> Четвертый заголовок </h2>
</div>
 
</body>
</html>

Теперь и вы владеете базовыми навыками подгонки текста под размеры дисплея. Если кто-то из вас желает расширить свои знания, то подписывайтесь на обновления моего блога. Буду очень благодарен, если вы поделитесь ссылкой и со своими знакомыми. До новых встреч!

Пока-пока!

С уважением, Роман Чуешов

Прочитано: 1720 раз

Понравилась статья? Поделись с друзьями:

Этот блог уже читают
читай и ты!

Адаптивность | Bootstrap 5: Основы верстки

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Адаптивность — неотъемлемая часть любого современного сайта. Со многими концепциями адаптивности вы познакомились в курсе CSS: Адаптивность. Теперь эти знания помогут быстро понять то, как работает Bootstrap.

В своей основе Bootstrap использует подход Mobile First. Это означает, что вначале указывается код для мобильных устройств, а потом код для десктопа. Возникает вопрос: «А причем тут Mobile First, если необходимо только использовать нужные классы?». Ответ на данный вопрос кроется в том, с какими разрешениями экрана работает Bootstrap. Таких разрешений в последней версии пять:

Extra small. Ширина viewport меньше 576px. Внутри Bootstrap такое разрешение никак не маркируется. Данный тип является значением по умолчанию. Ширина .container: 100%
Small. Ширина viewport больше или равна 576px. Внутри Bootstrap такое разрешение маркируется как -sm-. Ширина .container: 540px
Medium. Ширина viewport больше или равна 768px. Внутри Bootstrap такое разрешение маркируется как -md-. Ширина .container: 720px
Large. Ширина viewport больше или равна 992px. Внутри Bootstrap такое разрешение маркируется как -lg-. Ширина .container: 960px
Extra large. Ширина viewport больше или равна 1200px. Внутри Bootstrap такое разрешение маркируется как -xl-. Ширина .container: 1140px

Префикс	Ширина viewport	Ширина container
`-sm-`	>=576px	540px
`-md-`	>=768px	720px
`-lg-`	>=992px	960px
`-xl-`	>=1200px	1140px

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

Важно: используя данные префиксы важно помнить о подходе Mobile First. Это значит, что префиксы влияют на свою и более ширину viewport. Например, классы с префиксом -md- не будут использоваться при разрешении менее 768px.

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

<div>
  <div>
    <aside>
      <!-- Боковая панель -->
    </aside>
    <main>
      <!-- Основной контент -->
    </main>
  </div>
</div>

В этом примере боковая панель работает по следующему алгоритму:

При ширине менее 768px панель занимает всю доступную ширину viewport. За это отвечает класс .col-12
При ширине от 768px до 992px панель занимает 3 из 12 колонок в сетке. За это отвечает класс . col-md-3
При ширине от 992px панель занимает 2 из 12 колонок в сетке. За это отвечает класс .col-lg-2

Перейдите на сайт Codepen, чтобы полноценно увидеть результат. Измените колонки так, как хочется.

Начиная с версии Bootstrap 4.4 появились новые классы для создания колонок. Такими классами стали .row-cols-*, где * — значение от 1 до 6. Что же в них такого интересного? Они позволяют на уровне row задать количество колонок при использовании класса .col у дочерних элементов. Это полезно для создания секции однотипных элементов, которые имеют одинаковую ширину. Такими элементами могут являться карточки товара.

Как и у классов .col-*, классы вида .row-cols-* имеют префиксы, изученные в этом уроке. Их назначение и принцип работы ничем не отличается. Для примера создадим небольшой каталог, который:

При ширине больше 992px расставляет по 6 карточек в ряд
При ширине от 768px до 992px расставляет по 4 карточки в ряд
При ширине от 576px до 768px расставляет по 2 карточки в ряд
При ширине меньше 576px расставляет по 1 карточке в ряд

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

<div>
  <div>
    <article><!-- Верстка карточки --></article>
    <article><!-- Верстка карточки --></article>
    <article><!-- Верстка карточки --></article>
    <article><!-- Верстка карточки --></article>
    <article><!-- Верстка карточки --></article>
    <article><!-- Верстка карточки --></article>
    <article><!-- Верстка карточки --></article>
    <article><!-- Верстка карточки --></article>
    <article><!-- Верстка карточки --></article>
    <article><!-- Верстка карточки --></article>
    <article><!-- Верстка карточки --></article>
    <article><!-- Верстка карточки --></article>
  </div>
</div>

Типографика · Bootstrap

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

Глобальные настройки

Bootstrap устанавливает базовые глобальные стили отображения, типографики и ссылок. Когда требуется больше контроля, проверьте текстовые служебные классы.

Используйте собственный стек шрифтов, который выбирает лучшее семейство шрифтов для каждой ОС и устройства.
Для более всеобъемлющей и доступной шкалы типов мы предполагаем корневой каталог браузера по умолчанию размер шрифта (обычно 16 пикселей), чтобы посетители могли настроить свои браузеры по умолчанию по мере необходимости.
Используйте атрибуты $font-family-base , $font-size-base и $line-height-base в качестве нашей типографской базы, примененной к .
Установите глобальный цвет ссылки с помощью $link-color и примените подчеркивание ссылки только к :hover .
Используйте $body-bg , чтобы установить фоновый цвет на ( #fff по умолчанию).

Эти стили можно найти в _reboot.scss , а глобальные переменные определены в _variables.scss . Обязательно установите $font-size-base в rem .

Заголовки

Доступны все заголовки HTML от

до

Заголовок	Пример
	х2. Заголовок начальной загрузки
	х3. Заголовок начальной загрузки
	h4. Заголовок начальной загрузки
	h5. Заголовок начальной загрузки
	h5. Заголовок начальной загрузки
	h6. Заголовок начальной загрузки

h2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

9Также доступны классы от 0135

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

х2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

h2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

Настройка заголовков

Используйте включенные служебные классы, чтобы воссоздать небольшой вторичный текст заголовка из Bootstrap 3.

Необычный заголовок дисплея

С блеклым вторичным текстом

 
  Необычный заголовок дисплея
  
С блеклым второстепенным текстом

Показать заголовки

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

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

  Экран 1 
 Экран 2 
 Экран 3 
 Экран 4

Свинец

Выделите абзац, добавив . lead .

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Элементы встроенного текста

Стили для обычных встроенных элементов HTML5.

Вы можете использовать тег метки, чтобы выделить текст.

~~Эта строка текста должна рассматриваться как удаленный текст.~~

~~Эта строка текста считается неточной.~~

Эта строка текста должна рассматриваться как дополнение к документу.

Эта строка текста будет отображаться как подчеркнутая

Эта строка текста должна рассматриваться как мелкий шрифт.

Эта строка выделена жирным шрифтом.

Эта строка выделена курсивом.

Тег mark можно использовать для выделения текста.

~~Эта строка текста должна рассматриваться как удаленный текст.~~

~~Эта строка текста больше не соответствует действительности.~~

Эта строка текста должна рассматриваться как дополнение к документу.

Эта строка текста будет отображаться как подчеркнутая

Эта строка текста должна рассматриваться как мелкий шрифт.

Эта строка выделена жирным шрифтом.

Эта строка выделена курсивом.

9Также доступны классы 0135

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

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

Текстовые утилиты

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

Сокращения

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

Добавить .инициализм на аббревиатуру для немного меньшего размера шрифта.

атрибут

HTML

атрибут

HTML

Цитаты
Для цитирования блоков содержимого из другого источника в вашем документе. Оберните
вокруг любого HTML в качестве цитаты.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.
<цитата>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число ставится перед ставкой.

Наименование источника

Добавьте <нижний колонтитул> для идентификации источника. Заключите название исходной работы в .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

 <цитата>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число ставится перед ставкой.
  Кто-то известен в исходном названии

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

 <цитата>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число ставится перед ставкой.
  Кто-то известен в исходном названии

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

 <цитата>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число ставится перед ставкой.
  Кто-то известен в исходном названии

Списки

Без стиля

Удалить стиль списка по умолчанию и левое поле для элементов списка (только непосредственные дочерние элементы). Это относится только к непосредственным дочерним элементам списка , что означает, что вам также нужно будет добавить класс для любых вложенных списков.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целое число слов и масса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit Phasellus iaculis neque Содовый гнойник Vestibulum laoreet porttitor sem Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Энеан сит амет эрат нунк
Eget porttitor lorem

 <ул>
  Lorem ipsum dolor sit amet
  Создание элитной косметики
  Целое число слов и масса
  Facilisis in pretium nisl aliquet
  Nulla volutpat aliquam velit
    <ул>
      
Phasellus iaculis neque
      Популярная сыпь
      Вестибюль лаорет порттитор сем
      Ac tristique libero volutpat
    
  
  Faucibus porta lacus fringilla vel
  Энеан сит амет эрат нунк
  Есть порттитор лорем

`Встроенный`

Удалить маркеры списка и применить небольшое поле с комбинацией двух классов, . list-inline и .list-inline-item .

Лорем ипсум
Фазеллус якулис
Нулла волютпат

 <ул>
  Лорем ипсум
  Phasellus iaculis
  Нулла волютпат

`Выравнивание списка описаний`

Выровняйте термины и описания по горизонтали, используя предопределенные классы нашей системы сетки (или семантические примеси). Для более длинных терминов вы можете дополнительно добавить класс .text-truncate , чтобы обрезать текст многоточием.

Списки описаний

Список описаний идеально подходит для определения терминов.

Эуисмод

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Порт Малесуада

Etiam porta sem malesuada magna mollis euismod.

Усеченный термин усекается

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Вложение

Вложенный список определений: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

 <дл>
  Списки описаний
  Список описаний идеально подходит для определения терминов.
  Эйсмод
  <дд>
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    Donec id elit non mi porta gravida at eget metus.
  
  Малесуада Порта
  Etiam porta sem malesuada magna mollis euismod.
  Усеченный термин усекается
  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  Вложение
  <дд>
    <дл>
      Вложенный список определений
      Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

`Адаптивный размер шрифта`

Bootstrap v4. 3 поставляется с возможностью включения адаптивных размеров шрифта, что позволяет более естественно масштабировать текст в зависимости от размера устройства и области просмотра. RFS можно включить, изменив переменную $enable-responsive-font-sizes Sass на true и перекомпилировав Bootstrap.

Для поддержки RFS мы используем миксин Sass для замены наших обычных свойств размера шрифта . Адаптивные размеры шрифта будут объединены в calc() работает со смесью rem и единиц измерения окна просмотра, чтобы обеспечить адаптивное поведение масштабирования. Подробнее о RFS и его конфигурации можно найти в репозитории GitHub.

`Bootstrap 5 Типографика и форматирование текста`

Рекламные объявления

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

`Работа с заголовками`

Вы можете определить все заголовки HTML, 9от 0010

до — точно так же, как вы определяете в простом HTML-документе. Вы также можете использовать классы заголовков с .h2 по .h6 для других элементов, если хотите применить стиль к тексту элемента так же, как к заголовкам.
Пример
Попробуйте этот код »

h2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

— вывод приведенного выше примера будет выглядеть примерно так:
Настройка заголовков
Кроме того, вы можете использовать тег с классом .text-muted для отображения вторичного текста любого заголовка в более мелком и легком варианте. Вот пример:
Пример
Попробуйте этот код »

Необычный заголовок дисплея
С блеклым второстепенным текстом
— вывод приведенного выше примера будет выглядеть примерно так:
Отображаемые заголовки
Bootstrap также предоставляет отображаемые заголовки, которые можно использовать, когда вам нужно, чтобы заголовок выделялся. Заголовки отображаются более крупным шрифтом , размером , но более мелким шрифтом , толщиной .
Доступны шесть различных заголовков дисплея. Вот пример:
Пример
Попробуйте этот код »

Отобразить заголовок 1

Отобразить заголовок 2

Отобразить заголовок 3

Отобразить заголовок 4

Отобразить заголовок 5

Отобразить заголовок 6

— вывод приведенного выше примера будет выглядеть примерно так:
Работа с абзацами
Глобальное значение Bootstrap по умолчанию font-size равно 1rem (обычно 16 пикселей) с высотой строки из 1. 5 (обычно 204 пикселя), которая применяется к 0 91 0 0 1 < body 90 элемент, а также все абзацы, то есть элементы
. В дополнение к этому margin-bottom of 1рем также применяется ко всем пунктам.
Вы также можете выделить абзац, добавив к нему класс .lead .
Пример
Попробуйте этот код »

Вот как выглядит обычный абзац в Bootstrap.

Вот как абзац выделяется в Bootstrap.

— Код HTML в приведенных выше примерах даст следующий результат:
Совет: В CSS rem означает «root em». 1rem равен размеру шрифта корневого элемента (т. е. элемента ), который по умолчанию составляет 16 пикселей в большинстве браузеров.
Выравнивание текста
Вы можете легко выровнять текст по левому краю, правому краю и по центру, используя классы выравнивания текста.
Пример
Попробуйте этот код »

Текст с выравниванием по левому краю на всех размерах окна просмотра.

Выравнивание текста по центру на всех размерах окна просмотра.

Текст, выровненный по правому краю, на всех размерах окна просмотра.

— вывод приведенного выше примера будет выглядеть примерно так:
Вы также можете выравнивать текст по размеру экрана, используя классы адаптивного выравнивания текста. Эти классы используют те же контрольные точки ширины области просмотра, что и система сетки.
Пример
Попробуйте этот код »

Текст будет выравниваться по центру на малых (sm) экранах просмотра и выше.

Текст будет выравниваться по центру в окне просмотра среднего размера (md) и выше.

Текст будет выравниваться по центру на больших (lg) экранах просмотра и выше.

Текст будет выравниваться по центру на окнах просмотра очень большого размера (xl) и выше.

Форматирование текста
Вы можете свободно использовать теги форматирования текста, такие как , , , чтобы сделать текст жирным, курсивным, мелким и т. д., таким же образом вы делаете на простой HTML-странице. Вот пример:
Пример
Попробуйте этот код »

Это жирный текст

Это компьютерный код

Это выделенный текст

Это курсив

Это выделенный текст

Это мелкий текст

Это сильно выделенный текст

Это _{нижний индекс} и ^{верхний индекс}

Этот текст вставляется в документ

~~Этот текст удален из документа~~

— вывод приведенного выше примера будет выглядеть примерно так:
Преобразование текста
Вы также можете преобразовать текст в нижний или верхний регистр или сделать его заглавным.
Пример
Попробуйте этот код »

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

— Результат приведенного выше примера будет выглядеть примерно так:
Раскрашивание текста
Цвета — это мощный способ передачи важной информации в дизайне веб-сайтов.
В Bootstrap есть несколько специальных служебных классов, которые можно использовать для этой цели, например, отображение сообщения об успехе зеленым цветом, предупреждения или сообщения об ошибке красным цветом и т. д.
Пример
Попробуйте этот код »

Основной: Прежде чем продолжить, внимательно прочитайте инструкции.

Дополнительно: эта функция была удалена из последней версии.

Успешно: Ваше сообщение успешно отправлено.

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

Предупреждение. Возникла проблема с сетевым подключением.

Опасно! При отправке ваших данных произошла ошибка.

Без звука: этот абзац текста отображается серым цветом.

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

Воображение важнее знаний.

— вывод приведенного выше примера будет выглядеть примерно так:
При указании авторства оберните
в элемент
и используйте
или элемент блочного уровня (например,
) с .blockquote-footer класс, например:
Пример
Попробуйте этот код »
<рисунок> <цитата>
Мир — опасное место для жизни; не из-за злых людей, а из-за людей, которые ничего с этим не делают.

от Альберта Эйнштейна

— вывод приведенного выше примера будет выглядеть примерно так:

Вы также можете выровнять цитаты по правому краю или по центру, просто применив классы выравнивания текста . text-end или .text-center к элементу

или
.
Обрезка длинного текста
Для более длинного текста можно использовать класс .text-truncate , чтобы обрезать текст многоточием. Значение свойства display элемента должно быть равно 9.0010 встроенный блок или блок .
Это особенно полезно в ситуации, когда вы хотите отобразить фрагмент текста в одной строке, но для этого недостаточно места. Давайте рассмотрим пример и посмотрим, как это работает:
Пример
Попробуйте этот код »
<дел> <дел> Быстрая коричневая лиса прыгает через ленивую собаку.

<диапазон> Быстрая коричневая лиса прыгает через ленивую собаку.
Обтекание текстом и переполнение
Вы можете использовать класс .text-wrap для переноса текста внутри элемента путем перезаписи его свойства white-space , если для него установлено значение до или nowrap , например как компоненты значка Bootstrap.
Точно так же вы можете использовать класс .text-nowrap , чтобы предотвратить перенос текста внутри элемента.
Давайте попробуем следующий пример, чтобы понять, как это в основном работает:
Пример
Попробуйте этот код »

Этот текст будет перенесен.
<дел> Этот текст будет переполнять поле элемента.

Перенос длинных слов
Вы можете использовать класс .text-break , чтобы длинные слова не нарушали макет.
Давайте попробуем следующий пример, чтобы понять, как это в основном работает:
Пример
Попробуйте этот код »

<дел>
очень-очень-очень-очень-очень-длинное_слово

Предыдущая страница Следующая страница
41 - Уменьшение шрифта в представлении Bootstrap для мобильных устройств с помощью Dreamweaver
Привет, меня зовут Дэн. В этом видео мы рассмотрим, как применить стили Media Query к нашему дизайну. Теперь в этом случае, мы собираемся сделать что-то хорошее и легкое. Посмотрите на этот шрифт вверху, он говорит: «Давайте сделаем все круто». Что мы собираемся сделать, так это изменить его размер в зависимости от размера браузера. Поэтому, когда дело доходит до мобильных устройств, он будет довольно маленьким, когда это планшеты, он будет средним, а когда это настольные компьютеры, он останется таким же красивым крупным шрифтом.
Первое, что нам нужно сделать, это воссоздать медиа-запросы в нашем собственном css. На данный момент в этих медиа-запросах вверху вы можете видеть зеленую, бирюзовую и фиолетовую. Они есть, но они часть Bootstrap, а мы знаем, что не можем настроить Bootstrap, это плохо. Итак, что нам нужно сделать, это воссоздать точно такие же медиа-запросы в нашем собственном css. Для этого есть масса способов. Вы можете зайти в Bootstrap css, просмотреть код, выяснить и найти, как эта строка здесь, на 6618, есть один из медиа-запросов, и вы можете прокрутить и найти, где находятся другие. Просто скопируйте и вставьте их. Это один из способов сделать это. Я собираюсь сделать это в режиме Live view.
Чтобы сделать это, все, что нам действительно нужно сделать, это вверху здесь я открою свой css, чтобы я мог видеть внизу в разделенном виде. Он применяется в правильном css. Я собираюсь тащить сюда свою маленькую боковую планку, пока не доберусь до того места, где мне нужно быть. Я не слишком беспокоюсь об этом, куда он идет. Я могу печатать сверху, помнишь. Итак, я выстроился в линию с этим первым Media Query, который мне нужен. Я хочу уменьшить масштаб, просто чтобы показать вам, вот этот, вот этот, их четыре. Так что я собираюсь быть из этого размера. На самом деле немного увеличу. Я хочу быть в этом размере здесь.
Чтобы воссоздать его, я нажму кнопку "+". И максимальная ширина - это то, что я хочу. Я хочу, чтобы здесь было именно это число, то есть 767. Поэтому я хочу, чтобы это было 767. И оно входит в мой основной CSS. Я собираюсь нажать «ОК». Наверху здесь ничего не происходит, но вы видите, мой css внизу, у меня есть этот новый Media Query, внутри него ничего нет. Что я собираюсь сделать, чтобы было очень ясно, что это такое, я собираюсь добавить некоторые комментарии. Мы еще не комментировали. Итак, комментируя в css, я собираюсь перейти к просмотру полного кода. Это просто позволяет мне добавлять текст к себе. Это не для того, чтобы компьютер читал. Это просто для того, чтобы я мог визуально видеть, что есть вещи.
Чтобы сделать это, комментируя, здесь с левой стороны, если я удерживаю это, если вы комментируете в HTML, вы должны использовать этот синтаксис, но мы в CSS, я собираюсь удалить что. Мы будем комментировать css, вот этот здесь, второй внизу. Итак, косая черта и звездочка '/*'. И здесь я наберу «Mobile View». И все, что здесь находится, игнорируется браузером. Так что это просто для меня или других разработчиков, чтобы увидеть, и помочь понять, что происходит внутри. Итак, это первый. Давайте посмотрим, как сделать следующий.
Итак, я вернусь к просмотру в реальном времени. Я собираюсь удостовериться, что на моем основном css я буду тащить это за собой. На самом деле не имеет значения, куда вы перетащите его, поднесите его ближе. А вот здесь мы сделали максимальную ширину, и вы можете сказать, что это правильно, потому что эта максимальная ширина зеленого цвета. Этот здесь - максимум и минимум, и он дает этот бирюзовый цвет, не обращайте внимания на фиолетовый внизу. Таким образом, этот бирюзовый цвет имеет максимум и минимум. Итак, мы хотим, чтобы это было "минимум-макс", вот этот. Вы увидите, как он станет бирюзового цвета. Таким образом, минимальная ширина на один пиксель больше, чем у нашей маленькой версии, которая равна 768. А максимальная в этом случае равна 9.91. Я просто копирую то, что сделал Bootstrap. Он входит в мой основной CSS, нажмите «ОК». А я свой main.css проверю, вон он там. Я собираюсь скопировать это. Вот мой мин-макс.
Теперь я могу сделать это тайком. Скопировать и вставить. Этот здесь был «планшет», этот будет «рабочий стол». И я мог бы просто изменить это в представлении кода здесь. Не могу вспомнить навскидку, что это должно быть. Так что он должен быть 992x119. Я собираюсь вернуться к моему css. 992x1199. Вот и все. Так что вы можете сделать это в представлении кода, совершенно нормально.
И посмотрим на последний. А вот этот немного отличается, так что давайте посмотрим на цвета. Помните, что зеленый — это максимальная ширина. Так что это все, что до сих пор. Зеленые - что-то среднее между ними. Так что минимум этого и максимум того. Мы сделали второй, и вот этот последний — наша минимальная ширина. Итак, минимальная ширина, вплоть до бесконечности для очень больших рабочих столов. Очень редко я делаю это таким образом. И я собираюсь сделать это, это будет минимальная ширина. И это будет минимальная ширина 1200. Перейдя к моему основному css, нажмите «ОК». И давайте снова быстро проверим мой основной css. И вы увидите, это еще один мой Media Query. Давайте добавим наш комментарий, и это «Очень большой». «Вид рабочего стола». Большой.
Следующее, что мне нужно сделать, это понять, куда должны идти все остальные коды. Итак, у нас есть эти ребята, и у нас есть этот раздел вверху, который не входит ни в один Media Query, просто зависает сам по себе. Они называют этих парней, которые здесь наверху, Глобал. Так что они применимы ко всему. И что может случиться, так это то, что вы можете иметь почти все свои стили здесь, в Global. Вы можете увидеть термин Global здесь с правой стороны. Таким образом, все, чего нет в этих медиа-запросах, применяется глобально, если только оно не перезаписано кем-либо из этих парней. Это должно быть немного более конкретным. Итак, чтобы сделать это, я найду свой h2. Он где-то здесь. Мой находится на линии 36, ваш будет на какой-то другой строке. Не важно где. Но вы видите здесь, если я схвачу этого парня, я скопирую его. Мы делаем это двумя способами, мы делаем это в представлении кода. Итак, я перехожу к мобильному представлению, убедившись, что вы держите его в скобках. Там есть отверстие, а внизу закрыто, держите его внутри. Помните, возвраты не имеют значения в коде. Так что я собираюсь вставить этого парня. У меня здесь есть h2. Что мы собираемся сделать, так это изменить... Я не хочу менять цвет, на самом деле, я просто сделаю это визуально ясным, на самом деле нет. Я бы просто изменил размер. Я собираюсь удалить все здесь, мне не нужно повторяться, потому что это там, в Global. Все, что я хочу, это изменить его размер, поэтому я собираюсь уменьшить его до чего-то маленького, например, «18 пикселей».
Итак, что произойдет, так это то, что Global будет работать до тех пор, пока не доберется до этого мобильного представления, а затем он будет перезаписан этим размером шрифта. Давайте попробуем. Помните, «Файл», «Сохранить все». Я собираюсь просмотреть в своем браузере. На самом деле я собираюсь использовать предварительный просмотр устройства. Итак, большой размер, применяется глобальный размер, но когда он переходит к мобильному размеру, он переключается и применяет другой h2. Итак, давайте сделаем это для просмотра планшета и рабочего стола, просто чтобы показать вам все различные представления по мере продвижения и показать вам разные способы сделать это. Мы сделали это в режиме просмотра кода, давайте посмотрим, как это сделать в режиме реального времени.
Чтобы сделать это в режиме Live view, переместите ползунок в положение «Планшет». Я внутри этого парня, я собираюсь немного увеличить масштаб. Он в планшете. Что я хочу сделать сейчас, так это найти в моем основном css -- видите, вот мои стили css. Если вы не можете найти, вы находитесь на Media Queries, это может быть закрыто вот так. Так что нажмите и перетащите эту нижнюю часть вниз. Итак, что я могу сделать, если я укажу Global, это будет выше всех моих медиа-запросов и будет применяться во всем мире. В настоящее время там находится мой h2. Итак, что я хочу сделать, мы сделали вариант для максимальной ширины, который является моим мобильным представлением, вы можете увидеть здесь. Единственное, что есть в этом Media Query на данный момент, это h2. Здесь ничего не должно быть, это мой Планшет. Поэтому я собираюсь применить селектор здесь. Я назову это «h2». Нажмите «Ввод» пару раз. И я собираюсь просмотреть, и я собираюсь перейти к «Шрифт» и «Размер шрифта». И я собираюсь изменить размер шрифта на «30». Прокрутите вверх, вот он там, ему 30. Итак, я зайду в свой браузер и посмотрю это, у меня есть эта большая версия, которая находится в Global. Затем мы переходим к меньшему рабочему столу, в нем ничего не изменилось. Однако перейдите на планшет, он уменьшится до меньшего размера шрифта, и он снова станет меньше в мобильном телефоне.
Вы можете работать по своему усмотрению и применять различные размеры шрифта, потому что это довольно большой заголовок. Чего вы не хотите делать, так это писать в две строки, поэтому я уверен, что, когда он уменьшится до небольшого размера, он все еще будет только в одной строке, и это то, что я решил сделать. Что нам также нужно сделать, так это то, что мы только что сделали Заголовок здесь, и что нам нужно сделать, так это то, что вы можете пройти сейчас и произнести этот Заголовок здесь, мы можем настроить. Итак, давайте пойдем и посмотрим на это. Мы сделаем это последнее вместе, что мы и делаем, а затем вы сможете, в свое время, настроить стили, скажем, для p-тега или чего-то еще, что вы использовали с точки зрения стилей, шрифтов и этого большого шрифт здесь, мы можем сделать его меньше. Давайте сделаем это вместе.
Я понял, кто он. Вот это стиль h3. Так что я собираюсь пройти и применить один к Мобильным устройствам. Я собираюсь применить Media Query, извините, я собираюсь применить «Селектор». Используйте стрелку вверх, пока я не настрою h3 или не наберу его. И я собираюсь сделать шрифт, размер шрифта. И я собираюсь сделать его намного меньше, так что я уменьшу размер до «Пикселей» и снова уменьшу до «20 пикселей». На самом деле, возможно, немного больше, «30 пикселей». Почему здесь не обновляется? Это потому, что мой слайдер все еще выровнен с планшетом. Так что, если я сейчас доберусь до Мобила, вот он там, он приспособился. «Файл», «Сохранить все». Перейти к настольной версии. Попробуйте меньше, меньше, меньше. Поехали, он здесь. Нам нужно сделать некоторую очистку с точки зрения того, как это выглядит на планшете. Видишь ли, здесь не все в порядке. Он идеально подходит для рабочего стола, но не для планшета. Мы исправим это в одном из следующих видео.
Одна из последних вещей, которые я хотел бы сделать, прежде чем мы закончим это, это то же самое. Мы собираемся создать класс внутри нашего медиазапроса. Что я хочу сделать, так это понаблюдать за этим, когда он опустится... в данный момент он находится в центре. Поэтому, когда он на свободе, центрирование имеет смысл. Он сосредоточен здесь. Хорошо смотрится под иконкой. Когда дело дойдет до мобильных устройств, вы заметите, что центрирование не имеет особого смысла. Здесь он как бы находится вверху, и я хочу, чтобы он был выровнен по левому краю. Так что нам нужно выяснить, есть ли класс, контролирующий этого парня. Если нет, вам, возможно, придется добавить его специально для этой задачи, но я вижу здесь, что мы использовали класс под названием «текстовый вариант 1». Где еще он использовался? Он и здесь используется. В этом случае все будет хорошо, потому что я хочу сделать так, чтобы, когда дело дойдет до мобильного устройства, я заставил его перейти к выравниванию по левому краю, что никак не повлияет на этого парня. Если бы это было так, если бы этот парень хотел оставаться в центре, мне пришлось бы создать другой класс вокруг этого фрагмента текста здесь, чтобы я мог управлять им в представлении для мобильных устройств. Я собираюсь нажать на этого парня. Я вижу один, который называется «текстовый вариант 1», отлично.
Я собираюсь создать класс в... Я собираюсь поместить его в 'main.css',. Мы собираемся поместить его в «max-width» «767», что является моим маленьким представлением для мобильных устройств. И внизу здесь я нажму «Селектор». И собрал целую кучу хлама. Я могу использовать стрелку вверх, чтобы спуститься вниз, но на самом деле я не хочу делать это с этим. Я мог бы стилизовать текстовый центр, проблема в том, что он был написан Bootstrap, и я, вероятно, буду использовать его снова и снова на этой стороне. Я не хочу, чтобы это было связано с этой странной мелочью, которую я делаю только для текста о наших услугах. Итак, «текстовый вариант 1», нажмите «Ввод». Что я хочу сделать, так это перейти к «Тип» и сказать «Выровнено по левому краю». Итак, что произойдет, посмотрите, если я перетащу его, он будет центрирован, но когда он перейдет к меньшему виду, он будет выровнен по левому краю.
Что я мог бы сделать сейчас, так это увеличить отступы по всей верхней части, чтобы немного выровнять их. И это сработает, но представляете, в чем проблема? Смотри, если я начну его тянуть, и он начнет выстраиваться, круто. Perfectly начинает подстраиваться под Mobile, но какие у этого будут последствия? Правильный. Это потому, что я уже использовал вариант текста 1 здесь, видите ли, я добавил к нему отступы. Я не собираюсь делать это сейчас, но я должен сделать это, мы пройдем и создадим свой собственный класс. Я редко использую это здесь. И это зацепило меня, потому что я хочу сделать для этого что-то особенное.