Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

03.06.2016


13:40


5220


пока нет


Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

Всем привет!
Продолжаем изучать основы «bootstrap 3».
Пришло время поработать над тестом. Что именно мы научимся в этом уроке?
Мы научимся выравнивать текст, выставлять размер, менять цвет, делать текст жирным, курсивом, зачеркнутым либо подчеркнутым… И это еще далеко не весь список. Итак, приступаем к уроку №5 и учимся работать с текстом.

1. Заголовки в Bootstrap

Если вы изучали основы HTML, то должны знать, что заголовки обозначаются тегами  <h1> - <h6>. Так вот, в Bootstrap 3 пишем аналогично:

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

Результат:

Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

Если вам нужно создать в заголовке вторичный текст, можно использовать  тег <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>

Результат:

Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

2. Параграф в Bootstrap

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

Выделение параграфа классом «lead»

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

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

<small>1.текст в Bootstrap</small>
<p>2. текст в<small> Bootstrap</small></p>
<p class="lead">3. текст в<small> Bootstrap</small></p>

Результат:

Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

3. Выделение текста в Bootstrap

Полужирный текст

<b>Полужирный текст</b>

Жирный текст

<strong>Жирное начертание</strong>

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

<i>Курсивное начертание текста</i>

Выделенный текст фоновым цветом

<mark>Выделенный текст</mark>

Выделение программного кода

<code>Программный код</code>

Результат:

Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

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

Нижний

<sub>Нижний</sub>

Верхний

<sup>верхний</sup>

Пример:

<p>Н<sub>2</sub>O</p>
<p>см<sup>2</sup></p>

Результат:

Н2O

см2

5. Подчеркивание текста в Bootstrap

Подчеркнутый тест

<ins> Отображается подчеркнутый тест </ins>

Перечеркнутый текст

<del>Отображается перечеркнутый текст </del>

Результат:

Отображается подчеркнутый тест

Отображается перечеркнутый текст

6. Размеры текста

Увеличить размер текста на одну единицу

<big>Текст с увеличенным размером шрифта</big>

Уменьшить размер текста на одну единицу

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

Результат:

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

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

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

Чтобы выровнять текст или заголовок,  достаточно добавить class:

"text-left" - Выравнивание по левому краю
"text-center" - Выравнивание по центру
"text-right" - Выравнивание по правому краю
"text-justify" - Выравнивание текста по ширине

Для параграфа

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

Результат:

Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

8. Цитата

Полоса с левой стороны

 

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

Результат:

Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

Полоса с правой стороны
Добавить нужно класс «pull-right»

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

Результат:

Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

8. Цвет текста для информации

Способ передачи важной информации в веб-дизайне

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

Результат:

Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

Продолжение по основам Bootstrap 3 следует…
Не пропустите!…
Подписывайтесь  на обновления блога!



Случайные записи:

  1. Создание списков на HTML. Основы HTML для начинающих. Урок №8
  2. Вертикальное меню (панель). Основы bootstrap 3 для начинающих. Урок №11
  3. Полезные функции php List, Isset, Unset, Empty, Date, Count и Exit. Основы PHP с нуля. Урок №18
  4. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  5. Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

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

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

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245