ASP. net mvc use Bootstrap series (4) -- use JavaScript plug-in, mvcbootstrap

ASP. net mvc use Bootstrap series (4) -- use JavaScript plug-in, mvcbootstrap
Preface

The JavaScript plug-in of Bootstrap is based on JQuery. It provides all-new functions and can expand existing Bootstrap components. You can easily use these plug-ins by adding data attributes. Of course, you can also use programming APIs.
To use the Bootstrap plug-in, we need to add the Bootstrap. js or Bootstrap. min. js file to the project. These two files contain all the Bootstrap plug-ins. We recommend that you reference Bootstrap. min. js. Of course, you can also include the specified plug-in to customize Bootstrap. js, which has achieved a better loading speed.

Data attributes VS programming APIs

Bootstrap provides a way to use the plug-in completely using HTML tags, which means that you can leave JavaScript code empty. In fact, this is also a recommended method for Bootstrap.

For example, to enable the Alert component to support disabling the function, you can add the data-dismiss = "alert" attribute to the button (Botton) or link (A) element, the following code is used:

Of course, you can also implement the same functions through programming APIs:

Drop-down menu (dropdown. js)

With the dropdown plug-in (enhanced interactivity), you can add drop-down menus to the vast majority of Bootstrap components, such as navbar and tabs.Note: Wrap the drop-down menu trigger and drop-down menu in. dropdown, or another element that declares position: relative;.

The following is a region menu, Which is dynamically bound to the menu element through the Razor engine:

Note: by adding the data attribute: data-toggle = "dropdown" to the Button or Anchor, you can switch the dropdown drop-down menu to increase interaction. The <a> element of the menu sets tabindex =-1 to prevent elements from being part of the tab order.

Modal. js)

The modal box is displayed in a pop-up box to provide information or complete the form submission function. The Bootstrap modal box consists of three parts: the header, body, and a group of buttons placed at the bottom of the modal box. You can add any standard HTML tag in the Body of the modal box, including Text or embedded Youtube videos.

In general, you must place the HTML code of the modal box in the highest level of the document (that is, try to be the direct sub-element of the body label ), to prevent other components from affecting the presentation and/or functions of modal frames.

The following is a standard modal box, including Header, Body, and Footer:

Place the following HTML Tag on Top or Bottom of the View:

Note: by adding the data Attribute "data-dismiss =" modal "on the Button, you can disable the modal box. Of course, you can also use the programming API to complete the operation:

To display the modal box, you can add the data-toggle = "modal" attribute to the Button or Anchor element without writing any JavaScript code. At the same time, to indicate which modal box to display, you must use data-target to specify the Id of the modal box.

Similarly, you can use programming APIs to open a modal box:

Tab (tab. js)

Tabs can be used in a large form to split it into several parts to display local information. For example, the Northwind database contains the Customer information, which contains the basic information and address, you can use Tabs to Split data, as shown below:

It is also very easy to use Tabs: first, to create a standard unordered list <ul> element, you must set its class to nav-tabs or nav-pills. The <li> contained <a> element is a Tab element. You need to set its data-toggle to the tab or pill attribute and click the <div> content to which it points:

To set Tabs content, you need to create a parent <div> element and set class to tab-content. In the parent div container, create a div element for each Tab content, set "class" to "tab-pane" and "Id". Add "active" to activate the display of the Tab content.

Of course, you can also activate it through programming APIs:

Tooltip. js)

Tooltip can provide additional information for users. Boostrap Tooltip can be used on various elements, such as Anchor:

You can add data-toggle = "tooltip" to use tooltip. You can also set the display position of the content by adding the data-placement attribute, bootstrap provides four locations:

• Top
• Bottom
• Left
• Right

Finally, the title to be displayed is set by setting data-original-Title.

Note: For performance consideration, the data-api of Tooltip is optional, which means you must manually initialize the tooltip plug-in:

Pop-up box (popover. js)

The pop-up box is similar to Tooltip. You can provide additional information for the user, but the pop-up box can display more information, such as allowing us to display a Header and Content, as shown below:

Like Tooltip, data-api is optional for performance considerations, which means you must manually initialize the pover plug-in:

The result is as follows:

Accordion component (collapse. js)

The accordion component consists of several panel groups. Each panel group contains several header and content elements in sequence. The most common use case is the FAQ, as shown below:

To use the accordion component, you need to set data-toggle = "collapse" and the container Id (Div) to expand by clicking it in <a> Panel Heading, as shown below:

Carousel usel. js)

Movie usel is essentially a slide that shows different elements cyclically. It usually displays images, just like a Carousel. You can see this component on many websites and it is very convenient to use it:

• Include the Carousel component in a <div> element whose class is carousel and whose data-ride is "carousel.
• Add an ordered list <ol> in the preceding container to render it as a small dot representing the currently active slide (displayed in the lower right corner ).
• Next, add a <div> class named carousel-inner. The <div> container contains the actual slides.
• Then, add the left and right arrows to allow the user to slide the slides freely.
• Finally, set the sliding switching interval by setting data-interval. Of course, it can also be implemented through programming APIs.

Put the following HTML identifier in the View:

<Div class = "container-full"> <div id = "myCarousel" class = "carousel" data-ride = "carousel" data-interval = "10000"> <! -- Indicator --> <ol class = "carousel-indicators"> <li data-target = "# myCarousel" data-slide-to = "0" class = "active"> </li> <li data-target = "# mydomainusel" data-slide-to = "1"> </li> <li data-target = "# mydomainusel" data-slide -to = "2"> </li> </ol> <div class = "carousel-inner"> <div class = "item active"> <div class =" container "> <div class =" carousel-caption "> The results are as follows:

Summary

This blog introduces common Bootstrap plug-ins that use these plug-ins by using APIs of data properties and programming methods. For more plug-ins, visit: http://v3.bootcss.com/javascript.