Bootstrap4导航栏

最新推荐文章于 2024-09-01 09:28:04 发布

Dreamtrue！

最新推荐文章于 2024-09-01 09:28:04 发布

阅读量878

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_46832289/article/details/108632195

版权

这篇博客介绍了Bootstrap4中的导航栏配置，包括标准导航栏的色彩控制、Logo高亮、菜单项设置，以及导航的居中和右对齐方式。此外，还讲解了如何在导航栏中实现下拉菜单，以及导航栏内表单和按钮的排版。最后提到了侧边栏导航的创建，通过.nav和.nav-tabs等类实现不同的视觉效果。

摘要由CSDN通过智能技术生成

（一）标准导航栏

<!DOCTYPE html>
<html>  
<head>   
<meta charset="utf-8">  
<title>Document</title>
<!-- 引入 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。需要在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head> 
<body>
<!--定义一个标准导航栏-->
<nav class="navbar navbar-inverse navbar-expand-sm nav nav-navbar justify-content-center" role="navigation">
<