Bootstrap framework of Learning Tutorials (ii) _JAVASCRIPT skills

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.

First, download bootstrap

Bootstrap (current version v3.3.0) provides you with the following ways to get started, each for developers with different skill levels and for different usage scenarios.

Download Address: http://v3.bootcss.com/getting-started/

PS: In fact, we do not need to download bootstrap can also use it:

Bootstrap Chinese Network for Bootstrap dedicated to build their own free CDN acceleration services. Based on the domestic cloud vendors CDN service, access faster, accelerated effect more obvious, no speed and bandwidth restrictions, permanent free.

Ii. Pre-compiled version

After downloading the package, unzip 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: Fonts can be added or not added

Third, an example

Run the screenshot as shown in the following illustration:

Iv. Example Two

Grid systems are bootstrap and have advantages. A flow-type grid system is used to divide the width into 12 halves.

<!--grid system, global CSS style-raster system--> <!--grid system in container container--> <div class= "container" style= "margin-top:60px" > <!--Add a row to occupy 12 columns, add img--> <div class= "Row" > <!--JavaScript plugin, add Carousel Carousel map--> <div " 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" ListBox > <div class= "Item Active" >  <div class= "Carousel-caption" >  

The effect is as shown in the figure

The above is a small set up to introduce the bootstrap framework of the Learning Tutorial (ii), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!