bootstrap布局学习

所有的布局都要在container中，所以根dom必须是container

<div class="container"></div>

bootstrap是响应式布局，所以可以充分利用这个特性适配多端，主要是使用col适配宽度，也叫断点

col会被平分为12份，如果子元素多于12会造成溢出，可以使用空的col元素达到col居中的效果
同时col必须在row中，

<div class="row h-100">
   <div class="col-lg-3 col-xs-1"></div>
   <div class="col-lg-6 col-xs-10"></div>
</div>

##其他属性
card类型，示例代码如下

<div class="card">
<div class="card-header text-start fs-4" id="card_header">
去码头整点薯条
</div>
<div class="card-body text-start fs-6" id="card_body">
去码头整点薯条,去码头整点薯条,去码头整点薯条,去码头整点薯条,去码头整点薯条,去码头整点薯条,去码头整点薯条,去码头整点薯条,去码头整点薯条,去码头整点薯条,去码头整点薯条,
</div>
<div class="card-footer d-flex justify-content-between">
<div class="text-start" id="source">
稀土掘金
</div>
<div class="text-end" id="pubtime">
发布于: 2023-08-08 12:23:22
</div>
</div>
</div>

其中使用了 justify-content-between 样式，可以让两个元素分局两端，非常好用，要搭配d-flex使用