Bootstrap order-1使用方法和实战应用技巧

2022-07-14 zhangli 0 0 阅读需要2-5分钟

在Bootstrap中 order-1是用来做排序的作用,也就是说通过order-数值的组合可以将模块根据数值的大小进行按数值前后顺序排序。

order-1使用方法

单独使用 order-1(排序在最前面)   order-lg-1(排序在lg的自适应宽度下最前面)
自适应结合使用 order-xl-1 order-sm-2, order-xl-1 order-md-2 order-5  (排序在xl最前面,sm排在第2位) 

order-1综合使用案例

1.首先上代码

<div class="row align-items-center mb-2">
      <div class="col-lg-7 order-lg-1 order-2">
         <div class="fabric-intro text-lg-end">
          <h3>Vitale Barberis(维达来)</h3>
          <p>Vitale Barberis Canonico(简称"VBC"),中文名"维达莱",在意大利,VBC被很多人称为是性价比至高的面料之一,这也是为什么很多年来,VBC一直雄踞意大利 西服面料销售前列的原因。据美国媒体报道,小布什就职典礼穿的就是维达莱130支面料的西服。</p>
         </div>
      </div>  
      <div class="col-lg-4 order-lg-2 order-1">
        <div class="fabric-img">
          <img src="theme/image/vitale_barberis.jpg" alt="">
        </div>
      </div>
    </div>

2.看实际效果

3.说明,我们看大在大浏览器里先文字后图片,而在设置了order- 后在移动端的顺序变成了先图片后文字。

order-1总结

使用了Bootstrap order- 后就可以控制在不痛浏览器尺寸下模块出现的顺序。

相关标签

  • Bootstrap Icon和fontawesone在CSS中的调用

    想要在css中调用一些图标,特别比如在.clss::before或者after中调用一个图标的调用方法.css::before { font-family:"bootstrap-icons";} // 这里的字体样式可

  • Bootstrap order-1使用方法和实战应用技巧

    在Bootstrap中 order-1是用来做排序的作用,也就是说通过order-数值的组合可以将模块根据数值的大小进行按数值前后顺序排序。

  • Bootstrap5 tabs参数简化版本

    着bootstrap5的发布,自己也写了第一套bootstrap5的模板,今天主要写下“Navs & tabs”主要是tab切换代码的简化版,因为本身官方教程代码比较复杂,而我们使用的时候不需要这么复杂,就把很多不需要的额参数都去掉以便提升代码质量和效率。

  • Bootstrap5 tabs参数简化版本

    着bootstrap5的发布,自己也写了第一套bootstrap5的模板,今天主要写下“Navs & tabs”主要是tab切换代码的简化版,因为本身官方教程代码比较复杂,而我们使用的时候不需要这么复杂,就把很多不需要的额参数都去掉以便提升代码质量和效率。

  • Bootstrap order-1使用方法和实战应用技巧

    在Bootstrap中 order-1是用来做排序的作用,也就是说通过order-数值的组合可以将模块根据数值的大小进行按数值前后顺序排序。

  • Bootstrap Icon和fontawesone在CSS中的调用

    想要在css中调用一些图标,特别比如在.clss::before或者after中调用一个图标的调用方法.css::before { font-family:"bootstrap-icons";} // 这里的字体样式可

  • Bootstrap5 tabs参数简化版本

    着bootstrap5的发布,自己也写了第一套bootstrap5的模板,今天主要写下“Navs & tabs”主要是tab切换代码的简化版,因为本身官方教程代码比较复杂,而我们使用的时候不需要这么复杂,就把很多不需要的额参数都去掉以便提升代码质量和效率。

  • Bootstrap order-1使用方法和实战应用技巧

    在Bootstrap中 order-1是用来做排序的作用,也就是说通过order-数值的组合可以将模块根据数值的大小进行按数值前后顺序排序。

  • Bootstrap Icon和fontawesone在CSS中的调用

    想要在css中调用一些图标,特别比如在.clss::before或者after中调用一个图标的调用方法.css::before { font-family:"bootstrap-icons";} // 这里的字体样式可

  • Bootstrap order-1使用方法和实战应用技巧

    在Bootstrap中 order-1是用来做排序的作用,也就是说通过order-数值的组合可以将模块根据数值的大小进行按数值前后顺序排序。

  • Bootstrap Icon和fontawesone在CSS中的调用

    想要在css中调用一些图标,特别比如在.clss::before或者after中调用一个图标的调用方法.css::before { font-family:"bootstrap-icons";} // 这里的字体样式可

  • Bootstrap5 tabs参数简化版本

    着bootstrap5的发布,自己也写了第一套bootstrap5的模板,今天主要写下“Navs & tabs”主要是tab切换代码的简化版,因为本身官方教程代码比较复杂,而我们使用的时候不需要这么复杂,就把很多不需要的额参数都去掉以便提升代码质量和效率。

TOP