扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >Bootstrap网格布局中如何进行列排序和偏移
  • 206

0
分享到

Bootstrap网格布局中如何进行列排序和偏移

2024-04-02 19:04:59 206人浏览 泡泡鱼
摘要

小编给大家分享一下Bootstrap网格布局中如何进行列排序和偏移，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！1、列的排序1.1 列的重排序示例有时候出于某种原因（例如SEO），我们需要

小编给大家分享一下Bootstrap网格布局中如何进行列排序和偏移，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

1、列的排序

1.1 列的重排序示例

有时候出于某种原因（例如SEO），我们需要显示的视觉效果和源码中显示的先后顺寻不一样，比如说网页分左右两部分，我们需要左边是导航，右边是最新文章列表，但是出于seo原因，我们想让搜索引擎的蜘蛛首先获取的是最新文章列表，这时候我们就需要列的重排序。

当然，你或许还有其他的原因促使你这样做。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyWords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.CSS" rel="stylesheet">
    <title>列的排序</title>
</head>
<body>
    <div class="container">
        <div class="row row-cols-3">
            <div class="col-9 order-2">
                <h6>最新文章列表</h6>
                <ol>
                    <li>文章标题 作者 发布日期</li>
                    <li>文章标题 作者 发布日期</li>
                    <li>文章标题 作者 发布日期</li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="col-3 order-1">
               <h6>站点导航</h6>
               <ul>
                   <li>随手记</li>
                   <li>心情点滴</li>
                   <li>职场人士</li>
               </ul>
            </div>
        </div>
    </div>
  
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap网格布局中如何进行列排序和偏移

**是不是很神奇，接下来我再给出另一个例子，来详细介绍一下排序规则。 **

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
        .col {height: 50px; border: 1px solid #000;}
        h6{text-align: center;}
    </style>
    <title>网格行列演示</title>
</head>
<body>
    <h6>默认顺序</h6>
    <div class="container">
        <div class="row row-cols-3">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>
            <div class="col">7</div>
            <div class="col">8</div>
        </div>
    </div>
    <h6>使用数字调整顺序</h6>
    <div class="container">
        <div class="row row-cols-3">
            <div class="col">1</div>
            <div class="col order-1">2 order-1</div>
            <div class="col order-5">3 order-5</div>
            <div class="col order--1">4 order--1</div>
            <div class="col order-6">5 order-6</div>
            <div class="col order-0">6 order-0</div>
            <div class="col order-4">7 order-4</div>
            <div class="col">8</div>
        </div>
    </div>

    <h6>使用单词调整顺序</h6>
    <div class="container">
        <div class="row row-cols-3">
            <div class="col">1</div>
            <div class="col order-last">2 order-last</div>
            <div class="col">3</div>
            <div class="col order-first">4 order-first</div>
            <div class="col order-first">5 order-first</div>
            <div class="col">6</div>
            <div class="col">7</div>
            <div class="col">8</div>
        </div>
    </div>

    <h6>数字和单词调整顺序</h6>
    <div class="container">
        <div class="row row-cols-3">
            <div class="col">1</div>
            <div class="col order-last">2 order-last</div>
            <div class="col order-5">3 order-5</div>
            <div class="col  order-3">4  order-3</div>
            <div class="col order-first">5 order-first</div>
            <div class="col  order-2">6  order-2</div>
            <div class="col  order-1">7  order-1</div>
            <div class="col">8</div>
        </div>
    </div>

    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>

</html>

具体效果

Bootstrap网格布局中如何进行列排序和偏移

1.2 使用数字排序

使用order-*类控制内容的视觉顺序，其中*为数字1-5，非常抱歉就支持这五个数字，如果你用其他的数字，会不起作用，根据上面的示例表可以看到：

  • 第一个表格是未使用排序的情况，直接按顺序排序。

  • 使用了1-5之外的数字，不起任何作用，还是按照它本来的顺序显示，如原4、5、6列。

  • 使用数字的列排在未使用排序的列后面，按照排序数字从小到大排序

  • 排序数字无需按顺序使用，例如上例中就没有使用2、3。

1.3 使用单词排序

是用单词排序很简单，就两个类order-first和.order-last，分别表示开始和最后，从示例中可以看出，单词排序可以和数字排序一起，单词排序优先级高于数字和默认排序。

2、列的偏移

2.1 使用.offset-类

使用offset-md-*类使列向右移动*个栅格，这些类是通过将列的左边距增加*栅格来实现的。 偏移列后面的其他列以偏移列为新的开始点排列。

下面还是用代码来演示以下：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
        [class^="col-"] {height: 50px; border: 1px solid #000;}
        h6{text-align: center;}
    </style>
    <title>列的排序</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-1">2</div>
            <div class="col-md-1">3</div>
            <div class="col-md-1">4</div>
            <div class="col-md-1">5</div>
            <div class="col-md-1">6</div>
            <div class="col-md-1">7</div>
            <div class="col-md-1">8</div>
            <div class="col-md-1">9</div>
            <div class="col-md-1">10</div>
            <div class="col-md-1">11</div>
            <div class="col-md-1">12</div>
            </div>
        <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
        </div>

        <div class="row">
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
        </div>        
        
        <div class="row">
        <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
        </div>
    </div>
  
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

显示结果如下

Bootstrap网格布局中如何进行列排序和偏移

2.2 .offset-类支持响应式布局

.offset-类同样支持响应式布局，下面是一个示例，大家可以自己查看效果，加深理解。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
        [class^="col-"] {height: 50px; border: 1px solid #000;}
        h6{text-align: center;}
    </style>
    <title>列的排序</title>
</head>
<body>
    <div class="container">
        <div class="row row-cols-12">
            <div class="col-1">1</div>
            <div class="col-1">2</div>
            <div class="col-1">3</div>
            <div class="col-1">4</div>
            <div class="col-1">5</div>
            <div class="col-1">6</div>
            <div class="col-1">7</div>
            <div class="col-1">8</div>
            <div class="col-1">9</div>
            <div class="col-1">10</div>
            <div class="col-1">11</div>
            <div class="col-1">12</div>
         </div>

         <div class="row">
            <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
            <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
            </div>
            <div class="row">
            <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
            <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
            </div>
    </div>
  
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

响应式效果动画

Bootstrap网格布局中如何进行列排序和偏移

2.3 使用.外边距实用类实现偏移

这部分的详细介绍在《bootstrap5中文手册》实用类中的自动边距有详细介绍。 这部分内容，手册讲的也不是很清楚，下面还是用代码来演示一下，然后再详细解释一下：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
        [class^="col-"] {height: 50px; border: 1px solid #000;}

        h6{text-align: center;}
    </style>
    <title>列的排序</title>
</head>
<body>
    <div class="container">

        <div class="row row-cols-12">
            <div class="col-1">1</div>
            <div class="col-1">2</div>
            <div class="col-1">3</div>
            <div class="col-1">4</div>
            <div class="col-1">5</div>
            <div class="col-1">6</div>
            <div class="col-1">7</div>
            <div class="col-1">8</div>
            <div class="col-1">9</div>
            <div class="col-1">10</div>
            <div class="col-1">11</div>
            <div class="col-1">12</div>
         </div>
         <h6>后面只有自己</h6>
         <div class="row">
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
         </div>
         <h6>不需要换行</h6>
         <div class="row">
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
             </div>

         <h6>需要换行</h6>
         <div class="row">
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            <div class="col-md-2">.col-md-2</div>
            </div>
         
            <h6>后面只有自己</h6>
            <div class="row">
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2 me-auto">.col-md-2 .me-auto</div>
            </div>
            <h6>不需要换行</h6>
            <div class="row">
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2 me-auto">.col-md-2 .me-auto</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
                </div>
   
            <h6>需要换行</h6>
            <div class="row">
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2 me-auto">.col-md-2 .me-auto</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               <div class="col-md-2">.col-md-2</div>
               </div>
      
        </div>
  
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

显示效果

Bootstrap网格布局中如何进行列排序和偏移

  • 这两个参数都是在所在的行不满行的情况下有效（即所在行栅格数相加小于12），如果正好满行，则参数无效。

  • .ms-auto：通过添加一个左边距来使自己及自己右侧的列靠右对齐。

  • .me-auto：通过添加一个右边距来使自己右侧的列（不含自己）靠右对齐。

说起来有些拗口，其实简单说就是ms-auto通过在自己左边添加间隔来实现满行。 me-auto通过在自己右边添加间隔来实现满行，如果正好满行就算了。

那我们再用一个例子来验证一下：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
        [class^="col-"] {height: 50px; border: 1px solid #000;}

        h6{text-align: center;}
    </style>
    <title>列的偏移</title>
</head>
<body>
    <div class="container">
               <h6>每个栅格是5的时候</h6>
            <div class="row">
               <div class="col-md-5">.col-md-5</div>
               <div class="col-md-5 ms-auto">.col-md-5 .ms-auto</div>
               <div class="col-md-5 ms-auto">.col-md-5 .ms-auto</div>
               <div class="col-md-5">.col-md-5</div>
               <div class="col-md-5 me-auto">.col-md-5 me-auto</div>
               <div class="col-md-5">.col-md-5</div>
               <div class="col-md-5">.col-md-5</div>
               <div class="col-md-5 me-auto">.col-md-5 me-auto</div>

               </div>
      
        </div>
  
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

显示效果

Bootstrap网格布局中如何进行列排序和偏移

3 独立列类

.col-*类也可以在 .row外部使用，为元素提供特定的宽度。当列类用作行的非直接子级时，将忽略填充。这部分内容我就不演示了，直接把手册内容搬过来，有兴趣的朋友可以多试一下。

<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>

Bootstrap网格布局中如何进行列排序和偏移

这些类可以与实用程序一起使用来创建响应的浮动图像。如果文本较短，请确保将内容包装在.clearfix包装器中以清除浮动。

<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>

<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that Goes on and on, but actually conveys no tangible infORMation at. It simply takes up space and should not really be read.
</p>

<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>

Bootstrap网格布局中如何进行列排序和偏移

看完了这篇文章，相信你对“Bootstrap网格布局中如何进行列排序和偏移”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网node.js频道，感谢各位的阅读！

--结束END--

本文标题: Bootstrap网格布局中如何进行列排序和偏移

本文链接: https://lsjlt.com/news/86890.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Bootstrap网格布局中如何进行列排序和偏移
    小编给大家分享一下Bootstrap网格布局中如何进行列排序和偏移，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！1、列的排序1.1 列的重排序示例有时候出于某种原因（例如SEO），我们需要...
    99+
    2024-04-02
  • Bootstrap网格布局中如何进行列换行
    这篇文章主要介绍了Bootstrap网格布局中如何进行列换行，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1、网格布局中换行常见问题在上几节...
    99+
    2024-04-02
  • Bootstrap中如何实现网格系统布局
    这篇文章主要为大家展示了“Bootstrap中如何实现网格系统布局”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Bootstrap中如何实现网格系统布局”这篇文...
    99+
    2024-04-02
  • HTML教程：如何使用Grid布局进行栅格网格布局
    网页布局是网页设计的重要组成部分，合理的网页布局可以提升用户的浏览体验。而Grid布局是现代网页布局中非常重要的一种技术，它可以帮助我们轻松地实现栅格网格布局。在本文中，我们将学习如何使用HTML和CSS的Grid布局来创建栅格网格布局，并...
    99+
    2023-10-21
    布局 HTML教程：Grid布局 栅格网格
  • HTML教程：如何使用Grid布局进行网格布局
    引言：在现代的网页设计中，网格布局是一种非常流行和实用的布局方式。它能够帮助开发者更加灵活地控制网页的布局和排版，使得网页呈现出更加美观和易读的效果。本文将向大家介绍如何使用HTML中的Grid布局进行网格布局，并提供具体的代码示例，帮助读...
    99+
    2023-10-21
    HTML：Grid布局
  • HTML教程：如何使用Grid布局进行栅格网格项布局
    引言：在Web开发中，布局是一个至关重要的方面。而Grid布局是一种非常强大和灵活的方式，用于创建栅格网格项布局。本文将介绍如何使用Grid布局来构建网页布局，并提供一些具体的代码示例，帮助你更好地理解和应用Grid布局。第一部分：Grid...
    99+
    2023-10-21
    html 布局 Grid
  • HTML教程：如何使用Grid布局进行网格项布局
    HTML教程：如何使用Grid布局进行网格项布局Grid布局是一种强大的CSS网格系统，可以轻松地实现复杂的网格布局。通过将网格划分为行和列，我们可以方便地控制网格项的位置和大小。本教程将介绍如何使用Grid布局进行网格项布局，同时提供具体...
    99+
    2023-10-27
    HTML教程：Grid布局
  • HTML教程：如何使用Grid布局进行栅格平均网格布局
    在前端开发中，网格布局(Grid Layout)是一种非常强大和灵活的布局方式。它可以使我们更轻松地创建栅格布局，实现页面的响应式设计。本文将介绍如何使用Grid布局进行栅格平均网格布局，并提供具体的代码示例。创建HTML结构首先，我们需要...
    99+
    2023-10-21
    HTML教程：Grid布局 栅格 平均网格布局
  • Python中列表如何进行排序
    Python中列表如何进行排序？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。python的数据类型有哪些python的数据类型：1. 数字类型，包括int（整型）、long...
    99+
    2023-06-14
  • HTML教程：如何使用Grid布局进行栅格自适应网格布局
    HTML教程：如何使用Grid布局进行栅格自适应网格布局，需要具体代码示例引言：随着互联网的发展，网页布局变得越来越重要。传统的网页布局方法，如使用表格或浮动布局，往往需要大量的代码和调整来实现自适应的效果。而CSS3中引入的Grid布局则...
    99+
    2023-10-27
    html 关键词： Grid布局 栅格自适应
  • HTML教程：如何使用Grid布局进行自适应网格布局
    HTML教程: 如何使用Grid布局进行自适应网格布局在前端开发中，网页布局是一个重要的环节。而在现代的网页布局中，Grid布局已经成为了一种非常流行的选择。它可以帮助我们快速、灵活地构建各种网格布局，并且能够实现自适应的效果。本篇文章将介...
    99+
    2023-10-27
    HTML教程：Grid布局
  • HTML教程：如何使用Grid布局进行自适应网格项布局
    在现代的网页设计中，自适应布局是至关重要的。通过自适应布局，网页可以在不同的设备和屏幕上呈现出最佳的显示效果，提供更好的用户体验。在这方面，CSS Grid布局是一种强大的工具，可以帮助我们实现网页布局的自适应性。本文将介绍如何使用Grid...
    99+
    2023-10-21
    自适应 html Grid布局
  • 如何使用HTML和CSS实现网格列表布局
    在现代网页设计中，网格列表布局成为了一个非常常见的布局模式。它可以帮助我们轻松地创建出漂亮的网页，让内容清晰地排列在网页中。本文将介绍如何使用HTML和CSS来实现网格列表布局，并提供具体的代码示例。首先，我们需要使用HTML来构建网页的基...
    99+
    2023-10-21
    CSS html 网格布局
  • HTML教程：如何使用Grid布局进行自适应网格自动布局
    HTML教程：如何使用Grid布局进行自适应网格自动布局，需要具体代码示例导语在Web开发中，网格布局（Grid layout）是一种更为灵活和强大的布局系统。它允许开发者将页面划分为网格单元，并通过定义行列的数量和大小来控制元素在这些单元...
    99+
    2023-10-26
    html 布局 Grid
  • 在CSS网格布局中的列如何填充项目
    这篇文章主要介绍在CSS网格布局中的列如何填充项目，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！假设我们有n 个项目，并且我们必须在网格布局中将这些项目按列排序。列数是固定的，我们还必须确保网格布局中的行数最少，以便...
    99+
    2023-06-08
  • python如何对列表中的元素进行排序
    这篇文章主要介绍了python如何对列表中的元素进行排序，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。示例：# sort：排序,对...
    99+
    2024-04-02
  • Python中如何通过itemgetter对字典列表进行排序
    本篇文章为大家展示了Python中如何通过itemgetter对字典列表进行排序，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。前言：我们有一个字典列表，想根据一个或多个字典中的值对列表进行排序。利用...
    99+
    2023-06-02
  • 如何使用C#中的List.Sort函数对列表进行排序
    如何使用C#中的List.Sort函数对列表进行排序在C#编程语言中，我们经常需要对列表进行排序操作。而List类的Sort函数正是为此设计的一个强大工具。本文将介绍如何使用C#中的List.Sort函数对列表进行排序，并提供具体的代码示例...
    99+
    2023-11-17
    C# list sort
  • PHP中如何进行排序算法和搜索算法？
    PHP作为一种常用的编程语言，其内置了许多排序和搜索算法来帮助开发者更有效地处理大量数据。本文将介绍一些常见的排序算法和搜索算法，并说明如何在PHP中使用它们。一、排序算法冒泡排序冒泡排序是一种基本的排序算法，它的原理是将相邻的元素两两比较...
    99+
    2023-05-20
    PHP排序算法 PHP搜索算法 排序和搜索算法
  • 如何在MySQL中对数据进行排序和分组
    在MySQL中，可以使用ORDER BY子句对数据进行排序，使用GROUP BY子句对数据进行分组。 对数据进行排序： SELE...
    99+
    2024-03-06
    MySQL
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作