Bootstrap系列 -- 40. 导航条二级菜单

  在导航条中添加二级菜单也非常简单

<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
       <a href="##" class="navbar-brand">导航条</a>
   </div>
    <ul class="nav navbar-nav">
         <li class="active"><a href="##">网站首页</a></li>
        <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
          </ul>
       </li>
       <li><a href="##">名师介绍</a></li>
       <li><a href="##">成功案例</a></li>
       <li><a href="##">关于我们</a></li>
    </ul>
</div>
时间: 2024-12-13 16:08:47

Bootstrap系列 -- 40. 导航条二级菜单的相关文章

Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮navbar-btn 2.导航条中的文本navbar-text 3.导航条中的普通链接navbar-link 但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand.navbar-nav配合起来使用.而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题. <d

Bootstrap系列 -- 39. 导航条添加标题

在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现. <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" c

基于bootstrap实现收缩导航条

<!DocType html> <html> <head> <meta charset="utf-8"> <!--设置浏览器优先使用什么模式来渲染页面--> <!--告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面. --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met

bootstrap 组件之&quot;导航条&quot;

一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">品牌名称</a> </div> </div> <

Bootstrap组件之导航条

.navbar--设置nav元素为导航条组件: .navbar-default--指定导航条组件为默认主题: .navbar-inverse--指定导航条组件为黑色主题: .navbar-fixed-top--设置导航条组件固定在顶部: .navbar-fixed-bottom--设置导航条组件固定在底部: .container-fluid--设置宽度充满父元素,即为100%: .navbar-header--主要指定div元素为导航条组件包裹品牌图标及切换按钮: .navbar-toggle-

水平导航-js二级菜单方法一

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平导航-二级菜单</title> <style type="text/css"> *{ padding:0px; margin: 0px; } .navBar{ height: 30px; background-color:

dedecms织梦导航栏二级菜单的实现方法

dede导航下拉菜单,一级栏目增加二级下拉菜单 使用dedecms5.6——5.7 将这段代码贴到templets\default\head.htm文件里<!-- //二级子类下拉菜单,考虑SEO原因放置于底部  --><script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>{dede:channelartlist typeid='top'

bootstrap响应式导航条规则

1.包裹导航条的最上层分支 推荐使用<nav>标签,如果使用<div>,则一定要加上 role="navigation" 2.导航条一般有一个<div class="navbar-header">和几个<ul class="nav navbar-nav> 后者应有一个直系上层div有.collapse 和.navbar-collapse 和.navbar-responsive-collapse,并且这个div

ecshop简单三部实现导航分类二级菜单

1.在page_header.lbi对应的位置(你想显示导航的位置)插入 (注意下面的"themes/模板名称/util.php"中的"模板名称"改成你模板文件夹的名称) <?php require_once("themes/模板名称/util.php"); ?> <div class="header-menu"> <p {if $navigator_list.config.index eq 1}