[BootStrap] preliminary tutorial, [BootStrap] tutorial

[BootStrap] preliminary tutorial, [BootStrap] tutorial

<Span style = "font-family: Arial, Helvetica, sans-serif;"> I recently came into contact with BootStrap. Here I will summarize how to use BootStrap. </Span>

1. Download BootStrap

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. You can use BootStrap without downloading BootStrap.

BootStrap Web site: http://www.bootcss.com/

2. Reference BootStrap in the page

<Meta charset = "UTF-8"> <meta http-equiv = "X-UA-Compatible" content = "IE = edge"> <meta name = "viewport" content = "width = device-width, initial-scale = 1 "> <! -- The above three meta tags * must be placed at the beginning, and any other content * must be followed! -->

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <!--<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>-->    <!-- Include all compiled plugins (below), or include individual files as needed -->    <!--<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">-->

When BootStrap is not downloaded, reference the css library and js library provided by the BootStrap Chinese network. When we download BootStrap, We will reference the local library file:

    <link rel="stylesheet" href="css/bootstrap.min.css">

<Script src = "js/bootstrap. min. js"> </script> <! -- Decompress the local file --> <! -- Include all compiled plugins (below), or include individual files as needed --> <script src = "js/jquery-2.1.4.min.js">

3. Use the styles and effects provided by BootStrap

On the page, we only need to reference the class selector written by BootStrap for us to get the various effects of BootStrap. For example:

(1) button style:

* The button size is.btn-large,.btn-small, Or.btn-mini

Add .btn-block Create a block-level button and fill in the width of the entire parent level

* Whether the button is available or not.disabled

The above example is from the official BootStrap website.

Note: The preceding example is from http://bootstrap.kinghack.com/base-css.html. You can use this website to learn how to use bootstrap.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.