1. <style>
    2.         .f div div,.pos div {
    3.             width: 5rem;
    4.             height: 5rem;
    5.             background: #ccc;
    6.         }
    7.         .pos div{
    8.             background: wheat;
    9.             border: 1px solid #000;
    10.         }
    11.         body{
    12.             height: 5000px;
    13.         }
    14.     </style>
    15. <body>
    16.     <div class="container">
    17.         <!-- 浮动 -->
    18.         <div class="row border f">这里的f是自定义
    19.             <div class="col">
    20.                 <!-- 3.x的版本里的浮动是.pull-left/.pull-right -->
    21.         浮动属于行的子元素 是一个弹性盒模型这些浮动是无效的
    22.         我们还可以在父级添加一个col
    23.                 <div class="float-left">左浮动</div>
    24.                 <div class="float-right">右浮动</div>
    25.                 <div class="float-left float-none">不浮动</div>这个是文字还是会在下面的  但是位置是留下来了
    26.             </div>
    27.         </div>
    28.         <!-- 响应式的浮动，float-{breakpoint}-left -->
    29.         <div class="row border f mt-1">
    30.             <div class="col">
    31.                 <div class="float-md-left">中等屏幕以上会往左浮动</div>
    32.                 <div class="float-sm-right">小屏幕以上会往右浮动</div>
    33.             </div>
    34.         </div>
    35.         <!-- 清除浮动,clearfix -->
    36.         <div class="row d-block border mt-1 clearfix">
    37.             <div class="float-left" style="width: 100px;height: 100px;background: #ccc;">左浮动</div>
    38.             <div class="float-right" style="width: 100px;height: 100px;background: #ccc;">右浮动</div>
    39.         </div>
    41.         <!-- 关闭图标 -->
    42.         <div class="row mt-5">
    43.             <button type="button" class="close">  .close
    44.                 <span>&times;</span>这个关闭图标上添加了一个父级button，也就是让它更像一个按钮
    45.             </button>
    46.         </div>
    47.     组件上面有这个弹出层alert有这个关闭图标，到时候会借助这个按钮，
    48.     他身上我们会添加一些属性这些属性主要会和js区结合结合之后就有点击的功能了
    51.         <!-- 图像替换 -->
    52.         <div class="row mt-5">
    53.             <h1 class="text-hide" style="background-image: url('http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
    54.         </div>>用户所看到的是图片，搜索引擎那边看到的是文字
    55.     也可以用 text-intdend：首行缩进给出的值为负值，然后overflow：idden；；
    58.         <!-- 内容溢出 -->
    59.         <div class="row mt-5">
    60.             <div style="width: 200px;height: 100px;" class="border overflow-auto">这是在具有设置宽度和高度尺寸的元素上使用 .overflow-auto 的示例。 此内容将垂直滚动。这是在具有设置宽度和高度尺寸的元素上使用 .overflow-auto 的示例。 此内容将垂直滚动。这是在具有设置宽度和高度尺寸的元素上使用 .overflow-auto 的示例。</div>
    61.             出现滚动条
    62.       <div style="width: 200px;height: 100px;" class="border overflow-hidden">这是在具有设置宽度和高度尺寸的元素上使用 .overflow-hidden 的示例。这是在具有设置宽度和高度尺寸的元素上使用 .overflow-hidden 的示例。这是在具有设置宽度和高度尺寸的元素上使用 .overflow-hidden 的示例。</div>
    63.         </div
    65.         <!-- 定位 -->
    66.         <div class="row mt-5 pos">
    67.             <div class="position-static">默认值，没有定位</div>
    68.             <div class="position-relative">相对定位</div>
    69.             <div class="position-absolute">绝对定位</div>
    70.             <div class="position-fixed">固定定位</div>
    71.             <div class="position-sticky">粘性定位</div>
    73.             <!-- <div class="fixed-top">固定在顶部</div>
    74.             <div class="fixed-bottom">固定在底部</div> -->
    75.             <!-- <div class="sticky-top">粘性置顶，放在这里是没有效果的，需要放在body下的第一层级</div> -->
    76.         </div>
    79.         <!-- 阴影 -->
    80.         <div class="row mt-5 justify-content-around">
    81.             <div class="bg-light rounded p-3 shadow-none">没有阴影</div>
    82.             <div class="bg-white rounded p-3 shadow-sm">小阴影</div>
    83.             <div class="bg-white rounded p-3 shadow">正常的阴影</div>
    84.             <div class="bg-white rounded p-3 shadow-lg">大的阴影</div>
    85.         </div>
    88.         <!-- 尺寸 -->
    89.         <div class="row mt-5 d-block"><!-- 宽度 -->我们可以在父级上面添加d-block可以让子级中继承然后也是block
    90.             <div class="bg-info text-white p-3 w-25">Width 25%</div>
    91.             <div class="bg-info text-white p-3 w-50">Width 50%</div>
    92.             <div class="bg-info text-white p-3 w-75">Width 75%</div>
    93.             <div class="bg-info text-white p-3 w-100">Width 100%</div>
    94.             <div class="bg-info text-white p-3 w-auto">Width auto</div>
    95.         </div>
    96.         <!-- 高度 -->
    97.         <div class="row bg-dark mt-1 d-block" style="height: 100px;">
    98.             <div class="bg-success d-inline-block text-white p-3 h-25">Width 25%</div>
    99.             <div class="bg-success d-inline-block text-white p-3 h-50">Width 50%</div>
    100.             <div class="bg-success d-inline-block text-white p-3 h-75">Width 75%</div>
    101.             <div class="bg-success d-inline-block text-white p-3 h-100">Width 100%</div>
    102.             <div class="bg-success d-inline-block text-white p-3 h-auto">Width auto</div>
    103.         </div>
    104.         <!-- max-width -->
    105.         <div class="row d-block mt-1">
    106.             <div class="mw-100 bg-secondary text-white">宽度的最大值</div>是不能超过父级元素的。
    107.         </div>
    108.         <!-- max-height -->
    109.         <div class="row d-block bg-dark mt-1" style="height: 100px;">
    110.             <div class="bg-success text-white mh-100" style="width: 100px; height: 200px;">高度的最大值</div>
    111.         </div>
    114.         <!-- 间距 -->
    115.         <div class="row border mt-5">
    116.             <div class="bg-danger text-white p-3 m-3">陈学辉</div>
    117.         </div>
    118.         <div class="row border mt-1">
    119.             <div class="bg-danger text-white p-3 mb-3">陈学辉</div>
    120.         </div>
    121.         <div class="row border mt-1">
    122.             <div class="bg-danger text-white py-3 my-3">陈学辉</div>
    123.         </div>
    124.         <div class="row border mt-1">
    125.             <div class="bg-danger text-white px-3 mx-3">陈学辉</div>
    126.         </div>
    127.         <div class="row border mt-1">
    128.             <!-- 3.x的版本居中是用.center-block -->
    129.             <div class="bg-danger text-white px-3 mx-auto">陈学辉</div>
    130.         </div>
    131.         <!-- 间距的响应式，{property}{sides}-{breakpoint}-{size} -->
    132.         <div class="row border mt-1">
    133.             <div class="bg-danger text-white p-3 my-lg-3">陈学辉</div>
    134.         </div>
    136.         <!-- 文本 -->
    137.         <div class="row border mt-5">左右两边贴着边框
    138.             <p class="text-justify">这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！</p>
    139.             <p class="col text-lg-center">这是一段很长很长的文字！</p>
    140.         </div>
    142.         <!-- 换行和内容溢出处理 -->
    143.         <div class="text-nowrap bg-info border text-truncate " style="width: 8rem;">
    144.             This text should overflow the parent.  溢出用省略号显示
    145.         </div>
    147.         <!-- 文字大小写转换 -->
    148.         <div class="row d-block mt-1">
    149.             <p class="text-lowercase">KAIVON</p>
    150.             <p class="text-uppercase">kaivon</p>
    151.             <p class="text-capitalize">kaivon chen</p>
    153.             <!-- 字体粗细和斜体 -->
    154.             <p class="font-weight-bold">加粗字体</p>
    155.             <p class="font-weight-normal">正常字体</p>
    156.             <p class="font-weight-light">更细的字体</p>
    157.             <p class="font-italic">倾斜字体</p>
    159.             <!-- 等宽字体 -->
    160.             <p class="text-monospace">This is in monospace</p>
    161.         </div>
    164.         <!-- 字体的垂直对齐 -->
    165.         <div class="row mt-5 border mt-5 d-block" style="height: 100px;">
    166.             <span class="align-baseline">baseline</span>
    167.             <span class="align-top">top</span>
    168.             <span class="align-middle">middle</span>
    169.             <span class="align-bottom">bottom</span>
    170.             <span class="align-text-top">text-top</span>
    171.             <span class="align-text-bottom">text-bottom</span>
    172.         </div>
    174.         <!-- 可见性 -->
    175.         <div class="row mt-5 border">
    176.             <div class="bg-danger text-white p-3 visible">可以看见</div>
    177.             <div class="bg-danger text-white p-3 invisible">看不见，占据空间</div>
    178.             <div class="bg-danger text-white p-3 d-none">看不见，不占据空间</div>
    179.         </div>
    180.     </div>
    181.     <div class="sticky-top" style="width: 5rem;height: 5rem;background: green;">粘性定位，在这里是有效果的</div>
    182. </body>