Bootstrap layout
Bootstrap using Helvetica Neue, Helvetica, Arial and sans-serif font as its default stack.
Bootstrap using a page layout feature, you can create headings, paragraphs, lists, and other inline elements.
title
Bootstrap defines all of the HTML headings (h1 to h6) styles. Consider the following examples:
Examples
try it"
The results are as follows:
Inline subtitle
If you need to add a subtitle to inline any title, simply add on both sides of the element <small>, or add.small class, this way you can get a size smaller lighter text color, as the following examples as follows:
Examples
try it"
The results are as follows:
A copy of the guide body
In order to add a paragraph to emphasize text, you can add class = "lead", which will be bigger and bolder, more text line height, as shown in the following examples:
Examples
try it"
The results are as follows:
Emphasize
The default HTML tags to emphasize <small> (85% of the parent set the text size of the text), <strong> (set the text bolder text), <em> (set the text in italics).
Bootstrap provides classes used to emphasize text, as shown in the following examples:
Examples
try it"
The results are as follows:
abbreviation
HTML element tag is provided for abbreviations, such as WWW or HTTP. Bootstrap definition of <abbr> element of style for displaying a dotted line in the text at the bottom of the frame, when the mouse is over it will display the full text (as long as you add a <abbr> title attribute text). In order to obtain a smaller font text, add .initialism to <abbr>.
Examples
try it"
The results are as follows:
Address (Address)
Use <address> tag, you can display the contact information on the page. Since <address> default display: block ;, you need to use labels to add a closed address wrap text.
Examples
try it"
The results are as follows:
Reference (Blockquote)
You can use the default <blockquote> next to any HTML text. Other options include adding a <small> tag to identify the source of a quotation usingclass.pull-right right alignment reference. The following example illustrates these features:
Examples
try it"
The results are as follows:
List
Bootstrap support ordered lists, unordered lists and definition lists.
- Ordered list: an ordered list of numbers or other means at the beginning of the orderly character list.
- Unordered list: unordered list refers to a list in no particular order, is a list of numbers beginning with emphasis on traditional style.If you do not want to display this emphasis, you can use theclass.list-unstyled to remove styles. You can also use theclass.list-inline list of all the items on the same line.
- Definition lists: In this type of list, each list item can contain <dt> and <dd> element.<dt> on behalf ofdefinitions of termslike dictionary, which is part of (or phrases) are defined. Then, <dd> is <dt> description. You can use theclassdl-horizontal the <dl> row belongs description displayed side by side.
The following example demonstrates these types of lists:
Examples
try it"
The results are as follows:
More typesetting class
The following table provides additional examples Bootstrap typography class:
| class | description | Examples |
|---|---|---|
| .lead | Highlight the paragraph to make | try it |
| .small | Setting small text (set 85% the size of the parent text) | try it |
| .text-left | Set left-aligned text | try it |
| .text-center | Setting Text Align | try it |
| .text-right | Setting Text Align Right | try it |
| .text-justify | Setting Text Alignment, paragraphs beyond the screen some text wrap | try it |
| .text-nowrap | Paragraph beyond the screen partially wrap | try it |
| .text-lowercase | Setting text lowercase | try it |
| .text-uppercase | Setting text uppercase | try it |
| .text-capitalize | Setting word initials | try it |
| .initialism | It is displayed in the <abbr> element in the text to display small fonts | try it |
| .blockquote-reverse | Setting a reference to a right-aligned | try it |
| .list-unstyled | Remove the default list style, list items left-aligned (<ul> and <ol> in). This category only applies to direct the child list of items (if you need to remove a nested list items, you need to use the style in a nested list) | try it |
| .list-inline | Will be placed on the same line all the list items | try it |
| .dl-horizontal | This class sets the float and offset applied <dl> element and the <dt> element, you can view the specific implementation examples | try it |
| .pre-scrollable | So <pre> element scrollable scrollable | try it |