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

前端
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);
    });

最终效果

  [点击查看]

评论