关键词

Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

Bootstrap栅格系统是Bootstrap框架的一个重要组成部分,它可以帮助我们实现页面的自适应效果,让同一份代码在不同尺寸的设备上都能够呈现出良好的显示效果。下面是Bootstrap栅格系统的完整攻略:

什么是Bootstrap栅格系统

Bootstrap栅格系统由一系列的栅格列组成,每个栅格列的宽度是固定的,可以根据设备的屏幕尺寸进行自动调整。Bootstrap栅格系统有12列,我们可以把页面的内容划分成若干个栅格列,然后根据我们的需求在不同的设备尺寸下设置每个栅格列的宽度,从而实现页面的自适应效果。

栅格列的基本使用方法

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">栅格列1</div>
    <div class="col-sm-4">栅格列2</div>
    <div class="col-sm-4">栅格列3</div>
  </div>
</div>

上面的代码中,.container-fluid是Bootstrap提供的用于页面布局的容器,会根据设备的屏幕尺寸自动调整宽度;.row用于包裹栅格列;.col-sm-4表示这是一个占4列的栅格列,sm代表设备尺寸为小屏幕,也就是位于768px和992px之间的设备。

设备尺寸和栅格列的响应范围

Bootstrap栅格系统根据设备尺寸提供了多个响应范围,分别是:

  • 超小屏幕(<576px):.col-(默认)、.col-xs-
  • 小屏幕(≥576px):.col-sm-
  • 中等屏幕(≥768px):.col-md-
  • 大屏幕(≥992px):.col-lg-
  • 超大屏幕(≥1200px):.col-xl-

在不同的响应范围内,栅格列的宽度会随着设备尺寸的变小而逐渐变小。为了方便演示,我们接下来用两个示例分别演示如何使用Bootstrap栅格系统实现页面的自适应效果。

示例1:响应式导航栏

<div class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar-content">
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</div>

上面的代码是一个响应式的导航栏,该导航栏使用了Bootstrap提供的.navbar组件和.nav组件,并使用了Bootstrap栅格系统的.navbar-expand-sm.collapse类,用于控制导航栏的自适应展示效果。在小屏幕设备下,该导航栏会自动折叠为按钮式导航,点击按钮后才会展开。

示例2:响应式图片布局

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      <img src="https://placekitten.com/300/300" class="img-fluid rounded-circle">
      <p class="text-center">Kitty 1</p>
    </div>
    <div class="col-sm-4">
      <img src="https://placekitten.com/300/300" class="img-fluid rounded-circle">
      <p class="text-center">Kitty 2</p>
    </div>
    <div class="col-sm-4">
      <img src="https://placekitten.com/300/300" class="img-fluid rounded-circle">
      <p class="text-center">Kitty 3</p>
    </div>
  </div>
</div>

上面的代码演示了如何使用Bootstrap栅格系统实现一个响应式的图片布局。在大屏幕设备下,三张图片平均分配在页面的三个栅格列中,而在小屏幕设备下,图片会自动调整为垂直排列的形式,以适应设备的屏幕尺寸。而通过.img-fluid.rounded-circle两个类的添加,可以使图片自动适应父元素的大小,并展示成圆形。

本文链接:http://task.lmcjl.com/news/9856.html

展开阅读全文