Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

时间:2021-07-08 21:39:33

代码:

<div class='container-fluid'>
<h2 class='page-header'>导航</h2>
<!--
    .navrbar navbar-fixed-top:导航固定显示在顶部,对应的navbar-fixed-bottom:导航固定显示在页面底部
    .brand:提示文字或者主题
    .active:激活选中
    .navbar-search:导航搜索
    搜索表单:
         <form class='navbar-search'>
<input type='text' placeholder='输入搜索内容' class='search-query' />
</form>
    .nav pull-right:在导航右边
    .nav pull-right:显示一个分割线
   -->
<div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<a class='brand' href='#'>Bootstrap</a>
<ul class='nav'>
<li class='active'><a href='javascript:;'>首页</a></li>
<li><a href='javascript:;'>新闻</a></li>
<li><a href='javascript:;'>军事</a></li>
<li><a href='javascript:;'>体育</a></li>
</ul>
<form class='navbar-search'>
<input type='text' placeholder='输入搜索内容' class='search-query' />
</form>
<ul class='nav pull-right'>
<li><a href='javascript:;'>登录</a></li>
<li class='divider-vertical'></li>
<li><a href='javascript:;'>注册</a></li>
</ul>
</div>
</div>
</div>
</div> <!--这行代码用来演示高度的变化不会改变导航的位置-->
<div style='height:1800px'></div>
<!--这行代码用来演示高度的变化不会改变导航的位置-->

说明:

.navrbar navbar-fixed-top:导航固定显示在顶部,对应的navbar-fixed-bottom:导航固定显示在页面底部
.brand:提示文字或者主题
.active:激活选中
.navbar-search:导航搜索
搜索表单:
         <form class='navbar-search'>
<input type='text' placeholder='输入搜索内容' class='search-query' />
</form>
.nav pull-right:在导航右边
.nav pull-right:显示一个分割线
如图:

Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

-----------------------------------------------------------------------------------------------------------------------------------------------------

导航菜单的响应式设计

代码如下

<div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<!--
①给这个导航菜单添加一个按钮,当浏览器窗口小于某个值时(940px)按钮自动代替.nav-collapse类包围的元素显示出来
②按钮中要添加2个属性 1、data-toggle='collapse' data-target='.nav-collapse'(指向这个类名)
③三组 <span class='icon-bar'></span> 组成一个三道杠的按钮
-->
<a href='javascript:;' class='btn btn-navbar' data-toggle='collapse' data-target='.nav-collapse'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</a>
<a class='brand' href='#'>Bootstrap</a>
<!--
.nav-collapse:表示当浏览器窗口小于某个值时(940px),被这个类包围的元素会隐藏起来
-->
<div class='nav-collapse'>
<ul class='nav'>
<li class='active'><a href='javascript:;'>首页</a></li>
<li><a href='javascript:;'>新闻</a></li>
<li><a href='javascript:;'>军事</a></li>
<li><a href='javascript:;'>体育</a></li>
</ul>
<form class='navbar-search'>
<input type='text' placeholder='输入搜索内容' class='search-query input-medium' />
</form>
<ul class='nav pull-right'>
<li><a href='javascript:;'>登录</a></li>
<li class='divider-vertical'></li>
<li><a href='javascript:;'>注册</a></li>
</ul>
</div>
</div>
</div>
</div>

如图:

Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

完成了响应式的布局

-----------------------------------------------------------------------------------------------------------------------------------------------------

导航菜单中的下拉列表

我们给上面制作的导航条中的“体育”栏目增加下拉列表

代码:

<div class='container-fluid'>
<h2 class='page-header'>导航</h2> <div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<a href='javascript:;' class='btn btn-navbar' data-toggle='collapse' data-target='.nav-collapse'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</a>
<a class='brand' href='#'>Bootstrap</a>
<div class='nav-collapse'>
<ul class='nav'>
<li class='active'><a href='javascript:;'>首页</a></li>
<li><a href='javascript:;'>新闻</a></li>
<li><a href='javascript:;'>军事</a></li>
<li class='dropdown'><a class='dropdown-toggle' data-toggle='dropdown' href='javascript:;'>体育 <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='#'>足球赛事</a></li>
<li><a href='#'>NBA</a></li>
<li><a href='#'>网球公开赛</a></li>
</ul>
</li>
</ul>
<form class='navbar-search'>
<input type='text' placeholder='输入搜索内容' class='search-query input-medium' />
</form>
<ul class='nav pull-right'>
<li><a href='javascript:;'>登录</a></li>
<li class='divider-vertical'></li>
<li><a href='javascript:;'>注册</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>

如图:

Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单