Shulou(Shulou.com)06/02 Report--

Editor to share with you how Bootstrap is typesetting, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif as its default font stack.

Using the typesetting features of Bootstrap, you can create headings, paragraphs, lists, and other inline elements.

Title

The style of all HTML headings (H2 to H7) is defined in Bootstrap. Take a look at the following example:

I am title 1h2 I am title 2h3 I am title 3h4 I am title 4h5 I am title 5h6 I am title 6h7

The results are as follows:

Inline subtitle

If you need to add an inline subtitle to any title, simply add it on both sides of the element, or add .small class, so that you can get a smaller, lighter text, as shown in the following example:

Example

I'm title 1 H2. I'm subtitle 1 h 2. I'm title 2 h 3. I'm subtitle 2h3. I'm headline 3h4. I'm subtitle 3h4. I'm title 4h5. I'm subtitle 4h5. I'm title 5h6. I'm subtitle 5h6. I'm headline 6h7. I'm subtitle 6h7.

The results are as follows:

Boot principal copy

To add highlighted text to a paragraph, you can add class= "lead", which results in larger, thicker, higher-line text, as shown in the following example:

Example

Bootstrap copy this is an example that demonstrates the use of bootstrap copy. This is an example that demonstrates the use of booting a copy of the body. This is an example that demonstrates the use of booting a copy of the body. This is an example that demonstrates the use of booting a copy of the body. This is an example that demonstrates the use of booting a copy of the body. This is an example that demonstrates the use of booting a copy of the body. This is an example that demonstrates the use of booting a copy of the body. This is an example that demonstrates the use of booting a copy of the body.

The results are as follows:

Emphasize

The default emphasis label for HTML (sets the text to 85% of the parent text size), (sets the text to bold), and (sets the text to italic).

Bootstrap provides classes to emphasize text, as shown in the following example:

Example

The content of this line is in the tag.

The content of this line is in the tag.

The content of this line is in the tag and appears in italics

Align text to the left

Center align text

Align text to the right

The content of this line is weakened.

This line contains a primary class

This line contains a success class

This line contains an info class

This line contains a warning class

This line contains a danger class

The results are as follows:

Abbreviations

The HTML element provides tags for abbreviations, such as WWW or HTTP. The style of the Bootstrap definition element is a dotted border at the bottom of the text, which displays the full text when the mouse hovers over it (as long as you add text to the title attribute). To get a smaller font of text, add .initialism to.

Example

WWW

RSS

The results are as follows:

Address (Address)

Using tags, you can display contact information on a web page. Since the default is display:block;, you need to use the

Tag to add line breaks to the enclosed address text.

Example

Some Company, Inc.

007 street

Some City, State XXXXX

P: (123) 456-7890 Full Name

Mailto@somedomain.com

The results are as follows:

Reference (Blockquote)

You can use the default next to any HTML text. Other options include adding a label to identify the source of the reference, and aligning the reference to the right using class. Pull-right The following examples demonstrate these features:

Example

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.

This is a reference with a source title. Someone famous in Source Title this is a right-aligned reference. Someone famous in Source Title

The results are as follows:

List

Bootstrap supports ordered lists, unordered lists, and definition lists.

Ordered list: an ordered list is a list that begins with a number or other ordered character.

Unordered list: an unordered list is a list that does not have a specific order and begins with a traditional emphasis. If you do not want to display these accents, you can use class. List-unstyled to remove the style You can also put all list items on the same row by using class. List-inline

Define lists: in this type of list, each list item can contain and elements. Stands for defining terms, just like dictionaries. Then, yes, the description. . dl-horizontal can put the phrases and their descriptions on one line. At first, the default styles of the image are stacked together and arranged in a row as the navigation bar expands.

The following example demonstrates these types of lists:

Example

Ordered list Item 1 Item 2 Item 3 Item 4 unordered list Item 1 Item 2 Item 3 Item 4 undefined style list Item 1 Item 2 Item 3 Item 4 inline list Item 1 Item 2 Item 3 Item 4 definition list Description 1 Item 1 Description 2 Item 2 horizontal definition list Description 1 Item 1 Description 2 Item 2

The results are as follows:

More typesetting classes

The following table provides examples of more Bootstrap typesetting classes:

Class description .lead makes paragraphs highlight .small sets small text (set to 85% of parent text). Text-left sets text left alignment. Text-center sets text center alignment. Text-right sets text right alignment. Text-justify sets text alignment The text beyond the screen in a paragraph automatically wraps. Text-nowrap paragraphs do not wrap beyond the screen. Text-lowercase sets lowercase text. Text-uppercase sets text capitalization. Text-capitalize sets the first letter of a word in uppercase. Initialism is displayed in a small font. And you can convert lowercase letters to uppercase letters. Blockquote-reverse sets the reference to be right-aligned. List-unstyled removes the default list style, left-aligning (and middle) in the list item. This class applies only to direct sublist items

(if you need to remove nested list items, you need to use this style in the nested list.) list-inline places all list items in the same row. the dl-horizontal class sets floats and offsets, which are applied to elements and elements. The specific implementation can view the instance. Pre-scrollable makes the element scrollable. The maximum height of the code block area is 340px. Once you exceed this height, a scroll bar will appear on the Y axis. All the contents of the article "how Bootstrap is typeset" will appear on the Y axis. Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.