Bootstrap系列 -- 38. 基础导航条

简介:   在制作一个基础导航条时,主要分以下几步:   第一步:首先在制作导航的列表()基础上添加类名“navbar-nav”   第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”     “.

 

  在制作一个基础导航条时,主要分以下几步:

  第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

  第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”

 

  “.navbar”样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有进行任何的设置

<div class="navbar navbar-default" role="navigation">
     <ul class="nav navbar-nav">
         <li class="active"><a href="##">网站首页</a></li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名师介绍</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">关于我们</a></li>
     </ul>
</div>

 

相关文章
|
8月前
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
14天前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
|
14天前
|
前端开发
Bootstrap 5 保姆级教程(九):折叠 & 导航
Bootstrap 5 保姆级教程(九):折叠 & 导航
N..
|
2月前
|
开发框架 前端开发 UED
bootstrap导航
bootstrap导航
N..
14 0
|
7月前
|
前端开发 JavaScript 容器
|
3月前
Bootstrap5 导航组件和面包屑
Bootstrap5 导航组件和面包屑
18 0
|
7月前
|
前端开发 JavaScript
|
7月前
|
开发框架 前端开发 JavaScript
Bootstrap01【前端开发框架】家居商城首页之导航&轮播图
Bootstrap01【前端开发框架】家居商城首页之导航&轮播图
|
12月前
|
前端开发
开心档 - 软件开发入门之 Bootstrap4 面包屑导航(Breadcrumb)
面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置,是在用户界面中的一种导航辅助。
|
前端开发
开心档之Bootstrap4 面包屑导航(Breadcrumb)
面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置,是在用户界面中的一种导航辅助。
开心档之Bootstrap4 面包屑导航(Breadcrumb)