• 【Bootstrap】布局容器和栅格网络

    一、布局容器

    1.1、父容器固定布局：container类

    用于固定宽度，不过，根据窗口大小自动变化：

                  大屏幕 1170px

                  中屏幕 970px

                  小屏幕 750px

                  超小屏 宽度百分百

    1. <div class="container">
    2.  
    3. </div>

    1.2 父容器流式弹性布局：container-fluid类

    类似于width:100%

    1. <div class="container-fluid">
    2.  
    3. </div>

    二、栅格布局

     2.1 单行布局行（row）+列（col-lg / col-md / col-xs）

    (1)、col是column简写：列；

    (2)、xs是maxsmall简写：超小， sm是small简写：小，  md是medium简写：中等， lg是large简写：大；

    (3)、-* 表示占列数，即占每行row分12列栅格系统比；

    (4)、.col-xs-* 超小屏幕如手机 （<768px）时使用；

         .col-sm-* 小屏幕如平板 （768px ≤ 宽度 ＜992px）时使用；

         .col-md-* 中等屏幕如普通显示器 （992px ≤ 宽度 ＜ 1200px）时使用；

         .col-lg-* 大屏幕如大显示器 （≥1200px）时使用。

    注意：每一个列占的比例值总和为：12份，不是10份。

     2.2 列移动col-md-offset-3,在12个格子之间移动

    注意：偏移和占位的总数不能超过12

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1">
    8.     <title>基本示例</title>
    9.  
    10.     <!-- Bootstrap -->
    11.     <link href="/js/bootstrap/bootstrap.min.css" rel="stylesheet">
    12. </head>
    13. <style>
    14.     body {
    15.         font-size: 40px;
    16.     }
    17.  
    18.     div {
    19.         height: 120px;
    20.         line-height: 120px;
    21.         text-align: center;
    22.     }
    23.  
    24.     .color1 {
    25.         background-color: rgb(255, 255, 255);
    26.  
    27.     }
    28.  
    29.     .color2 {
    30.         background-color: rgb(224, 250, 224);
    31.     }
    32.  
    33.     .color3 {
    34.         background-color: rgb(212, 212, 255);
    35.     }
    36. </style>
    37.  
    38. <body>
    39.     <div class="container color1">
    40.         <div class="row">
    41.             <div class="col-lg-2 color2 col-md-offset-1">3</div>
    42.             <div class="col-lg-2 color3 col-md-offset-1">3</div>
    43.             <div class="col-lg-2 color2 col-md-offset-1">3</div>
    44.             <div class="col-lg-2 color3 col-md-offset-1">3</div>
    45.  
    46.         </div>
    47.     </div>
    48.  
    49. </body>
    50. <script src="/js/jquery/jquery-3.6.0.min.js"></script>
    51. <script src="/js/bootstrap/bootstrap.min.js"></script>
    52.  
    53. </html>

     2.3 列排序

    col-md-push-* ：往后push（右浮动） col-md-pull-* ：往前pull（左浮动）

     

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1">
    8.     <title>基本示例</title>
    9.  
    10.     <!-- Bootstrap -->
    11.     <link href="/js/bootstrap/bootstrap.min.css" rel="stylesheet">
    12. </head>
    13. <style>
    14.     body {
    15.         font-size: 40px;
    16.     }
    17.  
    18.     div {
    19.         height: 120px;
    20.         line-height: 120px;
    21.         text-align: center;
    22.     }
    23.  
    24.     .color1 {
    25.         background-color: rgb(255, 255, 255);
    26.     }
    27.  
    28.     .color2 {
    29.         background-color: rgb(224, 250, 224);
    30.     }
    31.  
    32.     .color3 {
    33.         background-color: rgb(212, 212, 255);
    34.     }
    35. </style>
    36.  
    37. <body>
    38.     <div class="container color1">
    39.         <div class="row">
    40.             <div class="col-md-2 color2 col-md-push-2">1</div>
    41.             <div class="col-md-2 color3 col-md-pull-2">2</div>
    42.             <div class="col-md-2 color2">3</div>
    43.             <div class="col-md-2 color3 ">4</div>
    44.         </div>
    45.     </div>
    46. </body>
    47. <script src="/js/jquery/jquery-3.6.0.min.js"></script>
    48. <script src="/js/bootstrap/bootstrap.min.js"></script>
    49.  
    50. </html>

     2.4 列排序

     

    1.     <!--  列嵌套  -->
    2.     <div class="container">
    3.         <div class="row">
    4.             <div class="col-md-4">
    5.                 <div class="row">
    6.                     <div class="col-md-3" style="background-color: #1B6D85;">1-1</div>
    7.                     <div class="col-md-6" style="background-color: #d3ffd5;">1-2</div>
    8.                     <div class="col-md-3" style="background-color: #eec093;">1-3</div>
    9.                 </div>
    10.             </div>
    11.             <div class="col-md-4" style="background-color: #CC9999;">2</div>
    12.             <div class="col-md-4" style="background-color: #CCCC99;">3</div>
    13.         </div>
    14.     </div>

  • 相关阅读:
    最全讲解磁珠
    无涯教程-JavaScript - ISPMT函数
    牛客网刷题记录 || 链表
    自顶向下计算机网络学习 传输层
    一篇玩转mybatis-plus框架的详细讲解（入门必备）
    Linux网络编程- inet_pton()函数
    java基本微信小程序的心理服务平台 uniapp 小程序
    苍穹外卖(八) 使用WebSocket协议完成来单提醒及客户催单功能
    JS-运算符
    【SwiftUI模块】0013、SwiftUI搭建-类似蚂蚁财富的基金累计盈亏的走势图
  • 原文地址：https://blog.csdn.net/dxnn520/article/details/125600127