Installation and use of Bootstrap

Introduction to Bootstrap

Bootstrap is a relatively popular framework in front-end development, which is concise and flexible. It is based on HTML, CSS and JavaScript, HTML defines page elements, CSS defines page layout, and JavaScript is responsible for the response of page elements. Bootstrap encapsulates HTML, CSS and JavaScript into functional components, which are simple and crude to use.

For specific Bootstrap learning tutorials, please refer to the rookie tutorial

Install Bootstrap

①Log in to Bootstrap official website

Bootstrap installation

②Download Bootstrap

Bootstrap download

Download Bootstrap: Download the precompiled and compressed version of Bootstrap (without documentation and source code).

Download code: Bootstrap source code, as introduced on the official website, you need to compile the Less file and some installations.

If you are new to Bootstrap, it is recommended to download the first one and use it directly.

Front-end development with Bootstrap

Development environment: WAMP (Apache + MySQL + PHP under windows)

Editor: sublime

Step 1: Unzip the downloaded zip file, and put the css, fonts and js folders in it into your project directory. Created a new "index.html" in the project root directory to test Bootstrap.

Bootstrap

Step 2: Edit "index.html" to use Bootstrap-encapsulated features. Take the tutorial example "Vertical Capsule Navigation Menu" on "Rookie Tutorial" as an example. That is to use Bootstrap to implement a vertical capsule navigation menu on our web page.

Navigation menu

Step 3: Open the "index.html" we wrote in the browser to view.

result

This is the whole process of implementing a vertical capsule navigation menu with Bootstrap. In short, sexy, simple, rough.

Step 4: If you don't want to introduce Bootstrap through CDN, you can change the paths in the code:

<!-- CDN引入 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js">
</script>

<!-- 本地调用 -->
<script src="./js/bootstrap.min.js">
</script>

Summarize

Bootstrap is really powerful and easy to use. For more Bootstrap usage examples and detailed tutorials, you can go to the rookie tutorial to enjoy the joy of learning.