如何在Bootstrap中显示黑色导航栏
每个网站都会使用导航栏，使其更加方便用户使用，从而使网站的导航变得容易，用户可以直接搜索他们感兴趣的主题。有以下两种方法来显示黑色导航栏。
使用 .navbar-dark和.bg-dark类：Bootstrap的 .navbar-dark类使navbar中的文本白色，.bg-dark类使navbar类的背景颜色黑色。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Geeksforgeeks</a> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Course</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Job Portal</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/> <button class="btn btn-light my-2 my-sm-0" type="submit"> Search </button> </form> </div> </nav> </body> </html>
输出:
输出
使用style属性设置背景色：我们可以使用<nav>标签的style属性来设置navbar的背景色。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: black" > <a class="navbar-brand" href="#">Geeksforgeeks</a> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Course</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Job Portal</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/> <button class="btn btn-light my-2 my-sm-0" type="submit"> Search </button> </form> </div> </nav> </body> </html>
输出:
版权声明:本页面内容旨在传播知识，为用户自行发布，若有侵权等问题请及时与本网联系，我们将第一时间处理。E-mail:284563525@qq.com
