Bootstrap实现的经典栅格布局效果实例【附demo源码】_bootstrap页面布局案例

102 浏览量更新于2023-05-06 评论收藏 132KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Bootstrap实现的经典栅格布局效果实例【附实现的经典栅格布局效果实例【附demo源码】源码】

本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考，具体如下：

先来看看效果图：

具体代码如下（某管理系统的Bootstrap实现）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>XXXXX系统</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body {

padding-top: 50px;

padding-bottom: 40px;

color: #5a5a5a;

}

/* 下面是左侧导航栏的代码 */

.sidebar {

position: fixed;

top: 51px;

bottom: 0;

left: 0;

z-index: 1000;

display: block;

padding: 20px;

overflow-x: hidden;

overflow-y: auto;

background-color: #ddd;

border-right: 1px solid #eee;

}

.nav-sidebar {

margin-right: -21px;

margin-bottom: 20px;

margin-left: -20px;

}

.nav-sidebar > li > a {

padding-right: 20px;

padding-left: 20px;

}

.nav-sidebar > .active > a,

.nav-sidebar > .active > a:hover,

.nav-sidebar > .active > a:focus {

color: #fff;

background-color: #428bca;

}

.main {

padding: 20px;

}

.main .page-header {

margin-top: 0;

}

</style>

</head>

<body>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38693419

粉丝: 6
资源: 931

会员权益专享

Bootstrap实现的经典栅格布局效果实例【附demo源码】

评论0

会员权益专享

最新资源

Bootstrap实现的经典栅格布局效果实例【附demo源码】

评论0

bootstrap完整Demo

Bootstrap各种效果展示demo

bootstrap 超好看的后台管理demo

Bootstrap栅格系统：实现网页布局

Bootstrap 3栅格系统详解：实现网站布局的基础

深入理解Bootstrap：栅格系统和布局

Bootstrap的列栅格布局有哪些

bootstrap 3 模态框 栅格布局 DEMO

bootstrap可视化拖拽布局源码

electron如何使用bootstrap实现响应式布局

属于Bootstrap栅格中设置的布局容器类的有什么

vue基于bootstrap实现的在线商城前端整站源码

使用栅格布局、媒体查询控制。

layui的栅格布局可以实现不同高度吗

java实现栅格化布局

利用bootstrap实现悬浮窗口的效果

web前端开发栅格布局

bootstrap4 栅格长度

bootstrap栅格属性高度

bootstrap 栅格系统

会员权益专享

最新资源

bootstrap 3 模态框栅格布局 DEMO