Bootstrap学习笔记——导航条、分页导航

最新推荐文章于 2024-05-14 09:55:02 发布

gengfu_AI

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量3.5k

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/gengfu_php/article/details/78163104

版权

1 导航条

导航条（navbar）比航（nav）复杂很多；导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。

1.1 基础导航条

1、在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”;
2、：在列表外部添加带有类“navbar”和“navbar-default”容器（div）。

<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>

这里写图片描述

备注：
1、“.navbar”样式是设置左右padding和圆角等效果，与颜色样式无关。
2、导航条的颜色都是通过“.navbar-default”来进行控制。
3、navbar-nav样式是在导航.nav的基础上重新调整了菜单项的浮动与内外边距。同时也不包括颜色等样式设置，
4、颜色和其他样式是通过配合父容器“navbar-default”来一起实现。该处源码如下
/源码请查看bootstrap.css文件第3955行～第3974行/

.navbar-default .navbar-nav> li > a {
  color: #777;
}
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-default .navbar-nav> .active > a,
.navbar-default .navbar-nav> .active >a:hover,
.navbar-default .navbar-nav> .active >a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-default .navbar-nav> .disabled > a,
.navbar-default .navbar-nav> .disabled >a:hover,
.navbar-default .navbar-nav> .disabled >a:focus {
  color: #ccc;
  background-color: transparent;
}

1.2 为导航条添加标题、二级菜单及状态

1.2.1 加入导航条标题

通过“navbar-header”和“navbar-brand”来实现在导航条的菜单前添加标题（文字字号比其它文字稍大一些）。

其样式主要是加大了字体设置，并且设置了最大宽度

同样在默认导航条（navbar-default）下，对navbar-brand也做了颜色处理：
/源码请查看bootstrap.css文件第3947行～3951行/

.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}

1.2.2 导航条状态、二级菜单

在基础导航条中对菜单提供了当前状态，禁用状态，悬浮状态等效果，而且也可以带有二级菜单的导航条。

<body>
<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">Bootstrap学习笔记</a>
  　</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
        <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
          </ul>
       </li>
       <li><a href="##">名师介绍</a></li>
       <li><a href="##">成功案例</a></li>
       <li><a href="##">关于我们</a></li>
    </ul>
</div>
 <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>

这里写图片描述

1.3 带表单的导航条

有的导航条中会带有搜索表单。在navbar容器中放置一个带有navbar-form类名的表单即可

<body>
<div class="navbar navbar-default"  role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">网站首页</a></li>
       <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</

最低0.47元/天解锁文章

gengfu_AI

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap学习笔记——导航条、分页导航

1 导航条导航条（navbar）比航（nav）复杂很多；导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。1.1 基础导航条1、在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”; 2、：在列表外部添加带有类“navbar”和“navbar-default”容器（div）。<div
复制链接

扫一扫

专栏目录