以下是我的代码,我用css写了一个侧边栏,当引入bootstrap后侧边栏会变得模糊不清,我该如何解决覆盖样式的问题?
前端代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>主界面</title>
{% load static %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css'%}">
<link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css'%}">
<link rel="stylesheet" href="{% static 'plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css'%}">
<link rel="stylesheet" href="{% static 'css/style.css'%}">
<!-- Box icons CSS -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<i class='bx bx-book-alt'></i>
<span class="logo_name">图书管理系统</span>
</div>
<ul class="nav-links">
<li>
<a href=" ">
<i class='bx bx-grid-alt'></i>
<span class="link_name">主页</span>
</a >
<ul class="sub-menu blank">
<li><a class="link_name" href="#">菜单</a ></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-collection'></i>
<span class="link_name">菜单</span>
</a >
<i class="bx bxs-chevron-down arrow"></i>
</div>
<ul class="sub-menu">
<li><a href="#" class="link_name">菜单</a ></li>
<li><a href="#">Web Design</a ></li>
<li><a href="#">Card Design</a ></li>
<li><a href="#">Login Form</a ></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href=" ">
<i class='bx bx-book-alt'></i>
<span class="link_name">图书管理</span>
</a >
<i class="bx bxs-chevron-down arrow"></i>
</div>
<ul class="sub-menu">
<li><a href="#" class="link_name">工具</a ></li>
<li><a href="#">HTML&CSS</a ></li>
<li><a href="#">Boot Strap</a ></li>
<li><a href="#">Java Script</a ></li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2'></i>
<span class="link_name">图表</span>
</a >
<ul class="sub-menu blank">
<li><a href="#" class="link_name">数据</a ></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-plug'></i>
<span class="link_name">借阅记录</span>
</a >
<i class="bx bxs-chevron-down arrow"></i>
</div>
<ul class="sub-menu">
<li><a href="#" class="link_name">插件</a ></li>
<li><a href="#">UI Face</a ></li>
<li><a href="#">Pigments</a ></li>
<li><a href="#">Box Icons</a ></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href=" ">
<i class='bx bx-plug'></i>
<span class="link_name">系统管理</span>
</a >
<i class="bx bxs-chevron-down arrow"></i>
</div>
<ul class="sub-menu">
<li><a href="#" class="link_name">插件</a ></li>
<li><a href="#">UI Face</a ></li>
<li><a href="#">Pigments</a ></li>
<li><a href="#">Box Icons</a ></li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-history'></i>
<span class="link_name">历史</span>
</a >
<ul class="sub-menu blank">
<li><a href="#" class="link_name">历史</a ></li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="link_name">设置</span>
</a >
<ul class="sub-menu blank">
<li><a href="#" class="link_name">设置</a ></li>
</ul>
</li>
<li>
<div class="profile-details">
<div class="profile-content">
< img src="/static/img/1.jpg" alt="profile">
</div>
<div class="name-job">
<div class="profile_name">Yi朵小红花</div>
<div class="job">清纯男大</div>
</div>
<i class="bx bx-log-out"></i>
</div>
</li>
</ul>
</div>
<section class="home-section">
<div class="home-content">
<i class='bx bx-menu'></i>
</div>
</section>
<script>
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement;
arrowParent.classList.toggle("showMenu");
});
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
console.log(sidebarBtn);
sidebarBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("close");
});
</script>
<script src="{% static 'js/jquery-3.5.1/jquery-3.5.1.min.js'%}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js'%}"></script>
<script src="{% static 'plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js'%}"></script>
<script src="{% static 'plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js'%}"></script>
<script src="{% static 'js/echarts-5.4.1/dist/echarts.js'%}"></script>
</body>
</html>
css样式
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: #11101d;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.close{
width: 78px;
}
.sidebar .logo-details{
height: 60px;
width: 100%;
display: flex;
align-items: center;
}
.sidebar .logo-details i{
font-size: 30px;
color: #fff;
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
}
.sidebar .logo-details .logo_name{
font-size: 22px;
color: #fff;
font-weight: 600;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.sidebar.close .logo-details .logo_name{
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links{
height: 100%;
padding: 30px 0 150px 0;
overflow: auto;
}
.sidebar.close .nav-links{
overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
display: none;
}
.sidebar .nav-links li{
position: relative;
list-style: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li:hover{
background: #1d1b31;
}
.sidebar .nav-links li .iocn-link{
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar.close .nav-links li .iocn-link{
display: block
}
.sidebar .nav-links li i{
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow{
transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow{
display: none;
}
.sidebar .nav-links li a{
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar .nav-links li a .link_name{
font-size: 18px;
font-weight: 400;
color: #fff;
transition: all 0.4s ease;
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: #1d1b31;
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
}
.sidebar .nav-links li .sub-menu a{
color: #fff;
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover{
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu{
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank{
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details{
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
background: #1d1b31;
padding: 6px 0;
transition: all 0.5s ease;
}
.sidebar.close .profile-details{
background: none;
}
.sidebar.close .profile-details{
width: 78px;
}
.sidebar .profile-details .profile-content{
display: flex;
align-items: center;
}
.sidebar .profile-details img{
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: #1d1b31;
transition: all 0.5s ease;
}
.sidebar.close .profile-details img{
padding: 10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job{
color: #fff;
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
display: none;
}
.sidebar .profile-details .job{
font-size: 12px;
}
.home-section{
position: relative;
background: white;
height: 100vh;
left: 260px;
width: calc(100% - 260px);
transition: all 0.5s ease;
}
.sidebar.close ~ .home-section{
left: 78px;
width: calc(100% - 78px);
}
.home-section .home-content{
height: 60px;
display: flex;
align-items: center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text{
color: #11101d;
font-size: 35px;
}
.home-section .home-content .bx-menu{
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text{
font-size: 26px;
font-weight: 600;
}
引入bootstrap前
引入bootstrap后