BootStrap网格布局

时间 2019-11-19 标签 bootstrap 网格布局

　　如何使用BootStrap样式

　　BootStrap与其余的开源库相似，直接引用它的css样式文件就能够使用了。css

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

　　在代码中，直接使用class就能够使用其定义的样式，例如使用它button样式，就能够按照下面的方式：html

<button class="btn btn-primary" type="button">Reset</button>

　　什么是网格布局

　　目前流行的响应式布局，在显示界面设定了集中宽度，当宽度知足必定的标准时，就是用当前宽度支持下的样式。bootstrap

　　这样就能够使一种开发，支持移动端、以及各类分辨率的显示器，达到良好的使用效果。布局

　　BootStrap把网页分红12个网格，并有下面四中宽度：自动、750px、970px和1170pxspa

　　当屏幕属于其中某个区间时，自动使用对应的样式。code

　　使用的基本语法，相似下面：container---->row---->columncdn

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

　　提供个简单的样例：htm

<!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">
</head>

<body>
<div class="container">
  <div class="row">
    <button class="btn btn-primary col-md-4" type="button">test</button>
    <button class="btn btn-primary col-md-8" type="button">test</button>
  </div>
  <div class="row">
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
  </div>
  <div class="row">
    <button class="btn btn-primary col-md-3" type="button">test</button>
    <button class="btn btn-primary col-md-6" type="button">test</button>
    <button class="btn btn-primary col-md-3" type="button">test</button>
  </div>
</div>
</body>
</html>

　　主要要知足网格数目不超过12个，超过的部分会自动挤到下一列！blog

　　样式运行效果分别以下：utf-8

　　最大的宽度下：

　　中等宽度下：

　　最小宽度下：

　　网格列偏移

　　BootStrap中支持网格的列偏移：直接在样式中col-md-offset-*就能够达到偏移效果。

　　例以下面的代码：

<div class="container">
  <div class="row">
    <button class="btn btn-primary col-md-4" type="button">test</button>
    <button class="btn btn-primary col-md-4 col-md-offset-4" type="button">test</button>
  </div>
  <div class="row">
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
  </div>
</div>

　　第一行的第二个button就达到了列偏移4个网格的效果：

　　网格嵌套

　　在BootStrap中也支持网格的嵌套，一样也须要嵌套中的网格知足12格的划分原则

<div class="container">
  <div class="row">
    <button class="btn btn-primary col-md-4" type="button">test</button>
    <div class="col-md-8">
        <div class="row">
            <button class="btn btn-info col-md-4" type="button">test</button>
            <button class="btn btn-info col-md-4" type="button">test</button>
            <button class="btn btn-info col-md-4" type="button">test</button>
          </div>
    </div>
  </div>
  <div class="row">
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
  </div>
</div>

　　效果以下：