Latest web development tutorials

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

<H1> I was heading 1 h1 </ h1> <H2> I was heading 2 h2 </ h2> <H3> I was heading 3 h3 </ h3> <H4> I was heading 4 h4 </ h4> <H5> I was heading 5 h5 </ h5> <H6> I was heading 6 h6 </ h6>

try it"

The results are as follows:

title

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

<H1> I was heading 1 h1. <Small> I subtitle 1 h1 </ small> </ h1> <H2> I was heading 2 h2. <Small> I am a subtitle 2 h2 </ small> </ h2> <H3> I was heading 3 h3. <Small> I am a subtitle 3 h3 </ small> </ h3> <H4> I was heading 4 h4. <Small> I am a subtitle 4 h4 </ small> </ h4> <H5> I was heading 5 h5. <Small> I am a subtitle 5 h5 </ small> </ h5> <H6> I was heading 6 h6. <Small> I subtitle 6 h6 </ small> </ h6>

try it"

The results are as follows:

Inline subtitle

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

<H2> guide body copy </ h2> <P class = "lead"> This is an example of usage demo copy of the guide body. This is an example of a demo copy of the guide body usage. This is an example of a demo copy of the guide body usage. This is an example of a demo copy of the guide body usage. This is an example of a demo copy of the guide body usage. This is an example of a demo copy of the guide body usage. This is an example of a demo copy of the guide body usage. This is an example of a demo copy of the guide body usage. </ P>

try it"

The results are as follows:

A copy of the guide body

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

<Small> The Bank is in the content tag </ small> <br> <Strong> The Bank is in the content tag </ strong> <br> <Em> The Bank is in the tag content, and rendered as italics </ em> <br> <P class = "text-left"> left-aligned text </ p> <P class = "text-center"> Align Text </ p> <P class = "text-right"> right-aligned text </ p> <P class = "text-muted"> Bank content is attenuated </ p> <P class = "text-primary"> Bank content with a primary class </ p> <P class = "text-success"> Bank content with a success class </ p> <P class = "text-info"> content with a bank info class </ p> <P class = "text-warning"> Bank content with a warning class </ p> <P class = "text-danger"> Bank content with a danger class </ p>

try it"

The results are as follows:

Emphasize

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

<Abbr title = "World Wide Web"> WWW </ abbr> <br> <Abbr title = "Real Simple Syndication" class = "initialism"> RSS < / abbr>

try it"

The results are as follows:

abbreviation

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

<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.com </ a> </ Address>

try it"

The results are as follows:

address

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

<Blockquote> <P> This is a reference to the default instance. This is a reference to the default instance. This is a reference to the default instance. This is a reference to the default instance. This is a reference to the default instance. This is a reference to the default instance. This is a reference to the default instance. This is a reference to the default instance. </ P> </ Blockquote> <Blockquote> This is a title with a source of reference. <Small> Someone famous in <cite title = "Source Title"> Source Title </ cite> </ small> </ Blockquote> <Blockquote class = "pull-right"> This is a reference to the right-aligned. <Small> Someone famous in <cite title = "Source Title"> Source Title </ cite> </ small> </ Blockquote>

try it"

The results are as follows:

Quote

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

<H4> Ordered List </ h4> <Ol> <Li> Item 1 </ li > <Li> Item 2 </ li > <Li> Item 3 </ li > <Li> Item 4 </ li > </ Ol> <H4> unordered list </ h4> <Ul> <Li> Item 1 </ li > <Li> Item 2 </ li > <Li> Item 3 </ li > <Li> Item 4 </ li > </ Ul> <H4> undefined style list </ h4> <Ul class = "list-unstyled"> <Li> Item 1 </ li > <Li> Item 2 </ li > <Li> Item 3 </ li > <Li> Item 4 </ li > </ Ul> <H4> 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> Definition List </ h4> <Dl> <Dt> Description 1 </ dt > <Dd> Item 1 </ dd > <Dt> Description 2 </ dt > <Dd> Item 2 </ dd > </ Dl> Definition list <h4> level </ h4> <Dl class = "dl-horizontal"> <Dt> Description 1 </ dt > <Dd> Item 1 </ dd > <Dt> Description 2 </ dt > <Dd> Item 2 </ dd > </ Dl>

try it"

The results are as follows:

List

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