浏览 120
分享
Bootstrap 导航条
简介
使用 Bootstrap,您可以创建静态的导航条。在本教程中将教您如何做到这点。
我们将使用一个带有内容的 HTML5 页面,并看看如何添加一个头部导航条。下面是最后的输出结果:
下面是不带任何内容的页面的 HTML5 代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap基本的基于与标签的导航</title> <meta name="description" content="Bootstrap Basic Tab Based Navigation Example"> <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> </head> <body> <!-- 我们将在这创建导航 --> </body> </html>
为了创建包含导航的基本结构,您需要在上面显示的 HTML5 代码中,紧跟着
标签的后边插入下面的代码:<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <!--navigation does here--> </div> </div> </div>
现在,让我们把 替换为下面的代码,用来创建导航的第一个集合。请注意,这里的 "brand" class 以不同的方式呈现,这可以用来呈现您的公司名称或组织名称。
<ul class="nav"> <li class="active"> <a class="brand" href="#">runoob</a> </li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul>
如果需要创建下拉菜单,需要紧跟着在最后一个代码块中显示的 HTML 代码后,插入下面的代码。
<ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Services <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Web Design</a></li> <li><a href="#">Web development</a></li> <li><a href="#">Wordpress Theme development</a></li> </ul> </li> </ul>
但是,由于 Bootstrap 下拉菜单需要用到 JavaScript,所以您需要在 HTML 页面中插入下面两行代码。您可以把它们插入到
评论列表