Bootstrap is an Open-source tool kit for front-end development launched by Twitter. It was developed in collaboration with the Twitter designer Mark Otto and Jacob Thornton, a css/html framework. Bootstrap provides elegant HTML and CSS specifications, which are written by the dynamic CSS language less. Bootstrap, which was popular after its launch, has been a popular open source project on GitHub, including breaking news from NASA's MSNBC (Microsoft National Broadcasting Corporation).
The picture carousel component is a very common technique in a Web page, but if you write it directly, it requires a long JavaScript code, and it's not good to control the size.
If you use bootstrap to write a picture Carousel component Carousel, you can save a lot of time.
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 the 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, with the previous "JavaScript" use bootstrap to write a pop-up in the current Page dialog box, you can close, do not jump, not the window of the first step
Because you need to use bootstrap, you can download the components on the website first, the bootstrap version of the production environment, 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, which can be downloaded to the jquery Web site compatible with the old browser IE6 jQuery1.11 (click on the Open link) instead of 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" >
After that, you define 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, a detailed description of the various 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= "#carouse
L-example-generic "data-slide-to=" 2 "></li> </ol> <div class=" Carousel-inner "role=" ListBox "> <!--The following are the details of each picture of the editor, the first picture of the class value must be item active, the rest is item--> <div class= "Item Active" > & lt;! --click Img0.jpg This picture to open the Img0.jpg hyperlink, if you do not need a hyperlink, then remove the <a> tag--> <a href= "Images/img0.jpg" ></a> <div class= "Carousel-caption" > <!--
Text description under Picture-->
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
