Home > Developer > JavaScript
How to Use the Bootstrap image Carousel component Carousel,
Bootstrap is an open-source front-end development toolkit launched by Twitter. It was developed by Twitter designer Mark Otto and Jacob Thornton. It is a CSS/HTML framework. Bootstrap provides elegant HTML and CSS specifications, which are written by the dynamic CSS language Less. Since its launch, Bootstrap has become a popular open-source project on GitHub. It is used by Breaking News of NASA's MSNBC (Microsoft National Broadcasting Corporation.
The image carousel component is a common technology in Web pages. However, if you write it directly, it requires a long JavaScript code and cannot control the size.
If you use Bootstrap to compile the image Carousel component movie usel, it can save a lot of time.
At the same time, the original meaning of usel is a tornado Trojan.
I. Basic Objectives
Compile the Carousel component Carousel for multiple images on the webpage, place the cursor on it with the hover effect, and provide image descriptions under each image.
Because my computer video recording software is relatively scum, I also feel that there is no need to draw too much time on it, I think that as long as the problem can be explained, so the following GIF is eclipsed more seriously, however, the basic results are displayed.
The image Carousel component of Bootstrap is invalid usel, which is incompatible with IE6 and 7. If IE6 is required, download the IE6 component support of Bootstrap from the website (click to open the link ). At the same time, in Google Chrome, the image file description will show a little black, but it does not affect browsing:
The display in different browsers is different. IE8 has the following effect:
Ii. Basic Ideas
See webpage layout:
Iii. Production Process
1. Similar to the previous step in "JavaScript" using Bootstrap to compile a dialog box popped up on the current page, you can close the dialog box without jump or non-pop-up window.
Because Bootstrap is required, you can download the component from the official website. The Bootstrap version for the production environment is not compatible with Bootstrap3 to 2. We recommend that you use Bootstrap3 directly based on the development documentation. This article is also based on Bootstrap3. At the same time, the JavaScript effect provided by Bootstrap3 needs to be supported by jQuery1.11. You can download jQuery1.11 compatible with the old browser IE6 on the jQuery official website (click to open the link), instead of jQuery2 that is not compatible with the old browser ie6. After the download, configure the site directory. The Bootstrap3 directly decompress the site directory, and put the jquery-1.11.1.js to the js directory, that is, the same directory with bootstrap. js, the structure of the site folder is roughly as follows:
2. The following is the full code of the web page, which is described in the following part:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(1)
<Head> <! -- Declare the webpage code and automatically adapt to the browser size. To use the css of bootstrap, you need jquery support and use the js of bootstrap, title --> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <meta name =" viewport "content =" width = device-width, initial-scale = 1.0, user-scalable = no "> <link href =" css/bootstrap.css "rel =" stylesheet "media =" screen "> <script type =" text/javascript "src =" js /jquery-1.11.1.js "> </script> <script type =" text/javascript "src =" js/bootstrap. js "> </script> <title> image Carousel movie usel </title>(2) <body> Part
Declare a container, which automatically places all elements of the webpage in the center of the webpage, and then write elements in the container.
First, write a page header, declare a page header, and then write a piece of text in it.
<Div class = "page-header">Then define an unnamed layer div, which is mainly used to regulate the image carousel components. The image carousel component size of bootstrap cannot specify the elements in it by adding the width and height parameters. In this way, the image carousel component will be distorted. To center the component, you must use margin-right: auto; margin-left: auto; in the style attribute of the div, the addition of align = "center" has no effect at all.
The last part is a detailed description of the image components:
<Div style = "width: 640px; height: 480px; margin-right: auto; margin-left: auto;"> <! -- The image carousel component is named usel, and the data-ride element is required by bootstrap. The data-interval value is used to change an image every 1000 milliseconds, that is, one second, components with this value too small will be distorted --> <div id = "carousel" class = "carousel slide" data-ride = "carousel" data-interval = "1000"> <! -- There are several images defined here. If there is one more image, add one more item below, and add one value for data-slide-, the first image, that is, 0th images, must have class = "active" or the component cannot 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 the detailed editing of each image. The class value of the first image must be item active, and the rest must be item --> <div class = "item active"> <! --Yi click img0.jpgto open the hyperlink of img0.jpg. If you do not need a hyperlink, remove the <a> label --> <a href = "images/img0.jpg"> </a> <div class = "carousel-caption"> <! -- Text description in the image -->The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
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
