初识Bootstrap,左侧菜单栏的制作

前言

  最近,有个简易的任务需要做个后台管理系统,没有现成的页面模板,只能亲自动手。
有两个方案:

  1. 用别人写好的后台模板页面拿来改的,修改复杂程度高,同时任务需求也很简单,用了别人的模板更容易束缚自己。
  2. 想着Bootstrap前端框架的强大,不如利用这次任务的机会初识Bootstrap,简易制后台页面,满足任务需求。
    显然,跟着Bootstrap中文网的实例很快就做出想要的页面效果。
    特别推荐:更多Bootstrap主题[点击查看]

文件引入

  1. css引入:
    最好,为了统一规范项目css文件,创建css文件夹用于存放相关css文件。
    另外,其它一些style存放在main.css中(外部css文件引入)。
  2. js引入:
    同样,为了统一规范项目js文件,创建js文件夹用于存放相关js文件。
  3. 文件引入:
    1
    2
    3
    4
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

页脚设置

将footer固定在页面底部的实现方法:

  • HTML结构:

    1
    2
    3
    <body>
    <footer>footer</footer>
    </body>
  • CSS设置:

    1
    2
    /* 动态为footer添加类fixed-bottom */
    .fixed-bottom {position: fixed;bottom: 0;width:100%;}
  • js代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $(function(){
    function footerPosition(){
    $("footer").removeClass("fixed-bottom");
    var contentHeight = document.body.scrollHeight,//网页正文全文高度
    winHeight = window.innerHeight;//可视窗口高度,不包括浏览器顶部工具栏
    if(!(contentHeight > winHeight)){
    //当网页正文高度小于可视窗口高度时,为footer添加类fixed-bottom
    $("footer").addClass("fixed-bottom");
    } else {
    $("footer").removeClass("fixed-bottom");
    }
    }
    footerPosition();
    $(window).resize(footerPosition);
    });

最终效果

  [点击查看]

评论