bootstrap - layout

最新推荐文章于 2023-06-20 16:33:18 发布

howlowl

最新推荐文章于 2023-06-20 16:33:18 发布

阅读量492

点赞数

分类专栏： WebDev

WebDev 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

align-items VS align-content:

https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items

First, align-items is for items in a single row. So for a single row of elements on main axis, align-items will align these items respective of each other and it will start with fresh perspective from the next row.

Now, align-content doesn't interfere with items in a row but with rows itself. Hence, align-content will try to align rows with respect to each other and flex container.

Check this fiddle : https://jsfiddle.net/htym5zkn/8/

class="no-gutters"

class="col-3 col-sm-4"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title>Bootstrap</title>
</head>
<body>

  <style>
    img {
      width: 100%;
      height: 200px;
      max-height: 200px;
    }
  </style>

  <div class="container" id="services">
    <div class="row">
      <section class="col-sm-8">
        <img src="images/image.png" alt="sample image">
        <h4>Exotic Pets</h4>
        <p>We offer <strong>specialized</strong> care for <em>reptiles, rodents, birds,</em> and other exotic pets.</p>
      </section>
      <section class="col-sm-4">
        <div class="row no-gutters">
          <div class="col-3 col-sm-4"><img src="images/image.png" alt="sample image" class="img-thumbnail"></div>
          <div class="col-3 col-sm-4"><img src="images/image.png" alt="sample image" class="img-thumbnail"></div>
          <div class="col-3 col-sm-4"><img src="images/image.png" alt="sample image" class="img-thumbnail"></div>
          <div class="col-3 col-sm-4"><img src="images/image.png" alt="sample image" class="img-thumbnail"></div>
        </div>
      </section>

    </div><!-- row -->
</div><!-- container -->

<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Grid Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title>Bootstrap</title>
</head>
<body>

  <style>
    img {
      width: 100%;
      height: 100px;
      max-height: 100px;
    }
  </style>

  <div class="container" id="services">

<!-- ROW 1 -->
  <div class="row bg-info align-items-center" style="height: 100vh;">
    <div class="col">
      <div class="row">
        <section class="col">
          <img src="images/image.png" alt="sample image">
          <h4>Exotic Pets</h4>
          <p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p>
        </section>
        <section class="col">
          <img src="images/image.png" alt="sample image">
          <h4>Grooming</h4>
          <p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
        </section>
        <section class="col">
          <img src="images/image.png" alt="sample image">
          <h4>General Health</h4>
          <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings.</p>
        </section>
      </div><!-- row -->
    </div><!-- column -->
  </div><!-- row -->

  <!-- ROW 2 -->
  <div class="row bg-success" style="height: 100vh;">
      <section class="col align-self-start">
        <img src="images/image.png" alt="sample image">
        <h4>Exotic Pets</h4>
        <p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p>
      </section>
      <section class="col align-self-center">
        <img src="images/image.png" alt="sample image">
        <h4>Grooming</h4>
        <p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
      </section>
      <section class="col align-self-end">
        <img src="images/image.png" alt="sample image">
        <h4>General Health</h4>
        <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings.</p>
      </section>
    </div><!-- row -->

<!-- ROW 3 -->
  <div class="row bg-warning justify-content-center" style="height: 100vh;">
    <section class="col-4">
      <img src="images/image.png" alt="sample image">
      <h4>Exotic Pets</h4>
      <p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p>
    </section>
    <section class="col-4">
      <img src="images/image.png" alt="sample image">
      <h4>Grooming</h4>
      <p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
    </section>
  </div><!-- row -->


</div><!-- container -->

<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

flex layout: a group of elements

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title>Bootstrap</title>
</head>
<body>

  <style>
    .item {
      background: #f0ad4e;
      text-align: center;
      width: 150px;
      height: 30px;
      border: 1px solid white;
    }
    .item-nofixwidth {
      background: #f0ad4e;
      text-align: center;
      padding: 10px 30px;
      border: 1px solid white;
    }
  </style>

  <div class="container bg-danger">
      <div class="bg-info d-flex justify-content-center flex-wrap align-content-start" style="height:100vh">
        <div class="item">Exotic</div>
        <div class="item">Grooming</div>
        <div class="item">Health</div>
        <div class="item">Nutrition</div>
        <div class="item">Pests</div>
        <div class="item">Vaccinations</div>
      </div>
</div><!-- container -->

<div class="container bg-primary">
    <div class="bg-danger d-flex justify-content-center flex-wrap align-content-stretch" style="height:100vh">
      <div class="item">Exotic</div>
      <div class="item">Grooming</div>
      <div class="item">Health</div>
      <div class="item">Nutrition</div>
      <div class="item">Pests</div>
      <div class="item">Vaccinations</div>
    </div>
</div><!-- container -->

<div class="container bg-primary">
    <div class="bg-light d-flex justify-content-start flex-wrap align-content-stretch" style="height:100vh">
      <div class="item-nofixwidth">Exotic</div>
      <div class="item-nofixwidth">Grooming</div>
      <div class="item-nofixwidth">Health</div>
      <div class="item-nofixwidth">Nutrition</div>
      <div class="item-nofixwidth">Pests</div>
      <div class="item-nofixwidth">Vaccinations</div>
    </div>
</div><!-- container -->

<div class="container bg-danger">
    <div class="bg-info d-flex justify-content-center flex-wrap align-items-center" style="height:100vh">
      <div class="item">Exotic</div>
      <div class="item">Grooming</div>
      <div class="item">Health</div>
      <div class="item">Nutrition</div>
      <div class="item">Pests</div>
      <div class="item">Vaccinations</div>
    </div>
</div>

<div class="container bg-warning">
    <div class="bg-success d-flex justify-content-center flex-wrap align-content-center" style="height:100vh">
      <div class="item">Exotic</div>
      <div class="item">Grooming</div>
      <div class="item">Health</div>
      <div class="item">Nutrition</div>
      <div class="item">Pests</div>
      <div class="item">Vaccinations</div>
    </div>
</div><!-- container -->

<div class="container bg-danger">
    <div class="bg-info d-flex flex-sm-column-reverse" style="height:100vh">
      <div class="item">Exotic</div>
      <div class="item">Grooming</div>
      <div class="item">Health</div>
      <div class="item">Nutrition</div>
      <div class="item">Pests</div>
      <div class="item">Vaccinations</div>
    </div>
</div><!-- container -->

<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

howlowl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap - layout

align-items VS align-content:https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-itemsFirst,align-itemsis for items in a single row. So for a single...
复制链接

扫一扫

专栏目录