• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Bootstrap4 导航

Data: 2015-04-27 09:47:38Form: JournalClick: 10

# 导航

# 一、导航条

<ul>
    <li>
        <a>首页</a>
    </li>
    <li>
        <a>网站配置</a>
    </li>
    <li>
        <a>个人中心</a>
    </li>
</ul>

# 1、基本导航

  • nav 导航样式
  • nav-link 导航 a 链接样式，边距
  • disabled 禁用
  • href="#" 会有鼠标效果
<ul class="nav">
    <li>
        <a class="nav-link" href="#">首页</a>
    </li>
    <li>
        <a class="nav-link" href="#">网站配置</a>
    </li>
    <li>
        <a class="nav-link" href="#">个人中心</a>
    </li>
    <li>
        <a class="nav-link disabled">禁用</a>
    </li>
</ul>

# 2、对齐方式

  • justify-content-center 居中
  • justify-content-end 右对齐
<ul class="nav justify-content-center"></ul>
<ul class="nav justify-content-end"></ul>

# 3、垂直导航

  • flex-column
<ul class="nav flex-column"></ul>

# 4、选项卡

  • nav-tabs
<ul class="nav nav-tabs"></ul>
<ul class="nav nav-tabs">
    <li>
        <a class="nav-link active">首页</a>
    </li>
</ul>
  • active 在选项卡 和 胶囊导航 下才有效果

# 5、胶囊导航

  • nav-pills
<ul class="nav nav-pills"></ul>
<ul class="nav nav-pills">
    <li>
        <a class="nav-link active">首页</a>
    </li>
</ul>

# 6、导航宽度

  • nav-justified 等宽元素
  • nav-fill 完整可用宽度，如果字少，会给一些给其他的字
  • nav-item 在 nav-fill 样式中，它才有效果，设置宽度一样，并且居中
<ul class="nav nav-justified">
    <li class="nav-item">
        <a class="nav-link active">首页</a>
        <!-- <a class="nav-link active">首页首页</a> -->
    </li>
    <li>
        <a class="nav-link">网站配置</a>
    </li>
    <li class="nav-item">
        <a class="nav-link">个人中心</a>
    </li>
</ul>
<ul class="nav nav-justified nav-tabs"></ul>
<ul class="nav nav-justified nav-pills"></ul>

<ul class="nav nav-fill">
    <li class="nav-item">
        <a class="nav-link active">首页</a>
    </li>
    <li>
        <a class="nav-link">网站配置</a>
    </li>
    <li class="nav-item">
        <a class="nav-link">个人中心</a>
    </li>
</ul>
<ul class="nav nav-fill nav-tabs"></ul>
<ul class="nav nav-fill nav-pills"></ul>

# 7、下拉菜单

  • dropdown 设置 css：position: relative; 相对定位
  • dropdown-toggle 倒三角
  • data-toggle="dropdown" 属性，下拉 js 效果
  • dropdown-menu 下拉菜单样式
  • dropdown-item 下拉菜单元素
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">编程课程</a>
    <div class="dropdown-menu">
        <a class="dropdown-item">前端</a>
        <a class="dropdown-item">后端</a>
        <a class="dropdown-item">服务器</a>
    </div>
</li>
<!-- 胶囊下拉菜单 -->
<ul class="nav nav-pills"></ul>
<!-- 选项卡下拉菜单 -->
<ul class="nav nav-tabs"></ul>

# 8、动态切换

  • 在 a 标签上增加属性 data-toggle="tab"
<!-- 胶囊 -->
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab">首页</a>
    </li>
</ul>
<!-- 选项卡 -->
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab">首页</a>
    </li>
</ul>

# 9、JavaScript 示例

  • tabbar 效果，切换
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home">首页</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#config">网站配置</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#user">个人中心</a>
    </li>
</ul>
<div class="tab-content">
    <div id="home" class="container tab-pane active">
        <h3>首页</h3>
        <p>这是php中文网 首页</p>
    </div>
    <div id="config" class="container tab-pane">
        <h3>网站配置</h3>
        <p>这是php中文网 配置页</p>
    </div>
    <div id="user" class="container tab-pane">
        <h3>个人中心</h3>
        <p>这是php中文网 个人中心页</p>
    </div>
</div>

<ul class="nav nav-tabs"></ul>

# 10、列表 JavaScript 示例

  • div 也可以做 tabbar 切换效果
<div class="list-group">
    <a class="list-group-item list-group-item-action active" data-toggle="list" href="#list-home">首页</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#list-profile">网站配置</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#list-messages">个人中心</a>
</div>

<div class="tab-content">
    <div class="tab-pane fade show active" id="list-home">这是php中文网 首页</div>
    <div class="tab-pane fade" id="list-profile">这是php中文网 配置页</div>
    <div class="tab-pane fade" id="list-messages">这是php中文网 个人中心页</div>
</div>

# 二、Navbar 导航栏

# 1、navbar-brand 导航栏

  • navbar 导航栏样式
  • navbar-light 黑字，它自己没有样式，它是设置了它下面的(.navbar-nav .nav-link)文本、a 标签之类的样式
  • navbar-dark 白字
  • bg-light 设置了背景色
  • navbar-brand 导航栏 logo
<nav class="navbar navbar-light bg-light">
    <!-- 用a标签可以跳转，不想跳转可以用span -->
    <a class="navbar-brand" href="3.html">ouyangke</a>

    <span class="navbar-brand">ouyangke</span>

    <!-- 也可以使用logo -->
    <a class="navbar-brand" href="3.html">
        <img src="https://img.php.cn/upload/avatar/000/000/038/608672e86e92c486.jpg" width="30" height="30" />
    </a>
    <a class="navbar-brand" href="3.html">
        <img src="http://www.ouyangke.cn/img/logo.jpg" />
    </a>

    <!-- 也可以使用logo + 文字 -->
    <a class="navbar-brand" href="3.html">
        <img src="https://img.php.cn/upload/avatar/000/000/038/608672e86e92c486.jpg" width="30" height="30" />ouyangke
    </a>
</nav>

# 2、导航栏

  • navbar-nav 导航栏 导航
  • nav-item 导航栏 导航成员
  • nav-link 导航栏 链接，黑字体，内边距
  • active 导航栏 导航 选中状态
  • navbar-expand 设置一行显示，没有这个就是 垂直导航栏
<nav class="navbar navbar-expand navbar-light bg-light">
    <a class="navbar-brand" href="#">logo</a>
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">首页
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>