bootstrap3 essay_html/css_WEB-ITnose

bootstrap3 essay

[TOC]

layout container

Bootstrap needs to wrap the page content and grid system in a .container container

! !! Caution "Warning!"
Due to padding and other attributes, these two containers cannot be nested in each other

.container class is used for fixed-width containers that support responsive layout

.container-fluid class is used for containers with 100% width and occupy the entire viewport

Grid parameters

Ultra-small screen<768px .col-xs-

Small screen>768px .col-sm-

Medium screen>992px .col-md-

Large screen>1200px . col-lg-

Typesetting

Title

~

can be used, and classes from .h1 to .h6 are provided

!!! Hint "Info"
If using a subtitle you can include the tag or use the .small class

Inline text element

, Strikethrough text

,Underline text

Small text

< The text inside the element wrapped by the small> tag will be set to 85% of the font size of the parent container.
!!! Note 'Tip'
The nested element in the title element is set to a different font-size

Emphasis

wrapped The element font-weight value will be emphasized

italic

Use tag wrapping

aligned

text-left left-aligned

text-center Align in the middle

text-right Align right

text-justify Align both ends

text-nowrap The text does not wrap

Basic abbreviation

If the abbreviation is the first letter, in order to highlight it, you can add the .initialism class to make the font-size Slightly smaller

Quote

You can add quoted content

	<blockquote>	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>	  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>	</blockquote>

!!! Note "Another presentation style"
by giving. The blockquote-reverse class allows quotes to render content right-aligned.

List

,
to generate ordered and unordered lists
1. list-unstyled unstyled list
   
2. list-inline Inline list (that is, lined up in one line)

Description

List with description phrase

dl-horizontal can let< Phrases and their descriptions within dl> are arranged in one line

Code block

Inline code


User input


 Code block

Variable


Program output