With the pre-processed layout classes of Bootstrap front-end framework, we no longer have to write a lot of CSS code for each layout tag element. We can use the layout features of Bootstrap. You can create pre-defined styles for titles, paragraphs, lists and other inline elements, and type out a very standard web page.
Let’s learn together. What typesetting classes does the bootstrap front-end framework predefined for us?
First: Bootstrap uses Helvetica Neue, Helvetica, Arial and sans-serif as its default font stack, which are the most commonly used fonts on all web pages at present. From then on, we no longer have to define global style font styles for body. As long as you use the Bootstrap front-end framework font-family, the above font series will be used by default.
That is: font-family:sans-serif;
Let's verify it and open the framework CSS file bootstrap.css on the front end of the bootstrap
Dear friends, can we only use the default fonts of the bootstrap front-end framework? Obviously not. Later I will teach you how to customize the bootstrap framework and create a bootstrap framework that we like and want to effect.
Second: The bootstrap front-end framework predefined the CSS style of h1-h6. I extracted part of the defined style from the framework CSS file bootstrap.css of the bootstrap front-end framework. You can see that the attribute values of font-size are 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:
Web page effect:
Third: Inline subtitles. If you need to add an inline subtitle to any title, simply add <small> on both sides of the element, or add .small class, so you can get a lighter text with a smaller font size, as shown in the following example:
Web page code:
Web page effect:
Fourth: Lead the main copy. In order to add emphasis text to the paragraph, you can add class="lead", which will result in larger, thicker, higher-line text, as shown in the following example:
Web page code:
Web page effect:
The following bootstrap front-end framework class will no longer give examples, I will only write down the purpose, because you can try small effects like the above example.
Fifth: Emphasize that the default emphasis of HTML is <small> (set text to 85% of the parent text size), <strong> (set text to thicker text), <em> (set text to italic).
Sixth: Abbreviation, HTML elements provide tags for abbreviation, such as WWW or HTTP. Bootstrap defines the style of the <abbr> element to be a dotted border displayed at the bottom of the text, and the full text will be displayed when the mouse hovers over it (as long as you have added text to the <abbr>title attribute). To get a smaller font text, add .initialism to <abbr>.
Seventh: Address. Using the <address> tag, you can display contact information on the web page. Since <address> defaults to display:block;, you need to use a tag to add a line break to the enclosed address text.
Eighth: 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 and using class.pull-right to align the reference to the right. The following example demonstrates these features:
Ninth: List
Bootstrap supports ordered lists, unordered lists and defined lists.
Ordered List: Ordered List refers to a list that starts with numbers or other ordered characters.
Unordered list: Unordered list refers to a list without a specific order, and is a list that starts with a traditional style of emphasis. If you don't want to display these emphasis numbers, you can use class.list-unstyled to remove the style. You can also put all the list items in the same line by using class.list-inline.
Definition list: In this type of list, each list item can contain <dt> and <dd> elements. <dt> stands for the definition term, like a dictionary, which is defined as belonging (or phrase). Next, <dd> is the description of <dt>. You can use classdl-horizontal to display the belongings in the <dl> row side by side with the description.
The other bootstrap front-end framework classes need to be very proficient as follows, and everyone must memorize and use them proficiently.
.lead highlights paragraphs
.small Set small text (set to 85% of the size of the parent text)
.text-left Set text left alignment
.text-center Set text center alignment
.text-right Set the right alignment of text
.text-justify sets text alignment, and the text outside the screen in the paragraph will be automatically wrapped
.text-nowrap paragraphs do not wrap lines beyond the screen
.text-lowercase Set text lowercase
.text-uppercase Set text capitalization
.text-capitalize sets the capitalization of the first letter of the word
.initialism The text displayed in the <abbr> element is displayed in small font
.blockquote-reverse sets reference right alignment
.list-unstyled Removes the default list style and aligns left in the list items (in <ul> and <ol>). This class is only suitable for direct child list 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 line
.dl-horizontal This class sets float and offset, and is applied to <dl> elements and <dt> elements. For specific implementations, you can view the instance.
.pre-scrollable Make <pre> element scrollable scrollable
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.