Bootstrap的Layout和常见layout摆放就在这

最新推荐文章于 2023-09-04 12:55:14 发布
最新推荐文章于 2023-09-04 12:55:14 发布
阅读量609 收藏
点赞数
分类专栏： BootStrap笔记 文章标签： css css3 bootstrap Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jenis57/article/details/129332708
版权

Layout

媒体查询

由于 Bootstrap 是移动设备优先的，因此我们使用了一些 媒体查询（media queries） 功能来为我们的布局和视觉元素创建合理的断点。这些断点主要以最小的视口（viewport）宽度作为基准，并在视口尺寸改变时放大元素。

Grid

Bootstrap’s grid system uses a series of（一系列） containers, rows, and columns to layout（摆放布局） and align（对齐） content
三个class配合

  • container

包裹内容

Containers center and horizontally pad your content

  • row

用row分成若干行

  • col

用class="col"把一行分为若干块

<div class="container text-center border bg-primary-subtle" 
      style="--bs-border-color:var(--bs-primary-border-subtle)">
      
          <div class="row bg-success-subtle">
            <div class="col">
              Column1
            </div>
            <div class="col">
              Column2
            </div>
          </div>
          
          <div class="row">
            <div class="col">
              Column3
            </div>
            <div class="col">
              Column4
            </div>
          </div>
          
        </div>
调整col的大小

  • 利用col-num决定每块占有大小

数字越大占有越大

<div class="container text-center border bg-primary-subtle" style="--bs-border-color:var(--bs-primary-border-subtle)">
          <div class="row bg-success-subtle">
            <div class="col">
              Column1
            </div>
            <div class="col-6 bg-danger-subtle">
              Column2
            </div>
            <div class="col">
              Column3
            </div>
          </div>
          <div class="row">
            <div class="col">
              Column4
            </div>
            <div class="col-5 bg-danger-subtle">
              Column5
            </div>
            <div class="col">
              Column6
            </div>
          </div>
        </div>
控制row大小

  • 利用justify-content-md-center控制方位

          <div class="row border justify-content-md-center">
            <div class="col bg-success-subtle col-lg-2">
              Column1
            </div>
            <div class="col-md-auto  bg-danger-subtle">
              Column2
            </div>
            <div class="col col-lg-2 bg-success-subtle">
              Column3
            </div>
          </div>
按比例调整

  • 利用col-sm-num的数字控制大小比例

        <div class="container text-center bg-primary-subtle">
          <div class="row bg-success-subtle">
            <div class="col-sm-8 bg-danger-subtle">col-sm-8</div>
            <div class="col-sm-4">col-sm-4</div>
          </div>
          <div class="row">
            <div class="col-sm">col-sm</div>
            <div class="col-sm text-bg-dark">col-sm</div>
            <div class="col-sm">col-sm</div>
          </div>
        </div>
只写一个div实现多行

  • row-col-num的num表示一行里的列有多少个

例如我col写了4个然后num为2则表达每列两个所以两行共四列，grid会自动帮我生成两行的布局

        <div class="container text-center">
          <div class="row row-cols-2">
            <div class="col bg-primary-subtle">
              1
            </div>
            <div class="col bg-danger-subtle">
              2
            </div>
            <div class="col bg-success-subtle">
              3
            </div>
            <div class="col text-bg-dark">
              4
            </div>
          </div>
        </div>

  • 可以填auto，但是一行默认有12格，会填不满

Columns

Learn how to modify（修改） columns with a handful of （各种）options for alignment（对齐）, ordering（排序）, and offsetting thanks to（多亏了） our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements（非网格元素）

alignment

Use flexbox alignment（对齐） utilities to vertically and horizontally align columns
vertical alignment

这是指在一个container占据该区域的哪个空间（以flex完成）

<div class="p-3 bd-example-row bd-example-row-flex-cols">
      <div class="container text-center">
        <div class="row align-items-start">
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
        </div>
        <div class="row align-items-center ">
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
        </div>
      </div>
    </div>

  • 注意这个classes：bd-example-row-flex-cols

声明这个div是个row为flex布局的块

horizontal alignment

在水平方向上置于何位置

  • 上图对应在row添加classes：justify-content-*

  • justify-content-start

  • justify-content-center

  • justify-content-end

  • justify-content-around

  • justify-content-between

  • justify-content-evenly

我们也可以单独调整col的位置

  • 使用align-self-*

<div class="p-3 bd-example-row bd-example-row-flex-cols">
      <div class="container text-center">
        <div class="row">
          <div class="col align-self-start">
            One of three columns
          </div>
          <div class="col align-self-center">
            One of three columns
          </div>
          <div class="col align-self-end">
            One of three columns
          </div>
        </div>
      </div>
    </div>
即刻跳下一行

  • 插入一行div的class为w-100直接跳转下一行

<div class="p-3 container text-center">
      <div class="row">
        <div class="col-6 col-sm-6 text-bg-warning">
        .col-6 .col-sm-3</div>
        <div class="col-6 col-sm-3 text-bg-dark">
        .col-6 .col-sm-3</div>
    
        <!-- Force next columns to break to new line -->
        <div class="w-100"></div>
    
        <div class="col-6 col-sm-3 text-bg-warning">
        .col-6 .col-sm-3</div>
        <div class="col-6 col-sm-3 text-bg-dark">
        .col-6 .col-sm-3</div>
      </div>
    </div>

Gutters

Gutters are the padding between your columns, used to responsively（响应地） space and align（使平行） content in the Bootstrap grid system.

horizontal gutters

  • 在row上class：gx-num

num表达gutters的宽度，数值越高间隔越大，但是可能会溢出（overflow）所以我们在container限制padding，例如这里使用px-4，作为替代其实也可以使用.overflow-hidden

<div class="p-3 bd-example px-4 bd-example-cols">
      <div class="container text-center">
        <div class="row gx-5">
          <div class="col">
           <div class="p-3">Custom column padding</div>
          </div>
          <div class="col">
            <div class="p-3">Custom column padding</div>
          </div>
        </div>
      </div>
    </div>

vertical gutters

  • 那么对于垂直方向上的同理我们只需要在

  • row上classes：gy-num，其余同理

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

vertical & horizontal

  • 把gx和gy融合为g则大功告成

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>
多一个实例
      <div class="container text-center">
        <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
          <div class="col">
            <div class="p-3">Row column</div>
          </div>
          <div class="col">
            <div class="p-3">Row column</div>
          </div>
          <div class="col">
            <div class="p-3">Row column</div>
          </div>
          <div class="col">
            <div class="p-3">Row column</div>
          </div>
          <div class="col">
            <div class="p-3">Row column</div>
          </div>
          <div class="col">
            <div class="p-3">Row column</div>
          </div>
          <div class="col">
            <div class="p-3">Row column</div>
          </div>
          <div class="col">
            <div class="p-3">Row column</div>
          </div>
          <div class="col">
            <div class="p-3">Row column</div>
          </div>
          <div class="col">
            <div class="p-3">Row column</div>
          </div>
        </div>

  • 我想聊聊这个classes：row row-cols-2 row-cols-lg-5 g-2 g-lg-3

为了说明这个我们需要先了解Bootstrap的响应式布局

  • sm 平板大小（576px）

  • md 桌面显示器（768px）

  • lg 大桌面显示器（992px）

  • xl （1200px）

所以可以看出当页面大于lg时分布成一行五列，gutter设置为3，而当小于（不大于）这个大小时回到一行2列，间隔2px

JenisFine
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap layout.css,布局 | Layout
weixin_39816027的博客
08-04 447
布局 | Layout布局您的 Bootstrap 项目的组件和选项，包括包装容器、强大的网格系统、灵活的媒体对象和响应性实用工具类。Containers容器是 Bootstrap 中最基本的布局元素，在使用我们的默认网格系统时是必需的。选择响应式固定宽度的容器(意味着它max-width在每个断点处的变化)或流体宽度(意味着它100%始终是宽的)。虽然容器可以嵌套，但大多数布局不需要嵌套容器。...
Bootstrap Blazor 模板使用（一）Layout 组件
「 虚幻私塾」
04-27 958
🚀 优质资源分享 🚀 学习路线指引（点击解锁） 知识定位 人群定位 🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 原文链接：https://blog.csdn.net/ysmc/p/16197223.html BootstrapBlazor 官网地址：https://www.bla
LayoutBootstrap2和LayoutBootstrap3二版本离线可视化布局代码
07-17
LayoutBootstrap2和LayoutBootstrap3二版本离线可视化布局代码。HTML原型，直接使用即可。
bootstrap layout.css,Bootstrap Layout
weixin_28020031的博客
08-04 179
Bootstrap LayoutIntroductionIn the past few years the mobile devices became such significant part of our lives that most of us can't actually imagine how we got to get around without them and this is ...
bootstrap3学习1：响应式布局layout
xiao190128的专栏
08-15 2725
在去年的这个时候写过关于bootstrap的相关文章（见：bootstrap2学习1：基本CSS样式），然后就搁置了，原因是因为当时对bootstrap的了解不深，并且当时v2版本对响应式设计的不是非常好。如今，bootstrap的v3版本很早就出来了，现在又拿出来老调重弹一次。 这次学习bootstrap，希望是一次比较深入的了解bootstrap，但愿能够在实际开发中运用的得心应手。学习
bootstrap左右布局模板_Element-UI 技术揭秘（2）—Layout 布局组件的设计与实现
weixin_39834678的博客
11-22 605
前言当我们拿到一个 PC 端页面的设计稿的时候，往往会发现页面的布局并不是随意的，而是遵循的一定的规律：行与行之间会以某种方式对齐。对于这样的设计稿，我们可以使用栅格布局来实现。早在 Bootstrap 一统江湖的时代，栅格布局的概念就已深入人心，整个布局就是一个二维结构，包括列和行， Bootstrap 会把屏幕分成 12 列，还提供了一些非常方便的 CSS 名让我们来指定每列占的宽度百分比，并...
bootstrap学习笔记（一）--layout
mnm__的专栏
05-30 1759
从今天开始学习bootstrap。最终目标是写一个网站的前端。 Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.--这个是boot
【前端布局篇】响应式布局 Bootstrap 移动端布局
前端知识分享喵
06-20 6803
布局:layout 对事物的全面规划和安排页面布局：对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等。网页布局：利用html搭建结构与内容，使用CSS添加装饰网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。**注：**所有的页面布局都是基于盒子模型基础之上进行布置。响应式布局是 Ethan Marcotte 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
bootstrap - layout
howlowl
05-29 467
align-items VS align-content: https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items First,align-itemsis for items in a single row. So for a single...
bootstrap布局_如何使用LayoutIt构建HTML Bootstrap布局！
cune1359的博客
06-29 3147
p>如果您想建立一个响应式网站，那么Bootstrap将是您的便捷工具。 这项最新的框架创新为Web开发人员带来了一种创建总体上更轻松，更快，响应更好的网站和应用程序的新方法。 但是，这非常困难，更不用说从头开始构建布局了。 为了使此过程更轻松，更快捷，在本文中，我们将介绍LayoutIt！ 这可以帮助您轻松地基于Bootstrap设计HTML布局。 LayoutIt！ 是一个基...
Layoutit3.0最新版本源码 bootStrap3
05-03
Layoutit3.0最新版本 bootStrap3在线编辑器源码 Layoutit3.0最新版本 bootStrap3在线编辑器源码
layoutit：具有bootstrap v3.3.6的layoutit
01-31
布局 这是layoutit引导程序生成器 从复制 引导程序更新为3.3.6 参见演示： 更新日志 添加英文版： 执照
Layoutit bootStrap3
07-21
Layoutit bootStrap3 拖拽功能
bootstrap-layoutit
01-26
bootstrap-layoutit 是个bootstrap3.01最新框架编辑制作工具，使用起来很方便，能快速生成bootstrap界面框架。可惜不知道如何将生成的界面源代码下载下来。
bootStrap3-Layoutit
10-10
bootstrap3-layoutit 汉化版本 bootStrap3在线编辑器源码
bootstrap导航栏垂直布局_12 Layout页面布局教程（plotly Dash Bootstrap版）
weixin_39632327的博客
11-22 1125
今天第12课啦，本节课程是整个Dash页面布局的关键一课，希望大家能认真学习掌握。送上一首《Inner Circle》，供大家欣赏~~~(一)功能Bootstrap中的布局是使用网格系统控制实现的。 Bootstrap网格采用12列和5个响应层(响应层指的是允许程序能在不同的屏幕尺寸上指定不同的响应行为如根据屏幕宽度及比例自适应调整页面布局)。可以根据应跨越的12个网格列中的多少来指定列...
BOOTSTRAP4的栅格系统详解
shanzhihang的专栏
01-04 2478
简介 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 网格类 Bootstrap 4 网格系统有以下 5 个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px 列与列间
Bootstrap的CSS类积累学习
昊虹AI笔记
09-04 1117
Bootstrap的CSS类积累学习
Bootstrap系列之Flex布局
老__L的博客
06-03 2742
快速管理布局，对齐和大小的网格列，导航，组件和更多与一个完整的套件响应flexbox实用程序。对于更复杂的实现，定制CSS可能是必要的。应用display实用程序创建伸缩容器并将直接子元素转换为伸缩项。Flex容器和item可以通过附加的Flex属性进一步修改。 和也存在响应变化。在flex布局中设置伸缩项的方向。在大多数情况下，你可以省略水平类，因为浏览器默认是row。但是，你可能会遇到需要显示设置该值的情况（如响应式布局）。使用来设置水平方向(浏览器的默认值)，或者使用来从相反的一侧开始水平方向。
bootstrap常见面试题
最新发布
09-06
总结：在Bootstrap的常见面试题中，我们可以从介绍Bootstrap的基本概念和特点开始，然后讨论如何使用网格系统创建布局，如何自定义样式，如何使用JavaScript插件以及熟悉哪些常用组件。这些问题可以帮助评估面试者对...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值