Detailed explanation of how Bootstrap implements basic layout
- PHPzOriginal
- 2017-03-20 14:02:279790browse
I saw an article about building a Bootstrap site in 20 minutes. The content is a bit old. I reused Bootstrap3 to implement it and explained the content involved in as much detail as possible.
1. Create a basic page
We first create a basic HTML template page. This page can be created directly using sublime + emmet.
1.1 Create a new file, Ctrl + N
1.2 Save it to the page file, Ctrl + S, name it index.html
1.3 In this blank page, enter html:5, and then directly press the tab key, You should see a basic HTML5 template page.
1.4 Save again and press Ctrl + S.
The page content should be as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2. Add Bootstrap file reference
In the folder where the index.html file is located, create a css folder for Save all style files and create a folder named bootstrap in the css subfolder to save our bootstrap files.
You can download the bootstrap package from the bootstrap official website, which has a dist folder, which contains three subfolders: css, font and js. Copy these three subfolders into your css/bootstrap folder.
There are two parts of content involved in the page, styles and scripts.
2.1 Add style reference
Add bootstrap style reference in header. Pay attention to the path.
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
bootstrap.min.css is the style file of bootstrap, which contains all bootstrap style definitions, and bootstrap-theme.min.css is the theme definition.
2.2 Add script reference
Since bootstrap uses jQuery script, you also need to download the jquery script library.
In the directory where your index.html file is located, create a subdirectory named lib to save the script library for future use, and copy the downloaded jquery.min.js to this directory.
Add jquery and bootstrap script library references immediately between your