Title
Bootstrap defines the style of all HTML headings (H1 to H6), which is no different from normal HTML. Take a look at the following example:
Inline sub-caption
If you need to add an inline subtitle to any heading, simply add the <small> on either side of the element, or add the . Small class, so you can get a lighter text with a smaller font size, as shown in the following example:
12345678 |
<div
class
=
"text-center"
>
</div>
|
Display effect:
Boot principal copy
To add accent text to a paragraph, you can add class= "lead", which will get larger, thicker, higher-line text, as shown in the following example:
<div class= "Text-center" >
Display effect:
EmphasizeThe default Accent label for HTML <small> (set text to 85% of the parent text size), <strong> (set text to be thicker), <em> (set Text to italic).
Bootstrap provides some classes for emphasizing text, as shown in the following example:
<small> our content is within the label </small><br> <strong> Our content is within the tag </strong><br> <em > Our content is within the label and rendered as italic </em><br> <p class= "Text-left" > left-aligned text </p> <p class= " Text-center "> Center alignment </p> <p class=" Text-right "> Right justified </p> <p class=" text-muted " > Our content is weakened </p> <p class= "Text-primary" > Our content comes with a primary class</p> <p class= " Text-success "> Bank content with a success class</p> <p class=" Text-info "> Bank content with an info class</p> <p class= "text-warning" > our contents with a warning class</p> <p class= "Text-danger" > Bank content with a Danger class</p>
Display effect:
AbbreviationHTML elements provide tags for abbreviations, such as WWW or HTTP. The style of the Bootstrap definition <abbr> element is a dashed border that appears at the bottom of the text, and the full text is displayed when the mouse hovers over it (as long as you add text to the <abbr> title property). In order to get text for a smaller font, add. initialism to <abbr>.
<ABBR title= "World Wide Web" >WWW</abbr><br> <abbr title= "Real Simple Syndication" class= " initialism ">RSS</abbr>
Display effect:
AddressWith the <address> tab, you can display contact information on a Web page. Since <address> defaults to Display:block, you need to use
Label to add a line break for the enclosing address text.
<address> <strong>some Company, inc.</strong><br> 007 street<br> Some City, State xxxxx<br> <abbr title= "Phone" >P:</abbr> (123) 456-7890 </address>
Display effect:
References (Blockquote)You can use the default <blockquote> next to any HTML text. Other options include adding a <small> tag to identify the source of the reference, using Class. pull-right to align the reference to the right. The following examples demonstrate these features:
<blockquote><p> This is a default reference instance. This is a default reference instance. This is a default reference instance. This is a default reference instance. This is a default reference instance. This is a default reference instance. This is a default reference instance. This is a default reference instance. </p></blockquote><blockquote> This is a reference with the source header. <small>someone Famous in <cite title= "Source title" >source title</cite></small></ Blockquote><blockquote class= "Pull-right" > This is a right-aligned reference. <small>someone Famous in <cite title= "Source title" >source title</cite></small></ Blockquote>
Display effect:
ListBootstrap supports ordered, unordered, and defined lists.
- Sequential Tables : A list of sequential tables refers to lists that begin with numbers or other ordered characters.
- unordered list: Unordered lists are lists that do not have a particular order, and are lists that begin with a traditional style of emphasis. If you do not want to display these emphasis numbers, you can use class. list-unstyled to remove the style. You can also put all the list items on the same line by using the class . List-inline .
- definition list : In this type of list, each list item can contain <dt> and <dd> elements. <dt> stands for defining terms , just like dictionaries, which are defined as belonging (or phrases). Then,<dd> is the description of <dt>. You can use class Dl-horizontal to display the descriptions in <dl> rows side-by-side.
Display effect:
More Typesetting classesThe following table provides examples of Bootstrap more typographic classes:
class |
Description |
. Lead |
Make a paragraph appear highlighted |
. Small |
Set Wenben (set to 85% size of parent text) |
. text-left |
Set text to align Left |
. text-center |
Set Text Center alignment |
. text-right |
Set text right-aligned |
. text-justify |
Set text alignment to wrap text in paragraph beyond the screen section |
. text-nowrap |
Paragraph beyond the screen part does not break line |
. text-lowercase |
Set Text lowercase |
. text-uppercase |
Set text capitalization |
. text-capitalize |
Set the first letter of the word capital |
. initialism |
Text that appears in the <abbr> element is displayed in a small font |
. blockquote-reverse |
Set reference right to justify |
. list-unstyled |
Removes the default list style, left-aligned in list items (<ul> and <ol>). This class applies only to direct child list items (if you need to remove nested list items, you need to use that style in a nested list) |
. list-inline |
Place all list items on the same line |
. dl-horizontal |
This class sets up floats and offsets, applies to <dl> elements and <dt> elements, and enables you to view instances |
. pre-scrollable |
Enable <pre> elements to scroll scrollable |
Bootstrap study notes--bootstrap the use of typesetting class