首页 > 其他分享 >导航条

导航条

时间:2024-06-05 18:13:05浏览次数:22  
标签:Separated Dropdown here else action link 导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .navbar{
            border-radius: 0;
        }
    </style>
</head>
<body>
<div class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">中国移动</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">四川</a></li>
        <li><a href="#">广东</a></li>
        <li><a href="#">上海</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</div>

</body>
</html>

image

标签:Separated,Dropdown,here,else,action,link,导航条
From: https://www.cnblogs.com/cy-xt/p/18233521

相关文章

  • BootStrap入门到实战:BootStrap组件(二)- 输入框组、导航、导航条、路径导航(面包屑效果)
    目录一、输入框组1.基本实例2.尺寸3.作为额外元素的多选框和单选框4.作为额外元素的按钮5.作为额外元素的按钮式下拉菜单6.作为额外元素的分裂式按钮下拉菜单二、导航1.标签页2.胶囊式标签页3.两端对齐的标签页4.禁用的链接5.添加下拉菜单三、导航条......
  • 前端必学-40个精选案例实战-案例8-仿京东导航条触碰下拉效果
    导航条触碰下拉效果(理解鼠标浮动伪类、链接激活伪类)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewpor......
  • 前端必学-40个精选案例实战-案例4-仿B站导航条案例【基础样式】
    交互方式:CSS样式和HTML的交互方式CSS是控制html的,我们需要选中元素再进行控制CSS的常见使用方式分别是行间式、内嵌式与外链式<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE......
  • 成品直播源码推荐,去掉导航条和tabbar线条
    成品直播源码推荐,去掉导航条和tabbar线条去掉导航条底部线条 [self.navigationController.navigationBarsetBackgroundImage:[[UIImagealloc]init]forBarMetrics:UIBarMetricsDefault];  [self.navigationController.navigationBarsetShadowImage:[[UIImagealloc]i......
  • 视频直播app源码,去掉导航条和tabbar线条
    视频直播app源码,去掉导航条和tabbar线条去掉导航条底部线条 [self.navigationController.navigationBarsetBackgroundImage:[[UIImagealloc]init]forBarMetrics:UIBarMetricsDefault];  [self.navigationController.navigationBarsetShadowImage:[[UIImagealloc]in......
  • 直播商城源码,去掉导航条和tabbar线条
    直播商城源码,去掉导航条和tabbar线条去掉导航条底部线条 [self.navigationController.navigationBarsetBackgroundImage:[[UIImagealloc]init]forBarMetrics:UIBarMetricsDefault];  [self.navigationController.navigationBarsetShadowImage:[[UIImagealloc]init]......
  • 直播带货源码,RecyclerView横向导航条目出现
    直播带货源码,RecyclerView横向导航条目出现/** *RecyclerView移动到当前位置, * *@parammanager  设置RecyclerView对应的manager *@parammRecyclerView 当前的RecyclerView *@paramn 要跳转的位置 */publicstaticvoidMoveToPosition(LinearLayoutManager......
  • RN 使用react-navigation写可以滚动的横向导航条(expo项目)
     装包:yarnadd@react-navigation/material-top-tabsreact-native-tab-view npxexpoinstallreact-native-pager-view  importReactfrom'react'import{View,Text,ScrollView,SafeAreaView}from'react-native'import{Icon}from'.......
  • 导航条添加被选中状态
    方法一:在templatetags中的函数添加如下代码1#fromdjango.templateimportLibrary2#fromdjango.confimportsettings3#4#register=Library()5#6#7#@register.inclusion_tag('menu.html')8#defunicom_menu(request):9#role=requ......
  • BBS首页的搭建之导航条and修改密码功能的实现
    目录一、导航条的搭建html页面二、修改密码功能的实现html页面搭建修改密码后端逻辑实现1.session登录装饰器的验证2.阻止事件二次提交,主要针对bottom按钮在form表单中,又绑定了Ajax提交:3.视图函数功能逻辑的实现4.js前端页面的实现三、退出登录功能的实现1.视图函数一、导航条的......