bootstrap网格系统

最新推荐文章于 2023-06-28 09:24:43 发布

yogima

最新推荐文章于 2023-06-28 09:24:43 发布

阅读量494

点赞数

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

本文链接：https://blog.csdn.net/yogima/article/details/81032587

版权

java web 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

Bootstrap框架中的网格系统就是将容器平分成12份。

基本用法：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基本用法</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
  </div>
</div>
</body>
</html>

结果：
这里写图片描述

列偏移：“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
示例：

 <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
    <div class="col-md-2">.col-md-3</div>
  </div>

要保证列与偏移列的总数不超过12，不然会致列断行显示.

col-md-push-可以右移，col-md-pull-左移
例如以下代码可以实现两列位置互换：

<div class="row">
    <div class="col-md-4 col-md-push-8">.col-md-4</div>
    <div class="col-md-8 col-md-pull-4">.col-md-8</div>
  </div>

列也可以嵌套：

<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
      我的里面嵌套了一个网格
      <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
      </div>
    </div>
  </div>