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

文章目录

    • 使用Bootstrap前端框架的栅格系统搭建页面布局
      • 需求
      • 利用Bootstrap的栅格系统搭建页面布局
        • 栅格系统简介
        • 栅格系统列的参数
        • 栅格系统怎样定义大列所占的单位列数
        • 栅格系统中怎样设置列偏移
        • 实际代码
        • 实际效果

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

需求

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

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

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

栅格系统简介

使用Bootstrap前端框架的栅格系统搭建页面布局_第1张图片

栅格系统列的参数

使用Bootstrap前端框架的栅格系统搭建页面布局_第2张图片

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

使用Bootstrap前端框架的栅格系统搭建页面布局_第3张图片

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

使用Bootstrap前端框架的栅格系统搭建页面布局_第4张图片

实际代码

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

使用Bootstrap前端框架的栅格系统搭建页面布局_第5张图片

使用Bootstrap前端框架的栅格系统搭建页面布局_第6张图片

实际效果

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

使用Bootstrap前端框架的栅格系统搭建页面布局_第7张图片

使用Bootstrap前端框架的栅格系统搭建页面布局_第8张图片

你可能感兴趣的:(SSM项目---员工管理系统)