响应式前端框架Bootstrap系列(9)导航条与导航栏

导航条,是网页设计中不可缺少的部分,它是指通过一定的技术手段,为网站的访问者提供一定的途径,使其可以方便地访问到所需的内容,是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。导航栏则是指除了导航条外,还可能有搜索、登录和注册等功能块,常位于网页中的最顶部。

导航条

bs提供的导航条有两种:标签式和胶囊式。标签式导航条用.nav .nav-tabs样式表示,胶囊式用.nav .nav-pills表示,用active表示选中。当胶囊式导航条加上nav-stacked样式,则显示为垂直布局。若需要导航条两端对齐时,可添加样式nav-justified即可。演示代码:

标签式导航条


胶囊式的导航条


垂直式胶囊式的导航条

效果图:

响应式前端框架Bootstrap系列(9)导航条与导航栏_第1张图片

下面是一段带下拉列的导航条演示代码:

带下拉列式胶囊式的导航条

效果图:

响应式前端框架Bootstrap系列(9)导航条与导航栏_第2张图片
导航条还可以实现类似于route功能的效果,演示代码:


	

首页

API

本地下载

高速下载

效果图:

响应式前端框架Bootstrap系列(9)导航条与导航栏_第3张图片
(注)show.bs.tab,该事件在标签页显示时触发,但是必须在新标签页被显示之前。

(注)shown.bs.tab,该事件在标签页显示时触发,但是必须在某个标签页已经显示之后。

bs还提供了一种面包屑导航,类似于“主页面/副页面/内容”的显示方式,使用breadcrumb样式即可,演示代码:

效果图:

响应式前端框架Bootstrap系列(9)导航条与导航栏_第4张图片

导航栏

bs提供的导航栏,通常把元素包含在

你可能感兴趣的:(bootstrap3,前端集合)