<!DOCTYPE html>

<html>

   <head>

      <meta charset="utf-8">

      <title>Admin后台</title>

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- 引入 Bootstrap -->

      <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

      <style>

        body {

            padding-top: 50px;

            padding-bottom: 20px;

        }

        .body-content {

            margin-top:20px;

            padding-left: 15px;

            padding-right: 15px;

        }

      </style>

      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->

      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->

      <!--[if lt IE 9]>

         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

      <![endif]-->

   </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>

      <hr>

      <footer class="navbar navbar-fixed-bottom text-center bg-primary">

        <p>© AlexanderZhao </p>

      </footer>

    </div>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->

      <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

      <!-- 包括所有已编译的插件 -->

      <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </body>

</html>

　　

Bootstrap导航栏示例的更多相关文章

  1. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  2. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  3. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  4. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  5. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  6. html 小米商城导航栏示例

    1.小米导航栏示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  7. eclipse Maven Bootstrap 导航栏

    1.在pom.xml添加两个依赖 Bootstrap 依赖和jQuery依赖 代码如下 <!-- https://mvnrepository.com/artifact/org.webjars/b ...

  8. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  9. Bootstrap导航栏

    导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...

随机推荐

  1. Transformer模型---encoder

    一.简介 论文链接:<Attention is all you need> 由google团队在2017年发表于NIPS,Transformer 是一种新的.基于 attention 机制 ...

  2. py2,py3区别 ,基础网络常识,多线程,

    1.编译型:把代码编译成机器码,计算机找虚拟机执行代码,机器码交给计算技巧去运行 :C语言,java c# 解释型:边解释边执行 5.只有列表才能reverse 字符串需要索引[::-1] 6.py2 ...

  3. Vue-router路由传参的三种方式

    本文简单介绍下三种路由传参: (1)在路由中配置 { path : ‘/home/:id’, name : ‘Dome’, component } 然后写调用的时候 this.$router.push ...

  4. mybatis多对多关联查询

    多对多关系 一个学生可以选多门课程,而一门课程可以由多个学生选择,这就是一个典型的多对多关联关系.所谓多对多关系,其实是由两个互反的一对多关系组成.即多对多关系都会通过一个中间表来建立,例如选课表.学 ...

  5. VirtualBox + vagrant 使用虚拟机

    1.VirtualBox下载地址 https://www.virtualbox.org/wiki/Downloads 2.vagrant下载地址 https://www.vagrantup.com/d ...

  6. python 并行处理数据

    来源:https://blog.csdn.net/weixin_42001089/article/details/88843152 import multiprocessing import time ...

  7. Pyppeteer

    pyppeteer模块的基本使用 引言 Selenium 在被使用的时候有个麻烦事,就是环境的相关配置,得安装好相关浏览器,比如 Chrome.Firefox 等等,然后还要到官方网站去下载对应的驱动 ...

  8. c++的CreateFile导致内存不能为written错误

    LPCWSTR szFileName; szFileName=argv[2]; //LPCWSTR szFileName=L"test.txt";//文件名字可以根据自己的需要修改 ...

  9. [LeetCode] 490. The Maze 迷宫

    There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...

  10. 如何编写一个Systemd Service(转)

    转自 https://segmentfault.com/a/1190000014740871 0x01 什么是Systemd Service Systemd 服务是一种以 .service 结尾的单元 ...