Bootstrap 简明教程
Bootstrap - Float
本章讨论了实用程序类 .float- 。
This chapter discusses about the utility class .float-*.
Overview
-
The .float class is used to control the positioning and alignment of elements within a grid system.
-
It is primarily used in conjunction with the grid system’s column classes to create responsive layouts.
-
The .float classes help in floating an element to the left or right, or disable floating, as per the current viewport size.
-
These utility classes use the same viewport breakpoints as the grid system.
-
The .float utility classes have no effect on flex items.
Bootstrap 中提供的 .float 类如下:
The .float classes available in Bootstrap are as follows:
-
.float-start - This class is used to float an element to the left within a grid column.
-
.float-end - This class is used to float an element to the right within a grid column.
-
.float-none - This class does not apply any float class to the element.
我们看一个示例:
Let us see an example:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Float</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Float utilities</h4>
<div class="float-start">
<button class="btn btn-success">Float start (on left)</button>
</div>
<div class="float-end">
<button class="btn btn-primary">Float end (on right)</button>
</div>
<div class="float-none">
<button class="btn btn-warning">Float none</button>
</div>
</body>
</html>
Responsive
每个 .float 值可以应用于视口的全部响应变化,例如 sm, md, lg, xl 和 xxl 。
Each .float value can be applied to all the responsive variations of viewports, such as, sm, md, lg, xl and xxl.
以下是全部支持的 .float 类的列表:
Here is the list of all the support .float classes:
-
.float_start
-
.float_end
-
.float_none
-
.float_sm_start
-
.float_sm_end
-
.float_sm_none
-
.float_md_start
-
.float_md_end
-
.float_md_none
-
.float_lg_start
-
.float_lg_end
-
.float_lg_none
-
.float_xl_start
-
.float_xl_end
-
.float_xl_none
-
.float_xxl_start
-
.float_xxl_end
-
.float_xxl_none
Note: 请调整浏览器大小,以查看文本浮动。
Note: Kindly resize the browser, to see the floating of text.
让我们在不同视口上看一个这些实用程序类的示例:
Let us see an example of these utility classes on various viewports:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Float</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4><u>Responsive float utilities</u></h4>
<div class="float-sm-start p-2 text-primary">
The text floats to the left when the screen size is small or wider.
</div>
<div class="float-md-end p-2 text-success">
The text floats to the right when the screen size is medium or wider.
</div>
<div class="float-lg-none p-2 text-danger">
The text does not float to the right when the screen size is large or wider.
</div>
<div class="float-xl-end p-2 text-info">
The text floats to the right when the screen size is extra large or wider.
</div>
</div>
</body>
</html>