关于bootstrap的导航栏

以下是bootstrap的导航栏

<div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">主页</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</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 class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul></li>
                    </ul>

其中关键的就是

<ul class="nav navbar-nav navbar-right">
                         <!-- 设置它的导航栏 -->
                        <li><a href="#" id="username" class="dropdown-toggle"
                            data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">【注册】</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">个人信息</a></li>
                                <li><a href="#">修改密码</a></li>
                                <li><a href="#">设置背景</a></li>
                            </ul></li>
                        
                        <li><a href="/meetings/login">【退出】</a></li>
                    </ul>
              ul里面有li

这个是需要特别注意的

您可以切换下拉菜单(Dropdown)插件的隐藏内容:

通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,如下所示:

<div class="dropdown">
  <a data-toggle="dropdown" href="#">下拉菜单(Dropdown)触发器</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

  </ul>
时间: 2024-10-11 06:35:58

关于bootstrap的导航栏的相关文章

【Bootstrap】导航栏navbar在PC上的缺陷与解决方案

在Bootstrap的官网上,提供了一种导航栏的组件: 只要在站点文件夹放好JQ与Bootstrap输入如下代码, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

BootStrap 实现导航栏nav透明,nav子元素文字不透明

在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性.此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0.0. 此情况可通过 一行代码完美解决:初始化nav时 加入 .navbar-transparent 例: <nav class="navbar navbar-fixed-top navbar-transparent" role="navigation"> 注

Bootstrap 侧边栏 导航栏

http://blog.csdn.net/shangmingchao/article/details/49763351 实测效果图: 原文地址:https://www.cnblogs.com/yangsirc/p/8513744.html

Bootstrap导航栏

Bootstrap中导航栏在应用和网站中作为导航页头的响应式基础组件.导航栏在移动设备视图中是折叠的,随着设备可用视口宽度的增加,导航栏也会水平展开.在Bootstrap中导航栏包含了基本的预定义类和钩子. 一.基本导航栏 创建一个默认导航栏的步骤如下: <nav>元素中添加.navbar .navbar-default; <nav>元素中添加role="navigation",增加可访问性: 向 <div> 元素添加一个标题 .navbar-hea

Bootstrap&lt;基础十七&gt;导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助

【CSS】扁平化,支持IE6的含有方块超级链接的导航栏与含有支持IE8的下拉菜单的导航栏

上次在<[Bootstrap]导航栏navbar在IE8上的缺陷与解决方案>(点击打开链接)给大家推荐过导航栏怎么写, 这次不用任何框架,纯手写CSS,原生态,方便各位改写!请笑纳. 一.首先是含有方块超级链接的导航栏,如下图: 这个东西个人觉得拼接在一些灰色巨幕下面做首页的导航栏不错 或者放在一些标签页上面也是可以的 代码如下: <div style="width:70%; text-align:center; margin-left:auto; margin-right:a

Bootstrap入门Demo——制作路径导航栏

今天在在群里聊天的时候看到一只程序员发了一张用Bootstrap做的界面,感觉挺好看,然后去官网看了下组件,发现都挺漂亮的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源码看了看. 一,源码文件简介 下载完源码之后,我们肯定是想着先把源码中的Demo先运行下看看,但是,看着这么多英文的东西还是很迷茫,所以,从整体上熟悉下都有什么东西还是很有必要的. 二,如何引入的问题 现在很多UI框架都是基于Jquery的,所以,在使用之前,如果需要,一定要先引入jquery文件,然后

Bootstrap基础4(导航栏与下拉列表)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Bootstr

Bootstrap历练实例:响应式导航栏

响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素.三个带有 class .icon-bar 的 <span> 创建所谓的汉