[Bootstrap] Getting Started example creation, bootstrap getting started example
This article briefly introduces how to use Bootstrap and introduces Bootstrap to implement a basic entry example.
In the previous blog [Bootstrap] 1. Based on the first understanding of Bootstrap, we can create a simple example more conveniently and quickly.
The download page http://getbootstrap.com/getting-started/#download on Bootstrap's official website also provides some simple examples. Here we plan to create the simplest one.
Download the required basic files from the official website:
After downloading and decompressing the package, you can see that it contains only three folders:
After the preparation is complete, we can start to create an example.
1. Create the project L01_Bootstrap and copy these three folders and their files to the project.
2. After creating the index.html document, modify the Code as follows:
<!DOCTYPE html>3.open the index.html file on the browser and you will see the same display effect:
4. When the page size is reduced to a certain size, the navigation bar disappears:
5. Therefore, we need to add a navbar-toggle button in the navigation bar to expand and collapse the responsive navigation bar. At the same time, we need to add relevant js files. Modify the document Code as follows:
<!DOCTYPE html>6. Refresh the display document and find that the responsive navigation bar has been completed:
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
