第一章 Bootstrap的布局

梦落繁辞

已于 2023-11-21 14:49:16 修改

阅读量961

点赞数 1

分类专栏：前端学习文章标签： bootstrap 前端 html

于 2023-11-14 15:17:35 首次发布

本文链接：https://blog.csdn.net/mlfc0422/article/details/134267361

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.容器（containers）

.container 类：

.container-fluid 类：

.container-{breakpoint}

1.容器（containers）

在Bootstrap中，容器（Container）是用于包装网页内容的布局元素，它有助于创建响应式网页布局。容器提供了不同的宽度选项，以适应不同的屏幕尺寸和设备。

`.container` 类：

.container 是Bootstrap中最常用的容器类，用于创建固定宽度的容器。这意味着容器的宽度会根据屏幕尺寸而变化，但它会有一个最大宽度，以确保内容不会过于扩展。

该容器类适合于大多数网页布局，尤其是在中等和大屏幕设备上。

<div class="container">
  <!-- 你的内容在这里 -->
</div>

`.container-fluid` 类：

.container-fluid 类用于创建全宽度的容器，容器的宽度会充满整个浏览器窗口的可视区域。内容会根据浏览器窗口的宽度进行自适应布局。

这种容器适合于实现全宽度的响应式设计，特别是在小屏幕设备上，以确保内容占满整个屏幕。

<div class="container">
  <!-- 你的内容在这里 -->
</div>

`.container-{breakpoint}`

它是一个容器类的变种，其中 {breakpoint} 是Bootstrap的响应式断点之一，用于指定在特定屏幕尺寸上应用不同的容器宽度。

Bootstrap 提供了几个响应式断点，包括：

sm (小屏幕)：小屏幕设备如手机。
md (中等屏幕)：中等尺寸设备如平板电脑。
lg (大屏幕)：大屏幕设备如台式电脑。
xl (特大屏幕)：特大屏幕设备如大型显示器。

通过在 .container 类名后面添加 -{breakpoint}，你可以根据不同的断点设置容器的最大宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>容器示例</title>
</head>
<body>

<div class="container"> <!-- 默认容器，适用于所有断点 -->
  <h1>这是默认容器</h1>
</div>

<div class="container-sm"> <!-- 小屏幕容器 -->
  <h1>这是小屏幕容器</h1>
</div>

<div class="container-md"> <!-- 中等屏幕容器 -->
  <h1>这是中等屏幕容器</h1>
</div>

<div class="container-lg"> <!-- 大屏幕容器 -->
  <h1>这是大屏幕容器</h1>
</div>

<div class="container-xl"> <!-- 特大屏幕容器 -->
  <h1>这是特大屏幕容器</h1>
</div>

</body>
</html>

没什么用的心得：

.container与.container-fluid的区别简单来讲就是屏幕两侧留不留白，.container在不同的屏幕尺寸情况下，有不同的最大宽度，而.container-fluid则会一直铺满整个屏幕。

2.栅格系统（Grid System）

Bootstrap的栅格系统是其布局的核心组成部分，它基于一个12列的网格系统，用于实现响应式布局。通过将内容划分为若干列，你可以轻松地创建适应不同屏幕大小的布局。

1.行（Rows)

行是栅格系统的基本组成单元，用于包装列。你可以在一个行内创建多个列。使用.row类创建行。

<div class="row">
  <!-- 列放在这里 -->
</div>

2.列(Columns)

列是栅格系统的具体部分，它们包含在行内，并定义了内容的宽度。

1.基本列

基本列的定义形式是col-{列数}，其中列数是1到12之间的整数。这表示在所有屏幕尺寸上，该列占据指定列数的宽度。

<div class="col-6">
    <!-- 该列占据了半个宽度 -->
</div>

2.响应式列

使用响应式列，你可以在不同屏幕尺寸下指定不同的列宽度。例如，col-sm-6 表示在小屏幕及以上，该列占据了12列中的一半。

<div class="col-sm-6">
    <!-- 在小屏幕及以上，该列占据了半个宽度 -->
</div>

你还可以组合多个响应式类，以适应不同屏幕尺寸的需求。

<div class="col-sm-6 col-md-4 col-lg-3">
    <!-- 在小屏幕上占据半个宽度，在中等屏幕上占据四分之一，在大屏幕上占据三分之一 -->
</div>

3.偏移（Offset)

在Bootstrap的栅格系统中，偏移（Offset）是一种用于调整列在行中位置的方法。通过偏移，你可以在列的左侧添加空白区域，从而使列在网格中向右移动。

要在Bootstrap中使用偏移，你可以使用offset-{屏幕大小}-{偏移列数}类。这个类会将列向右移动指定数量的列。以下是一个简单的例子：

<div class="row">
    <div class="col-md-6 offset-md-3">
        <!-- 这个列将在中等屏幕上居中显示 -->
    </div>
</div>

在上面的例子中，.col-md-6表示该列在中等屏幕及以上占据了6列的宽度，而.offset-md-3表示在中等屏幕及以上向右偏移了3列。因此，该列将在中等屏幕上居中显示。

您可以根据需要调整偏移的列数和屏幕大小。偏移是一种非常有用的工具，可以帮助您在设计网页布局时微调元素的位置。请注意，偏移只在大于或等于指定屏幕大小时才会生效。

4.嵌套(Nest)

你可以在列内部创建新的行和列，形成嵌套的结构。嵌套的栅格通常在某个列中创建。

<div class="row">
    <div class="col-md-6">
        <!-- 第一个列 -->
        <div class="row">
            <div class="col-md-6">
                <!-- 嵌套的列 -->
            </div>
            <div class="col-md-6">
                <!-- 嵌套的列 -->
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <!-- 第二个列 -->
    </div>
</div>

同样你也可以进行更多层的嵌套。

5.对齐(alignment)

1.水平对齐

水平居中

<div class="row justify-content-center">
    <div class="col-md-6">
        <!-- 列的内容，水平居中 -->
    </div>
</div>

水平靠左

<div class="row justify-content-start">
    <div class="col-md-6">
        <!-- 列的内容，水平靠左 -->
    </div>
</div>

水平靠右

<div class="row justify-content-end">
    <div class="col-md-6">
        <!-- 列的内容，水平靠右 -->
    </div>
</div>

2.垂直对齐

垂直居中

<div class="row align-items-center">
    <div class="col-md-6">
        <!-- 列的内容，垂直居中 -->
    </div>
</div>

垂直顶部

<div class="row align-items-start">
    <div class="col-md-6">
        <!-- 列的内容，垂直顶部对齐 -->
    </div>
</div>

垂直底部

<div class="row align-items-end">
    <div class="col-md-6">
        <!-- 列的内容，垂直底部对齐 -->
    </div>
</div>

梦落繁辞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第一章 Bootstrap的布局

在Bootstrap中，容器（Container）是用于包装网页内容的布局元素，它有助于创建响应式网页布局。容器提供了不同的宽度选项，以适应不同的屏幕尺寸和设备。.container.container是Bootstrap中最常用的容器类，用于创建固定宽度的容器。这意味着容器的宽度会根据屏幕尺寸而变化，但它会有一个最大宽度，以确保内容不会过于扩展。该容器类适合于大多数网页布局，尤其是在中等和大屏幕设备上。类用于创建全宽度的容器，容器的宽度会充满整个浏览器窗口的可视区域。
复制链接

扫一扫