#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Я пытаюсь создать кнопку переключения, используя bootstrap версии 4.3. Я связал CSS с HTML-файлом, и все css работают, за исключением кнопки переключения, которую я пытаюсь использовать.
Я видел несколько реализованных проектов и использовал их в своем шаблоне, но они, классы, не работают. Я проверил и не смог найти класс в bootstrap.min.css. Я не могу выяснить, почему класс отсутствует в css, который я включил. Я загрузил javascript и CSS с www.getbootstrap.com
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.4.0.min.js" type="text/javascript"></script>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/myscript.js" type="text/javascript"></script>
<title>IOT</title>
</head>
<body>
<div class="container">
<label class="switch switch-pill switch-label switch-primary">
<input type="checkbox" class="switch-input" checked>
<span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<!-- footer end here -->
</div>
</body>
</html> Комментарии:
1. Вам не нужен дополнительный CSS или что-либо еще. Коммутаторы поставлялись в версии Boostrap v.4.2.0 . Вы уверены, что у вас правильная версия bootstrap (v.4.2.0 или выше)? Вам также нужен класс пользовательского переключателя, см. #switches
Ответ №1:
Сначала вам нужно указать CSS explicity для включения переключателя
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked .slider {
background-color: #2196F3;
}
input:focus .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</body>
</html>
Попробуйте это один раз
Ответ №2:
Вы не включили полные библиотеки JS и CSS. Я попытался включить ниже в <head> тег, и кнопка переключения сработала.
Я думаю, вы используете не только Bootstrap, но и классы для Core-UI, которые должны быть включены.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A rW L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.min.js"></script>
Комментарии:
1. Он включил ее, он размещает ее сам или так кажется, я думаю, что это связано с его версией Bootstrap.
2. Он использует CSS core-ui. Итак, я думаю, это нужно исправить
3. Это не имеет к этому никакого отношения. Смотрите этот JSFiddle , я включил Core-UI и Bootstrap 4.3.1, он работает прямо из коробки.
4. ДА. это то, о чем я говорю. Я уже делал то же самое, что и раньше 🙂
Ответ №3:
Try this!
**HTML**
<form>
<div class="custom-control custom-switch">
<input type="checkbox" checked data-toggle="toggle" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1"></label>
</div>
</form>
**CSS**
.custom-control-label {
position: relative;
margin-bottom: 0;
vertical-align: top;
}
.custom-control-input {
position: absolute;
z-index: -1;
opacity: 0;
}
.custom-switch {
padding-left: 2.25rem;
}
.custom-control {
position: relative;
display: block;
min-height: 1.5rem;
padding-left: 1.5rem;
}
.custom-control-input:checked~.custom-control-label::before {
color: #fff;
border-color: #0b55c1;
background-color: #0b55c1;
}
.custom-switch .custom-control-label::before {
left: -2.25rem;
width: 1.75rem;
pointer-events: all;
border-radius: .5rem;
}
.custom-control-label::before, .custom-file-label, .custom-select {
transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.custom-control-label::before {
position: absolute;
top: .25rem;
left: -1.5rem;
display: block;
width: 1rem;
height: 1rem;
pointer-events: none;
content: "";
background-color: #fff;
border: #adb5bd solid 1px;
}
.custom-switch .custom-control-input:checked~.custom-control-label::after {
background-color: #fff;
-webkit-transform: translateX(.75rem);
transform: translateX(.75rem);
}
.custom-switch .custom-control-label::after {
top: calc(.25rem 2px);
left: calc(-2.25rem 2px);
width: calc(1rem - 4px);
height: calc(1rem - 4px);
background-color: #adb5bd;
border-radius: .5rem;
transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
}
.custom-control-label::after {
position: absolute;
top: .25rem;
left: -1.5rem;
display: block;
width: 1rem;
height: 1rem;
content: "";
background: no-repeat 50%/50% 50%;
}