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


    一、布局容器

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

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

                  大屏幕 1170px

                  中屏幕 970px

                  小屏幕 750px

                  超小屏 宽度百分百

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

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

    类似于width:100%

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

     2.3 列排序

    col-md-push-* :往后push(右浮动) col-md-pull-* :往前pull(左浮动)

     

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

  • 相关阅读:
    【Mysql】数据库第三讲(表的约束、基本查询语句)
    基于web的学校二手书城系统/二手书交易系统
    Mac上搭建Python环境:深入探索与高效实践
    PS/TiO2核壳复合微球/聚苯乙烯/SiO2壳核复合微球/聚苯乙烯蒙脱土二氧化硅空心微球研究
    支付宝记---电脑网站支付(.NET)
    高通Android随身WIFI屏蔽商家远程控制断网
    信息学奥赛一本通:2037:【例5.4】约瑟夫问题
    光谱编辑和修复工具:Steinberg SpectraLayers Pro mac
    UG\NX二次开发 隐藏菜单、隐藏菜单中的按钮
    【yolo系列:yolov7改进wise-iou】
  • 原文地址:https://blog.csdn.net/dxnn520/article/details/125600127