Article directory
foreword
This article explains the basic usage and rules of the Bootstrap responsive UI framework. If this article is helpful to you, please support the blogger three times.
以下是本篇文章正文内容，下面案例可供参考
Introduction to Bootstrap
As the name implies, it is a set of architecture, which has a complete set of web page function solutions, and the control is in the framework itself, with predetermined style libraries, component libraries and plug-ins. Users must develop according to the rules stipulated by the framework.
Bootstrap is an HTML CSS Javascript-based framework for developing responsive layouts and web projects with limited mobile devices. It is simple and flexible, making web development faster.
Because it already provides a set of page styles and functions, it is suitable for teams without designers.
Its framework contains a custom jQuery plug-in, so it is functionally dependent on the jQuery plug-in, and the underlying principle of its entire framework is to use Less and Sass. Among them, bootstrap3 is based on Less, and bootstrap4 is based on Sass.
Bootstrap is generally used for background management interface. If you want to use it for user interaction at the Internet level, the style is still a bit conservative. Therefore, the front desk generally requires UI designers to design and front-end engineers to implement. But the style requirements of the background management interface are not so high. Using bootstrap can quickly complete the page layout, the key is not ugly! So bootstrap is simply the gospel for background programmers. As for 3 and 4, there is no need to tangle, after all, this scene is enough.
Chinese official website:
https://www.bootcss.com/
Bootstrap3
Bootstrap responsive UI framework
If you want to quickly develop pages, the best solution is to use the UI framework, which provides a set of UI design styles and various plug-ins with many functions.
-
Self-decoration is to use media query media, that is, native responsiveness.
-
Please Renovate Company Bootstrap Framework
use
Production environment: Refers to the online project. In order to improve the website access speed, the online project uses compressed files as much as possible.
Source code: The underlying code used when encapsulating the framework at that time can help developers better understand. Generally, local development downloads the source code
Sass: For Sass projects
Create HTML skeleton structure (generally create html template in editor)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染，版本不同兼容性不同 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备的宽度一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ -->
<title>Bootstrap模板</title>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 以下是条件注释，会自己判断 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Hbulider creates html templates
1 Create a new html file and select a custom template
2 Jump to the location where the editor sets the template
3 Create a new html file in the html folder, name it bootstrap.html, open the file and copy the above HTML skeleton structure into it, pay attention to the path of the css file and js file, and save it.
4 Verify that the template is created
Go back to the HbuliderX editor, create a new html file, and find that there is an extra bootstrap template just created in the selection template, just select this template.
layout container
Bootstrap needs to wrap a container for the page content and the grid system. It has pre-defined this class, called .container
- container class
- Container fixed width for responsive layout
- Large screen (>=1200px) width positioning 1170px
- Medium screen (>=992px) width positioning 970px
- Small screen (>=768px) width positioning 750px
- Ultra small screen (<768px) width 100%
- container-fulid class
- Fluid Layout Container 100% Width
- A container that occupies the entire viewport
- Suitable for mobile terminal development alone
grid system
-
"Grid systems" are also called grid systems, which means to divide the page layout into columns of equal width, and to modularize the page layout by defining the number of columns.
-
System automatically divides into up to 12 columns as screen or viewport size increases
-
The width of the container is fixed, but under different screens, the width of the container is different, but we still divide the container into 12 equal parts
-
Grid parameters:
Grid System Usage
(1) "row" must be contained in .container(fixed width) or .container-fluid(100% width) in order to give it proper alignment and padding
(2) Create a group of "columns" in the horizontal direction through "rows", and the content should be placed in the "columns", and only "columns" can be used as rows )" direct child elements of
(3) A column indicates the range it spans by specifying a value from 1 to 12, that is, the sum of the number of columns cannot exceed the total number of 12 copies. For example, three columns of equal width can be created .col-xs-4using .
(4) If the "column" contained in a "row" is greater than 12, the elements of the redundant "column" will be arranged in a new row as a whole. If a "row ( row)" is less than or equal to 12, and they are arranged from left to right.
(5) Class names of multiple devices can be specified at the same time, such as: class="col-lg-2 col-md-6"
(6) Mobile devices are preferred, xs occupies 12 shares by default, no device class prefix is specified, and the inheritance method is xs>sm>md>lg
Responsive tools
Hide or show page content for different screen sizes
visible-* : Only visible to *
Hidden-* : Only hidden to *
- display series
visible-xs/sm/md/lg
- hidden series
hidden-xs/sm/md/lg
- Specifies the element type family
visible-xs/sm/md/lg-block/inline/inline-block
bootstrap4
Features:
- The new grid layer is adapted to the mobile terminal;
- Fully introduce new ES6 features (rewrite all JavaScript plugins);
- The css file has been reduced by at least 40%;
- All documentation is rewritten with a Markdown editor;
- Bootstrap4 gave up support for IE8 and iOS 6, and now only supports IE9 and above and iOS 7 and above browsers. If you need to use previous browsers for it, then please use Bootstrap3.
bootstrap5
Bootstrap 5 (the current major version, released in May 2021) brings a ton of changes and improvements, including the addition of new components, new classes, new styles for old components, updated browser support, removal of some old components, and More.
changed content
-
jQuery is no longer a dependency
-
Browser Support Changes
Before v4, Bootstrap used to support Internet Explorer (IE) 10 and 11. Starting with Bootstrap 5, support for IE has been dropped entirely. So if your site needs to support IE, you should probably be careful when migrating to v5.
Other changes in browser support include:
- Firefox and Chrome now support from version 60
- Safari and iOS support now from version 12
- Android browser and WebView support now from version 6
-
Changes to data attributes
Component's data properties now
data-bsstart to facilitate naming of Bootstrap properties -
Bootstrap 5 brings some new components to the library
(1) Accordion
(2) Offcanvas overlapping sidebar
(3) Floating Label floating label