<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">

<title>导航加入下拉菜单</title>

<link rel="stylesheet" href="css/bootstrap.css">

<script src="js/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>

</head>

<body>

    <ul class="nav nav-tabs">

        <li><a href="#">首页</a></li>

        <li><a href="#">首页</a></li>

        <li><a href="#">首页</a></li>

        <li><a href="#">首页</a></li>

        <li><a href="#">首页</a></li>

        <li class="dropdown">

            <a href="#" data-toggle="dropdown">更多&nbsp;<span class="caret"></span></a>

                <ul class="dropdown-menu">

                    <li><a href="#">超清</a></li>

                    <li><a href="#">超清</a></li>

                    <li><a href="#">超清</a></li>

                </ul>

        </li>

    </ul>

<body>

</html>

示例图：

bootstrap：导航下拉菜单的更多相关文章

  1. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  2. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  3. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  4. bootstrap多级下拉菜单

    只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...

  5. bootstrap的下拉菜单组件与导航条

    前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...

  6. bootstrap悬停下拉菜单显示

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...

  7. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  8. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

  9. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

随机推荐

  1. 各种浏览器的兼容css

    http://blog.csdn.net/wyx100/article/details/50450728 1.Mozilla内核[css]元素选择器{-moz-transition:运动的样式 持续时 ...

  2. html设计时 img与元素存在间距的处理

    在学习开发笔书奇小说网站时,遇到一下问题 问题点: 在初始化CSS中设置了img的padding和margin为0,可是在插入img后,img与父元素仍然有一定间距. 原因分析: 文字图片等inlin ...

  3. jieba gensim 相似度实现

    博客引自:https://www.cnblogs.com//DragonFire/p/9220523.html 简单的问答已经实现了,那么问题也跟着出现了,我不能确定问题一定是"你叫什么名字 ...

  4. Python __call__详解

    可以调用的对象 关于 __call__ 方法,不得不先提到一个概念,就是可调用对象(callable),我们平时自定义的函数.内置函数和类都属于可调用对象,但凡是可以把一对括号()应用到某个对象身上都 ...

  5. pytorch lstm crf 代码理解

    好久没有写博客了,这一次就将最近看的pytorch 教程中的lstm+crf的一些心得与困惑记录下来. 原文 PyTorch Tutorials 参考了很多其他大神的博客,https://blog.c ...

  6. ABSD 基于架构的软件设计方法方法简介（摘抄）

    ABSD(Architecture-Based Software Design)基于架构的软件设计方法 有三个基础: 第一个基础是功能分解.在功能分解中,ABSD方法使用已有的基于模块的内聚和耦合技术 ...

  7. Vue之webpack的安装与配置及其简单应用

    一.文件结构 二.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. python基础十四之匿名函数

    匿名函数 处理简单问题的简化函数,关键字lambda. # 格式:函数名 = lambda 参数:返回值 anonymity = lambda s: s ** 0.5 print(anonymity( ...

  9. HDU 6709“Fishing Master”（贪心+优先级队列）

    传送门 •参考资料 [1]:2019CCPC网络选拔赛 H.Fishing Master(思维+贪心) •题意 池塘里有 n 条鱼,捕捉一条鱼需要花费固定的 k 时间: 你有一个锅,每次只能煮一条鱼, ...

  10. 原生PHP实现Mysql数据分页功能

    一. 思路整理 实现一个数据分页功能,需要有数据的总条数,每页展示的条数,和当前在第几页这三个参数 通过⌈总条数/每页展示的条数⌉可以得到总页数,比如某留言板有101条留言,每页展示10条,一那就需要 ...