bootstrap响应式导航条示例

最新推荐文章于 2023-05-02 20:57:02 发布

追涨杀跌的小韭菜

最新推荐文章于 2023-05-02 20:57:02 发布

阅读量383

点赞数

分类专栏：前端小案例 bootstrap 文章标签： bootstrap 响应式导航条

本文链接：https://blog.csdn.net/qq_32054169/article/details/83537656

版权

前端小案例同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

bootstrap

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>

  <link href="./css/bootstrap.css" rel="stylesheet">
  <script src="./js/html5shiv.min.js"></script>
  <script src="./js/respond.min.js"></script>
  <style>
    body{
      /*margin-top:50px;*/
      margin-bottom:50px;
    }
  </style>
</head>
<body>
<!--导航条包含容器,而不是反过来-->
<div class="navbar navbar-default">
  <div class="container">
    <!--第一部分:导航条头部(品牌+汉堡包)-->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstrap</a>
      <a class="navbar-toggle" data-toggle="collapse" href="#mymenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </div>
    <!--第二部分:导航条折叠部分-->
    <div id="mymenu" class="navbar-collapse collapse">
      <!--导航条中的导航-->
      <ul class="nav navbar-nav">
        <li><a href="">起步</a></li>
        <li><a href="">全局Css样式</a></li>
        <li><a href="">组件</a></li>
        <li><a href="">插件</a></li>
      </ul>
      <!--导航条中的导航-->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="">注册</a></li>
        <li><a href="">登录</a></li>
      </ul>
      <!--导航条中的表单-->
      <form class="navbar-form navbar-right" action="">
        <div class="form-group"></div>
        <label class="sr-only" for="kw">搜索关键字:</label>
        <input class="form-control" type="text" id="kw" placeholder="请输入搜索关键字">
      </form>
    </div>
  </div>
</div>
<!--固定定位在底部的导航条-->
<div class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container">
    <div class="navbar-header">
      <!--注意:若logo不是文字而是图片,需要自己控制margin-->
      <a class="navbar-brand" href="#">
        <img src="./img/tlogo.png" style="margin:-15px;" alt="">
      </a>
      <a href="#" class="navbar-toggle">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </div>
    <div class="navbar-collapse" ></div>
  </div>
</div>
<div class="container">
  <h3>bootstrap第三部分:组件---响应式导航条</h3>
</div>


<script src="./js/jquery-1.11.3.js"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>

追涨杀跌的小韭菜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap响应式导航条示例

&lt;!DOCTYPE html&gt;&lt;html lang="zh-cn"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name=&
复制链接

扫一扫

专栏目录