我正在尝试实现以下示例: https://mdbootstrap.com/snippets/jquery/bartek-malanowski/517057
但是,似乎没有加载mdboostrap中的CSS文件:
我导入了mdboostrap CSS和JS链接,并且有一个带有自定义css的自定义css文件,但是它不起作用...能帮我吗? 谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/css/mdb.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/Custom.css">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/js/mdb.min.js"></script>
</head>
<body>
<div class="container"><br/>
<div class="col-lg-8 m-auto d-block">
<!-- Switch -->
<div class="p-5">
<div class="switch switch-info">
<label>
Off
<input type="checkbox">
<span class="lever"></span> On
</label>
</div>
</div>
</div>
</div>
</body>
</html>
还有CSS文件:
/* Switch info */
.switch-info label input[type=checkbox]:checked+.lever {
background-color: #33b5e5;
}
.switch-info label input[type=checkbox]:checked+.lever:after {
background-color: #0099CC;
}
答案 0 :(得分:0)
使用以下代码:-
HTML-
<label class="custom-control custom-checkbox"><span>Grayscale:</span>
<input type="checkbox" id="grayscale" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
CSS-
/*-------------------------------------------------- Custom Check Box -----------------------------------------------------------------------*/
.custom-control-input {
display: none;
}
.custom-checkbox {
min-height: 1rem;
padding-left: 0;
margin-right: 0;
cursor: pointer;
}
.custom-checkbox .custom-control-indicator {
content: "";
display: inline-block;
position: relative;
width: 30px;
height: 10px;
background-color: #818181;
border-radius: 15px;
margin-right: 10px;
-webkit-transition: background .3s ease;
transition: background .3s ease;
vertical-align: middle;
margin: 5px 16px;
box-shadow: none;
float: right;
}
.custom-checkbox .custom-control-indicator:after {
content: "";
position: absolute;
display: inline-block;
width: 18px;
height: 18px;
background-color: #f1f1f1;
border-radius: 21px;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -2px;
top: -4px;
-webkit-transition: left .3s ease, background .3s ease, box-shadow .1s ease;
transition: left .3s ease, background .3s ease, box-shadow .1s ease;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
background-color: #f57727;
background-image: none;
box-shadow: none !important;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator:after {
background-color: #f57727;
left: 15px;
}
.custom-checkbox .custom-control-input:focus ~ .custom-control-indicator {
box-shadow: none !important;
}