Bootstrap 学习-Bootstrap 容器

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

默认情况下，容器都有填充左右内边距，顶部和底部没有填充内边距。

Bootstrap 提供了一些间距类用于填充边距。比如 .pt-5 就是用于填充顶部内边距。

用到最多的就是.container

我简单的做了一个前端的界面，用到了导航栏，card，网格布局等.

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark fixed-top opacity-75">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">图像表格化构建</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">图片转excel表格</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">图片转Html</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">图片转PDF</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="输入搜索内容">
        <button class="btn btn-primary" type="button">search</button>
      </form>
    </div>
  </div>
</nav>


<div class="container">
  <hr><hr><hr>

  <div class="row">

    <div class="col-sm-3 p-3 ">
      <div class="card" style="width:300px ;height: 352px;">
        <div class="card-body">
          <h3>Q:</h3>
          <h3 class="card-title">你能解决我们的什么问题？</h3>
          <h3>A:</h3>
          <h3 class="card-title">您可以将数据表格图片上传，我们将为您自动生成格式化的excel格式文件</h3>
        </div>
      </div>
    </div>

    <div class="col-sm-4 p-3 ">
      <div class="card" style="width:400px">
        <div class="card-body">
          <p class="card-text">电厂的数据种类繁多，日常工作中还需要审核多种多样的质检报告，而目前针对与这些报告大多采用人工手抄的方式进行统计，这常会导致一些不必要的问题.</p>
          <p class="card-text">例如，采用人工手抄方式常因为抄错而带来繁琐的二次审核，进而增加工作量。其次随着信息化技术的发展，此种方法也不利于对数据的利用及分析。</p>
          <p class="card-text">因此针对上述问题我们开发了一种表格提取识别重建算法。该算法可以根据电厂上传的煤质检验检测报告，利用机器视觉技术，准确提取报告中元素数据信息，并且按照表格的结构输出成excel表格文件。</p>
        </div>
      </div>
    </div>

    <div class="col-sm-5 p-3 ">
      <div class="card" style="width:400px">
        <div class="card-body">
          <p class="card-text">电厂的数据种类繁多，日常工作中还需要审核多种多样的质检报告，而目前针对与这些报告大多采用人工手抄的方式进行统计，这常会导致一些不必要的问题.</p>
          <p class="card-text">例如，采用人工手抄方式常因为抄错而带来繁琐的二次审核，进而增加工作量。其次随着信息化技术的发展，此种方法也不利于对数据的利用及分析。</p>
          <p class="card-text">因此针对上述问题我们开发了一种表格提取识别重建算法。该算法可以根据电厂上传的煤质检验检测报告，利用机器视觉技术，准确提取报告中元素数据信息，并且按照表格的结构输出成excel表格文件。</p>
        </div>
      </div>
    </div>

  </div>

  <div class="header clearfix">
    <a class="pull-right user_icon" href="javascript: user_page();" id="usericon_label"><i class="free_dot"></i></a>
  </div>

  <hr>

  <div class="jumbotron">
    <p>
      <button class="btn btn-lg btn-success" onClick="javascript:document.getElementById('fileupload').click();">
        <i class="icons ico-upload"></i> 选择图片<input accept="image/*" id="fileupload" multiple
                                                        name="file" style="display:none;" type="file"></button>
    </p>
    <a class="login_inquery" data-target="#modal_login" data-toggle="modal" href="">点击登录</a>
  </div>

  <div id="files"></div>




</div>

<hr>
<div style="text-align: center; width: 100%; font-size: 12px; color: #333;">&copy;版权所有：石家庄铁道大学信息科学与技术学院</div>

</div>

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

还有多种响应式的容器可以使用，它们更灵活好用。

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>