Bootstrap——网格布局

网格布局

如图：

网格布局的列数最多可以分为12列

如果要列数大于12则会另起一行补齐多余的列数

如果份数相加小于12则会铺不满整个宽度

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/bootstrap.min.css"><title>Document</title><style>[class^='col']{background-color: aqua;border: 1px solid black;}</style>
</head>
<body><div class="container"><!-- 如果份数相加等于12 则能占满整个屏幕 --><div class="row"><div class="col-lg-1">1个列</div><div class="col-lg-1">1个列</div><div class="col-lg-1">1个列</div><div class="col-lg-1">1个列</div><div class="col-lg-1">1个列</div><div class="col-lg-1">1个列</div><div class="col-lg-1">1个列</div><div class="col-lg-1">1个列</div><div class="col-lg-1">1个列</div><div class="col-lg-1">1个列</div><div class="col-lg-1">1个列</div><div class="col-lg-1">1个列</div></div><br><!-- 只要列数之和等于12就可以占满一行 --><div class="row"><!-- div{$}*4 --><div class="col-lg-3">3</div><div class="col-lg-3">3</div><div class="col-lg-3">3</div><div class="col-lg-3">3</div></div><br><!-- 多余12会另起一行 --><div class="row"><div class="col-lg-1">1</div><div class="col-lg-4">4</div><div class="col-lg-2">2</div><div class="col-lg-2">2</div><div class="col-lg-3">3</div><div class="col-lg-2">2</div></div><br><!-- 如果份数相加小于12则会铺不满整个宽度 --><div class="row"><div class="col-lg-1">1</div><div class="col-lg-3">3</div><div class="col-lg-2">2</div><div class="col-lg-2">2</div><div class="col-lg-1">1</div><div class="col-lg-2">2</div></div><br></div>
</body>
</html>

bootstrap可以随着四种设备的比例进行相应的变化

 超小设备（手机，小于 768px）

 小型设备（平板电脑，768px 起）

 中型设备（台式电脑，992px 起）

大型设备（大台式电脑，1200px 起）

基本的网格结构

下面是 Bootstrap 网格的基本结构：

<div class="container"><div class="row"><div class="col-*-*"></div>  <div class="col-*-*"></div>      </div><div class="row">...</div>
</div>
<div class="container">
</div>

所有的样式都是bootstrap中的css文件引入好的，直接拿来用就可以了

引入方法见https://blog.csdn.net/nanchen_J/article/details/120067609?spm=1001.2014.3001.5501

Bootstrap——网格布局相关推荐

BootStrap网格布局
如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...
bootstrap网格布局自适应问题
一.确保网格自适应的几点 1.head部分引入viewport属性 <meta http-equiv="X-UA-Compatible" content="IE=e ...
Bootstrap研究1-精巧的网格布局系统
Bootstrap研究1-精巧的网格布局系统本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Flu ...
HTML创建12列小屏幕网格,Bootstrap 网格系统布局详解
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 一.什么是网格(Grid)? 在平 ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
grid layout(网格布局、栅格布局、grid布局)：bootstrap，请到历史书报道！
grid布局就是表格布局(grid layout),或者称之为栅格布局也行.因为栅格布局的概念来自于bootstrap,这里使用栅格布局来与bootstrap做关联,是因为它俩是描述的同一个东西.自从 ...
css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表
css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...
CSS Grid 网格布局教程
作者: 阮一峰日期: 2019年3月25日一.概述网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 ...
css 网格布局_CSS网格布局
css 网格布局网格布局 (Grid Layout) CSS Grid Layout, simply known as Grid, is a layout scheme that is the ne ...

Bootstrap——网格布局

基本的网格结构

Bootstrap——网格布局相关推荐

最新文章

热门文章