Detailed explanation of how Bootstrap implements basic layout-PHP开发-php.cn

Home

php教程

PHP开发

Detailed explanation of how Bootstrap implements basic layout

PHPz

Mar 20, 2017 pm 02:02 PM

bootstrapmethod

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn