Get started with bootstrap front-end frameworks

May 30, 2021 Article blog

2. 2. Bootstrap Responsive Layout (Grid System)

3. 3. Bootstrap's CSS style and JS plug-in

Introduction to Bootstrap: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive layouts, mobile device-first WEB projects. I n 2011, Twitter's "small group" of engineers built an easy-to-use, elegant, flexible, scalable front-end tool set, BootStrap, for their products in their spare time to improve their internal analytics and management capabilities. D esigned and built by MARK OTTO and Jacob Thornton, Bootstrap quickly became the most-watched and fork project on the github after being open source. A large number of engineers contributed to the project, the community was surprisingly active, the code version evolved very quickly, the quality of official documents was extremely high, and a number of Bootstrap-based sites emerged: the interface was fresh and concise; F eature typography is generous.

Bootstrap features: Simple and flexible HTML, CSS, JavaScript toolsets that can be used to architecture popular user interfaces and interactive interfaces. HTML5, CSS3-based Bootstrap has a number of attractive features: friendly learning curve, superior compatibility, responsive design, 12 ligs, style wizard documentation, custom JQuery plug-ins, complete class libraries, Less-based, etc.

Strengths of Bootstrap:
1. Define a lot of CSS styles and JS plug-ins to improve developer productivity.
2. Responsive layout, pages can be compatible with devices of different resolutions.
3. Rich components to provide users with a better visual experience.

I. Bootstrap Quick Start

1. Download Bootstrap. 2. Introduce Bootstrap into the project.

3. Create an HTML page:

Introduce the necessary resource files for Bootstrap, refer to the basic template. N ote that the jquery .js file is missing and you need to download the js folder introduced to Bootstrap yourself.
Get started with bootstrap front-end frameworks3
The basic template code is as follows:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <h1>你好，世界！</h1>
</body>
</html>

2. Bootstrap Responsive Layout (Grid System)

Bootstrap offers a responsive, mobile-first streaming raster system that automatically divides into up to 12 columns as the size of the screen or viewport increases. I t contains predefined classes that are easy to use, as well as powerful mixin for generating more semantic layouts.

3. Bootstrap's CSS style and JS plug-in

How to use the tutorial document: https://www.w3cschool.cn/bootstrap/