Bootstrap——网格系统

最新推荐文章于 2023-04-23 15:50:27 发布

kuuhakuna

最新推荐文章于 2023-04-23 15:50:27 发布

阅读量222

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/kuuhakuna/article/details/78710710

版权

bootstrap 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了Bootstrap的网格系统，详细讲解了如何随着屏幕尺寸变化自动调整布局，最多分为12列，并提到了基本网站结构和媒体查询的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

基本网站结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

媒体查询

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }