什么是 Bootstrap？
Bootstrap 是目前最受欢迎的前端框架之一，它提供了全面的 CSS 和 JavaScript 库，以及用于快速开发响应式和现代化的 Web 应用程序所需的许多组件和工具。Bootstrap 的灵活性和可定制性使其成为许多开发人员和设计师的首选框架。
Bootstrap 默认为什么只有 12 列？
关于 Bootstrap 为什么只有 12 列，有些人可能觉得很奇怪。在传统的网格系统中，通常使用 24 列或更多来实现更多的灵活性。但是，Bootstrap 的 12 列系统在设计时就有一个很明显的优势。
理由一：提高开发效率
使用 12 列的网格系统可以帮助开发人员更快地创建和排版页面，因为您只需要记住 12 个列的宽度，而不是 24 个。当您处理更少的列并具有相同的总宽度时，您可以更容易地预测页面的外观和排版。
此外，对于每个列中的内容，您只需要决定每列应该跨越多少列即可。例如，如果您希望一个列占据整个屏幕宽度，则添加 .col-12 类即可。如果您想让一个列占据屏幕的一半，则添加 .col-6 类即可。这是一种非常有效的方式，可以节省许多时间。
理由二：更好的网格响应能力
另一个有利于 12 列系统的因素是，它更容易实现响应式布局。Bootstrap 是一个全面的响应式框架，可以帮助您的网站在任何设备上运行良好。
对于 12 列系统，响应性更加灵活，因为每个列的宽度只有在一定比例上减小或增大。如果您使用 24 列系统，则会出现更多的布局混乱，因为您需要决定每个列应该跨越多少列，并且您可以使用比例更多的选项。
但是，在响应式设计中，简洁明了是一种优点，因为它有利于更轻松地改变布局或重新排列元素，以使其在各种设备上显示。
理由三：可读性更好
12 列系统还使最终网站的可读性更高。由于每列的宽度相对较大，因此您可以更轻松地控制行的长度。较短的行意味着阅读更容易，并且必须更改行时也更容易维护。
总结
因此，Bootstrap 为什么默认只有 12 列，原因是这样更能提高开发效率、具有更好的响应性、更高的可读性，并且更易于维护。
当然，在某些情况下，24 列或其他数量的列可能更适合某些应用程序。但是，在大多数情况下，12 列仍然是最流行和最有效的方式来创建现代化的 Web 应用程序。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 12 列系统示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p>这是第一列</p>
</div>
<div class="col-sm-4">
<p>这是第二列</p>
</div>
<div class="col-sm-4">
<p>这是第三列</p>
</div>
</div>
</div>
</body>
</html>