iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
Modern Web

不斷片(篇)挑戰系列 第 21

DAY 21 checks and radios 行內 (四)

  • 分享至 

  • xImage
  •  

大家好!今天是鐵人賽的第21天,很高興度過了21天的鐵人賽。
今天要說的是checks and radios中的行內,在單選框或多選框中不在只是垂直排列,而是排一行。

行內(checkbox)

行內(checkbox)
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="option1">
    <label class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="option2">
    <label class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="option3" disabled>
    <label class="form-check-label">3 (disabled)</label>
</div>

行內(radio)

行內(radio)
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" value="option1">
    <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" value="option2">
    <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" value="option3" disabled>
    <label class="form-check-label">3 (disabled)</label>
</div>

今天是第21天很高興能寫到這一天,各位大佬們有順利不斷賽嗎?
要連續寫這麼多天的文章屬實不容易啊!希望各位能順利完成文章。


上一篇
DAY 20 checks and radios中的form-switch和堆疊 (三)
下一篇
<DAY 22> floating labels (一)
系列文
不斷片(篇)挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言