Bootstrap development practices: Response-type carousel graphs and bootstrap development practices

Bootstrap development practices: Response-type carousel graphs and bootstrap development practices

The main content of this article is to make a slideshow under the navigation bar to automatically play the latest important news for your reference. The specific content is as follows:

I. Response carousel Diagram

// Response carousel

<Div id = "myCarousel" class = "carousel slide"> <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 = "# 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 =" background: # F5E4DC; "> <a href =" # ">  </a> </div> <div class =" item "style =" background: # DE2A2D; "> <a href =" # ">  </a> </div> 
// Required jQuery Control
$ ('# Myprop usel'). Specify usel ({// sets automatic playback/2 seconds interval: 3000 ,});
// Adjust the arrow position of the carousel
$('.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 required CSS
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 learn more, click here to learn more and add a special topic: Bootstrap tutorial
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.