Bootstrap3学习（一）

最新推荐文章于 2025-05-18 14:52:34 发布

qq_42497197

最新推荐文章于 2025-05-18 14:52:34 发布

阅读量542

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42497197/article/details/90453961

本博客介绍了最受欢迎的前端框架Bootstrap，它基于HTML、CSS、JavaScript。讲解了搭建Bootstrap环境的两种方式，包括本地引入和官网链接引入。还详细介绍了网格系统，如绘制网格、偏移列及嵌套列等内容。

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

Bootstrap，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的，本博客将从基础开始讲解，逐步学习。
参考链接：https://www.runoob.com/bootstrap/bootstrap-grid-system.html

步骤：

一.搭建Bootstrap环境，有以下两种方式可供参考：
（1）通过下载对应的文件到本地通过相对路径引入
（2）通过官网链接直接引入（该方法可以根据引入文件版本的更新来下载对应文件，但在运行过程中速度可能会受到网络影响）
二.网格系统
1.绘制网格

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网格系统</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
        body{
            margin:30px;
  }
  .container{
            outline:1px solid black;
  }
  .col-md-1,.col-md-3,.col-md-9{
            outline:1px solid black;;
            padding: 10px;
  }
  </style>
  <script src="jquery-3.3.1.min.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
      <div class="row">
          <div class="container">
              <div class="row">
                  <div class="col-md-1">第1列</div>
                  <div class="col-md-1">第2列</div>
                  <div class="col-md-1">第3列</div>
                  <div class="col-md-1">第4列</div>
                  <div class="col-md-1">第5列</div>
                  <div class="col-md-1">第6列</div>
                  <div class="col-md-1">第7列</div>
                  <div class="col-md-1">第8列</div>
                  <div class="col-md-1">第9列</div>
                  <div class="col-md-1">第10列</div>
                  <div class="col-md-1">第11列</div>
                  <div class="col-md-1">第12列</div>
                  <div class="col-md-3">col-md-3</div>
                  <div class="col-md-9">col-md-9</div>
            </div>
      </div>
  </div>
</div>
</body>
</html>

效果如图：
在这里插入图片描述
2.网格系统的偏移列

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网格偏移列</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
        body{
            margin:30px;
  }
  .container{
            outline:1px solid black;
  }
  .col-md-3{
            outline:1px solid black;;
            padding: 10px;
            background:orange;
  }
  .col-md-2{
            outline:1px solid black;;
            padding: 10px;
            background:pink;
  }
  </style>
  <script src="jquery-3.3.1.min.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
      <div class="row">
                  <div class="col-md-3 col-md-offset-2">col-md-3</div>
                  <div class="col-md-3 col-md-offset-2">col-md-3</div>
                  <div class="col-md-2 col-md-pull-4">col-md-4</div>
                  <div class="col-md-2 col-md-offset-3">col-md-4</div>
            </div>
      </div>
</body>
</html>

效果图：
在这里插入图片描述
col-md-2是设置宽度为2份的网格宽度，使用.col-md-offset-* 类向右偏移对应列数。要实现偏移还有两种方式：
（1）col-md-pull偏移数值 //向左偏移
（2）col-md-push-偏移数值 //向右偏移
在网格系统系统中，列排序就是通过 .col-md-push-* 和 .col-md-pull-* 类来实现的。
3.网格系统的嵌套列

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网格嵌套</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
        body{
            margin:30px;
  }
  .container{
            outline:1px solid black;
  }
  .col-md-4,.col-md-8{
            outline:1px solid black;
            background:orange;
            height:40px;
  }
  .col-md-6{
            outline:1px solid black;;
            background:#9cff;
  }
  </style>
  <script src="jquery-3.3.1.min.js"></script>
  <script src="bootstrap.min.js"></script>
</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 class="row">
                  <div class="col-md-6 ">col-md-6</div>
                  <div class="col-md-6 ">col-md-6</div>
            </div>
      </div>
</div>
</div>
</body>
</html>