Home > Developer > JavaScript
A detailed tutorial on the Bootstrap framework (2 ).
Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is concise and flexible, making Web development faster.
1. Download Bootstrap
Bootstrap (v3.3.0 of the current version) provides the following methods to help you get started quickly. Each method is applicable to developers with different skill levels and different use cases.
: Http://v3.bootcss.com/getting-started/#download
PS: Actually we can use bootstrap without downloading it:
Bootstrap chinnet has built its own free CDN acceleration service for Bootstrap. Based on CDN services provided by cloud vendors in China, the Service provides faster access speeds, more obvious acceleration effects, no speed and bandwidth restrictions, and is permanently free of charge.
Ii. Pre-compiled version
After downloading the compressed package, decompress it to any directory to see the following (compressed version) directory structure:
bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ └── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/├── glyphicons-halflings-regular.eot├── glyphicons-halflings-regular.svg├── glyphicons-halflings-regular.ttf└── glyphicons-halflings-regular.woff
PS: font can be added or not added
Iii. instance 1
<Html lang = "en">Run as shown in:
Iv. instance 2
The raster system is Bootstrap and advantageous. The streaming raster system is used to divide the width by 12.
<! -- Grid system, global CSS style-grid system --> <! -- Place the grid system in the container --> <div class = "container" style = "margin-top: 60px"> <! -- Add a row that occupies 12 columns and add img --> <div class = "row"> <! -- Javascript plug-in to add a carousel image --> <div id = "carousel-example-generic" class = "carousel slide" data-ride = "carousel"> <! -- Indicators --> <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> <li data-target = "# carousel-example-generic" data-slide -to = "3"> </li> </ol> <! -- Wrapper for slides --> <div class = "carousel-inner" role = "listbox"> <div class = "item active"> <div class =" carousel-caption ">Effect
The above is a detailed tutorial on the Bootstrap framework introduced by xiaobian (II). I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!
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
