English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In this tutorial, you will learn how to use Bootstrap 3 Compile version to create basic Bootstrap templates.
Here, you will learn how easy it is to create web pages using Bootstrap. Before you start, make sure you have a code editor and some knowledge of HTML and CSS.
If you are just starting out in web development, pleaseStart learning HTML basics from here»
Alright, let's get straight into it.
There are two versions available for downloadcompiled BootstrapandBootstrap sourceFiles. You canDownload Bootstrap files from here
Compile and download the compiled and minified versions of CSS and JavaScript files, as well as icon fonts, for faster and easier web development. The source code includes all the original source files of CSS and JavaScript as well as local copies of the documents.
To better understand, we will focus on the compiled Bootstrap files. This saves you time as you do not have to worry about individual features, including individual files, each time. When you decide to move the site to a production environment, since the HTTP requests and download size are smaller, because it can compile and compress files, it can also improve the performance of the website and save valuable bandwidth.
After downloading the compiled Bootstrap, unzip the compressed folder to view the structure. You will find the following file structure and content.
bootstrap/ |—— css/ | |—— bootstrap.css | |—— bootstrap.min.css | |—— bootstrap-theme.css | |—— bootstrap-theme.min.css |—— js/ | |—— bootstrap.js | |—— bootstrap.min.js |—— fonts/ | |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff
As you can see, Bootstrap's compiled version provides compiled CSS and JS files (bootstrap.*())., as well as compiled and minified CSS and JS (bootstrap.min.*()).
font files glyphicons-halflings-regular.*The folder contains four font files(). These font files contain icons from the Glyphicon Halflings set250 icons.
Tip:This is the most basic form of Bootstrap, which can be quickly used in any web project. Note that Bootstrap's JavaScript plugins require jQuery. You can find it herehttps://jquery.com/download/Download the latest version of jQuery form.
So far, you have learned about the structure and purpose of Bootstrap files, and it's time to really use Bootstrap. In this section, we will create a basic Bootstrap template that includes all the contents mentioned in the file structure.
Let's complete the following steps step by step. By the end of this tutorial, you will create an HTML file that displays the 'Hello world' message in a web browser.
Open your favorite code editor and create a new HTML file. Start with an empty window, then type the following code, and save it as 'basic.html' on your desktop.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Basic HTML File</title> </head> <body> <h1>Hello, world!</h1> </body> </html>Test to see‹/›
Tip:Always include the viewport <meta> tag in the document section <head> to enable touch zoom and ensure correct presentation on mobile devices. It also includes X-UA-Compatible with the edge mode meta tag, which tells Internet Explorer to display the web page in the highest available mode.
To set this HTML file as a Bootstrap template, simply add the corresponding Bootstrap CSS and JS files. You should add the JavaScript file at the bottom of the page.-In closingtag (i.e.) before, to improve the performance of the web page.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Basic Bootstrap Template</title> <link rel="stylesheet" type="text/css" href="/static/style/bootstrap.min.css"> !-- Optional Bootstrap theme --> <link rel="stylesheet" href="/static/style/bootstrap-theme.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="/static/script/jquery-1.11.3.min.js"></script> <script src="/static/script/bootstrap.min.js"></script> </body> </html>Test to see‹/›
We are all ready!After adding the Bootstrap CSS and JS files as well as the required jQuery library, we can start developing any site or application using the Bootstrap framework.
Now, save the file as 'bootstrap-template.html.
Note:.html extension is very important-Some text editors (such as Notepad) will automatically save the extension .txt.
Open the file in the browser. Navigate to your file and double-click it. It will open in your default web browser. (If not, open the browser and drag the file into it.)
If you do not want to download and host the bootloader or jQuery yourself, you can also include the CSS and JavaScript files of the bootloader and the jQuery library JavaScript files in the document using the free CDN (Content Delivery Network) links provided.
CDN can provide performance advantages by reducing loading time, as they host Bootstrap files on multiple servers around the world, and when a user requests a file, it will be provided from the server closest to them.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> !-- Optional Bootstrap theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>Test to see‹/›
To implement Subresource Integrity (SRI), in Bootstrap
The 'integrity' and 'crossorigin' attributes have been added to the CDN. It is a security feature that reduces the risk of attacks from compromised CDNs by ensuring that the files your website retrieves (from CDN or any location) are delivered without unexpected operations. Its working principle is to allow you to provide an encrypted hash that the retrieved file must match.
The attributes 'integrity' and 'crossorigin' have been added to the bootstrapping CDN implementationSubresource Integrity(SRI). It is a security feature that allows you to ensure that files obtained from the website (from CDN or any other place) are not unexpectedly processed, thereby reducing the risk of CDN attacks. It works by allowing you to provide an encrypted hash that the read file must match.
Tip:If your site's visitors have already downloaded Bootstrap files from the same CDN while visiting other sites, they will be loaded from the browser's cache instead of being re-downloaded, thus shortening the loading time.