BootStrap4布局系列之栅格系统

最新推荐文章于 2022-06-03 18:28:10 发布
最新推荐文章于 2022-06-03 18:28:10 发布
阅读量1k 收藏 2
点赞数
分类专栏： BootStrap4 文章标签： bootstrap4 栅格系统 布局系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103227377
版权

目录

文档地址

http://bs4.vx.link/index.html?tmpui_page=/pages/layout

设置列宽

  • .col 在任何尺寸下，占用剩下的空间
  • .col-[n] 在任何尺寸下，占用指定的列数
  • .col-[sm | md | lg | xl] 在指定的尺寸及以上，占用剩下的空间
  • .col-[sm | md | lg | xs]-[n] 在指定的尺寸下，占用指定的列数

col

<!-- col -->
<div class="container">
    <div class="row">
        <div class="col" style="background-color: pink;">pink</div>
        <div class="col" style="background-color: purple;">purple</div>
        <div class="col" style="background-color: orange;">orange</div>
    </div>
</div>

col-[n]

<!-- col-[n] -->
<div class="container">
    <div class="row">
        <div class="col-2" style="background-color: pink;">pink</div>
        <div class="col-8" style="background-color: purple;">purple</div>
        <div class="col-2" style="background-color: orange;">orange</div>
    </div>
</div>

col-[breakpoint]

breakpoint

  • sm
  • md
  • lg
  • xl
<!-- col-[sm | md | lg | xl]

    如果指定了小尺寸，没有指定大尺寸，则大尺寸延续小尺寸
    如果指定了大尺寸，没有指定小尺寸，则小尺寸独占一行

-->
<div class="container">
    <div class="row">
        <div class="col-sm" style="background-color: pink;">pink</div>
        <div class="col-md" style="background-color: purple;">purple</div>
        <div class="col-lg" style="background-color: orange;">orange</div>
    </div>
</div>
<hr />

<div class="container">
    <div class="row">
        <div class="col-sm-2" style="background-color: pink;">pink</div>
        <div class="col-md-8" style="background-color: purple;">purple</div>
        <div class="col-lg-2" style="background-color: orange;">orange</div>
    </div>
</div>

可变宽度

根据内容的自然宽度调整列的大小。

  • .col-auto 在任何尺寸下，都根据内容来调整列的大小
  • .col-[breakpoint]-auto 在指定尺寸及以上，根据内容来调整列的大小

col-auto

<div class="container">
    <div class="row">
        <div class="col-auto" style="background-color: pink;">pink</div>
        <div class="col-auto" style="background-color: purple;">purple</div>
        <div class="col-auto" style="background-color: orange;">orange</div>
    </div>
</div>

col-[breakpoint]-auto

<div class="container">
    <div class="row">
        <div class="col-sm-auto" style="background-color: pink;">pink</div>
        <div class="col-md-auto" style="background-color: purple;">purple</div>
        <div class="col-lg-auto" style="background-color: orange;">orange</div>
        <div class="col-xl-auto" style="background-color: aqua;">orange</div>
    </div>
</div>

列间无间隙

.no-gutters

<!-- 无间隙 -->
<h1>无间隙</h1>
<div class="container">
    <div class="row no-gutters">
        <div class="col" style="background-color: pink;">pink</div>
        <div class="col" style="background-color: purple;">purple</div>
        <div class="col" style="background-color: orange;">orange</div>
    </div>
</div>

混合排列

<h1>混合排列</h1>
<div class="container">
    <div class="row">
        <div class="col-sm-2" style="background-color: pink;">pink</div>
        <div class="col col-md-8" style="background-color: purple;">purple</div>
        <div class="col col-lg-2" style="background-color: orange;">orange</div>
    </div>
</div>

列对齐

可以使用flex布局中的工具类来对齐列

水平对齐

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-around
  • .justify-content-between
<h2>justify-content-start</h2>
<div class="container">
    <div class="row justify-content-start">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<h2>justify-content-end</h2>
<div class="container">
    <div class="row justify-content-end">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<h2>justify-content-center</h2>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<h2>justify-content-around</h2>
<div class="container">
    <div class="row justify-content-around">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<h2>justify-content-between</h2>
<div class="container">
    <div class="row justify-content-between">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

垂直对齐

  • .align-items-start
  • .align-items-end
  • .align-items-center

整体对齐

<!-- 垂直对齐 -->
<h2>align-items-start</h2>
<div class="container" style="background-color: #ccc;">
    <div class="row align-items-start" style="height: 500px;">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<hr />

<h2>align-items-end</h2>
<div class="container" style="background-color: #ccc;">
    <div class="row align-items-end" style="height: 500px;">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<hr />

<h2>align-items-center</h2>
<div class="container" style="background-color: #ccc;">
    <div class="row align-items-center" style="height: 500px;">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

单个元素对齐

  • .align-self-start
  • .align-self-end
  • .align-self-center
<hr />
<h2>align-self-[start | center | end]</h2>
<div class="container" style="background-color: #ccc;">
    <div class="row" style="height: 500px;">
        <div class="col-2 align-self-start" style="background-color: aqua;">col-4</div>
        <div class="col-2 align-self-center" style="background-color: pink;">col-2</div>
        <div class="col-2 align-self-end" style="background-color: orange;">col-2</div>
    </div>
</div>

列嵌套

<h2>列嵌套</h2>
<div class="container">
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col" style="background-color: pink;">pink</div>
                <div class="col" style="background-color: orange;">orange</div>
                <div class="col" style="background-color: aqua;">aqua</div>
            </div>
        </div>
    </div>
</div>

列排序

  • .order-[n]
    • n: 1 - 12，数字越小越优先。在任何尺寸下，都遵循这个顺序
  • .order-[breakpoint]-[n]: 在指定尺寸及以上，遵循这个顺序
  • .order-last : -1，放在最后一列
  • .order-first : 13，放在第一列

order-[n]

<!-- order-[n] -->
<div class="container">
    <div class="row">
        <div class="col order-2" style="background-color: pink;">pink</div>
        <div class="col order-1" style="background-color: orange;">orange</div>
    </div>
</div>

order-[breakpoint]-[n]

<!-- order-[breakpoint]-[n] -->
<div class="container">
    <div class="row">
        <div class="col order-sm-1 order-md-3" style="background-color: pink;">pink</div>
        <div class="col order-sm-2 order-md-1" style="background-color: orange;">orange</div>
        <div class="col order-sm-3 order-md-2" style="background-color: green;">green</div>
    </div>
</div>

order-first & order-last

<!-- order-first 和 order-last -->
<div class="container">
    <div class="row">
        <div class="col order-last" style="background-color: pink;">pink</div>
        <div class="col order-first" style="background-color: orange;">orange</div>
        <div class="col" style="background-color: green;">green</div>
    </div>
</div>

列拆分

自动拆分

一行超过12列，自动拆分

<h2>列拆分</h2>
<!-- 自动断

    一行超过12列，自动断

-->
<div class="container">
    <div class="row">
        <div class="col-6" style="background-color: pink;">pink</div>
        <div class="col-6" style="background-color: orange;">orange</div>
        <div class="col-6" style="background-color: aqua;">aqua</div>
        <div class="col-6" style="background-color: green;">green</div>
    </div>
</div>

手动拆分

<!-- 手动断 -->
<div class="container">
    <div class="row">
        <div class="col-3" style="background-color: pink;">pink</div>
        <div class="col-3" style="background-color: orange;">orange</div>
        <div class="w-100"></div>
        <div class="col-3" style="background-color: aqua;">aqua</div>
        <div class="col-3" style="background-color: green;">green</div>
    </div>
</div>

响应式拆分

<!-- 响应式断 -->
<div class="container">
    <div class="row">
        <div class="col-3" style="background-color: pink;">pink</div>
        <div class="col-3" style="background-color: orange;">orange</div>
        <div class="w-100 d-done d-md-block"></div>
        <div class="col-3" style="background-color: aqua;">aqua</div>
        <div class="col-3" style="background-color: green;">green</div>
    </div>
</div>

列偏移

响应式offset

.offset-[n]
.offset-[breakpoint]-[n]

<!-- offset -->
<h1>列偏移</h1>
<div class="container">
    <div class="row">
        <div class="col-sm-4 offset-sm-4" style="background-color: orange;">orange</div>
        <div class="col-sm-2 offset-2" style="background-color: green;">green</div>
    </div>
</div>

工具类margin

  • .ml-auto | .mr-auto
  • .ml-[breakpoint]-auto | .mr-[breakpoint]-auto
<!-- margin -->
<div class="container">
    <div class="row">
      <div class="col-md-4" style="background-color: pink;">.col-md-4</div>
      <div class="col-md-4 ml-auto" style="background-color: orange;">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-md-auto" style="background-color: aqua;">.col-md-3 .ml-md-auto</div>
      <div class="col-md-3 ml-md-auto" style="background-color: green;">.col-md-3 .ml-md-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-md-auto mr-md-auto" style="background-color: purple;">.col-md-3 .ml-md-auto</div>
    </div>
</div>

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <title>00简单的bs4模板</title>
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<pre class="">
    breakpoint:
        sm
        md
        lg
        xl

    设置列宽

    可变宽度内容

    无间隙

    混合排列

    对齐

    列嵌套

    列偏移

    列排序

    列拆分
</pre>

<table class="table">
    <thead>
    <tr>
        <th></th>
        <th class="text-center">
            超小设备<br>
            <small>&lt;576px</small>
        </th>
        <th class="text-center">
            平板<br>
            <small>≥576px</small>
        </th>
        <th class="text-center">
            桌面显示器<br>
            <small>≥768px</small>
        </th>
        <th class="text-center">
            大桌面显示器<br>
            <small>≥992px</small>
        </th>
        <th class="text-center">
            超大桌面显示器<br>
            <small>≥1200px</small>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th class="text-nowrap" scope="row">容器最大宽度</th>
        <td>None (auto)</td>
        <td>540px</td>
        <td>720px</td>
        <td>960px</td>
        <td>1140px</td>
    </tr>
    <tr>
        <th class="text-nowrap" scope="row">类前缀</th>
        <td><code>.col-</code></td>
        <td><code>.col-sm-</code></td>
        <td><code>.col-md-</code></td>
        <td><code>.col-lg-</code></td>
        <td><code>.col-xl-</code></td>
    </tr>
    <tr>
        <th class="text-nowrap" scope="row">列数量和</th>
        <td colspan="5">12</td>
    </tr>
    <tr>
        <th class="text-nowrap" scope="row">间隙宽度</th>
        <td colspan="5">30px
            （一个列的每边分别 15px）
        </td>
    </tr>
    <tr>
        <th class="text-nowrap" scope="row">可嵌套</th>
        <td colspan="5">Yes</td>
    </tr>
    <tr>
        <th class="text-nowrap" scope="row">列排序</th>
        <td colspan="5">Yes</td>
    </tr>
    </tbody>
</table>

<!-- 设置列宽
    col         在任何尺寸下，占用剩下的空间
    col-[n]     在任何尺寸下，占用指定的列数
    col-[sm | md | lg | xl]  在指定的尺寸及以上，占用剩下的空间
    col-[sm | md | lg | xs]-[n]   在指定的尺寸下，占用指定的列数

-->
<!-- col -->
<div class="container">
    <div class="row">
        <div class="col" style="background-color: pink;">pink</div>
        <div class="col" style="background-color: purple;">purple</div>
        <div class="col" style="background-color: orange;">orange</div>
    </div>
</div>

<hr />

<!-- col-[n] -->
<div class="container">
    <div class="row">
        <div class="col-2" style="background-color: pink;">pink</div>
        <div class="col-8" style="background-color: purple;">purple</div>
        <div class="col-2" style="background-color: orange;">orange</div>
    </div>
</div>

<!-- col-[sm | md | lg | xl]

    如果指定了小尺寸，没有指定大尺寸，则大尺寸延续小尺寸
    如果指定了大尺寸，没有指定小尺寸，则小尺寸独占一行

-->
<div class="container">
    <div class="row">
        <div class="col-sm" style="background-color: pink;">pink</div>
        <div class="col-md" style="background-color: purple;">purple</div>
        <div class="col-lg" style="background-color: orange;">orange</div>
    </div>
</div>

<hr />

<div class="container">
    <div class="row">
        <div class="col-sm-2" style="background-color: pink;">pink</div>
        <div class="col-md-8" style="background-color: purple;">purple</div>
        <div class="col-lg-2" style="background-color: orange;">orange</div>
    </div>
</div>

<hr />

<!-- 可变宽度内容

    根据内容的自然宽度调整列的大小。

    .col-auto               在任何尺寸下，都根据内容来调整列的大小
    .col-[breakpoint]-auto  在指定尺寸及以上，根据内容来调整列的大小

-->

<div class="container">
    <div class="row">
        <div class="col-auto" style="background-color: pink;">pink</div>
        <div class="col-auto" style="background-color: purple;">purple</div>
        <div class="col-auto" style="background-color: orange;">orange</div>
    </div>
</div>

<hr />

<div class="container">
    <div class="row">
        <div class="col-sm-auto" style="background-color: pink;">pink</div>
        <div class="col-md-auto" style="background-color: purple;">purple</div>
        <div class="col-lg-auto" style="background-color: orange;">orange</div>
        <div class="col-xl-auto" style="background-color: aqua;">orange</div>
    </div>
</div>

<hr />

<!-- 无间隙 -->
<h1>无间隙</h1>
<div class="container">
    <div class="row no-gutters">
        <div class="col" style="background-color: pink;">pink</div>
        <div class="col" style="background-color: purple;">purple</div>
        <div class="col" style="background-color: orange;">orange</div>
    </div>
</div>

<hr />
<h1>混合排列</h1>
<div class="container">
    <div class="row">
        <div class="col-sm-2" style="background-color: pink;">pink</div>
        <div class="col col-md-8" style="background-color: purple;">purple</div>
        <div class="col col-lg-2" style="background-color: orange;">orange</div>
    </div>
</div>


<hr />

<!-- 对齐

    使用 flexbox 对齐工具垂直和水平对齐列。

-->

<!-- 水平对齐 -->
<h2>justify-content-start</h2>
<div class="container">
    <div class="row justify-content-start">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<hr />

<h2>justify-content-end</h2>
<div class="container">
    <div class="row justify-content-end">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<hr />

<h2>justify-content-center</h2>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<h2>justify-content-around</h2>
<div class="container">
    <div class="row justify-content-around">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<h2>justify-content-between</h2>
<div class="container">
    <div class="row justify-content-between">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<hr />
<!-- 垂直对齐 -->
<h2>align-items-start</h2>
<div class="container" style="background-color: #ccc;">
    <div class="row align-items-start" style="height: 500px;">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<hr />

<h2>align-items-end</h2>
<div class="container" style="background-color: #ccc;">
    <div class="row align-items-end" style="height: 500px;">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<hr />

<h2>align-items-center</h2>
<div class="container" style="background-color: #ccc;">
    <div class="row align-items-center" style="height: 500px;">
        <div class="col-2" style="background-color: aqua;">col-4</div>
        <div class="col-2" style="background-color: pink;">col-2</div>
        <div class="col-2" style="background-color: orange;">col-2</div>
    </div>
</div>

<hr />
<h2>align-self-[start | center | end]</h2>
<div class="container" style="background-color: #ccc;">
    <div class="row" style="height: 500px;">
        <div class="col-2 align-self-start" style="background-color: aqua;">col-4</div>
        <div class="col-2 align-self-center" style="background-color: pink;">col-2</div>
        <div class="col-2 align-self-end" style="background-color: orange;">col-2</div>
    </div>
</div>

<hr />
<h2>列嵌套</h2>
<div class="container">
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col" style="background-color: pink;">pink</div>
                <div class="col" style="background-color: orange;">orange</div>
                <div class="col" style="background-color: aqua;">aqua</div>
            </div>
        </div>
    </div>
</div>

<hr />
<h2>列拆分</h2>
<!-- 自动断

    一行超过12列，自动断

-->
<div class="container">
    <div class="row">
        <div class="col-6" style="background-color: pink;">pink</div>
        <div class="col-6" style="background-color: orange;">orange</div>
        <div class="col-6" style="background-color: aqua;">aqua</div>
        <div class="col-6" style="background-color: green;">green</div>
    </div>
</div>

<hr />
<!-- 手动断 -->
<div class="container">
    <div class="row">
        <div class="col-3" style="background-color: pink;">pink</div>
        <div class="col-3" style="background-color: orange;">orange</div>
        <div class="w-100"></div>
        <div class="col-3" style="background-color: aqua;">aqua</div>
        <div class="col-3" style="background-color: green;">green</div>
    </div>
</div>

<hr />
<!-- 响应式断 -->
<div class="container">
    <div class="row">
        <div class="col-3" style="background-color: pink;">pink</div>
        <div class="col-3" style="background-color: orange;">orange</div>
        <div class="w-100 d-done d-md-block"></div>
        <div class="col-3" style="background-color: aqua;">aqua</div>
        <div class="col-3" style="background-color: green;">green</div>
    </div>
</div>

<hr />
<!-- 列排序

    .order-[n],n: 1 - 12，数字越小越优先      在任何尺寸下，都遵循这个顺序
    .order-[breakpoint]-[n]:                在指定尺寸及以上，遵循这个顺序
    .order-last                             -1
    .order-first                            13

-->

<!-- order-[n] -->
<div class="container">
    <div class="row">
        <div class="col order-2" style="background-color: pink;">pink</div>
        <div class="col order-1" style="background-color: orange;">orange</div>
    </div>
</div>

<hr />
<!-- order-[breakpoint]-[n] -->
<div class="container">
    <div class="row">
        <div class="col order-sm-1 order-md-3" style="background-color: pink;">pink</div>
        <div class="col order-sm-2 order-md-1" style="background-color: orange;">orange</div>
        <div class="col order-sm-3 order-md-2" style="background-color: green;">green</div>
    </div>
</div>

<hr />
<!-- order-first 和 order-last -->
<div class="container">
    <div class="row">
        <div class="col order-last" style="background-color: pink;">pink</div>
        <div class="col order-first" style="background-color: orange;">orange</div>
        <div class="col" style="background-color: green;">green</div>
    </div>
</div>

<hr />
<!-- 列偏移

    1. 使用offset
    2. 使用margin

-->
<!-- offset -->
<h1>列偏移</h1>
<div class="container">
    <div class="row">
        <div class="col-sm-4 offset-sm-4" style="background-color: orange;">orange</div>
        <div class="col-sm-2 offset-2" style="background-color: green;">green</div>
    </div>
</div>

<!-- margin -->
<div class="container">
    <div class="row">
      <div class="col-md-4" style="background-color: pink;">.col-md-4</div>
      <div class="col-md-4 ml-auto" style="background-color: orange;">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-md-auto" style="background-color: aqua;">.col-md-3 .ml-md-auto</div>
      <div class="col-md-3 ml-md-auto" style="background-color: green;">.col-md-3 .ml-md-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-md-auto mr-md-auto" style="background-color: purple;">.col-md-3 .ml-md-auto</div>
    </div>
</div>














<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
爱喝水的qdy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 栅格系统之列排序
weixin_43750811的博客
05-05 601
列排序 .col-md-push-(指定的列数):push 将元素向右推动 * 指定的列数. .col-md-pull-(指定的列数):pull 将元素向左拉动 * 指定的列数 push(推) 下面是使用后的对比 div class="container"> <div class="row row-1"> <div class="col-md-3 ">ma...
Bootstrap4 之栅格系统
最新发布
两个月亮
01-21 2476
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统。栅格系统实现的原理非常简单，仅仅是通过定义容器大小，平分为 12 份，再调整内外边距，最后结合媒体查询，即制作出强大的响应式栅格系统。
bootstrap4之栅格系统
weixin_33695450的博客
01-30 559
栅格系统 虽然原先一直用bootstrap3，但是也只是表面上了解的使用。随着现代浏览器的普及，以及大型应用页面的交互功能和需求越来越复杂，清楚的了解bootstrap的工作原理十分有必要。 弹性盒子系统的出现，使的前端人员纷纷趋之若鹜。他是那么的简洁与快速。然后出现了bootstrap4以及bulma这样的css项目，极大的方便了页面布...
Bootstrap4笔记
繁花落幕的博客
09-01 397
Bootstrap-栅格系统基本格式例子:等宽例子:指定宽度 基本格式 栅格系统由container(容器)、row(行)、col(列)组成，row必须在container里面，row只能包含col且col必须在row里面 一个row由12列组成 <div class="container"> <div class="row"> <div class=...
BootStrap4工具类之定位
爱喝水的qdy的博客
12-04 2132
目录官方地址其他文档地址通用属性固定在顶部固定在底部sticky置顶整体代码 官方地址 https://getbootstrap.com/docs/4.4/utilities/position/ 其他文档地址 https://getbootstrap.net https://getbootstrap.net/docs/utilities/position/ http://bs4.vx.li...
Bootstrap布局之栅格系统学习笔记
08-30
Bootstrap布局之栅格系统学习笔记 Bootstrap 是一个流行的前端框架，它提供了一个响应式的栅格系统，用于快速创建响应式的网页布局。栅格系统是Bootstrap布局的核心组件之一，今天我们将详细介绍栅格系统的学习笔记...
Bootstrap布局之栅格系统详解
09-02
Bootstrap栅格系统是网页设计和开发中的一个强大工具，它是一种用于创建响应式布局的方法，旨在简化跨设备的网页设计工作。Bootstrap栅格系统基于12列的网格布局，允许开发者灵活地分配页面内容的空间，根据不同的...
Bootstrap3.0学习笔记之栅格系统原理
09-22
Bootstrap3.0的栅格系统是其核心设计之一，它为开发者提供了一种高效、灵活的页面布局方式，尤其适合创建响应式网站。栅格系统基于12列的网格，可以根据屏幕尺寸动态调整布局，使得内容在不同设备上都能呈现出良好的...
Bootstrap每天必学之栅格系统（布局）
09-03
- Bootstrap的栅格系统基于12列的布局。这意味着你可以将一行（row）分成最多12个相等的部分，用于放置内容。这12列可以根据屏幕尺寸动态调整，以适应手机、平板电脑和桌面电脑等各种设备。 - 容器（.container）...
bootstrap3.0教程之栅格系统原理(布局)
01-19
我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理： 行...
Bootstrap全部可用类名
Demonre的博客
09-27 5569
文章目录CSS变量属性标题字体列表引用图片代码容器响应式网格布局通用小型设备中型设备大型设备超大型设备表格表单按钮下拉菜单输入自定义控件导航卡片面包屑导航徽章信息提示框进度条多媒体列表组Toast模态框提示框弹出窗口轮播Spinner对齐背景边框显示响应式打印机专用嵌入Flex响应式flex布局定位和布局尺寸与补白响应式字体和文本辅助类作者说明 CSS变量 变量名 值 –blue ...
Bootstrap4的栅格布局
weixin_45884768的博客
03-04 4985
Bootstrap4栅格布局1 栅格容器2 栅格布局的步骤3 声明列3.1 设置列宽3.1.1 平均分配栅格3.2.2 指定列宽3.2.3 可变的列宽3.3 列拆分3.3.1 自动拆分3.3.2 手动拆分3.3.3 响应式拆分3.4 列排序3.5 列偏移 Bootstrap架构内置了一套响应式网格的布局系统，网格布局实际上就是把网页分成一定数量的栏数或者叫做网格，Bootstrap4的网格系统就是...
Bootstrap系列之Flex布局
老__L的博客
06-03 2784
快速管理布局，对齐和大小的网格列，导航，组件和更多与一个完整的套件响应flexbox实用程序。对于更复杂的实现，定制CSS可能是必要的。应用display实用程序创建伸缩容器并将直接子元素转换为伸缩项。Flex容器和item可以通过附加的Flex属性进一步修改。 和也存在响应变化。在flex布局中设置伸缩项的方向。在大多数情况下，你可以省略水平类，因为浏览器默认是row。但是，你可能会遇到需要显示设置该值的情况（如响应式布局）。使用来设置水平方向(浏览器的默认值)，或者使用来从相反的一侧开始水平方向。
bootstrap中col-lg-* 、col-md-*、col-xs-* 、 col-sm-*这几个类是干嘛的啊？
AndrewNeo
04-08 1528
.col-xs- 超小屏幕 手机 (&lt;768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- 大屏幕 大桌面显示器 (≥1200px)
col-xs , col-sm , col-md , col-lg的理解
热门推荐
liyang_nash的专栏
07-23 14万+
转自:https://www.cnblogs.com/sdusrz/p/7170564.html 摘要: bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义： .col-xs- 超小屏幕 手机 (&lt;768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- ...
bootstrap 一排5个_Bootstrap5 列（Columns）
weixin_39560029的博客
12-19 835
对其使用flexbox对齐工具来垂直和水平对齐列。垂直对齐One of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of thre...
栅格系统.
weixin_57764814的博客
11-08 58
1.机制原理 <div class="container"> <div class="row"> <div class="col-sm"> 三分之一空间占位 </div> <div class="col-sm"> 三分之一空间占位 </div> <div class="col-sm"> 三分之一空间占位 ...
Bootstrap4中col-sm-*无效
Jack汪喆的技术分享栏
12-24 3935
Bootstrap4中发现col-sm-*无效 对于超小设备的样式已经不是col-sm-* 超小设备的样式更新为col-*即可 设置偏移也不是offset-sm-，而是offset-
bootstrap4 使用及常用样式详细整理 (依照官网翻译)
Altaba的博客
08-01 1万+
&amp;nbsp; bootstrap4常用样式整理 简介 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插...
Bootstrap框架入门教程：栅格布局与组件应用
Bootstrap的栅格系统是其核心特性之一，允许开发者创建灵活的网格布局。它通过行（row）和列（column）的组合，可以根据屏幕尺寸自动调整元素的排列和大小。栅格系统通常有12列，通过指定每列占据的列数，可以实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值