我正在使用官方引导程序文档中的代码创建一个简单的复选框:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
我想知道如何使该复选框大于当前的复选框?我尝试编辑customCheck
的css并更改height和width属性,但这不会增加框的大小。
答案 0 :(得分:16)
我为引导程序开关添加了*-sm, *-md, *-lg, *-xl
之类的类。
在这里,我用一个@mixin进行了所有分辨率的切换(@mixin与JS函数非常相似,但它不返回任何内容)。
custom-switch-sm, custom-switch-md, custom-switch-lg, custom-switch-xl
SCSS: https://codepen.io/nisharg/pen/VwLbYvv
CSS: https://codepen.io/nisharg/pen/mdJmywW
实时片段(CSS)
/* for sm */
.custom-switch.custom-switch-sm .custom-control-label {
padding-left: 1rem;
padding-bottom: 1rem;
}
.custom-switch.custom-switch-sm .custom-control-label::before {
height: 1rem;
width: calc(1rem + 0.75rem);
border-radius: 2rem;
}
.custom-switch.custom-switch-sm .custom-control-label::after {
width: calc(1rem - 4px);
height: calc(1rem - 4px);
border-radius: calc(1rem - (1rem / 2));
}
.custom-switch.custom-switch-sm .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(1rem - 0.25rem));
}
/* for md */
.custom-switch.custom-switch-md .custom-control-label {
padding-left: 2rem;
padding-bottom: 1.5rem;
}
.custom-switch.custom-switch-md .custom-control-label::before {
height: 1.5rem;
width: calc(2rem + 0.75rem);
border-radius: 3rem;
}
.custom-switch.custom-switch-md .custom-control-label::after {
width: calc(1.5rem - 4px);
height: calc(1.5rem - 4px);
border-radius: calc(2rem - (1.5rem / 2));
}
.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(1.5rem - 0.25rem));
}
/* for lg */
.custom-switch.custom-switch-lg .custom-control-label {
padding-left: 3rem;
padding-bottom: 2rem;
}
.custom-switch.custom-switch-lg .custom-control-label::before {
height: 2rem;
width: calc(3rem + 0.75rem);
border-radius: 4rem;
}
.custom-switch.custom-switch-lg .custom-control-label::after {
width: calc(2rem - 4px);
height: calc(2rem - 4px);
border-radius: calc(3rem - (2rem / 2));
}
.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(2rem - 0.25rem));
}
/* for xl */
.custom-switch.custom-switch-xl .custom-control-label {
padding-left: 4rem;
padding-bottom: 2.5rem;
}
.custom-switch.custom-switch-xl .custom-control-label::before {
height: 2.5rem;
width: calc(4rem + 0.75rem);
border-radius: 5rem;
}
.custom-switch.custom-switch-xl .custom-control-label::after {
width: calc(2.5rem - 4px);
height: calc(2.5rem - 4px);
border-radius: calc(4rem - (2.5rem / 2));
}
.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(2.5rem - 0.25rem));
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="custom-control custom-switch custom-switch-sm">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Default Unchcked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-sm">
<input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
<label class="custom-control-label" for="customSwitch2">Default Checked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-md">
<input type="checkbox" class="custom-control-input" id="customSwitch3">
<label class="custom-control-label" for="customSwitch3">Default Unchcked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-md">
<input type="checkbox" class="custom-control-input" id="customSwitch4" checked>
<label class="custom-control-label" for="customSwitch4">Default Checked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-lg">
<input type="checkbox" class="custom-control-input" id="customSwitch5">
<label class="custom-control-label" for="customSwitch5">Default Unchcked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-lg">
<input type="checkbox" class="custom-control-input" id="customSwitch6" checked>
<label class="custom-control-label" for="customSwitch6">Default Checked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-xl">
<input type="checkbox" class="custom-control-input" id="customSwitch7">
<label class="custom-control-label" for="customSwitch7">Default Unchcked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-xl">
<input type="checkbox" class="custom-control-input" id="customSwitch8" checked>
<label class="custom-control-label" for="customSwitch8">Default Checked Switch</label>
</div>
form-switch-sm, form-switch-md, form-switch-lg, form-switch-xl
SCSS :https://codepen.io/nisharg/pen/gOPLOYY
CSS :https://codepen.io/nisharg/pen/ExPNxYE
实时片段(CSS)
.form-check-input {
clear: left;
}
.form-switch.form-switch-sm {
margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}
.form-switch.form-switch-sm .form-check-input {
height: 1rem;
width: calc(1rem + 0.75rem);
border-radius: 2rem;
}
.form-switch.form-switch-md {
margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}
.form-switch.form-switch-md .form-check-input {
height: 1.5rem;
width: calc(2rem + 0.75rem);
border-radius: 3rem;
}
.form-switch.form-switch-lg {
margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}
.form-switch.form-switch-lg .form-check-input {
height: 2rem;
width: calc(3rem + 0.75rem);
border-radius: 4rem;
}
.form-switch.form-switch-xl {
margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}
.form-switch.form-switch-xl .form-check-input {
height: 2.5rem;
width: calc(4rem + 0.75rem);
border-radius: 5rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
<div class="form-check form-switch form-switch-sm">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-sm">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-md">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-md">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
答案 1 :(得分:4)
最好拥有自己的文件,并为开关的尺寸更改css变量:
@import "bootstrap/scss/_functions.scss";
@import "bootstrap/scss/_variables.scss";
$custom-control-indicator-size: 1.5rem;
$custom-switch-width: $custom-control-indicator-size * 1.75;
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2;
$custom-switch-indicator-size: subtract(
$custom-control-indicator-size,
$custom-control-indicator-border-width * 4
);
@import "bootstrap/scss/bootstrap";
答案 2 :(得分:2)
此类.custom-switch-adaptive
将使开关适应文本大小并在其中包含标签文本。
P.S。 A similar feature will be added in Bootstrap v5
SCSS
.custom-switch.custom-switch-adaptive {
padding-left: 0;
.custom-control-label {
padding: 0 1.5em;
position: relative;
border-radius: 1em;
line-height: 1.4em;
color: $text-muted;
border: 1px solid $text-muted;
background-color: $light;
transition: background-color 200ms;
&::before {
content: none;
}
&::after {
position: absolute;
height: 1em;
top: 0.2em;
left: 0.2em;
width: 1em;
border-radius: 1em;
transition: left 200ms;
}
}
.custom-control-input:checked ~ .custom-control-label {
color: $white;
background-color: $success;
border-color: $success;
&::after {
background-color: $white;
left: calc(100% - 1.2em);
transform: none;
-webkit-transform: none;
}
}
}
HTML
<div class="form-group h1">
<div class="custom-control custom-switch custom-switch-adaptive">
<input id="test4" type="checkbox" class="custom-control-input">
<label for="test4" class="custom-control-label">h1 text size</label>
</div>
</div>
答案 3 :(得分:1)
更改引导程序组件尺寸不是一个好主意,您应该更改引导程序中的变量,但这意味着重新编译库。 无论如何,您可以通过这种方式完成:
.custom-control-label::before ,.custom-control-label::after{width:20px; height:20px}
答案 4 :(得分:1)
我没有足够的声誉来评论Munkh-Erdene Zorigbold。他的答案非常完美。通过添加以下css行,只需覆盖自定义开关的translateX
功能即可。这样“打开和关闭”按钮将一直移动到您的新宽度。
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(1.5rem);
}
答案 5 :(得分:1)
我重新设计了 Nisharg Shah 的 css,这样 Text 现在可以很好地与 Bootstrap V5 示例的开关对齐。
因此,我查看了 Bootstrap 5 css 源,并增加了所有与大小有关的属性:padding-left
、hight
、margin-left
、width
和 {{1} }.
我认为结果看起来更好,并且与默认的开关外观样式保持一致。
CSS 和 HTML:
padding-top
.form-switch.form-switch-md {
padding-left: 4.5em;
height: 2.5em;
}
.form-switch.form-switch-md .form-check-input {
margin-left: -4.5em;
height: 2em;
width: 4em;
}
.form-switch.form-switch-md .form-check-label {
padding-top: 0.5em;
}
.form-switch.form-switch-lg {
padding-left: 8.5em;
height: 4.5em;
}
.form-switch.form-switch-lg .form-check-input {
margin-left: -8.5em;
height: 4em;
width: 8em;
}
.form-switch.form-switch-lg .form-check-label {
padding-top: 1.5em;
}
答案 6 :(得分:0)
由于您正在尝试通过引导程序来完成它,因此它很容易。
首先使用btn-group-toggle
添加一个div容器以使用组中的按钮(即,如果需要的话)。
在标签中添加p-3
或p-5
类,以根据您的喜好扩展
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary p-3">
<input type="checkbox" id="customCheck" name="example1"> Check this custom checkbox
</label>
</div>
答案 7 :(得分:0)
这是使用自定义CSS的有效示例
.custom-checkbox-lg .custom-control-label::before,
.custom-checkbox-lg .custom-control-label::after {
width: 2rem;
height: 2rem;
}
.custom-checkbox-lg .custom-control-label {
margin: .5rem 1rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" name="example1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-checkbox custom-checkbox-lg">
<input type="checkbox" class="custom-control-input" id="customCheck2" name="example1">
<label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
</div>
答案 8 :(得分:0)
您可以尝试以下方式:
.custom-control-label::before,
.custom-control-label::after {
width: 2.25rem !important;
height: 2.25rem !important;
margin: 1rem;
}
.custom-control-label{
margin: 1.5rem 2rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
答案 9 :(得分:0)
在引导程序4中,如果您要更改或增加自定义开关(iOS上的漂亮开关),则应深入到引导程序的css文件,并更改其 custom-switch 尺寸的大小 。 html代码如下:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="switchA" name="switch">
<label class="custom-control-label" for="switchA">Custom checkbox</label>
</div>
在boostrap.css(4.3.1版且未压缩的版本)文件中,您应该找到 自定义开关 类,并在其中更改以下参数 下面。您必须 删除所有我添加的评论 。
.custom-switch {
padding-left: 2.25rem;
padding-bottom: 1rem; // added for positioning
}
.custom-control-label { // added for alignment with the switch
padding-top: 0.5rem;
padding-left: 2rem;
padding-bottom: 0.1rem;
}
.custom-switch .custom-control-label::before {
left: -2.25rem;
height: 2rem;
width: 3.5rem; // it was 1.75rem before. Sliding way is longer than before.
pointer-events: all;
border-radius: 1rem;
}
.custom-switch .custom-control-label::after {
top: calc(0.25rem + 2px);
left: calc(-2.25rem + 2px);
width: calc(2rem - 4px); // it was calc(1rem - 4px) before. Oval is bigger before.
height: calc(2rem - 4px); // it was calc(1rem - 4px) before. Oval is bigger than before.
background-color: #adb5bd;
border-radius: 2rem; // it was 0.5rem before. Oval is bigger than before.
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.custom-switch .custom-control-label::after {
transition: none;
}
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
background-color: #fff;
-webkit-transform: translateX(1.5rem); //translateX(0.75rem);
transform: translateX(1.5rem); //translateX(0.75rem);
}
将这些代码复制到Bootstrap文件后,您必须删除所有内容 我输入了评论。否则,它不会增加大小。我希望你喜欢 您现在可以进行更大的漂亮切换。