Bootstrap 超大屏幕学习笔记

Bootstrap是一款流行的前端框架，它提供了许多预定义的CSS类和JavaScript插件，可以加快网站和应用程序的开发速度。本文将重点介绍Bootstrap的超大屏幕组件，包括响应式图像、媒体查询、栅格系统等。

响应式图像

Bootstrap提供了一些类来控制图像在不同屏幕大小下的显示方式。以下是一些常用的类：

.img-fluid: 图像自适应容器大小，可以在不同屏幕大小下自动调整大小。
.img-thumbnail: 给图片添加圆角和阴影效果。
.rounded: 给图片添加圆角。
.rounded-circle: 将图片切割成圆形。

例如，下面的代码表示一个响应式的图片：

htmlCopy Code
<img src="example.jpg" alt="Example" class="img-fluid">

媒体查询

Bootstrap使用媒体查询来检测屏幕大小，并根据需要动态调整页面布局。以下是一些常用的媒体查询：

@media (max-width: 576px): 屏幕宽度小于576像素时。
@media (min-width: 576px): 屏幕宽度大于或等于576像素时。
@media (min-width: 768px): 屏幕宽度大于或等于768像素时。
@media (min-width: 992px): 屏幕宽度大于或等于992像素时。
@media (min-width: 1200px): 屏幕宽度大于或等于1200像素时。

例如，下面的代码表示当屏幕宽度小于576像素时隐藏导航栏：

cssCopy Code
@media (max-width: 576px) {
  .navbar {
    display: none;
  }
}

栅格系统

Bootstrap的栅格系统是一组响应式的CSS类，可以将页面分成12列，并根据需要将内容放置在不同列中。以下是一些常用的栅格类：

.container: 固定宽度的容器。
.container-fluid: 全宽容器，宽度为100%。
.row: 行，包含一或多个列。
.col: 列，指定元素应该占据的列数。
.col-*: 指定元素应该占据的列数，其中*是数字1到12之间的整数。
.offset-*: 指定元素的左侧偏移量，其中*是数字1到11之间的整数。

例如，下面的代码表示一个具有两行和三列的网格布局：

htmlCopy Code
<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-4">Column 2</div>
    <div class="col-sm-4">Column 3</div>
  </div>
  <div class="row">
    <div class="col-sm-6 offset-sm-3">Column 4</div>
  </div>
</div>

在上面的代码中，第一行包含三个宽度为4列的列，总共占据了12列，第二行的单个列占据了6列，并将其左侧偏移了3列。因此，这个布局完全填满父容器并且是响应式的。

实例

下面的代码是一个完整的HTML页面，演示了如何使用Bootstrap的超大屏幕组件来创建响应式网格布局和图像。您可以将它保存为index.html文件，并用浏览器打开查看效果。

htmlCopy Code
<!doctype html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3">
          <img src="https://via.placeholder.com/300x200" alt="Image" class="img-fluid">
        </div>
        <div class="col-sm-6 col-md-8 col-lg-9">
          <h1>Bootstrap Example</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac tincidunt est. Donec vel elit in nunc maximus dapibus. Ut eget faucibus tortor. Vivamus ullamcorper justo et urna ultrices, ac iaculis arcu bibendum. Nam nisi neque, tempor quis commodo id, facilisis ut justo. Vestibulum nunc ex, sollicitudin consectetur elit et, pulvinar scelerisque urna. Nullam vel semper enim.</p>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-sm-12 col-md-6">
          <img src="https://via.placeholder.com/600x400" alt="Image" class="img-thumbnail rounded-circle">
        </div>
        <div class="col-sm-12 col-md-6">
          <h2>Heading</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac tincidunt est. Donec vel elit in nunc maximus dapibus. Ut eget faucibus tortor. Vivamus ullamcorper justo et urna ultrices, ac iaculis arcu bibendum. Nam nisi neque, tempor quis commodo id, facilisis ut justo. Vestibulum nunc ex, sollicitudin consectetur elit et, pulvinar scelerisque urna. Nullam vel semper enim.</p>
        </div>
      </div>
    </div>
  </body>
</html>

在上面的代码中，我们使用了Bootstrap的网格布局来分割页面，并使用了响应式图像和媒体查询来控制图像和文本在不同屏幕大小下的显示效果。