文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

小编给大家分享一下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.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网格布局中如何进行列排序和偏移

说起来有些拗口,其实简单说就是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网格布局中如何进行列排序和偏移”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯