BootstrapBootstrap 导航栏

导航栏是一个很好的功用,是 Bootstrap
网站的一个突出特征。导航栏在您的利用或网站中作为导航页头的响应式基础零部件。导航栏在活动装备的视图中是折叠的,随着可用视口宽度的增多,导航栏也会水平举行。在
Bootstrap 导航栏的骨干中,导航栏包括了站点名称和核心的导航定义样式。

默认的导航栏

始建一个默认的导航栏的手续如下:

  • 向 <nav> 标签添加 class .navbar、.navbar-default
  • 向下边的要素添加 role=”navigation”,有助于增添可访问性。
  • 向 <div> 元素添加一个题名
    class .navbar-header,内部含有了含有 class navbar-brand 的
    <a> 元素。这会让文本看起来更大一号。
  • 为了指引航栏添加链接,只需要简单地加上富含
    class .nav、.navbar-nav 的无系列表即可。

响应式的导航栏

为了给导航栏添加响应式特性,您要折叠的内容必须包裹在含蓄
class .collapse、.navbar-collapse 的 <div>
中。折叠起来的导航栏实际上是一个暗含 class .navbar-toggle 及多少个data- 元素的按钮。第一个是 data-toggle,用于告诉 JavaScript
需要对按钮做咋样,第二个是 data-target,指示要切换来哪一个因素。多少个包含
class .icon-bar 的 <span>
创设所谓的亚特兰大按钮。这些会切换为 .nav-collapse <div>
中的元素。为了促成上述这一个效率,您必须带有 Bootstrap
折叠(Collapse)插件

导航栏中的表单

导航栏中的表单不是选用 Bootstrap
表单
 章节中所讲到的默认的
class,它是应用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的作为。使用对齐模式选项(这将在组件对齐情势部分举行详细讲解)来支配导航栏中的内容放置在什么地方。

组成图标的导航链接

如果您想在健康的导航栏导航组件内接纳图标,那么请使用 class glyphicon
glyphicon-*
 来设置图标,更多请查看 Bootstrap
图标 
,如下边的实例所示:

 

 

相关文章