In the following lesson, Taimienphi.vn will guide you on how to create a website using Bootstrap. Also readers can refer to some bootstrap lessons already on Taimienphi.vn to find out what is bootstrap details offline.
How to create a website using Bootstrap
Before you begin going through the steps of creating a wab page with bootstrap, you need to make sure you have the code editor installed and have a basic knowledge of HTML and CSS.
2. How to create a website using Bootstrap
Taimienphi.vn recommends adding Bootstrap in the project via CDN (Content Delivery Network). The CDN stores files on multiple global servers, so when users request them, they are retrieved from the server closest to them. This invisible intangible helps to reduce loading time and improve performance.
Refer to the steps in detail below:
2.1. Step 1: Create the basic HTML file
Open any code editor installed on your computer and create a new HTML file. Copy and paste the following code into the code editor window, then save the file as “basic.html“, on the dessktop screen.
Tips: we put the card meta in section head in documents to enable zooming and display content properly on mobile devices.
2.2. Step 2: Turn the HTML file into a Bootstrap template
The result will look like this:
After adding the Bootstrap CSS and JS files and the required jQuery and Popper.js libraries, we can start developing any website or application with the Bootstrap framework.
Integrity and crossorigin attributes have been added to CDN links to implement Subresource Integrity (SRI).
This is a security feature to minimize the risk of attacks originating from unauthorized access by CDNs, by making sure the files your site is looking for (from CDN or any location) have been send without malicious or unauthorized modification. This feature works by allowing the user to provide a cryptographic hash that must match the fetch file.
Tips: if your site visitors, the site where you downloaded Bootstrap’s CSS and JS files from the same CDN, while visiting other websites, the files will load from the browser cache instead of download it again, resulting in a faster download time.
2.3. Step 3: Save and view the file
The final step is to save the file as “bootstrap-template.html“on the desktop.
To open a file in a web browser, find and right-click the file, select any web browser that you want to open the file. Alternatively, open a browser, then drag and drop the file into the window.
Note: An important note is that the file extension must be .html. Some text editors, such as Notepad on Windows automatically save the file as an extension .txt.
3. Download the Bootstrap files
To download Bootstrap’s CSS and JS files, you can visit the home page and add it to your project. There are 2 versions of Bootstrap available for download, including a compiled version and an open source version.
To download the Bootstrap 4 files, you access here.
To download the compiled Bootstrap file, go to here.
After downloading and unzipping the file, you will find that the unzipped folder contains compiled CSS and JS files (bootstrap. *), As well as compiled and stripped CSS and JS files ( bootstrap.min. *). You can use the file bootstrap.min.css and bootstrap.min.js.
Using the minified version of CSS and JS files helps to improve website performance and save quite a bit of bandwidth because of HTTP requests and less download size.
The above lesson Taimienphi.vn has shown you how to create a website using Bootstrap. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.
In the next article, Taimienphi.vn will introduce you further Grid System in Bootstrap Please.