• Bootstrap之栅格布局

    布局系统

    • Bootstrap提供了.cintainer和.container-fluid两种容器布局
    • 这两种样式是启用布局栅格系统最基本的要素
    • .cintainer是固体自适应方式，.container-fluid是流体100%自适应方式
    • 容器布局可以嵌套，但一般不推荐使用
    • Bootstrap是以移动端优先的

    栅格系统

    • Bootstrap栅格系统是一个以移动为优先的网格系统;
    • 基于12列的布局，5种响应尺寸(面向不同屏幕设备);
    • 完全使用flexbox流式布局构建的，完全支持响应式标准;具体采用div容器的行、列和对齐内容来构建响应式布局;
    1. html>
    2. <html>
    3.  
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         
    7.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    8.         
    9.         <link rel="stylesheet" href="css/bootstrap.min.css" />
    10.         <title>title>
    11.         <style>
    12.             .row {
    13.                 border: dashed 1px red;
    14.                 margin-top: 10px;
    15.             }
    16.             
    17.             .col-sm,.aa {
    18.                 border: solid 1px blue;
    19.                 background-color: #EFEFEF;
    20.             }
    21.         style>
    22.     head>
    23.  
    24.     <body>
    25.         <div class="container">
    26.             <div class="row">
    27.                 <div class="col-sm">
    28.                     第一列
    29.                 div>
    30.                 <div class="col-sm">
    31.                     第二列
    32.                 div>
    33.                 <div class="col-sm">
    34.                     第三列
    35.                 div>
    36.             div>
    37.         div>
    38.  
    39.         <div class="container-fluid">
    40.             <div class="row">
    41.                 <div class="col-sm">
    42.                     第一列
    43.                 div>
    44.                 <div class="col-sm">
    45.                     第二列
    46.                 div>
    47.                 <div class="col-sm">
    48.                     第三列
    49.                 div>
    50.             div>
    51.         div>
    52.         <div class="container">
    53.             <div class="row">
    54.                 <div class="col-sm-2 aa">
    55.                     第一列
    56.                 div>
    57.                 <div class="col-sm-4 aa">
    58.                     第二列
    59.                 div>
    60.                 <div class="col-sm-6 aa">
    61.                     第三列
    62.                 div>
    63.             div>
    64.         div>
    65.  
    66.         
    67.         
    68.         <script src="js/jquery.js">script>
    69.         <script src="js/bootstrap.bundle.min.js">script>
    70.     body>
    71.  
    72. html>
    • .row表示一行，.col-*表示一列，实现了智能三列;
    • sm表示屏幕类型
    • 如果采用的是.container-fluid,会100%占用屏幕的宽度;
    • 在.col-sm-的“”位置，还可以强制设定每列所占有的栅格列;所占的栅格位正好是12列，超过12列则会换行，小于12例则不能100%占满;
    • 智能计算和强制设置栅格位都是等宽的，也可以设置不对称。

    栅格等级

    超小屏幕<576px小屏幕>=576px中等屏幕>=768px大屏幕>=992px超大屏幕>=1200px
    最大容器宽度None(auto)540px720px960px1140px
    类前缀.col-.col-sm-.col-md-.col-lg-.col.xl-
    列数12
    • 如果同时使用两个或以上的级别，并且比例相同，则遵循移动端优先的原则;
    • 栅格系统支持只指定其中一种或几种，其它随机的方式，指定数字奇偶均可;
    • 可以通过两个或以上来实现不同设备不同比例的混合布局;
    • 使用.w-100可以切割栅格栏位，进行分行操作;
    • 如果强制设置了col-3数值，那切割后，将不会自动填充;
      例如：
    1. <div class="container">
    2.   <div class="row">
    3.       <div class="aa col-4 col-sm-2 col-md-5 col-lg-6">第一列div>
    4.       <div class="aa col-3 col-sm-3 col-md-2 col-lg-3">第二列div>
    5.       <div class="w-100">div>
    6.       <div class="aa col- 5 col-sm-7 col-md-5 col-lg-3">第三列div>
    7.   div>
    8. div>

    隐藏和显示方法

    可实现在不同尺寸的屏幕上，显示不同的效果。

    屏幕尺寸类
    隐藏在所有.d-none
    仅在xs上隐藏.d-none .d-sm-block
    仅在sm上隐藏.d-none .d-md-block
    仅在md上隐藏.d-none .d-lg-block
    仅在lg上隐藏.d-none .d-xl-block
    仅在xl上隐藏.d-none .d-xl-none
    所有人可见.d-block
    仅在xs上可见.d-block .d-sm-none
    仅在sm上可见.d-block .d-sm-none .d-md-none
    仅在md上可见.d-block .d-md-none .d-lg-none
    仅在lg上可见.d-block .d-lg-none .d-xl-none
    仅在xl上可见.d-block .d-xl-block

    对齐与排列

    栅格对齐：

    样式（作用域行间）
    居顶（默认）.align-items-start
    居中.align-items-center
    居底.align-items-end

    行对齐，用在行中（给行高看效果）

    样式（作用域列间）
    居顶（默认）.align-self-start
    居中.align-self-center
    居底.align-self-end

    列对齐，用在列中

    样式（作用域行间）
    居左（默认）.justify-content-start
    居中.justify-content-center
    居右.justify-content-end
    间隔相等（分散）.justify-content-around
    两端对齐（分散）.justify-content-between

    不是100%填充，实现水平对齐方式，用在行中

    栅格排列:

    • 栅格的列可以排序，使用.order-N,N最大值为12
    • 使用.order-first强行设置列为第一列,.order-last为最后一列使用
    • .offset-N或.offset-*-N设置列的偏移量，N表示棚格列数
    • 使用.ml-N或.mr-N微调列距离
    • 使用.ml-auto和.mr-auto来左右对齐

  • 相关阅读:
    有氧运动与无氧运动的区别
    876. Middle of the Linked List
    Node核心模块之Stream
    【线性代数】行列式和矩阵
    ubuntu docker 安装 mysql
    贪吃蛇游戏
    跳跃游戏 II
    CentOS安装kafka单机部署
    【novelai】colab存档
    Java 日期格式(yyyy-MM-dd 与YYYY-MM-dd 区别
  • 原文地址：https://blog.csdn.net/sunyctf/article/details/127453065