Подключение Bootstrap
Здесь вообще все просто. Достаточно вставить такой код в шаблон вашего блога, сразу после открывающего тега <head>:<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
Текст заголовка который может быть не один на странице
Для оформления кода на странице используется тег <pre> для больших блоков кода с полосой прокрутки используется дополнительный класс <pre class="pre-scrollable">
<div class="h1"> здесь текст вашего заголовка</div>Можно добавить к тексту заголовка подзаголовок
Заголовок подтекст к заголовку
код
<div class="page-header">
<h1>Заголовок
<small>подтекст к заголовку</small>
</h1>
</div>Стоит напомнить, что по умолчанию абзацы оформлены так:
элементу<body>устанавливается размер шрифта(font-size) 14pxи междустрочный интервал(line-height), равный1,428. Элементам<p>задаются отступы снизу(margin), равные половине их междустрочного интервалаline-height(10pxпо умолчанию).
Оформление уведомлений.
Вы успешно дочитали до этого места
Это ещё не конец статьи
Читать мало, нужно всё применять на практике
Да, это не смешно
Этот код будет выглядеть так
<div class="h1">Оформление уведомлений.</div> <div class="alert alert-success" role="alert">Вы успешно дочитали до этого места</div> <div class="alert alert-info" role="alert">Это ещё не конец статьи</div> <div class="alert alert-warning" role="alert">Читать мало, нужно всё применять на практике</div> <div class="alert alert-danger" role="alert">Да, это не смешно</div>
Справочник по оформлению текста Bootstrap СSS
<h1>-<h6>
или.h1-.h6- Предназначен для создания заголовков h1 - h6.
Например:
<h1>Заголовокh1</h1><p class="h2">Заголовок 2 уровня</p>
Заголовок h1
Заголовок 2 уровня
.small- Позволяет задать выделенному тексту более мелкий размер шрифта (85% от размера шрифта родительского элемента).
Абзац с более мелким размером шрифта.
.lead- Предназначен для выделения абзаца по сравнению с остальным содержимом.
Выделенный абзац.
<mark>- Предназначен для создания выделенного текста.Например:
выделенный текст.
<del>- Предназначен для выделения текста, удаленного из текущего документа.
Например:
удалённый текст. <s>- Предназначен для выделения текста, который уже утратил свою актуальность.
Например:
текст, утративший свою актуальность. <ins>- Предназначен для выделения вставленного текста в существующий документ.
Например:
вставленный текст.
<u>- Предназначен для создания подчеркнутого текста.
Например:
подчеркнутый текст.
<strong>- Предназначен для привлечения внимания к тексту с помощью выделения его жирным начертанием.
Например:
жирный текст.
<em>- Предназначен для привлечения внимания к тексту с помощью выделения его курсивом.
Например:
курсивный текст.
.text-left- Предназначен для выравнивания текста по левому краю.
.text-center- Предназначен для выравнивания текста по центру.
.text-right- Предназначен для выравнивания текста по правому краю.
.text-justify- Предназначен для выравнивания текста по ширине.
.text-nowrap- Запрещает перенос слов.
.text-lowercase- Предназначен для изменения регистра всех букв на строчные.
Например:
Очень интересный текст.
.text-uppercase- capitalize Предназначен для изменения регистра первых букв всех слов на прописные.
Например:
Очень интересный текст.
<abbr>- Предназначен для создания аббревиатур. Например: CMS
<address>- Статья написана abcinblog.blogspot.com Страница в Простые советы.
<blockquote>- Предназначен для создания цитат.
Текст цитаты
Автор .blockquote-reverse- Для создания цитаты, выровненной по правому краю добавьте класс:
<blockquote class="blockquote-reverse">Текст цитаты
Автор <ul>- Предназначен для создания маркированного списка.
Например:
- Кофе
- Молоко
<ol>- Кофе
- Молоко
.list-unstyled- Предназначен для создания списков без использования стилей.
Например:
- Кофе
- Молоко
.list-inline- Предназначен для создания списков, элементы которых располагаются в одну строку.
Например:
- Кофе
- Молоко
<dl>- Предназначен для создания списков определений.
Например:
- Кофе
- - горячий напиток тёмного цвета
- Молоко
- - прохладный напиток белого цвета
.dl-horizontal- Предназначен для создания списков определений, в котором термины и описания этих терминов располагаются в одну строку.
- Кофе
- - горячий напиток тёмного цвета
- Молоко
- - прохладный напиток белого цвета
<code>- Предназначен для оформления фрагментов кода в тексте.
Например: Элемент
h1. Элемент h1.Именно двумя последними стилями я ползовался в этом посте.
<kbd>- Предназначен для оформления текста, который представляет собой клавиши или сочетания клавиш на клавиатуре. Например: Alt+F4
<pre>- Предназначен для оформления программного кода, состоящего из нескольких строк. Если вы дополнительно добавите класс .pre-scrollable к элементу <pre>, то вы получите блок имеющий максимальную высоту 350px и элементы прокрутки по оси y.
Например:
<pre>
Программный код,
состоящий из нескольких строк
</pre>
Программный код, состоящий из нескольких строк
Например:
<pre class="pre-scrollable">
Программный код с прокруткой
</pre>
Программный код с прокруткой
Если будет много много строк кода
еще больше строк.
Например:
<div class="h1">Оформление уведомлений.</div> <div class="alert alert-success" role="alert">Вы успешно дочитали до этого места</div> <div class="alert alert-info" role="alert">Это ещё не конец статьи</div> <div class="alert alert-warning" role="alert">Читать мало, нужно всё применять на практике</div> <div class="alert alert-danger" role="alert">Да, это не смешно</div> <samp>- Предназначен для отображения текста, который появляется на выходе в результате работы компьютерной программы.
Например:
<samp>
Текст на выходе из компьютерной программы
</samp>
Текст на выходе из компьютерной программы
<var>- Предназначен для оформления переменных.
Например:
<var>y</var> = <var>x</var><sup>2</sup>
y = x2
Комментариев нет:
Отправить комментарий