2021Bootstrap5多屏幕自适应纯新手上路发车(1)

<div class="row"></div>

有了rom之后才可以使用格子，格子也有不同类型针对不同屏幕

对于一个在N年前一只脚小拇指踩入Bootstrap的人来说(到现在基本都不会了)，基本一套界面下来md足够了，如不不是有很特俗的需求之外

案例1:Bootstarp 扁平化风格个人/工作室/物品 展示源码

案例2:红色小型新闻类网站源码基于Bootstrap框架

简单操作

<div class="row"> <div class="col-md-4"> <div class="card border-info md-3 "> <div class="card-header">Header</div> <div class="card-body text-info"> <h5 class="card-title">Info card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col-md-4"> <div class="card border-primary md-3"> <div class="card-header">Header</div> <div class="card-body text-primary"> <h5 class="card-title">Primary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col-md-4"> <div class="card border-success md-3"> <div class="card-header">Header</div> <div class="card-body text-success"> <h5 class="card-title">Success card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> ​

总结