Introduction and installation of the Bootstrap framework

Introduction to Bootstrap

Bootstrap is a clean, intuitive, and robust front-end development framework based on HTML, CSS, and JavaScript development, so it requires developers to have the basics of HTML, CSS, and Javascript. Its biggest advantage is responsive layout, which makes it easy for developers to get the best experience on desktops, tablets, and mobile phones.

Bootstrap installation

Download https://v3.bootcss.com on the official website, here are three different download methods for developers with different skill levels and different usage scenarios, where we usually use the first download method for Bootstrap in production environments

In the past development process, I often use the installation method is the above way, the remaining several installation methods in use will be supplemented

Contains the content

Bootstrap provides two forms of compression packages, and the following directories and files can be seen in the downloaded packages, which are placed in different directories by category, and are available in both compressed and uncompressed versions. The download package contains CSS, JS, font folders

The decompressed directory structure is as follows:

bootstrap/




├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

The CSS folder is pictured:

The JS folder is pictured:

The Font folder is pictured:

Note: Files with min are compressed files, and we generally refer to compressed files in our projects. The file with map is a CSS source mapping table that can be used in development tools in some browsers.

Basic app template

The Bootstrap framework is used to introduce its CSS files and JS files into the pages it writes, and here I refer to the compressed formats of both files. It's clear in the figure that I referenced the jQuery library before I introduced Bootstrap's JS file, because all of Bootstrap's JavaScript plug-ins rely on jQuery, so jQuery Bootstrap must be introduced before, and it's important to note that Bootstrap supports the introduction of jQuery libraries that must be version 1.9.1 or more

tool

1. Common IDE development tools can write bootstrap responsive pages, such as VS Code, WebStorm

2. Bootlint: Bootstrap's officially supported HTML detection tool, Bootlint detects whether the Bootstrap components on your page comply with Bootstrap's HTML structure rules.