Bootstrap导航栏

当前位置 : 首页 > 网页制作 > CSS > Bootstrap导航栏

Bootstrap导航栏

来源: 作者: 时间:2016-01-28 09:27
导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。默认的导航栏1、向

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

默认的导航栏

1、向
2、向上面的元素添加 role="navigation",有助于增加可访问性。
3、向
元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand

\


响应式的导航栏

1、将要折叠的内容包含在带有class .collapse和.navbar-collspae的
中。
2、折叠起来的导航栏是带有class .navbar-toggle以及data-toggle和data-target两个属性的按钮,data-toggle用于告诉javascript
需要对按钮做什么,此处是折叠:collapse,data-target用于指示折叠哪个元素,此处是1中的导航菜单,data-target的属性值是要
指定的元素的id。
3、button中使用带有class .icon-bar的创建所谓的汉堡按钮(就是按钮中多了几个横线)




当屏幕的宽度大于等于768px时,显示与默认的导航栏相同,而屏幕宽度小于768px时,显示效果如下:
\

注意:data-target的属性值其实是: #+id,如果只写成id,点击折叠按钮是没有任何反应的,另外,需要引入折叠插件,或者因为

bootstrap.min.js和jquery.js

导航栏中的表单

导航中的form表单,需要使用class navbar-form,这确保了表单垂直对齐和在较窄的视口中的折叠行为。使用对齐方式选型来决定

导航栏的内容放置在哪里,此处使用了navbar-right,居于右侧(如果使用navbar-left那么就会居于左侧,默认是左侧)。



    

\


导航栏中的按钮

不在
中的

\

导航栏中的文本

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


    

\

非导航链接

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


    
    

固定到顶部

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

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


    
    

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

\


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

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

反色的导航栏

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


    
    


Tag:
网友评论

<