Using bootstrap to write a picture Carousel component Carousel, you can save a lot of time, Picture Carousel component is a very common technology in the Web page, but if written directly, need a long JavaScript coding, but also bad control size.
At the same time, carousel the original meaning of the word is the roundabout.
I. BASIC OBJECTIVES
in the Web page to write a number of pictures of the Carousel component Carousel, the mouse on the top of the hover effect, and under each picture with a picture description.
Because of the author's computer video recording software is slag, also feel no need to draw too much time on this, think as long as can explain the problem on the line, so the following GIF pale is more serious, but the basic effect is shown out.
This bootstrap picture Carousel Component Carousel, incompatible IE6 with 7, requires IE6 support, to go to this site to download bootstrap component support (click to open the link). At the same time, in Google Chrome, the picture file shows a little black, but does not affect browsing:
The presentation in different browsers is different. IE8 's words are such an effect:
Ii. Basic Ideas
See the following figure page layout:
Third, the production process
1, the same as before the "Bootstrap to write a pop-up in the current page can be closed dialog box non-bomb window" First step (click to open the link)
Because the need to use bootstrap, so first on the official website (click to open the link) to download components, for the production environment of the bootstrap version, BOOTSTRAP3 is not compatible with 2, it is recommended to use BOOTSTRAP3 directly according to their development documents. This article is also based on BOOTSTRAP3 production. At the same time, the JavaScript effect provided by BOOTSTRAP3 needs to be supported by jQuery1.11 (click on the Open link) to download the jQuery1.11 of the old browser IE6 on the jquery website, rather than the IE6 of the old browser JQuery2. After downloading, configure the site directory. The BOOTSTRAP3 directly to the site directory, and put the jquery-1.11.1.js into the JS directory, that is, bootstrap.js the same directory, the structure of the site folder is roughly as follows:
2, the following is the full code of the Web page, the following part of the description:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
(1)
(2) <body> part
Declare a container container, which causes all the elements of the Web page to be automatically centered in the page and then write the elements in the container.
First, write the header, declare a page header, and then write a text inside it.
<div class= "Page-header" >
The
Then defines an unnamed layer div, which is primarily used to standardize the image carousel component. Bootstrap's picture the size of the carousel component cannot be defined by adding the width and height parameters to its elements. This way the picture carousel component is distorted. At the same time, the component must be centered, using Margin-right:auto in the div's style attribute; Margin-left:auto to constrain, adding align= "center" is no effect at all.
Finally is a detailed description of the parts of the picture component:
<div style= "width:640px; height:480px; Margin-right:auto; Margin-left:auto; " > <!--the name of the Carousel,data-ride element is bootstrap required, Data-interval value is 1000 milliseconds, 1 seconds for a picture, this value too small component will be distorted--> <div id= "Carousel" class= "Carousel Slide" data-ride= "Carousel" data-interval= "1000" > <!--there are several pictures defined here, If more than one picture on the following additional item, data-slide-to value plus one, the first picture is the No. 0 picture must have class= "active" otherwise component can not work--> <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> <li data-target= "# Carousel-example-generic "data-slide-to=" 2 "></li> </ol> <div class=" Carousel-inner "role=" listbox "> <!--The following is a detailed picture of the editor, the first picture of the class value must be item active, the rest is item--> <div class=" Item Active "> <!--meaning for click IM G0.jpg this picture to open img0.jpg hyperlink, if you do not need hyperlinks, then remove <a> tags--> <a href= "images/img0.jpg ></a> <div class= "Carousel-caption" > <!--Picture text description-->
If you want to further study, you can click here to learn, and then attach 3 wonderful topics:
Bootstrap Learning Course
Bootstrap Practical Course
Bootstrap Plugin Usage Tutorial
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
