bootstrap栅格系统学习笔记

来源：互联网发布：古典音乐广播知乎编辑：程序博客网时间：2024/05/20 15:38

Bootstrap框架的网格系统工作原理如下：

1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：

<div class="container"><div class="row"></div></div>

2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：

<div class="container"><div class="row">  <div class="col-md-4"></div>  <div class="col-md-8"></div>

3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素

4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

为了更好的理解Bootstrap框架的网格系统工作原理，我们来看一张草图

<!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="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-4中的4）代表数字后的空格

0 0