您现在的位置:首页 >> 前端 >> 内容

Bootstrap导航栏

时间:2016/1/11 9:18:44 点击:

  核心提示:导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。默认的导航栏1、向标签添加 class ...

导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。

默认的导航栏

1、向

Bootstrap导航栏

导航栏中的文本

使用 class .navbar-text,确保适当的前导和颜色。



    

Bootstrap导航栏

非导航链接

使用 class navbar-link 为默认的和倒转的导航栏选项添加适当的颜色,因为默认的a标签的样式可能与导航栏的样式不协调



    
    


固定到顶部

如果想要让导航栏固定在页面的顶部,向 .navbar class 添加 class .navbar-fixed-top。为了防止导航栏与页面主体中的其他内容

的顶部相交错,需要向 标签添加内边距,内边距的值至少是导航栏的高度。


    
    


为了能够看出效果,此处添加了两个有背景色的p。

Bootstrap导航栏


固定到底部,只需要把class .navbar-fixed-top换成.navbar-fixed-bottom即可,不需要在body中添加内边距。

对于给nav添加 .navbar-static-top class,实在是没有看出有什么作用,开始以为是能够创建一个浮动的导航条的。

反色的导航栏

.navbar class 添加 .navbar-inverse class,创建一个带有黑色背景白色文本的导航栏


    
    


Bootstrap导航栏

Tags:BO OO OT TS 
作者:网络 来源:Yvette Lau