如何为 Bootstrap 中的不同类设置样式切换 4

Question

我正在尝试自定义 Bootstrap 开关，但我不能这样做，因为中间有切换器。

在自定义的时候，我想把switch的宽和高调大，这样大家可以看到不同分辨率下不同的switch，这里我用的是*-sm, *-md, *-lg, *-xl那些类，所以我要类喜欢 custom-switch-sm, custom-switch-md, custom-switch-lg, custom-switch-xl.

我在我的项目中使用 SCSS，但也欢迎 CSS 解决方案。

我试图更改 Bootstrap 开关的整个代码，但它看起来不像原来的那样。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="custom-control custom-switch">
  <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">
  <input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
  <label class="custom-control-label" for="customSwitch2">Default Checked Switch</label>
</div>

Answer 1

.custom-control.material-switch {
  --color: #26a69a;
  padding-left: 0;
}

.custom-control.material-switch .material-switch-control-input {
  display: none;
}

.custom-control.material-switch .material-switch-control-input:checked~.material-switch-control-indicator::after {
  background-color: var(--color);
  left: 17px;
}

.custom-control.material-switch .material-switch-control-indicator {
  display: inline-block;
  position: relative;
  margin: 0 10px;
  top: 4px;
  width: 32px;
  height: 16px;
  background: #ddd;
  border-radius: 16px;
  transition: 0.3s;
}

.custom-control.material-switch .material-switch-control-indicator::after {
  content: '';
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: 0.3s;
  top: -1px;
  left: -1px;
  background: #fdfdfd;
  box-shadow: 0 2px 10px #aaa;
}

.custom-control.ios-switch {
  --color: #4cd964;
  padding-left: 0;
}

.custom-control.ios-switch .ios-switch-control-input {
  display: none;
}

.custom-control.ios-switch .ios-switch-control-input:active~.ios-switch-control-indicator::after {
  width: 20px;
}

.custom-control.ios-switch .ios-switch-control-input:checked~.ios-switch-control-indicator {
  border: 10px solid var(--color);
}

.custom-control.ios-switch .ios-switch-control-input:checked~.ios-switch-control-indicator::after {
  top: -8px;
  left: 4px;
}

.custom-control.ios-switch .ios-switch-control-input:checked:active~.ios-switch-control-indicator::after {
  left: 0px;
}

.custom-control.ios-switch .ios-switch-control-indicator {
  display: inline-block;
  position: relative;
  margin: 0 10px;
  top: 4px;
  width: 32px;
  height: 20px;
  background: #fff;
  border-radius: 16px;
  transition: 0.3s;
  border: 2px solid #ddd;
}

.custom-control.ios-switch .ios-switch-control-indicator::after {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  transition: 0.3s;
  top: 0px;
  left: 0px;
  background: #fff;
  box-shadow: 0 0 2px #aaa, 0 2px 5px #999;
}

.custom-control.border-switch {
  --color: #4cd964;
  padding-left: 0;
}

.custom-control.border-switch .border-switch-control-input {
  display: none;
}

.custom-control.border-switch .border-switch-control-input:checked~.border-switch-control-indicator {
  border-color: var(--color);
}

.custom-control.border-switch .border-switch-control-input:checked~.border-switch-control-indicator::after {
  left: 14px;
  background-color: var(--color);
}

.custom-control.border-switch .border-switch-control-indicator {
  display: inline-block;
  position: relative;
  margin: 0 10px;
  top: 4px;
  width: 32px;
  height: 20px;
  background: #fff;
  border-radius: 16px;
  transition: 0.3s;
  border: 2px solid #ccc;
}

.custom-control.border-switch .border-switch-control-indicator::after {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.3s;
  top: 2px;
  left: 2px;
  background: #ccc;
}

.custom-control.teleport-switch {
  --color: #4cd964;
  padding-left: 0;
}

.custom-control.teleport-switch .teleport-switch-control-input {
  display: none;
}

.custom-control.teleport-switch .teleport-switch-control-input:checked~.teleport-switch-control-indicator {
  border-color: var(--color);
}

.custom-control.teleport-switch .teleport-switch-control-input:checked~.teleport-switch-control-indicator::after {
  left: -14px;
}

.custom-control.teleport-switch .teleport-switch-control-input:checked~.teleport-switch-control-indicator::before {
  right: 2px;
  background-color: var(--color);
}

.custom-control.teleport-switch .teleport-switch-control-indicator {
  display: inline-block;
  position: relative;
  margin: 0 10px;
  top: 4px;
  width: 32px;
  height: 20px;
  background: #fff;
  border-radius: 16px;
  transition: 0.3s;
  border: 2px solid #ccc;
  overflow: hidden;
}

.custom-control.teleport-switch .teleport-switch-control-indicator::after {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.3s;
  top: 2px;
  left: 2px;
  background: #ccc;
}

.custom-control.teleport-switch .teleport-switch-control-indicator::before {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.3s;
  top: 2px;
  right: -14px;
  background: #ccc;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-controls-stacked d-block my-3">
  <div class="row">
    <div class="col-3">
      <div class="card">
        <div class="card-body">
          <label class="custom-control material-switch">
   
   <input type="checkbox" class="material-switch-control-input">
   <span class="material-switch-control-indicator"></span>
   
  </label>
        </div>
      </div>
    </div>

    <div class="col-3">
      <div class="card">
        <div class="card-body">
          <label class="custom-control ios-switch">
   
   <input type="checkbox" class="ios-switch-control-input">
   <span class="ios-switch-control-indicator"></span>
  
  </label>
        </div>
      </div>
    </div>

    <div class="col-3">
      <div class="card">
        <div class="card-body">
          <label class="custom-control border-switch">
   
   <input type="checkbox" class="border-switch-control-input">
   <span class="border-switch-control-indicator"></span>
  
  </label>
        </div>
      </div>
    </div>

    <div class="col-3">
      <div class="card">
        <div class="card-body">
          <label class="custom-control teleport-switch">
   
   <input type="checkbox" class="teleport-switch-control-input">
   <span class="teleport-switch-control-indicator"></span>
  
  </label>
        </div>
      </div>
    </div>


  </div>



</div>

如果您对有点冗长的代码没有任何问题，请尝试此操作...

Answer 2

正如问题所说，我需要类像 *-sm, *-md, *-lg, *-xl 作为 bootstrap 开关，因为我想增加开关的大小，最后，我用 S 做到了CSS.

这里我用一个@mixin 所有分辨率切换（@mixin 与 JS 函数非常相似，但它没有 return 任何东西）。

对于Bootstrap 4

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>

对于Bootstrap 5

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>

如何为 Bootstrap 中的不同类设置样式切换 4

How to style switch for different classes in Bootstrap 4

javascript

css

twitter-bootstrap

bootstrap-4

bootstrap-5

对于Bootstrap 4

对于Bootstrap 5

如何为 Bootstrap 中的不同 类 设置样式切换 4

How to style switch for different classes in Bootstrap 4

javascript

css

twitter-bootstrap

bootstrap-4

bootstrap-5

对于Bootstrap 4

对于Bootstrap 5

如何为 Bootstrap 中的不同类设置样式切换 4