ИТ Блог. Создание сайтов с применением Bootstrap
(1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap использует Helvetica Neue, Helvetica, Arial, и sans-serif как шрифты по умолчанию. При использовании типографики в Bootstrap вы можете создать заголовки, абзацы, списки и другие встроенные элементы. Рассмотрим каждый элемент в следующих разделах.
Все HTML-заголовки (h1 до h6) оформлены в Bootstrap. Пример показан ниже:
<h1>I'm Heading1 h1</h1> <h2>I'm Heading2 h2</h2> <h3>I'm Heading3 h3</h3> <h4>I'm Heading4 h4</h4> <h5>I'm Heading5 h5</h5> <h6>I'm Heading6 h6</h6>
Сегмент кода Bootstrap выше выведет следующий результат:
Чтобы добавить встроенный подзаголовок к любому из заголовков, просто добавьте <small> вокруг любого из элементов или добавить класс .small, и вы получите меньший текст с более светлым цветом, как показано в примере ниже:
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> <h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2> <h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3> <h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4> <h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5> <h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>
Сегмент кода выше выведет следующий результат:
Для того, чтобы добавить акцент к абзацу, добавить класс = «lead». Это придаст больший размер шрифта, легкий вес и более высокую высоту строки, как показан в следующем примере:
<h2>Lead Example</h2> <p class = "lead">This is an example paragraph demonstrating the use of lead body copy. This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy. This is an example paragraph demonstrating the use of lead body copy.</p>
Акцент по умолчанию тег HTML, такой как <small> устанавливает текст на 85% размер родителя, <strong> подчеркивает текст с более тяжелым весом шрифта, и <em> подчеркивает текст курсивом.
Bootstrap предлагает несколько классов, которые могут быть использованы для обеспечения акцента на тексты, как видно в следующем примере:
<small>This content is within tag</small><br> <strong>This content is within tag</strong><br> <em>This content is within tag and is rendered as italics</em><br> <p class = "text-left">Left aligned text.</p> <p class = "text-center">Center aligned text.</p> <p class = "text-right">Right aligned text.</p> <p class = "text-muted">This content is muted</p> <p class = "text-primary">This content carries a primary class</p> <p class = "text-success">This content carries a success class</p> <p class = "text-info">This content carries a info class</p> <p class = "text-warning">This content carries a warning class</p> <p class = "text-danger">This content carries a danger class</p>
HTML элемент <abbr> обеспечивает разметку для сокращений или аббревиатур, как WWW или HTTP. элементы Bootstrap стилей <abbr> с легким пунктиром границы вдоль дна и показывает полный текст. Для того, чтобы получить немного меньший размер шрифта добавить .initialism к <abbr>.
<abbr title = "World Wide Web">WWW</abbr><br> <abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>
С помощью тега <address> вы можете отображать контактную информацию на веб-странице. Поскольку <адрес> по умолчанию display: block;, вы должны будете добавить разрывы строк в прилагаемом к тексту адреса.
<address> <strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br> <abbr title = "Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href = "mailto:#">mailto@somedomain.ru</a> </address>
Вы можете использовать по умолчанию <blockquote> вокруг любого HTML текста. Другие варианты включают в себя тег <small> для идентификации источника цитаты и правого выравнивая blockquote используя класс .pull-right. Следующий пример демонстрирует все эти функции:
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
Bootstrap поддерживает упорядоченные списки, неупорядоченные списки и списки определений.
Следующий пример демонстрирует, каждый из этих типов:
<h4>Example of Ordered List</h4> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <h4>Example of UnOrdered List</h4> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>Example of Unstyled List</h4> <ul class = "list-unstyled"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>Example of Inline List</h4> <ul class = "list-inline"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>Example of Definition List</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> <h4>Example of Horizontal Definition List</h4> <dl class = "dl-horizontal"> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl>
