検索

ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >Bootstrap グリッド レイアウトで列をソートおよびオフセットする方法についての簡単な説明

Bootstrap グリッド レイアウトで列をソートおよびオフセットする方法についての簡単な説明

青灯夜游
青灯夜游転載
2021-11-18 19:09:304114ブラウズ

この記事では、Bootstrap グリッド レイアウトにおけるグリッド列の並べ替えとオフセットの問題について説明し、グリッド列がどのように並べ替えられ、オフセットされるかを確認します。

Bootstrap グリッド レイアウトで列をソートおよびオフセットする方法についての簡単な説明

1. 列の並べ替え

1.1 列の並べ替えの例

何らかの理由 (SEO など) で必要な視覚効果が必要になる場合があります。ソースコードで示した逐次検索とは異なり、例えばWebページが左右に分かれている場合、左側にナビゲーション、右側に最新記事一覧が必要になりますが、SEOを考慮すると、その理由は、検索エンジンのスパイダーが最初に取得するのは最新の記事リストであり、この時点で列の順序を変更する必要があります。 [関連する推奨事項: "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">
    <title>列的排序</title>
</head>
<body>
    <div class="container">
        <div class="row row-cols-3">
            <div class="col-9 order-2">
                <h5>最新文章列表</h5>
                <ol>
                    <li>文章标题 作者 发布日期</li>
                    <li>文章标题 作者 发布日期</li>
                    <li>文章标题 作者 发布日期</li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="col-3 order-1">
               <h5>站点导航</h5>
               <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;}
        h5{text-align: center;}
    </style>
    <title>网格行列演示</title>
</head>
<body>
    <h5>默认顺序</h5>
    <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>
    <h5>使用数字调整顺序</h5>
    <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>

    <h5>使用单词调整顺序</h5>
    <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>

    <h5>数字和单词调整顺序</h5>
    <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-* クラスを使用して制御するcontent 視覚的な順序。* は 1 ～ 5 の数字です。これらの 5 つの数字のみがサポートされているのは非常に残念です。他の数字を使用すると機能しません。上の表の例によると、

  • 最初の表は、ソートを使用せず、順番に直接ソートした場合です。

  • 1 ～ 5 以外の数字を使用しても効果はなく、元の 4、5、6 列など、元の順序で表示されます。

  • 数値を使用する列は、並べ替えられていない列の後ろに並べ替えられ、並べ替え番号に従って小さいものから大きいものまで並べ替えられます

  • 並べ替え番号は次のことを行います。順番に使用する必要はありません。たとえば、上の例では 2 と 3 は使用されません。

1.3 単語ソートの使用

単語ソートの使用は非常に簡単で、先頭と .order-last の 2 つのクラスしかありません。例からわかるように、単語の並べ替えは数値の並べ替えと組み合わせることができ、単語の並べ替えは数値およびデフォルトの並べ替えよりも優先されます。

2. 列オフセット

2.1 .offset-class を使用します

列を右に移動するには offset-md-*class を使用します* グリッドの場合、これらのクラスは、列の左マージンを #* グリッド分増やすことによって実装されます。 オフセット列に続く他の列は、オフセット列を新しい開始点として配置されます。

コードは、次のことを示すために引き続き使用されます: 

<!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;}
        h5{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-class はレスポンシブをサポートしますlayout

.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;}
        h5{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 .margin ユーティリティ クラスを使用してオフセットを実装する

この部分の詳細は「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;}

        h5{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>
         <h5>后面只有自己</h5>
         <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>
         <h5>不需要换行</h5>
         <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>

         <h5>需要换行</h5>
         <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>
         
            <h5>后面只有自己</h5>
            <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>
            <h5>不需要换行</h5>
            <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>
   
            <h5>需要换行</h5>
            <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 グリッド レイアウトで列をソートおよびオフセットする方法についての簡単な説明

#これら 2 つのパラメーターは、行がいっぱいではない (つまり、行内のラスター数の合計が 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;}

        h5{text-align: center;}
    </style>
    <title>列的偏移</title>
</head>
<body>
    <div class="container">
               <h5>每个栅格是5的时候</h5>
            <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 の外部で使用して、要素に特定の幅を与えることもできます。列クラスが行の直接ではない子として使用される場合、パディングは無視されます。この部分の内容は説明しませんが、マニュアルの内容をここに直接転送しますので、興味のある方はぜひ試してみてください。 rreeee

这些类可以与实用程序一起使用来创建响应的浮动图像。如果文本较短，请确保将内容包装在.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&#39;re using it here to show the use of the clearfix class. We&#39;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&#39;s none of that here.
</p>
</div>

Bootstrap グリッド レイアウトで列をソートおよびオフセットする方法についての簡単な説明

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

以上がBootstrap グリッド レイアウトで列をソートおよびオフセットする方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：Bootstrap グリッド レイアウトで列をラップする方法についての簡単な説明次の記事：Bootstrap グリッド レイアウトで列をラップする方法についての簡単な説明

関連記事

続きを見る