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

yan-bootstrap4 bootstrap4(中文教程)

Ci_Yao_Yan 2020-04-25 02:28:22 ‧ 1684 瀏覽

ㄧ.Forms:核取方塊與選項按鈕

<body data-spy="scroll" data-target="#nav-demo">
  <div class="component" id="demo" style="height: 300vh">
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input">
        A
      </label>
    </div> 
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input">
        B
      </label>
    </div> 
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input">
        C
      </label>
    </div> 
    
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="radio" name="demo" value="a" class="form-check-input">
        A
      </label>
    </div> 
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="radio" name="demo" value="b" class="form-check-input">
        B
      </label>
    </div> 
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="radio" name="demo" value="c" class="form-check-input">
        C
      </label>
    </div> 
  </div>
</body>



.demo.component{
  padding: 50px;
}

重點：