BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Bootstrap » Уроки Bootstrap 3.0 для начинающих (5-й урок) – работа с текстом

Уроки Bootstrap 3.0 для начинающих (5-й урок) – работа с текстом

2014-11-29 / Вр:22:50 / просмотров: 13508

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

Заголовки в Bootstrap

В Bootstrap 3 все HTML заголовки от <h1> до <h6> и классы в CSS от .h1 и до .h6 являются доступными.

Уроки Bootstrap 3.0 для начинающих (5-й урок) – работа с текстом

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

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

Уроки Bootstrap 3.0 для начинающих (5-й урок) – работа с текстом

<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>

Общий текст в Bootstrap (параграф)

В  Bootstrap все параграфы размером 14px (font-size:14px;), междустрочный интервал 1.428 (line-height: 1.428;), расстояние между параграфами 10px (margin: 0 0 10px;):

Уроки Bootstrap 3.0 для начинающих (5-й урок) – работа с текстом

<p>текст в Bootstrap</p> 

Можно выделить параграф путем добавления класса lead.

Уроки Bootstrap 3.0 для начинающих (5-й урок) – работа с текстом

<p class="lead"> текст в Bootstrap </p>

Если нужно уменьшить выделение текста, используйте тег <small>. Размер будет составлять 85% от размера его родительского элемента.

Уроки Bootstrap 3.0 для начинающих (5-й урок) – работа с текстом

<small> текст в Bootstrap</small>

или так:

<p> текст в <small> Bootstrap</small></p>

можно так:

<p class="lead"> текст в <small> Bootstrap</small></p>

Жирный шрифт в Bootstrap

Чтобы выделить какую-то область текста жирным шрифтом, воспользуйтесь тегом <strong></strong> или<b></b>

Уроки Bootstrap 3.0 для начинающих (5-й урок) – работа с текстом

<strong> текст в Bootstrap </strong>

или так:

<p> текст в <strong> <strong> </strong>Bootstrap</strong></p>

можно так:

<p class="lead">текст в <strong> <strong> </strong>Bootstrap</strong></p>

Курсив в Bootstrap

Чтобы выделить какую-либо область текста курсивом, воспользуйтесь тегом <em></em>  или <i></i>

Уроки Bootstrap 3.0 для начинающих (5-й урок) – работа с текстом

<em> текст в Bootstrap</em>

или так:

<p> текст в <em> Bootstrap</em></p>

можно так:

<p class="lead">текст в <em>Bootstrap</em></p>

Выравнивание текста и заголовка в Bootstrap

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

Выравнивание по левому краю.

Выравнивание по центру.

Выравнивание по правому краю.

Выравнивание текста по ширине

для параграфа:

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

для заголовков:

<h1 class="text-left">Выравнивание по левому краю.</h1 >
<h2 class="text-center">Выравнивание по центру.</h2>
<h3 class="text-right">Выравнивание по правому краю.</h3>
<h4 class="text-justify">Выравнивание текста по ширине</h4> 

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

Если вам нужно вставить цитату на сайт, заключите его в теги <blockquote>.

 <blockquote>
      <p>Всё, что человек способен представить в воображении, другие сумеют претворить в жизнь.</p>
      <small>Жюль Верн</small>
 </blockquote>
 

Цитату можно выровнять по правому краю с помощью класса .pull-right к элементу <blockquote>:

Цитата в bootstrap

 <blockquote class="pull-right">
      <p>Всё, что человек способен представить в воображении, другие сумеют претворить в жизнь.</p>
      <small>Жюль Верн</small>
 </blockquote>
 
Цитата в bootstrap

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716