Bootstrap predefined typesetting classes that need to be flexible are you proficient? _javascript Tips

With the Bootstrap front-end frame pretreatment good typesetting class, we do not have to write a lot of CSS code for each typographic label element, you can use the Bootstrap layout feature, you can create headings, paragraphs, lists and other inline elements predefined style, typesetting a very canonical web page.

So what we're going to learn next, is that the bootstrap front end frame is exactly what we want to do with the typesetting class?

First: Bootstrap uses Helvetica neue, Helvetica, Arial, and Sans-serif as their default font stacks, which are the most frequently used fonts for all Web pages at the moment. From then on, we don't have to define the global style font style for the body. Just use the bootstrap front end frame font-family The font family is used by default.
namely: Font-family:sans-serif;
Let's check it out, open the frame CSS file for the bootstrap front end Bootstrap.css

My friends will think that we can only use the bootstrap front end frame default font? Obviously not, I'll teach you how to customize the bootstrap framework, create the bootstrap frame that we like and want to effect.

Second:The bootstrap front-end framework predefined H1-h6 CSS styles, I extracted a part of the defined style from the frame CSS file Bootstrap.css in the bootstrap front end, and I can see that the Font-size attribute value is defined for HN respectively.
h1 {font-size:36px;}
h2 {font-size:30px;}
h3 {font-size:24px;}
h4 {font-size:18px;}
h5 {font-size:14px;}
h6 {font-size:12px;}
The actual effect is as follows:
Web page code:

Page effect:

Third: inline subheadings, if you need to add an inline subheadings to any headings, simply add <small> to the elements, or add a. Small class, so you can get a lighter color text with a smaller font size, As shown in the following example:

Web page code:

Page effect:

Fourth: the boot principal copy, in order to add accent text to the paragraph, you can add the class= "lead", which results in larger, thicker, higher-row text, as shown in the following example:

Web page code:

Page effect:

The following bootstrap front-end framework class is no longer an example, I only write the purpose, because it can be as the example above to experiment with small effects.

Fifth: emphasize that the HTML default Accent label <small> (set text to 85% of the parent text size), <strong> (set text to thicker text), <em> (set Text to italic).

Sixth: abbreviations, HTML elements provide tokens for abbreviations, such as www or HTTP. The bootstrap definition <abbr> element style is a dotted border displayed at the bottom of the text, and the full text is displayed when the mouse hovers over it (as long as you add text for the <abbr>title property). To get text in a smaller font, add. initialism to <abbr>.

Seventh: address, using <address> tags, you can display contact information on the Web page. Because <address> defaults to Display:block, you need to use labels to add line wrapping to the enclosing address text.

Eighth: 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:

The

nineth: list
Bootstrap supports a sequence table, unordered list, and definition list.
  sequence table: A sequence table refers to a list that begins with numbers or other ordered characters.
  unordered list: unordered lists are lists that do not have a specific order, and are those that begin with a traditional style focus number. 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 Class.list-inline.
  define list: in this type of list, each list item can contain <dt> and <dd> elements. <dt> represents the definition of terms, like dictionaries, which are defined as belonging to (or phrases). Then,<dd> is the description of <dt>. You can use Classdl-horizontal to display the <dl> line in the same side as the description. The
  More bootstrap front-end framework classes need to be very proficient as follows, and you must memorize and use them skillfully.

. A lead makes a paragraph appear highlighted
. Small set Wenben (set to 85% size of the parent text)
. Text-left set text left-aligned
. Text-center Set Text Center alignment
. text-right set text to align Right
. text-justify set text alignment, paragraph out of the screen part of text word wrap
. Text-nowrap paragraph out of screen part no wrap
. text-lowercase set Text lowercase
. Text-uppercase Set Text capitalization
. text-capitalize set the first letter of the word in uppercase
. initialism the text displayed in the <abbr> element is shown in small font
. blockquote-reverse Set Reference right alignment
. list-unstyled removes the default list style, left-aligned (<ul> and <ol>) in list items. This class applies only to direct child list items (if you need to remove nested list items, you need to use the style in a nested list)
. list-inline put all list items on the same line
. Dl-horizontal This class is set up with floats and offsets, applied to <dl> elements and <dt> elements, and the implementation can view the instance
. pre-scrollable make <pre> elements scrollable scrollable

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.