The main content of this article is to do a carousel map below the navigation bar, automatically play the latest important dynamic, for everyone to refer to, the specific content as follows
One, response-type Carousel map
Response Wheel-Seeding diagram
<div id= "Mycarousel" class= "Carousel Slide" > <ol class= "carousel-indicators" > <li data-target= "# Mycarousel "data-slide-to=" 0 "class=" active "></li> <li data-target=" #myCarousel "data-slide-to=" 1 "> </li> <li data-target= "#myCarousel" data-slide-to= "2" ></li> </ol> <div class= " Carousel-inner "> <div class=" Item Active "style=" background: #223240; " > <a href= "#" ></a> </div> <div class= "item" style= "b Ackground: #F5E4DC; " > <a href= "#" ></a> </div> <div class= "item" style= "b Ackground: #DE2A2D; " > <a href= "#" ></a> </div> </div> <a href= "#my Carousel "Data-slide=" prev "class=" Carousel-controlleft ">‹</a> <a href=" #myCarousel "data-slide=" Next " class= "Carousel-controlright" >›</a> </div>
The required JQuery control
$ (' #myCarousel '). Carousel ({
//Set AutoPlay/2 sec
interval:3000,
});
Adjust the position of the Carousel Arrow
$ ('. Carousel-control '). CSS (' Line-height ', $ ('. Carousel-innerimg '). Height () + ' px ');
$ (window). Resize (function () {
var $height = $ ('. Carousel-inner img '). EQ (0). Height () | | $ ('. Carousel-inner img ')-eq (1). Height () | | $ ('. Carousel-inner img '). EQ (2). Height ();
$ ('. Carousel-control '). CSS (' line-height ', $height + ' px ');
The CSS you need
A:focus {
Outline:none
}
. Navbar-brand {
padding:0;
}
#myCarousel {
margin:50px 0 0 0;
}
. Carousel-inner. Item img {
margin:0 auto;
}
. Carousel-control {
font-size:100px;
}
If you want to further study, you can click here to learn, and then attach a wonderful topic: Bootstrap Learning Tutorials Bootstrap actual combat
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.