Home>

After bootstrap is downloaded and installed,You can find 12 js files in d:\ program files \ nodejs \ node_modules \ bootstrap \ js. These js files are the 12 jquery plugins that come with bootstrap. You can also find them in d:\ program files \ nodejs \ node_modules \ bootstrap \ You can find bootstrap.js and bootstrap.min.js in dist \ js. Both files contain 12 jquery plugins.

Of the 12 jquery plugins, the most commonly used isImage carousel carousel.js, tab switching tab.js, scroll monitoring scrollspy.js, dropdown list dropdown.js, module box popup layer modal.jsandTooltip.js.

(A) carousel.js picture carouselImage carousel can set the image size in css as needed,Location, etc.

Image carousel needs to introduce jquery.min.js, carousel.js, and transition.js can also be introduced to add transition effects.

<div>
 <div>
 <div>
 <!-The data-ride="carousel" attribute is used to mark the carousel to start the animation when the page loads->
 <div data-ride="carousel">
 <ol>
 <li data-slide-to="0" data-target="#carousel-332839">
 </li>
 <li data-slide-to="1" data-target="#carousel-332839">
 </li>
 <li data-slide-to="2" data-target="#carousel-332839">
 </li>
 </ol>
 <div>
 <div>
 <img src="images/chrysanthemum.jpg" />
 <div>
 <h4>
 first thumbnail label
 </h4>
 <p>
 cras justo odio, dapibus ac facilisis in, egestas eget quam. donec id elit non mi porta gravida at eget metus. nullam id dolor id nibh ultricies vehicula ut id elit.
 </p>
 </div>
 </div>
 <div>
 <img src="images/desert.jpg" />
 <div>
 <h4>
 second thumbnail label
 </h4>
 <p>
 cras justo odio, dapibus ac facilisis in, egestas eget quam. donec id elit non mi porta gravida at eget metus. nullam id dolor id nibh ultricies vehicula ut id elit.
 </p>
 </div>
 </div>
 <div>
 <img src="images/hydrangeas.jpg">
 <div>
 <h4>
 third thumbnail label
 </h4>
 <p>
 cras justo odio, dapibus ac facilisis in, egestas eget quam. donec id elit non mi porta gravida at eget metus. nullam id dolor id nibh ultricies vehicula ut id elit.
 </p>
 </div>
 </div>
 </div><a href="#carousel-332839" data-slide="prev"><span></span></a><a href="#carousel-332839" data-slide="next"><span></span></a>
 </div>
 </div>
 </div>
 </div>

(Two) tab switching

Tag switching requires the introduction of jquery.min.js, tab.js, and you can also introduce transition.js to add transition effects.

<div>
 <div>
 <div>
 <div>
 <ul>
 <li>
 <a href="#panel-1" data-toggle="tab">section 1</a>
 </li>
 <li>
 <a href="#panel-2" data-toggle="tab">section 2</a>
 </li>
 </ul>
 <div>
 <div>
 <p>
 i "m in section 1.
 </p>
 </div>
 <div>
 <p>
 i "m in section 2.
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

(Three) scroll listener scrollspy.js and dropdown list dropdown.js

Combining scrolling and drop-down lists Make a navigation bar with scrolling and listening that has a drop-down list.

Need to set style,The style of this example is:

.a, .b {
 height:500px;
 width:100%;
}
.b {
 background-color:white;
}
.a {
 background-color:black;
}

Need to introduce jquery.min.js, dropdown.js, scrollspy.js.

<body data-spy="scroll" data-target="#navbarexample">
 <div>
 <div>
 <div>
 <div>
 <div>
 <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 <span>toggle navigation</span><span></span><span></span><span></span>
 </button><a href="#">brand</a>
 </div>
 <div>
 <ul>
 <li>
 <a href="#1">link</a>
 </li>
 <li>
 <a href="#2">link</a>
 </li>
 <li>
 <a href="#3" data-toggle="dropdown">dropdown<strong></strong></a>
 <ul>
 <li>
 <a href="#">action</a>
 </li>
 <li>
 <a href="#">another action</a>
 </li>
 <li>
 <a href="#">something else here</a>
 </li>
 <li>
 </li>
 <li>
 <a href="#">separated link</a>
 </li>
 <li>
 </li>
 <li>
 <a href="#">one more separated link</a>
 </li>
 </ul>
 </li>
 </ul>
 <form role="search">
 <div>
 <input type="text">
 </div>
 <button type="submit">
 submit
 </button>
 </form>
 <ul>
 <li>
 <a href="#4">link</a>
 </li>
 <li>
 <a href="#5" data-toggle="dropdown">dropdown<strong></strong></a>
 <ul>
 <li>
 <a href="#">action</a>
 </li>
 <li>
 <a href="#">another action</a>
 </li>
 <li>
 <a href="#">something else here</a>
 </li>
 <li>
 </li>
 <li>
 <a href="#">separated link</a>
 </li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 <div>
 <!-Used when the local scroll bar is listening
 <div data-spy="scroll" data-target="#navbarexample">->
 <div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 </div>
 </div>
</body>
</html>

(Four) module box pop-up layer modal.js

You need to introduce jquery.min.js, modal.js, and you can also introduce transition.js to add transition effects.

<div>
 <div>
 <div>
 <a href="#modal-container-732948" role="button" data-toggle="modal">launch demo modal</a>
 <div role="dialog" aria-labelledby="mymodallabel" aria-hidden="true">
 <div>
 <div>
 <div>
 <button type="button" data-dismiss="modal" aria-hidden="true">
 X
 </button>
 <h4>
 modal title
 </h4>
 </div>
 <div>
 ...
 </div>
 <div>
 <button type="button" data-dismiss="modal">
 close
 </button>
 <button type="button">
 save changes
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

(Five) tooltip.js prompt boxYou need to introduce jquery.min.js, tooltip.js, and you can also introduce transition.js to add transition effects.

In addition, the tooltip plugin is not like other plugins,It is not a pure css plugin. To use the plugin,It must be activated using jquery.

$(function () {$("[data-toggle =" tooltip "]"). tooltip ();});
 <body>
 <a href="#" data-toggle="tooltip"
>default tooltip</a><br />
 <a href="#" data-toggle="tooltip"
 data-placement="left">tooltip on the left</a><br />
 <a href="#" data-toggle="tooltip" data-placement="top"
>tooltip at the top</a><br />
 <a href="#" data-toggle="tooltip" data-placement="bottom"
<tooltip at the bottom</a><br />
 <a href="#" data-toggle="tooltip" data-placement="right"
>tooltip on the right</a><br />
 <button type="button" data-toggle="tooltip"
>default tooltip</button><br />
 <button type="button" data-toggle="tooltip"
 data-placement="left">tooltip on the left</button><br />
 <button type="button" data-toggle="tooltip"
 data-placement="top">tooltip at the top</button><br />
 <button type="button" data-toggle="tooltip"
 data-placement="bottom">tooltip at the bottom</button><br />
 <button type="button" data-toggle="tooltip"
 data-placement="right">right tooltip</button>
</body>

If i want to learn more,Can clickHereTo learn,Attached 3 exciting topics for everyone:

  • Previous Yii view CGridView implementation operation button definition address example
  • Next Small pitfalls encountered in Springmvc restful configuration