一系列Bootstrap导航条使用方法计划分享.docx

一系列Bootstrap导航条使用方法计区分享
一系列Bootstrap导航条使用方法计区分享
1/7
一系列Bootstrap导航条使用方法计区分享
这篇文章主要为大家整理了一系列Bootstrap导航条使用方法,分享给大家,感兴一系列Bootstrap导航条使用方法计区分享
一系列Bootstrap导航条使用方法计区分享
1/7
一系列Bootstrap导航条使用方法计区分享
这篇文章主要为大家整理了一系列Bootstrap导航条使用方法,分享给大家,感兴趣的
小伙伴们能够参照一下
本文包含了Bootstrap导航条基础使用方法,供大家参照,详细内容以下
1、Bootstrap基础导航样式
Bootstrap框架中制作导航条主要经过“.nav”样式。默认的“.nav”样式不供应默认的
导航样式,必定附加其他一个样式才会有效,比方“nav-tabs”、“nav-pills”之类。比方右侧
代码编写器中就有一个tab导航条的例子,

nav-tabs
一系列Bootstrap导航条使用方法计区分享
一系列Bootstrap导航条使用方法计区分享
7/7
一系列Bootstrap导航条使用方法计区分享
<ulclass="navnav-tabs">
 <li><ahref="##">Home</a></li> <li><ahref="##">CSS3</a></li> <li><ahref="##">Sass</a></li> <li><ahref="##">jQuery</a></li> <li><ahref="##">Responsive</a></li></ul>
2、Bootstrap基础导航条
在制作一个基础导航条时,主要分以下几步:
第一步:第一在制作导航的列表(<ulclass=”nav”>)基础上增添类名“navbar-nav”
第二步:在列表外面增添一个容器(div),而且使用类名“navbar”和“navbar-default”
“.navbar”样式的主要功能就是设置左右padding和圆角等收效,但他和颜色有关的样式没有进行任何的设置
<divclass="navbarnavbar-default"role="navigation">
 <ulclass="navnavbar-nav">
 <liclass="active"><ahref="##">
网站首页</a></li>
 <li><ahref="##">
系列教程</a></li>
 <li><ahref="##">
名师介绍</a></li>
&n