文档章节

使用Boostrap,左侧菜单栏固定宽度,右侧自适应宽度。

Asktao
 Asktao
发布于 2016/04/05 15:57
字数 499
阅读 4173
收藏 9

1、方法one

思路概要:

  1. 创建CSS自定义工具类,如ml-220p:margin-left:220px;
  2. 使用JS绑定元素,控制相应元素增加和删除自定义的CSS工具类,达到预期视觉效果。
  3. 不足之处是不够极客,完全可以用CSS控制的样式,需要JS来操作,多了一道手续,略显繁琐。

HTML部分:

<div class="container-fluid p-0 m-0">
    <div id="home_header" class="fixed-top ml-220p">
        <a class="btn btn-sm btn-primary" id="sidebar_toggle">收缩按钮</a>
        头部
    </div>
    <div id="home_sidebar" class="float-left position-fixed vh-100 bg-dark w-220p">
        <div id="sidebar_logo" class="text-center lh-50p bg-dark border-bottom border-primary text-white">这里是一个图标</div>
        <div id="sidebar_logo_mini" class="text-center lh-50p bg-dark border-bottom border-primary text-white d-none">图标</div>
    </div>
    <div id="home_body" class="row float-left mt-50p ml-220p">
       <div class="col-12">
           12312312312312312
       </div>
    </div>
    <div id="home_footer"></div>
</div>

CSS部分:

#home_header{
    height:50px;
    line-height: 50px;
    background: #97b99e;
    z-index: 1000;
}

#home_sidebar{
    z-index: 1001;
}
.ml-60p{margin-left: 60px}
.ml-220p{margin-left: 220px}
.w-60p{width: 60px;}
.w-220p{width: 220px;}
.mt-50p{margin-top: 50px;}
.lh-50p{height: 50px;line-height: 50px;}

JS部分

let home_base_script = function(){

    let initSidebarToggle = function () {
        //侧边栏收缩切换器
        $("#sidebar_toggle").click(function () {
            //动画效果 animate 有空再添加。
            $("#home_header").toggleClass("ml-220p").toggleClass("ml-60p"); // 头部缩进
            $("#home_body").toggleClass("ml-220p").toggleClass("ml-60p");   // 主体缩进
            $("#home_sidebar").toggleClass("w-220p").toggleClass("w-60p");  // 侧边栏缩进
            $("#sidebar_logo").toggleClass("d-none");       // 侧边栏logo缩进
            $("#sidebar_logo_mini").toggleClass("d-none");  // 侧边栏login缩进
        })
    };

    return {
        init:function () {
            initSidebarToggle()
        }
    }
}();

$(document).ready(function () {
    home_base_script.init()
});

2.2 细节说明:

就是JS,控制增加删除自定义CSS类,控制侧边栏缩进,和右侧主体body缩进,来实现的。但是随着时间的前进。我感觉非常不舒服。希望能更多由CSS自身实现。于是有了方法Two。

方法TWO的链接

 

© 著作权归作者所有

Asktao
粉丝 27
博文 98
码字总数 114189
作品 0
丰台
程序员
私信 提问
css布局 - 常规上中下分左右布局的一百种实现方法

一、 上中下左固定 - fixed+margin 概括:如图,此种布局就是顶部、底部和左侧固定不动,只有中间右侧超出可滚动。 html: 1 1 2 关键点: 上下部分就是普通处理,fixed固定布局 position: ...

Eddie_yang
2018/11/15
110
0
关于BFC的一些思考

Question 以下三个div将会会如何放置(margin collapsing)? 同一个BFC中,相邻的块状元素都是垂直放置吗? 如何清除浮动?根据什么原理? 如何对左侧栏200px,主内容自适应进行布局? 如何使...

shanyue
2017/11/29
0
0
圣杯布局进阶版-flex布局实现

内部运营平台常见布局,要求如下 ① 网页的最小宽度为1200px ② 顶部栏始终处于浏览器顶端 ③ 内容模块宽度需要自适应,需要自动铺满左侧栏跟右侧栏留下来的空间 ④ 内容模块高度需要自适应,...

勒了个浪
04/21
0
0
jquery easyUI 哪位大侠用的熟练啊

这里有jquery easyUI的牛人吗?问个很简单的问题 我的版本实1.2.1 layout我用了头,左侧,中间,和底部 四部分,请问为什么中间的 面板不能自适应宽度呢? 如上面两个图,为什么收起左侧菜单...

javacc
2012/09/18
730
3
三种三栏网页宽度自适应布局方法

一、前言 在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和实践经验。本文不讲细节,只讲...

乱世中的单纯
2016/03/14
913
0

没有更多内容

加载失败,请刷新页面

加载更多

Giraph源码分析(八)—— 统计每个SuperStep中参与计算的顶点数目

作者|白松 目的:科研中,需要分析在每次迭代过程中参与计算的顶点数目,来进一步优化系统。比如,在SSSP的compute()方法最后一行,都会把当前顶点voteToHalt,即变为InActive状态。所以每次...

数澜科技
今天
4
0
Xss过滤器(Java)

问题 最近旧的系统,遇到Xss安全问题。这个系统采用用的是spring mvc的maven工程。 解决 maven依赖配置 <properties><easapi.version>2.2.0.0</easapi.version></properties><dependenci......

亚林瓜子
今天
10
0
Navicat 快捷键

操作 结果 ctrl+q 打开查询窗口 ctrl+/ 注释sql语句 ctrl+shift +/ 解除注释 ctrl+r 运行查询窗口的sql语句 ctrl+shift+r 只运行选中的sql语句 F6 打开一个mysql命令行窗口 ctrl+l 删除一行 ...

低至一折起
今天
9
0
Set 和 Map

Set 1:基本概念 类数组对象, 内部元素唯一 let set = new Set([1, 2, 3, 2, 1]); console.log(set); // Set(3){ 1, 2, 3 } [...set]; // [1, 2, 3] 接收数组或迭代器对象 ...

凌兮洛
今天
4
0
PyTorch入门笔记一

张量 引入pytorch,生成一个随机的5x3张量 >>> from __future__ import print_function>>> import torch>>> x = torch.rand(5, 3)>>> print(x)tensor([[0.5555, 0.7301, 0.5655],......

仪山湖
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部