1. <style>
    2.         .row span {
    3.             width: 5rem;
    4.             height: 5rem;
    5.             background: #f5f5f5;
    6.         }
    7.     </style>
    8. 边框
    9. <body>
    10.     <div class="container">
    11.         <!-- 添加边 -->
    12.         <div class="row mt-5 justify-content-around">
    13.             <span class="border"></span>
    14.             <span class="border-top"></span>
    15.             <span class="border-right"></span>
    16.             <span class="border-bottom"></span>
    17.             <span class="border-left"></span>
    18.         </div>
    20.         <!-- 删除边框 -->
    21.         <div class="row mt-5 justify-content-around">
    22.             <span class="border border-0"></span>
    23.             <span class="border-top border-top-0"></span>
    24.             <span class="border-right border-right-0"></span>
    25.             <span class="border-bottom border-bottom-0"></span>
    26.             <span class="border-left border-left-0"></span>
    27.         </div>
    29.         <!-- 边框颜色 -->
    30.         <div class="row mt-5 justify-content-around">
    31.             <span class="border border-primary"></span>
    32.             <span class="border border-secondary"></span>
    33.             <span class="border border-success"></span>
    34.             <span class="border border-danger"></span>
    35.             <span class="border border-warning"></span>
    36.             <span class="border border-info"></span>
    37.             <span class="border border-light"></span>
    38.             <span class="border border-dark"></span>
    39.             <span class="border border-white"></span>
    40.         </div>
    42.         <!-- 边框圆角 -->
    43.         <div class="row mt-5 justify-content-around bg-info py-2">
    44.             <span class="rounded"></span>
    45.             <span class="rounded-top"></span>
    46.             <span class="rounded-right"></span>
    47.             <span class="rounded-bottom"></span>
    48.             <span class="rounded-left"></span>
    49.         </div>
    50.     </div>
    53.   <style>
    54.         body{
    55.             padding-bottom: 1000px;
    56.         }
    57.     </style>
    58. 颜色
    59. <body>
    60.     <div class="container">
    61.         <div class="row">
    62.             <div class="col">
    63.                 <p class="text-primary">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    64.                 <p class="text-secondary">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    65.                 <p class="text-success">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    66.                 <p class="text-danger">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    67.                 <p class="text-warning">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    68.                 <p class="text-info">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    69.                 <p class="text-light bg-dark">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    70.                 <p class="text-dark">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    71.                 <p class="text-body">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    72.                 <p class="text-muted">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    73.                 <p class="text-white  bg-dark">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    74.                 <p class="text-black-50">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    75.                 <p class="text-white-50 bg-dark">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</p>
    76.             </div>
    77.         </div>
    78.     链接hover时候有变化
    79.         <div class="row mt-5">
    80.             <div class="col">
    81.                 <p><a href="#" class="text-primary">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</a></p>
    82.                 <p><a href="#" class="text-secondary">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</a></p>
    83.                 <p><a href="#" class="text-success">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</a></p>
    84.                 <p><a href="#" class="text-danger">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</a></p>
    85.                 <p><a href="#" class="text-warning">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</a></p>
    86.                 <p><a href="#" class="text-info">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</a></p>
    87.                 <p><a href="#" class="text-light bg-dark">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</a></p>
    88.                 <p><a href="#" class="text-dark">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</a></p>
    89.                 <p><a href="#" class="text-body">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</a></p>
    90.                 <p><a href="#" class="text-black-50">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</a></p>
    91.                 <p><a href="#" class="text-white-50 bg-dark">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</a></p>
    92.             </div>
    93.         </div>
    94.     背景颜色
    95.         <div class="row mt-5">
    96.             <div class="col">
    97.                 <div class="text-white bg-primary">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</div>
    98.                 <div class="text-white bg-secondary">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</div>
    99.                 <div class="text-white bg-success">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</div>
    100.                 <div class="text-white bg-danger">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</div>
    101.                 <div class="text-white bg-warning">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</div>
    102.                 <div class="text-white bg-info">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</div>
    103.                 <div class="text-dark bg-light">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</div>
    104.                 <div class="text-white bg-dark">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</div>
    105.                 <div class="text-dark bg-white">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</div>
    106.                 <div class="text-dark bg-transparent">今天不努力，老大徒伤悲！明天不努力，老大徒伤悲！天天不努力，老大天天徒伤悲！</div>
    107.             </div>
    108.         </div>
    109.     </div>
    111.   显示（比较常用）
    112.   <div class="container">
    113.         <div class="row">
    114.             <div class="col">
    115.                 <!-- 把元素显示成各种类型，3.x的版本只有三种，block,inline,inline-block -->
    116.                 <div class="d-inline bg-primary text-white" style="width: 150px;">d-inline</div>inline类型之后是设置不了width的
    117.                 <span class="d-block bg-dark text-white">d-block</span>
    118.                 <span class="d-inline-block bg-success text-white" style="width: 200px;">d-inline-block</span>inline-block是可以设置width的
    119.                 <div class="d-flex bg-warning">d-flex</div>可以设置弹性盒模型
    120.                 <div class="d-table bg-info">d-table</div>设置table类型
    121.             </div>
    122.         </div>
    123.         <div class="row mt-5">
    124.             <!-- 
    125.                 在各种尺寸下显示一个元素。只在某一个尺寸下显示，在其它的尺寸下都要隐藏
    126.                     1、隐藏是分为两个部分
    127.                         1、比它大的尺寸隐藏
    128.                         2、比它小的尺寸隐藏
    129.              -->
    130.             <div class="col bg-primary text-white d-xl-block d-none">只在超大屏幕下显示</div>
    131.             <div class="col bg-dark text-white d-none d-lg-block d-xl-none">只在大屏幕下显示</div>
    132.             <div class="col bg-success text-white d-none d-md-block d-lg-none">只在中等屏幕下显示</div>
    133.             <div class="col bg-warning text-white d-none d-sm-block d-md-none">只在小屏幕下显示</div>
    134.             <div class="col bg-info text-white d-sm-none">只在超小屏幕下显示</div>
    135.             <!-- 3.x的版本显示的类名为.visiable-*-block -->    
    136.         </div>
    137.         <div class="row mt-5">
    138.             <!-- 
    139.                 在各种尺寸下隐藏
    140.              -->
    141.              <div class="col bg-primary text-white d-xl-none">超大屏幕以外的显示</div>
    142.              <div class="col bg-dark text-white d-lg-none d-xl-block">大屏以外的显示</div>
    143.              <div class="col bg-success text-white d-md-none d-lg-block ">中等屏以外的显示</div>
    144.              <div class="col bg-warning text-white d-sm-none d-md-block">小屏以外的显示</div>
    145.              <div class="col bg-info text-white d-none d-sm-block">超小屏以外的显示</div>
    146.              <!-- 3.x的版本隐藏的类名为.hidden-* -->
    147.         </div>
    148.         <!-- <div class="row mt-5">
    149.             <div class="col-md-3 bg-info" style="height: 100px;">col</div>
    150.         </div> -->
    152.         <!-- 在打印的时候显示，d-print-block -->
    153.         <div class="row mt-5">
    154.             <div class="col d-none d-print-block">author:陈学辉；wechart:kaivon</div>
    155.              <!-- 3.x的版本打印的类名为.visiable-print-block -->
    156.         </div>
    157.     </div>
    159.   嵌入
    160.   <div class="container">
    161.         <div class="row">
    162.             <div class="embed-responsive embed-responsive-21by9">
    163.                 <iframe src='http://player.youku.com/embed/XMzU3MTY5NDMzNg==' allowfullscreen></iframe>
    164.             </div>
    165.         </div>
    166.         <div class="row mt-5">
    167.             <div class="embed-responsive embed-responsive-16by9">
    168.                 <iframe src='http://player.youku.com/embed/XMzU3MTY5NDMzNg==' allowfullscreen></iframe>
    169.             </div>
    170.         </div>
    171.         <div class="row mt-5">
    172.             <div class="embed-responsive embed-responsive-4by3">
    173.                 <iframe src='http://player.youku.com/embed/XMzU3MTY5NDMzNg==' allowfullscreen></iframe>
    174.             </div>
    175.         </div>
    176.         <div class="row mt-5">
    177.             <div class="embed-responsive embed-responsive-1by1">
    178.                 <iframe src='http://player.youku.com/embed/XMzU3MTY5NDMzNg==' allowfullscreen></iframe>
    179.             </div>
    180.         </div>
    181.     </div>