Bootstrap页面内容

<kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>c</kbd>

6. 示例输出：使用指示程序的示例输出：

   <samp>This text is meant to be treated as sample output from a computer program.</samp>
   

• 图文样式

  通过给图片添加类样式，使图片变成响应式，不超出父元素显示。

1. 给图片添加.img-fluid 样式或设置 max-width:100%，height:auto，使之与父元素缩放：

   <img src="imgs/2.jpg" class="img-fluid" alt="Responsive image">
   

2. 通过.img-thumbnail给小图片加缩略图样式，添加一个空心边框：

   <img src="imgs/2.jpg" class="img-thumbnail" alt="缩略图">
   

3. 通过.float-left 和.float-right 来设置图片的左右浮动：

   <img src="imgs/5.jpg" class="float-left" alt="左浮动"> 
   <img src="imgs/3.jpg" class="float-right" alt="右浮动">
   

4. 通过.d-block 设置为区块（块级元素），再通过 margin 左右 auto 方式.mx-auto 实现水平居中：

   <img src="imgs/5.jpg" class="mx-auto d-block">
   

5. 因为图片本身是内联块元素，所以，直接在父元素上设置 .text-center，实现图片水平居中：

   <div class="text-center"> 
       <img src="imgs/5.jpg" class="img-thumbnail" alt="缩略图"> 
   </div>
   

6. 使用 figure 和 figcaption 实现图文组合显示：

    <figure class="figure"> 
        <img src="imgs/5.jpg" class="figure-img" alt="图文组合"> 
        <figcaption class="figure-caption text-right"> 这是一张图片		</figcaption> 
   </figure>
   

四、表格样式

1. 使用.table 给表格设置一个基类：

   <table class="table">
     <thead>
       <tr>
         <th scope="col">#</th>
         <th scope="col">First</th>
         <th scope="col">Last</th>
         <th scope="col">Handle</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th scope="row">1</th>
         <td>Mark</td>
         <td>Otto</td>
         <td>@mdo</td>
       </tr>
       <tr>
         <th scope="row">2</th>
         <td>Jacob</td>
         <td>Thornton</td>
         <td>@fat</td>
       </tr>
       <tr>
         <th scope="row">3</th>
         <td>Larry</td>
         <td>the Bird</td>
         <td>@twitter</td>
       </tr>
     </tbody>
   </table>
   

2. 使用.table-dark 样式，启用颜色反转对比效果:

   <table class="table table-dark">
   

3. 在使用.thead-light 或.thead-dark 实现浅黑或深灰色调的表头：

   <thead class="thead-light">
   

4. 使用.table-striped 实现数据表的条纹状显示：

   <table class="table table-striped">
   

5. 条纹状显示也适用于反转色调上：

   <table class="table table-dark table-striped">
   

6. 默认情况下，边框是不完全的，使用.table-bordered 设置表格边框

   <table class="table table-bordered">
   

7. 表格边框也可以作用域反转色调上；

   <table class="table table-bordered table-dark">
   

8. 使用.table-borderless 设置无边框；

   <table class="table table-borderless">
   

9. 无边框效果也可以作用于反转色调上；

   <table class="table table-borderless table-dark">
   

10. 使用.table-hover 实现一行悬停效果：

    <table class="table table-hover">
    

11. 行悬停效果也可以作用于反转色调上；

    <table class="table table-hover table-dark">
    

12. 使用.table-sm 实现紧缩型表格，反转色调依然支持；

    <table class="table table-sm">
    

13. 使用.table-success 等语义化实现或、等效果，反转色调通用；

    <tr class="table-success"> 
        <td class="table-info">男</td> 
        PS：.table-*中的*包含：active、primary、secondary、danger、 warning、info、light、dark。
    

14. 使用.table-responsive 实现溢出时出现底部滚动条；

    <table class="table table-responsive">
    

15. 使用.table-responsive-sm 实现只有小于 768px 溢出时出现底部滚动条；

    <table class="table table-responsive-sm">
    

五、边框和颜色

• 边框样式

  使用Bootstrap提供的边框类样式可以快速设置元素的边框和边框半径的样式。非常适合图像，按钮或任何其他元素。

1. 使用.border 给元素增加相应的边框，默认是淡灰色：

<span class="border">1</span>
  <span class="border-top">2</span>
  <span class="border-right">3</span>
  <span class="border-bottom">4</span>
  <span class="border-left">5</span>

去掉单独某个边的边框：

   <span class="border border-0">1</span>
     <span class="border border-top-0">2</span>
   <span class="border border-right-0">3</span>
     <span class="border border-bottom-0">4</span>
     <span class="border border-left-0">5</span>

2. 边框颜色：颜色太浅，可以使用.border-*设置特殊效果的颜色，比如.border-success：

   .border-，包含：primary、secondary、success、danger、warninginfo、light、dark 和 white

     <img src="imgs/4.jpeg" alt="边框" class="border-success border">
     <img src="imgs/4.jpeg" alt="边框" class="border-primary border-top">
     <img src="imgs/4.jpeg" alt="边框" class="border-secondary border-bottom">
     <img src="imgs/4.jpeg" alt="边框" class="border-danger border-left">
     <img src="imgs/4.jpeg" alt="边框" class="border-warninginfo border-dark">
   

3. 边界半径：给元素添加类样式，轻松实现圆角功能。

   使用.rounded 和.rounded-*实现各种方位圆角：

    <img src="imgs/5.jpg" alt="圆角" class="rounded">
   <img src="imgs/5.jpg" alt="圆角" class="rounded-top">
   <img src="imgs/5.jpg" alt="圆角" class="rounded-bottom">
   <img src="imgs/5.jpg" alt="圆角" class="rounded-left">
   <img src="imgs/5.jpg" alt="圆角" class="rounded-right">
    <img src="imgs/5.jpg" alt="圆角" class="rounded-circle">
   <img src="imgs/5.jpg" alt="圆角" class="rounded-pill" style="height: 80px;">
   <img src="imgs/5.jpg" alt="圆角" class="rounded-0">
   

4. 大小：.rounded-lg或.rounded-sm用于实现较大或较小的圆角半径：

   <img src="img/img2.png" alt="圆角" class="rounded-sm"> 
   <img src="img/img2.png" alt="圆角" class="rounded-lg">
   

• 颜色样式

1. 文本颜色：使用.text-*将文本设置成指定的颜色，比如：text-success：

   <p class="text-primary">.text-primary</p>
   <p class="text-secondary">.text-secondary</p>
   <p class="text-success">.text-success</p>
   <p class="text-danger">.text-danger</p>
   <p class="text-warning">.text-warning</p>
   <p class="text-info">.text-info</p>
   <p class="text-light bg-dark">.text-light</p>
   <p class="text-dark">.text-dark</p>
   <p class="text-body">.text-body</p>
   <p class="text-muted">.text-muted</p>
   <p class="text-white bg-dark">.text-white</p>
   <p class="text-black-50">.text-black-50</p>
   <p class="text-white-50 bg-dark">.text-white-50</p>
   

2. 悬停和链接颜色：使用.text-*也可以实现悬停和焦点的超链接样式，.text-white和.text-muted类除了下划线外没有其他链接样式：

   <p><a href="#" class="text-primary">Primary link</a></p>
   <p><a href="#" class="text-secondary">Secondary link</a></p>
   <p><a href="#" class="text-success">Success link</a></p>
   <p><a href="#" class="text-danger">Danger link</a></p>
   <p><a href="#" class="text-warning">Warning link</a></p>
   <p><a href="#" class="text-info">Info link</a></p>
   <p><a href="#" class="text-light bg-dark">Light link</a></p>
   <p><a href="#" class="text-dark">Dark link</a></p>
   <p><a href="#" class="text-muted">Muted link</a></p>
   <p><a href="#" class="text-white bg-dark">White link</a></p>
   

3. 背景颜色：使用.bg-*可以实现背景色：

   p-3：等价于 {padding:1rem !important}

   mb-2 ：{margin-bottom: 0.5rem !important}

   <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
   <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
   <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
   <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
   <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
   <div class="p-3 mb-2 bg-info text-white">.bg-info</div>

4. 总结
   在Bootstrap当中，将这些语义化的颜色成为主题颜色，由产品和设计人员来规定。Bootstrap将网页的逻辑开发和页面设计分开，具体网站的主色调、辅助色调、警告、成功是什么颜色，由UI设计人员来定，我们开发人员只负责调用这些颜色就可以了。