iT邦幫忙

0

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

ㄧ.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


尚未有邦友留言

立即登入留言