bootstrap自适应顶部下拉导航菜单暗黑模式切换效果代码-html代码-BFW代码库

bootstrap自适应顶部下拉导航菜单暗黑模式切换效果代码

代码语言：html

代码描述：bootstrap自适应顶部下拉导航菜单暗黑模式切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
      @import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');
	body {
	font-family:'Poppins',sans-serif;
	font-size:16px;
	line-height:24px;
	font-weight:400;
	color:#212112;
	background-image:url('');
	background-position:center;
	background-repeat:repeat;
	background-size:7%;
	background-color:#fff;
	overflow-x:hidden;
	transition:all 200ms linear
}
::selection {
	color:#fff;
	background-color:#8167a9
}
::-moz-selection {
	color:#fff;
	background-color:#8167a9
}
.start-header {
	opacity:1;
	transform:translateY(0);
	padding:20px 0;
	box-shadow:0 10px 30px 0 rgba(138,155,165,0.15);
	-webkit-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.start-header.scroll-on {
	box-shadow:0 5px 10px 0 rgba(138,155,165,0.15);
	padding:10px 0;
	-webkit-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.start-header.scroll-on .navbar-brand img {
	height:24px;
	-webkit-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.navigation-wrap {
	position:fixed;
	width:100%;
	top:0;
	left:0;
	z-index:1000;
	-webkit-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.navbar {
	padding:0
}
.navbar-brand img {
	height:28px;
	width:auto;
	display:block;
	filter:brightness(10%);
	-webkit-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.navbar-toggler {
	float:right;
	border:0;
	padding-right:0
}
.navbar-toggler:active,.navbar-toggler:focus {
	outline:0
}
.navbar-light .navbar-toggler-icon {
	width:24px;
	height:17px;
	background-image:none;
	position:relative;
	border-bottom:1px solid #000;
	transition:all 300ms linear
}
.navbar-light .navbar-toggler-icon:after,.navbar-light .navbar-toggler-icon:before {
	width:24px;
	position:absolute;
	height:1px;
	background-color:#000;
	top:0;
	left:0;
	content:'';
	z-index:2;
	transition:all 300ms linear
}
.navbar-light .navbar-toggler-icon:after {
	top:8px
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
	transform:rotate(45deg)
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
	transform:translateY(8px) rotate(-45deg)
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	border-color:transparent
}
.nav-link {
	color:#212121!important;
	font-weight:500;
	transition:all 200ms linear
}
.nav-item:hover .nav-link {
	color:#8167a9!important
}
.nav-item.active .nav-link {
	color:#777!important
}
.nav-link {
	positio.........完整代码请登录后点击上方下载按钮下载查看