bootstrap网格系统

最新推荐文章于 2023-09-05 11:21:09 发布

cpf2016

最新推荐文章于 2023-09-05 11:21:09 发布

阅读量407

点赞数

分类专栏： bootstrap

bootstrap 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

（1）原理

实质就是将容器12等分

（2）使用

1.基本结构

<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-8">.col-md-3</div>
  </div>
</div>

2.注意
<1>数据行.row必须包含在容器.container之中

<2>在数据行.row中可以添加列，但是列数之和不能超过12

（3）列偏移col-md-offset-*

1.作用

有时候不希望2列并在一起，这个时候就可以使用列偏移使他们分开

2.使用

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>列偏移</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<h4>列向右移动四列的间距</h4>
  <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>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-5 col-md-offset-3">列向右移动3列的间距</div>
  </div>
</div>

</body>
</html>

（4）列排列col-md-pull-* col-md-push-*

1.作用

有时需要改变列的位置，那么pull就是往左拉，push就是往右推

2.使用

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>列排序</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="common.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>
<div class="container">
  <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>
</body>
</html>

cpf2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap网格系统

（1）原理实质就是将容器12等分（2）使用 1.基本结构 .col-md-4 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-3 .col-md-6 .col-md-3
复制链接

扫一扫

专栏目录