<!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. vue 开发系列(十) VUE 作用域插槽

    使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...

  2. chrony服务配置

    chrony软件使用说明 chrony简介 chrony是一个开源的自由软件,它能保持系统时钟与时间服务器(ntp)同步,让时间保持精确. 它由两个程序组成:chrongd和chronyc. chro ...

  3. Mysqldump一次备份多个指定数据库

    今天碰到了,就作个记录. mysqldump -u user -p --databases DB1 DB2 --single-transaction --master-data=2 --default ...

  4. IDEA结合Maven的profile构建不同开发环境（SpringBoot）

    一.概述 在开发过程中,我们的项目会存在不同的开发环境,比如开发环境.生产环境.测试环境,而我们的项目在不同的环境中有些配置也是不一样的,比如数据源配置.日志文件配置等,假如我们每次将软件部署到不同的 ...

  5. 代码审计-extract变量覆盖

    <?php $flag='xxx'; extract($_GET); if(isset($shiyan)) { $content=trim(file_get_contents($flag)); ...

  6. zz深度学习论文合集大全

        Pull requestsIssues Marketplace Explore             Learn Git and GitHub without any code! Using ...

  7. 前端Vue项目——登录页面实现

    一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...

  8. MySQL实战45讲学习笔记：第九讲

    一.今日内容概要 今天的正文开始前,我要特意感谢一下评论区几位留下高质量留言的同学.用户名是 @某.人 的同学,对文章的知识点做了梳理,然后提了关于事务可见性的问题,就是先启动但是后提交的事务,对数据 ...

  9. [LeetCode] 27. Remove Element 移除元素

    Given an array nums and a value val, remove all instances of that value in-place and return the new ...

  10. C实现简单的xml格式文件

    今天在工作中遇到了一个需要处理xml格式的字符串,需求是修改某个固定的value值,并且还要把这个xml的key和value按照原本的格式在推送回去. 如果使用库,就显得太臃肿了,就想写个简单的dem ...