Bootstrap learning-javascript plug-in, bootstrap plug-in

Bootstrap learning-javascript plug-in, bootstrap plug-in

A modal box and an Image Browsing plug-in need to be used in a small project recently developed by Feifei, and the two are combined. Just as bootstrap has a corresponding plug-in, the following describes how to learn the application process:

 

1. Introduce the js file:

You can introduce a single plug-in file or all the files at a time. Fei is the latter of the selection. The reason is that the bootstrap. min. js file is not large.

2. First check the modal box effect and then how to use dynamic instances,

The usage is simple:

<1> directly copy the code of a dynamic instance (of course, you must at least know the functions of the classes involved, such.fadeClass is used to pop up the animation effect)

<2> modify the sample code as needed (remove the header and tail of the modal box ~~~)

<3> the browsing effect is still wide ~

3. Check the usage of usel:

Usage:

<1> same as 2 <1>

<2> modify the image path and view the effect. You can use it to view the effect.

4. Modify the settings as needed. It is found that the introduced modal box will change the size according to the image size-according to the designer, it will affect the user experience, so modify it:

Fixed the content of the modal box-browsed the watermark usel height of the image (. Carousel is set to height: 600px)

5. Final effect (view the image in the pop-up box, click the place outside the pop-up box, And the pop-up box disappears ):

Related code:

<! -- Modal -->

<Div class = "modalfade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">

<Div class = "modal-dialog">

<Div class = "modal-content">

<Div class = "modal-body">

<Div id = "carousel-example-generic" class = "carouselslide" data-ride = "carousel">

<! -- Indicators -->

<Ol class = "carousel-indicators">

<Li data-target = "# carousel-example-generic" data-slide-to = "0" class = "active"> </li>

<Li data-target = "# carousel-example-generic" data-slide-to = "1"> </li>

</Ol>

<! -- Wrapper forslides -->

<Div class = "carousel-inner" role = "listbox">

<Div class = "itemactive">

</Div>

<Div class = "item">

</Div>

</Div>

<! -- Controls -->

<A class = "leftusel-control" href = "# carousel-example-generic" role = "button" data-slide = "prev">

<Span class = "glyphiconglyphicon-chevron-left"> </span>

<Span class = "sr-only"> Previous </span>

</A>

<A class = "rightincluusel-control" href = "# incluusel-example-generic" role = "button" data-slide = "next">

<Span class = "glyphiconglyphicon-chevron-right"> </span>

<Span class = "sr-only"> Next </span>

</A>

</Div>

</Div>

</Div>

</Div>

</Div>

Reference: http://v3.bootcss.com/javascript/#carousel

Fei's article will also be published in my personal space:

Http://flyingdream.sinaapp.com/

The javascript plug-in provided by bootstrap does not work.

1. Check whether the syntax is correct.
2. check whether there are any error messages in the console.
3. Check whether the file reference path is correct.

How can we learn about bootstrap? Generally, what steps can I see that its website is a bit messy and there are many related open-source frameworks?

We recommend that you first learn the layout. This is the most useful. Start with the most basic bootstrap framework. Some of the other frameworks on the home page are scalable. With a complete understanding of some of the basic layout and style of bootstrap, it is not difficult to learn others. In fact, it is quite easy to learn about bootstrap. The layout is dominated by the percentage layout and the fence layout. Other similar buttons. btn error messages. alert-block all use the combined class .. Btn. btn-success is the green button .. Btn + suffix (actually a color system ). One of the most powerful features of bootstrap is the combined class. From typographical layout to css final to bootstrap. js (I personally think it is not likely to be used, and the compatibility and practicality are not the best. Js is useful for beginners. There are also a few commonly used ones. After all, the evil ie is still rooted in China.) After reading this step, I will try some small demos myself and get started quickly. I wish you a smooth learning experience.