44.Bootstrap(中文教程)表單：Forms:核取方塊與選項按鈕(自定義)

yan-bootstrap4 bootstrap4(中文教程)

Ci_Yao_Yan 2020-04-25 02:32:26 ‧ 3874 瀏覽

分享至

ㄧ.Forms:核取方塊與選項按鈕(自定義)

<body data-spy="scroll" data-target="#nav-demo">
  <div class="component" id="demo" style="height: 300vh">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">
      A
      </label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" name="radio" id="custom-radio1">
      <label class="custom-control-label" for="custom-radio1">
      A
      </label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" name="radio" id="custom-radio2">
      <label class="custom-control-label" for="custom-radio2">
      B
      </label>
    </div>
    
  </div>
</body>


.demo.component{
  padding: 50px;
}

重點：

自定義的結構，父元素為.custom-control.custom-checkbox
第二層為input.custom-control-input以及label.custom-control-label
但是只有設定上面的不夠，因為按鈕不能按。所以要在input加一個id="customCheck1"以及label[for="customCheck1"]，之後就可按了
radio選項按鈕部分就要將id以及for改名稱，以及在input添加name=".."才可單選

codepen
參考：bootstrap4