位置:电子教程 > Bootstrap4教程 推荐学习资源
Bootstrap4入门
Bootstrap4 网格系统
Bootstrap4 文字排版
Bootstrap4 颜色
Bootstrap4 表格
Bootstrap4 图像形状
Bootstrap4 Jumbotron 超大屏幕
Bootstrap4 信息提示框
Bootstrap4 按钮
Bootstrap4 按钮组 .btn-group 类
Bootstrap4 徽章(Badges)
Bootstrap4 进度条
Bootstrap4 分页
Bootstrap4 列表组
Bootstrap4 卡片
Bootstrap4 下拉菜单
Bootstrap4 折叠
Bootstrap4 导航
Bootstrap4 面包屑导航(Breadcrumb)
Bootstrap4 导航栏
Bootstrap4 表单
Bootstrap4 表单控件
Bootstrap4 输入框组
Bootstrap4 自定义表单
Bootstrap4 轮播
Bootstrap4 模态框
Bootstrap4 提示框
Bootstrap4 弹出框
Bootstrap 滚动监听(Scrollspy)
当前阅读教程:Bootstrap4教程 > 不同颜色导航栏
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 垂直导航栏 下一篇: 品牌/Logo

可以使用以下类来创建不同颜色导航栏:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark .bg-light)

提示: 对于暗色背景需要设置文本颜色为浅色的,对于浅色背景需要设置文本颜色为深色的。

实例

<!-- 灰底黑字 -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul>
    <li class="nav-item active">
      <a href="#">Active</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<!-- 黑底白字 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
 
<!-- 蓝底白字 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例(小白教程网 2d5.net)</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div>
  <h3>不同颜色导航栏</h3>
  <p>对于暗色背景需要设置文本颜色为浅色的,对于浅色背景需要设置文本颜色为深色的。</p>
</div>
 
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul>
    <li class="nav-item active">
      <a href="#">Active</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <ul>
    <li class="nav-item active">
      <a href="#">Active</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul>
    <li class="nav-item active">
      <a href="#">Active</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  <ul>
    <li class="nav-item active">
      <a href="#">Active</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
  <ul>
    <li class="nav-item active">
      <a href="#">Active</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
  <ul>
    <li class="nav-item active">
      <a href="#">Active</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
  <ul>
    <li class="nav-item active">
      <a href="#">Active</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
  <ul>
    <li class="nav-item active">
      <a href="#">Active</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
</body>
</html>

效果图

小白教程网www.2d5.net

image.png

image.png

激活和禁用状态: 可以在 <a> 元素上添加 .active 类来高亮显示选中的选项。 .disabled 类用于设置该链接是不可点击的。



上一篇: 垂直导航栏 下一篇: 品牌/Logo
QQ交流群:147415688             广告联系QQ:45157718(微信同号)