• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> bootstrap教程 >> 导航条组件navbar是网站制作导航页头响应式基础组件

导航条组件navbar是网站制作导航页头响应式基础组件

• 作者：创新互联 文章来源：网站设计部 点击数： 更新时间：2016-03-23

• Bootstrap导航条是网站中作为导航页头的响应式基础组件。

  //navbar-default基本格式

  <nav class="navbar navbar-default">
  	...
  </nav>
  

  //navbar-inverse反色调导航

  <nav class="navbar navbar-inverse">
  	...
  </nav>
  

  //基本导航条navbar，包含标题navbar-header和列表navbar-nav

  <nav class="navbar navbar-default">
  	<div class="container">
  		<div class="navbar-header">
  			<a href="#" class="navbar-brand">标题</a>
  		</div>
  		<ul class="nav navbar-nav">
  			<li class="active"><a href="#">首页</a></li>
  			<li><a href="#">资讯</a></li>
  			<li class="disabled"><a href="#">产品</a></li>
  			<li><a href="#">关于</a></li>
  		</ul>
  	</div>
  </nav>
  

  //navbar-form导航条中使用表单

  <form action="" class="navbar-form navbar-left">
  	<div class="input-group">
  		<input type="text" class="form-control">
  		<span class="input-group-btn">
  			<button type="submit" class="btn btn-default">提交</button>
  		</span>
  	</div>
  </form>
  
  

  //navbar-btn导航中使用按钮

  <button class="btn btn-default navbar-btn">按钮</button>
  

  //navbar导航中使用对齐方式，left 和right

  <button class="btn btn-default navbar-btn navbar-right">按钮</button>
  

  //navbar-text导航中使用一段文本

  <p class="navbar-text">我是一段文本</p>
  

  //navbar-link非导航链接，一般需要置入文本区域内

  <a href="#" class="navbar-link">非导航链接</a>
  

  //navbar-fixed-top将导航固定在顶部，下面的内容会自动上移

  <nav class="navbar navbar-default navbar-fixed-top">
  

  //navbar-fixed-bottom 将导航固定在底部

  <nav class="navbar navbar-default navbar-fixed-bottom">
  

  //navbar-static-top 静态导航，和页面等宽的导航条，去掉了圆角

  <nav class="navbar navbar-default navbar-static-top">
  

• bootstrap路径组件也叫面包屑导航breadcrumb :上一篇
  bootstrap输入框input组件加文字或按钮 :下一篇