Bootstrap getting started tutorial (3)

Last Review: The basic CSS (base CSS) of Bootstrap provides a variety of elegant and consistent basic HTML page elements, including typographical, table, form, and button elements, meet the basic requirements of front-end engineers.

As a complete front-end tool set, bootstrap has a large number of powerful, elegant, and reusable components, including buttons, navigation, labels, and badges ), typography, Thumbnail (thumbnails), reminder (alert), progress bar (progress bar), miscellaneous (Miscellaneous ). This topic will explain these topics in depth.

1. Button)

At last, we mentioned a variety of simple styles of the button. However, in Bootstrap, you can combine the button to obtain more functions similar to the toolbar, the buttons in a widget can be combined into a button group and a button drown menu ).

(In the next section, JavaScript plugin will mention more buttons ).

1.1 button group)

As the name suggests, a button group combines multiple buttons into one page part. You can create a button group or toolbar easily by using the BTN-group class and a series of <A> or <button> labels. BTN-group programming practices:

• We recommend that you do not mix the <A> and <button> labels in a single button group, but use only one of them.
• Single Color is recommended for the same button group
• Make sure that the correct reference position is used when using the icon.

Buttons and toolbar are easy to implement, as shown in 3-1:

 

Figure 3-1 button group)

1.2 button drown menu)

Bootstrap allows any button label to trigger a drop-down menu. You only need to place the correct menu content in the. BTN-group class label. 3-2:

Figure 3-2 drop-down menu

The code snippets of the preceding two button components are as follows:

View code

At the same time, bootstrap also has the drop-down menu of separators and the pull-up menu button. For more information, see.

2. Navigation 2.1 lightweight Navigation (NAV, tabs, and pills)

Bootstrap navigation is very diverse and flexible. It allows the use of the same tag and different CSS classes to bring navigation bars of different styles, which is highly customizable. All navigation components, including tabs, pills, and lists tags, must use the. Nav class to implement basic navigation labels. In addition to our common navigation, we can also use the. Nav-stacked class to implement stacked-vertical navigation bars.

As shown in 3-3, the basic navigation style is displayed.

Figure 3-3 navigation with multiple basic styles

The code snippet is as follows:

View code

 

The navigation bar of the drop-down menu and the nav list are common elements of the page. The nav list is similar to the OSX finder and can contain icons. They can also use. Nav as the basic class to implement these components. There are also various tab-style navigation bars, which will be added later. 3-4:

Figure 3-4 list and drop-down navigation

The code is still simple. The snippets are as follows:

View code

2.2 navigation bar (navbar)

MostAn important page element is the navigation bar of the page header, Which is used on almost any page. The basic style navigation bar provided by bootstrap is a popular "hard and black" on the Internet. Of course, you can use less to customize it. We should note that the basic class of the navigation bar is not. Nav but navbar.

As for the top or bottom, use navbar-fixed-top and navbar-fixed-bottom to pin the top or bottom. You can also use form elements in navbar, such as. navbar-form. It also supports responsive operations through. Nav-collapse or directly the. Collapse class. 3-5:

Figure 3-5 navigation bar

The code snippet is as follows:

View code

 

2.3 Bread Breadcrumbs and pagination)

• Breadcrumbs navigation is used to display the location of a user on a website or app. For more information about the advantages of breadcrumbs navigation and Its Effect on Seo, seeThisPage. Bootstrap's "Bread" is very elegant on code warehouse pages, as shown in Figure 3-6:

Figure 3-6 breadcrumbs)

• Page number (pagination) is also a very common page element. Bootstrap provides two types of paging components. One is multi-page navigation, which is used for jump of multiple page numbers. It has simple page turning prompts and can be well applied to the result search page; the other is Pager, it is a lightweight component that allows you to quickly flip up and down pages for personal blogs or magazines. 3-7:

  Figure 3-7 page number (pagination)

The code snippets for the preceding two types of navigation are as follows:

View code

 

3. Label, badges, typographic, and thumbnails 3.1 label and badges)

Tags are a very useful small page element. Bootstrap has multiple color tags to express different page information. You only need to simply use the label Label. Badges are small and simple components used to indicate or calculate certain types of elements. They are common in e-mail clients and are often used in some sign-In websites (lbs. 3-8:

Figure 3-8 label and badges)

The code snippet is as follows:

View code

 

3.2 typographic)

We mentioned typographic In the first lecture, which mainly involves two typographical components: Hero-unit, Page-header.Hero-unit is a lightweight and extensible component, it is mainly used for marketing websites to display a large number of elements. The page-header is a simple way to set a suitable space and layout for the header of the page section. 3-9:

Figure 3-9 typographic)

The code snippet is as follows:

View code

 

3.3 Thumbnail (thumbnails)

Thumbnails can be displayed as grid structures of images, videos, and texts. To implement the default Bootstrap thumbnails, you only need simple thumbnails labels. Thumbnails is mostly used on images, screen search results, and other pages. It can also be linked to other pages. Similarly, it provides good customization. You can integrate the text clips, buttons, and other labels into the thumbnail, and mix and match different thumbnails. 3-10, 3-11:

Figure 3-10 thumbnail 1 (thumbnails)

Figure 3-11 thumbnail 2 (thumbnails)

The code snippet is as follows:

View code

 

 

4. Reminder area (alerts), progress bar (progressing bar), miscellaneous (Miscellaneous) 4.1 reminder area (alerts)

In Bootstrap 2, the basic class of the reminder area is rewritten, and the original. Alert-message class is simplified using. Alert. To make the components more concise and durable, bootstrap removes the appearance of different alert blocks, with more padding and more text display. 3-12:

Figure 3-12 alarm area (alert)

The code snippet is as follows:

View code 4.2 progress bar)

Progress bar, which is also an indispensable page element, is often used in redirection, loading, and other pages. Bootstrap provides a variety of beautiful, simple, and colorful progress bars. However, the bar and animation progress bars do not support IE, because the progress bar uses gradients (CSS 3), transparency (transitions), and animation effects (animations) to achieve their effects. IE7-9 and earlier versions of Firefox do not support these features, so when implementing the progress bar, please pay attention to the degree of browser support. 3-13,

Figure 3-13 progress bar)

The code snippet is as follows:

View code

 

4.3 Miscellaneous (Miscellaneous)

The miscellaneous of Bootstrap includes two lightweight components: well, which is used to express the insert effect. The other is the close icon, which can be used to remind the area of the closing mode window (Modal. Modal will be explained in the following JavaScript pluging. 3-14:

Figure 3-14 miscellaneous (Miscellaneous)

The Code is as follows:

View code

References and additional reading:

1. css3 tutorials http://www.w3schools.com/css3/default.asp

 

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.