专栏首页sktjbootstrap 常用导航栏 页脚 常用**

bootstrap 常用导航栏 页脚 常用**

image.png

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">管理后台</a> </div>

    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> 用户管理</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-lock"></span> 管理员</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-list"></span> 栏目设置</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-cog"></span> 网站设置</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#">
                    <span class="glyphicon glyphicon-envelop"></span> Alexander
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="glyphicon glyphicon-log-out"></span> 退出
                </a>
            </li>
        </ul>
    </div>

</div>

</div>

<div class="container body-content"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-4"> 侧边栏 </div> <div class="col-lg-9 col-md-9 col-sm-8"> 内容区域 </div> </div>


<footer class="navbar navbar-fixed-bottom text-center bg-primary"> <p>© AlexanderZhao </p> </footer> </div> </body> </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap 登陆注册 常用样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 非...

    用户5760343
  • flask 使用bootstrap

    ----------------------------------index.html------------------------------ {% e...

    用户5760343
  • bootstrap 菜单

    <span class="glyphicon glyphicon-home"></span> Home

    用户5760343
  • 游戏开发7天快速入门-第2天GUI图形用户界面和游戏对象详解

    本教程致力于程序员可以利用unity技术快速学习和入门游戏开发。一方面通过自己的总结希望可以帮助更多热衷与游戏开发或者编程技术开发的同仁。另一方面可以总结自己所...

    做全栈攻城狮
  • 谈谈ES6语法(汇总中篇)

    数组扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一个数组转为用空格分隔的参数序列。

    嘉明
  • No Code革命为什么现在爆发?

    No-code 软件貌似正在爆发:市场推广迅速,融资规模庞大,公司估值惊人(甚至出现独角兽企业),客户也心满意足。为什么是现在?为什么不是 20 年前?为什么不...

    深度学习与Python
  • Bootstrap响应式前端框架笔记十——导航栏相关组件

        Bootstrap中提供的导航栏分为两种模式,使用nav-tabs类可以创建页卡模式的导航栏,使用nav-pills类可以创建胶囊模式的导航栏,示例如下...

    珲少
  • 如何在部署中和部署后降低私有云成本?

    无论是使用OpenStack、Azure Stack,或其他私有云平台,IT专业人员都可以 做出一些硬件和调优决策来节约成本。 ? 私有云的成本管理是企业面临的...

    静一
  • 2020年11月3日 星期二 工作日志 github登陆不了了,晕

    因为我之前改过很多Add按钮相关的css,怀疑是cache原因,所以清除了Chrome的cache:

    Jerry Wang
  • 系统架构师论文-论软件产品线技术(-国防科技重点实验室)

    根据“十五"国防科技重点实验室一 “机载X XPD火控雷达性能开发与评估实验室"的建设需求。我所在的中国X集团公司X所电子対抗研究部组织了用于该实验室目标产生、...

    cwl_java

扫码关注云+社区

领取腾讯云代金券