使用Bootstrap前端框架的栅格系统搭建页面布局

Source

使用Bootstrap前端框架的栅格系统搭建页面布局

需求

在index.jsp首页,用Bootstrap搭建一个页面布局,用于显示员工数据,和分页导航条信息等。

利用Bootstrap的栅格系统搭建页面布局

首先来看一下Bootstrap官网,对栅格系统的解释,如下:

栅格系统简介

在这里插入图片描述

栅格系统列的参数

在这里插入图片描述

栅格系统怎样定义大列所占的单位列数

在这里插入图片描述

栅格系统中怎样设置列偏移

在这里插入图片描述

实际代码

来看一下实际代码,如下图:

在这里插入图片描述

在这里插入图片描述

实际效果

接下来,让我们来看一下实际效果,如下图:

在这里插入图片描述

在这里插入图片描述