Bootstrap3学习(一)

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>

效果图:
在这里插入图片描述
至此,网格系统的简单学习完成。

你可能感兴趣的:(Bootstrap3学习(一))