iT邦幫忙

2022 iThome 鐵人賽

DAY 24
0
Modern Web

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

DAY 24 floating labels中的form-select (三)

  • 分享至 

  • xImage
  •  

大家好!今天是鐵人賽的第24天,也是國慶連假的第二天唷!各位應該沒忘記要發文齁!
今天要說的是form-select的浮動標籤使用跟排版。

浮動適用於form-select

form-select

不同於input,他們會將label呈現在浮動的位置。

<div class="form-floating">
    <select class="form-select" aria-label="example">
        <option selected>選擇</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <label>浮動也適用於form-select</label>
</div>

綜合排版

排版

確保表單元素放在col類別裡。

<div class="row g-2">
    <div class="col-md">
        <div class="form-floating">
            <input type="input" class="form-control" placeholder="input" value="input">
            <label>input</label>
        </div>
    </div>
    <div class="col-md">
        <div class="form-floating">
            <select class="form-select" aria-label="example">
                <option selected>選擇</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <label>浮動也適用於form-select</label>
        </div>
    </div>
</div>

以上為今天的內容。
別忘記發文喔!還有6天的時間,各位加油比賽很快就會結束囉!堅持下去!
各位明天見,byebye~


上一篇
<DAY 23> floating labels (二)
下一篇
<DAY 25> breadcrumb (一)
系列文
不斷片(篇)挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言