Bootstrap 3 - Работа с текстом

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

В Twitter Bootstrap 3 доступны все HTML-заголовки от <h1> до <h6>. Вы также можете использовать классы от .h1 до .h6 на любые другие элементы веб-страницы, если вы хотите использовать такие же стили как в заголовках.

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

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

h1. Заголовок Bootstrap

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

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

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

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

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

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

<h1>h1. Заголовок Bootstrap <small>Дополнительный текст</small></h1>
<h2>h2. Заголовок Bootstrap <small>Дополнительный текст</small></h2>
<h3>h3. Заголовок Bootstrap <small>Дополнительный текст</small></h3>
<h4>h4. Заголовок Bootstrap <small>Дополнительный текст</small></h4>
<h5>h5. Заголовок Bootstrap <small>Дополнительный текст</small></h5>
<h6>h6. Заголовок Bootstrap <small>Дополнительный текст</small></h6>

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

h1. Заголовок Bootstrap Дополнительный текст

h2. Заголовок Bootstrap Дополнительный текст

h3. Заголовок Bootstrap Дополнительный текст

h4. Заголовок Bootstrap Дополнительный текст

h5. Заголовок Bootstrap Дополнительный текст

h6. Заголовок Bootstrap Дополнительный текст

Вы также можете сделать, чтобы заголовок <h1> отображался иначе, чем остальные заголовки на странице, используя компонент с классом "page-header". Кроме того, вы можете использовать тег <small>, чтобы создать подтекст к Заголовку.

<div class="page-header">
    <h1>Заголовок 
        <small>подтекст к заголовку</small>
    </h1>
</div>

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

По умолчанию основной размер шрифта (font-size) в Bootstrap — 14px, при высоте строки (line-height) 1.428. Эти параметры применяются к тегу <body> и всем разделам. Кроме того, отступ снизу для абзацев (<p>) составляет половину высоты строки (10px по умолчанию). Вы также можете сделать любой абзац выделенным, просто добавив к нему класс .lead.

<p>Так выглядит обычный абзац Twitter Bootstrap.</p>
<p class="lead">Так выглядит абзац Twitter Bootstrap, выделенный с помощью класса .lead</p>

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

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

Так выглядит абзац Twitter Bootstrap, выделенный с помощью класса .lead

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

<p class="text-left">Текст, выровненный по левому краю.</p>
<p class="text-center">Текст, выровненный по центру.</p>
<p class="text-right">Текст, выровненный по правому краю.</p>
<p class="text-justify">Текст, выровненный по ширине.</p>
<p class="text-nowrap">Текст, без выравнивания.</p>

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

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

Текст, выровненный по центру.

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

Текст, выровненный по ширине.

Текст, без выравнивания.

Форматирование текста с помощью Twitter Bootstrap

Вы можете свободно использовать теги форматирования текста, такие как <strong>, <i>, <small>, чтобы выделить текст полужирным, курсивом, или уменьшить размер шрифта так же, как и в простом HTML.

<p><b>Полужирное начертание текста</b></p>
<p><big>Текст, с увеличенным размером шрифта</big></p>
<p><code>Программный код</code></p>
<p><em>Акцентированный текст (курсивное начертание)</em></p>
<p><i>Курсивное начертание текста</i></p>
<p><mark>Выделенный текст</mark></p>
<p><small>Текст с уменьшенным размером шрифта</small></p>
<p><strong>Акцентированный текст (жирное начертание)</strong></p>
<p><sub>Нижний</sub> и <sup>верхний</sup> индексы текста</p>
<p><ins>Этот тег используется для выделения текста, добавленного в новую версию документа(отображается подчеркнутым)</ins></p>
<p><del>Этот тег используется для выделения текста, удаленного из документа (отображается как перечеркнутый)</del></p>

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

Полужирное начертание текста

Текст, с увеличенным размером шрифта

Программный код

Акцентированный текст (курсивное начертание)

Курсивное начертание текста

Выделенный текст

Текст с уменьшенным размером шрифта

Акцентированный текст (жирное начертание)

Нижний и верхний индексы текста

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

Этот тег используется для выделения текста, удаленного из документа (отображается как перечеркнутый)

Классы для задания регистра текста

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

<p class="text-lowercase">Машины должны работать. Люди должны думать.</p>
<p class="text-uppercase">Машины должны работать. Люди должны думать.</p>
<p class="text-capitalize">Машины должны работать. Люди должны думать.</p>

Вспомогательные классы для придания тексту дополнительной информации с помощью цвета

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

<p class="text-muted">Приглушенный текст</p>
<p class="text-primary">Важный текст</p>
<p class="text-success">Текст успеха</p>
<p class="text-info">Текст примечания</p>
<p class="text-warning">Текст предупреждения</p>
<p class="text-danger">Текст ошибки</p>

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

Приглушенный текст

Важный текст

Текст успеха

Текст примечания

Текст предупреждения

Текст ошибки

Создание цитат

Чтобы оформить любой HTML как цитату, заключите его в теги <blockquote>. Для прямого цитирования мы рекомендуем <p>.

<blockquote>
     <p>У моих детей, конечно, будет компьютер. Но первым делом они получат книги.</p>
     <small><cite>Билл Гейтс</cite></small>
</blockquote>

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

У моих детей, конечно, будет компьютер. Но первым делом они получат книги.

Билл Гейтс

В качестве альтернативы вы можете выровнять цитату по правому краю, применяя класс .pull-right к элементу <blockquote>.

<blockquote class="pull-right">
     <p>У моих детей, конечно, будет компьютер. Но первым делом они получат книги.</p>
     <small><cite>Билл Гейтс</cite></small>
</blockquote>

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

У моих детей, конечно, будет компьютер. Но первым делом они получат книги.

Билл Гейтс



   Bootstrap 1    24292 +2

Комментарии (7)

  1. Иван # 0
    Надеюсь на вашу помощь. Хотел подтянуть шрифты с font google. Но не пойму почему не получается, вроде бы и линк прописал в хедере, и в сss тоже подключил, но все равно остаются bootstrap овские шрифты, может вы мне сможете помочь и рассказать где что нужно поменять.
    1. Александр Мальцев # 0
      Подключаем шрифт
      <link href='https://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' 
      rel='stylesheet' type='text/css'>
      
      Задаём где его использовать. Например для всего документа (т.е. если шрифт Oswald есть, то используем его, а если нет то любой другой шрифт из группы sans-serif:
      /* CSS */
      body {
        font-family: 'Oswald', sans-serif;
      }
      
      Если, например, его необходимо использовать только в меню, то так:
      .navbar {
        font-family: 'Oswald', sans-serif;
      }
      
      А у Bootstrap какие шрифты? Он использует только те шрифты, которые установлены на компьютере или мобильном устройстве пользователя.
      /* шрифты, которые использует Bootstrap по умолчанию */
      body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      }
      
      1. Иван # 0
        спасибо
    2. Сергей # 0
      Спасибо за труды, осваивать бустрап с подобным сайтом сплошная благодать ))
      Я чего пишу то, в самом конце blockquote pull-right, после него надо бы дописать .clearfix, у меня без фикса уезжает верстка чуток, и у вас можно дописать, ато сейчас наезжает на блок с соц кнопками, файрбаг подтверждает))
      Спасибо еще раз за труды :)
      1. Александр Мальцев # 0
        Спасибо, Сергей.
      2. Иван # 0
        Александр, подскажите может вы сталкивались что длинные ссылки не переносятся на другую строку при уменьшении размера экрана? НЕ могу понять в чем дело? Все тексты нормально адаптируются под разные экраны где нужно переносятся сжимаются, а вот ссылки как были в одну строку так и остаются при этом залазять на другие блоки при маленьком экране
        1. Александр Мальцев # 0
          Попробуйте добавить следующее правило в CSS:
          a {
            white-space: -moz-pre-wrap; /* Mozilla */
            white-space: -pre-wrap; /* Opera 4-6 */    
            white-space: -o-pre-wrap; /* Opera 7 */    
            word-wrap: break-word; /* Internet Explorer 5.5+ */
            white-space: pre-wrap; /* css-3 */    
          }
          

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