Bootstrap getting started tutorial (2)

Last Review: Bootstrap's scaffolding provides two la S: fixed and fluid. It also establishes a grid system with a width of PX and 12 columns.

Based on the scaffolding, Bootstrap's basic CSS provides a series of basic HTML page elements, designed to provide users with fresh and consistent page appearances and feelings. This article will focus on four aspects: Typographical, table, forms, and buttons.

1. Typography)It includes headings, paragraphs (paragraphs), lists (lists), and other inline elements. We can modify two variables of variables. Less:@baseFontSizeAnd@ Baselineheight: controls the overall layout style. Bootstrap also uses some other arithmetic methods to create the margin, padding, line-height, and other elements of all types.

1.1 Use common HTML <H *> </H *> and <p> </P> for titles and paragraphs. You do not need to consider margin and padding. The two display effects are as follows:

Figure 2-1 Headings & paragraphs)

1.2 emphasize (emphasis). Use <strong> and <em> labels. The former uses bold, and the latter uses italic to emphasize the label content. Note that the <strong> label defines text with a heavier tone in html4. in HTML 5, <strong> defines important text. These phrase labels can also enrich the effect by defining CSS. For more phrase tags, see [1]. abbreviation (abbreviations). Use <abbr> to re-encapsulate the tag. Mouse sliding over the tag asynchronously displays the meaning of the abbreviation. Introduce the title attribute to display the original text, and use the. initialism class to display the abbreviations in uppercase.

1.3 reference text (blockquotes ). use the <BLOCKQUOTE> label and <small> label. The former <BLOCKQUOTE> is the referenced text content, and the latter <small> is an optional element. You can add a writing reference, for example, content author. 2-2

Figure 2-2 reference (blockquotes)

The code snippet is as follows:

<Div class = "row"> <Div class = "span6"> <BLOCKQUOTE class = "Pull-Right"> <p> ling Dongzhi. I am the sword in the dark, the guard on the Great Wall, the flames of the cold, the light at dawn, the horn of the sleep, the shield of the Guardian kingdom. </P> the Commander-in-Chief of the Night Watch army. <small> Mengqi. d. <cite Title = ""> Lu Fei </CITE> </small> </BLOCKQUOTE> </div> <Div class = "span6"> <BLOCKQUOTE> <p> ling Dong to. I am the sword in the dark, the guard on the Great Wall, the flames of the cold, the light at dawn, the horn of the sleep, the shield of the Guardian kingdom. </P> the Commander-in-Chief of the Night Watch army. <small> Mengqi. d. <cite Title = ""> Lu Fei </CITE> </small> </BLOCKQUOTE> </div>

1.4 list (lists). Bootstrap provides three tags to display different types of lists. <Ul> indicates the unordered list, <ul class = "unstyled"> indicates the unordered list without a style, <ol> indicates the ordered list, and <DL> indicates the description list, <DL class = "DL-horizontal"> indicates a list of vertical descriptions. Figure 2-3 shows the following lists:

Figure 2-3 list (lists)

2.Table). Still use <Table> <tr> <TH> <TD> and other labels to present the table. It mainly provides four CSS classes to control the edge and structure of a table. Table 2-1 shows the table option of Bootstrap.

 

Name	Class	Description
Default	None	No style, only rows and columns
Basic	. Table	Only a vertical line exists between lines.
Bordered	. Table-bordered	Rounded corner and add outer border
Zebra-stripe	. Table-striped	Add a light gray background color to an odd number of rows
Condensed	. Table-condensed	Split the horizontal padding

 

Table 2-1 Table options)

We can combine these CSS classes to display a mixed table, as shown in Figure 2-4:

Figure 2-4 Table)

The code snippet is as follows:

View code

 

 

3.Forms). Bootstrap forms are amazing. The best part is how you use these hmtl labels, which will have good performance and no additional code is needed. No matter how complicated the layout is, it can be easily implemented based on these concise, scalable, and event-bound elements. Four form options are provided, as shown in Table 2-2:

Name	Class	Description
Vertical (default)	. Form-vertical (not required)	Stacked, controllable left-aligned labels
Inline	. Form-inline	Left-aligned labels and simple Inline control blocks
Search	. Form-Search	Magnified rounded corner, beautiful search box
Horizontal	. Form-horizontal	Left floating, right alignment label

We recommend that you go to the official documents to experience the real effects of various form elements, which are very elegant in modern browsers such as chrome and Firefox. At the same time, you can use. control-group to control the status of form input and errors. The wekit kernel is required. 2-5:

Figure 2-5 form Status Control

The code snippet is as follows:

View code

 

4.Button (buttons). Bootstrap provides multiple styles of buttons, which are also controlled by CSS classes, including BTN, BTN-primary, BTN-Info, BTN-success, and other buttons of different colors, you can also simply use. BTN-large. BTN-Mini and other CSS class control buttons can be used on the <A>, <button>, and <input> labels at the same time, making them easy to use. Buttons of different colors, as shown in 2-6:

Figure 2-6 button (buttons)

The code snippet is as follows:

View code

If you need a more simplified button, you canThisWebsites. If you need more styles and styles for the entire website, you canThisAndThat website.

References and extended reading

1. M. Pilgrim, HTML5: Up and running: oreilly & Associates Inc, 2010

2. html 5 <caption> label http://www.w3school.com.cn/html5/tag_caption.asp

3. stylebootstrap http://stylebootstrap.info/

4. WordPress-based Bootstrap http://bootstrapwp.rachelbaker.me/

5. Why did Twitter release Bootstrap? Http://www.quora.com/Why-did-Twitter-release-Bootstrap

 

 
This work was created by ventlam and licensed using the knowledge sharing signature-non-commercial use-share the 2.5 mainland China License Agreement in the same way.