iT邦幫忙

0

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

  • 分享至 

  • xImage
  •  

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

重點:

  • 核取方塊的結構為,父元素為.form-check -->
  • 再來第二層是label.form-check-label,裡面包input.form-check-input
  • .form-check-inline,讓整個核取方塊呈現一行
  • 選項按鈕的功能主要是單選的選項,這裡怎麼點全部都能點到,所以選項按鈕全部都要加name=".."以及value="a,b,c.."

codepen
參考:bootstrap4


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言