Bootstrap getting started tutorial (4)

Last review: the rich Bootstrap components have good scalability and can be well applied in the production environment. These components include buttons, navigation, thumbnails (thumbnails), alarm (alert), and progress bar, which can greatly reduce the code volume of front-end engineers, implement richer and richer pages.

As a good front-end tool, bootstrap is essential for implementing modern dynamic page effects. It provides 12 plug-ins Based on jquery class libraries, including modals, scrollspy, tabs, and tooltip ), popovers, alerts, collapse, carousel, and typeahead. these content will be elaborated in two sections. This section will explain in depth the modals and Other plug-ins. In BootstrapAll animation EffectsYou must first reference transitions JS, including modals and alerts, to achieve fade-out effect.

1. Modal window (modals)

A modal window refers to a window (dialog box) in which the user's mouse focus or input cursor will remain on it unless a valid closing method is adopted ). bootstrap is very simple and flexible in implementing the modal window. You only need to use a small amount of code and smart default settings to implement the traditional mode window that achieves the traditional JavaScript effect. Default Bootstrap mode window effects, including dialog box falling from the top of the screen, dimmed in other areas of the screen, and hidden modal windows. These effects correspond to. Modal. Fade. Hide classes respectively. You do not need to write any JavaScript code to implement the modal effect.Data-Toggle = "Modal"Place it on the trigger control element (such as button, hyperlink, etc.), and specify its modal window ID Link (Data-target = "# mymodal", href = "# mymodal"). When these control elements are triggered, the modal window appears. The content of the mode window can be very rich. These content must be included in the DIV of modal, And the header, content, and foot of the modal window can be defined.

If you use jquery to call modal, you only need a line of JavaScript code,

$ ('# Mymodal'). Modal (options)
 

 

This option includes three items: backdrop, keyboard, and show. It mainly controls the actions of the modal window. Modal methods mainly include show, hide, toogle, and so on, and are mainly used to control the status of modal windows. Modal trigger events include shown and hiden, which are mainly used to control the trigger control of the modal window function. For details, go to the official documentation and click the launch demo modal button. The implementation of modal is 4-1:

Figure 4-1 modal window)

The Code is as follows:

View code 2. scrollspy)

Rolling monitoring is used to automatically update the navigation position based on the scrolling position of the user page. To achieve this effect, onlyYou need to add data-Spy = "scroll" to the rolling element you want to monitor. Generally, you need to add data-Spy = "scroll" to the body. Using jquery is also relatively simple to call the method. Only one line of code is required:$('# Navbar').Scrollspy(). This plug-in only has the refresh method and offset attribute. For more information, see the official documentation.

The effect is 4-2:

Figure 4-2 scrollspy)

The Code is as follows:

View code

 

3. Tag effect (tabs)

The label plug-in adds a fast and dynamic tab and pill to implement the effect of transition page content. Similarly, we can achieve this without writing any JavaScript code, we only need to add nav and nav-tabs on the tab or piil page elements and reference the JS file. You can also use ul tags to style your elements. For more information, see the official documentation. The effect is shown in 4-3:

Figure 4-3 tag effect (tabs)

The Code is as follows:

View code

 

4. tooltip and popovers 4.1 tooltip)

The prompt effect is the content prompts and supplements that appear when you move the mouse over or over some connections. The tooltip Implementation of bootstrap2.0 is inspired by the excellent jquery. Tipsy plug-in written by Jason frame. This version of tooltips no longer depends on images, but uses CSS 3 animation and data attributes. Unlike other plug-ins mentioned in this articleTrigger event, Must be implemented using JavaScript code. Let's first look at the tooltip's HTML Syntax:

 
<A href = "#" rel = "tooltip" Title = "first tooltip"> do not touch me </a>
 

 

Based on the performance, both tooltip and popovers have built-in data selectors in the attributes. We can specify CSS or jquery selectors to use them. To trigger tooltip, you only need one line of code:

 
$ ('# Example'). tooltip (options)
 

 

Its Attribute options include animation, placement, selector, trigger, and delay. Animation is used to fade out the CSS effect of the prompt, while placement controls the position (top, button, left, etc.) of the prompt ). The selector option is provided to the user to control the display of tooltip on a specific target of the page (delegated to/decorated with). The default value is false. Trigger is the type of mouse or keyboard event that triggers a tooltip, including hover, focus, and maual. Delay is the time variable (MS) that controls the display and delay of the tooltip, in the form of: delay: {Show: 500, hide: 100 }.

The tooltip effect is shown in Figure 4-4:

Figure 4-4 tooltip)

The Code is as follows:

View code 4.2 "puf" effect (popovers)

The "puf" effect is to add some secondary content as a small overlay layer to a specific page element to implement the prompt effect of the iPad style (in fact, The tooltip of the enlarged version ). Therefore, to implement popovers, you must first reference the tooltips plug-in. Let's take a look at the syntax of "puf" effect (popovers) in HTML.

<A class = "BTN-success" type = "Submit" rel = "popover" Title = "" data-content = "you thought I would tell you the scum do you want to delete old posts ?! "> Recommended </a>
 

Comparing the markup of tooltip HTML, we can see that the difference between the two lies in the rel type. Similarly, to trigger popovers, only one line of code is required:

 
$ ('# Example'). popover (options)
 

Its Attributes are almost identical to those of tooltip ...... Only one more content is used to store the superimposed content. The effect is 4-5:

Figure 4-5 popovers)

The Code is as follows:

View code

 

References and additional reading:

1. Modal window http://en.wikipedia.org/wiki/Modal_window

2. Modal and non-modal window http://tgyd2006.iteye.com/blog/211497

3. popover http://en.wikipedia.org/wiki/Popover

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