F2E合作社|select下拉選單|Bootstrap 5網頁框架開發入門


Posted by itiswonderfall on 2021-11-24

前言

學網頁沒學到下拉,那真的瞎啦,現在就乖乖 shut up ,趕快學習趕快往下拉 ⇩ ( 四押喔 skr~ )

圖片來源

 


 

官方網站的 Select 頁面

 

基本下拉選單

自定義的 <select> 選單只需要一個自定義的類別 .form-select 即可觸發自定義樣式,樣式自定義僅限於 <select> 的初始外觀, <option> 則因為瀏覽器的限制而無法修改。

<select class="form-select" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

 


 

尺寸

可以從小、大自定義 select 做選擇以匹配相似尺寸的文字輸入框( input )。

.form-select-lg

<select class="form-select form-select-lg" aria-label=".form-select-lg example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

 

.form-select-sm

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

 


 

支持選擇多個選項

在 select 上加入 multiple 使下拉選單支持選擇多個選項。

在不同操作系統和瀏覽器中,選擇多個選項的差異:

  • 對於 windows :按住 Ctrl 按鈕來選擇多個選項
  • 對於 Mac :按住 command 按鈕來選擇多個選項

<select class="form-select" multiple aria-label="multiple select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

 


 

支持下拉選單中可見選項的數目

在 select 上加入 size 使下拉選單可見選項增加。

<select class="form-select" size="3" aria-label="size 3 select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

 


 

禁用

在 select 上加入 disabled 使其外觀呈現灰色,並移除 pointer 事件。

<select class="form-select" aria-label="Disabled select example" disabled>
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

 


 

參考資料

  1. Select · Bootstrap v5.0
  2. 選擇功能表 (Select) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
  3. 選取組件與檔案組件 - 金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
  4. HTML multiple 属性

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #select







Related Posts

IG v.s. FB: A simple A/B testing (paired T-test)

IG v.s. FB: A simple A/B testing (paired T-test)

〈 C++學習日記 #2〉再談指標 Pointer (Part.2)

〈 C++學習日記 #2〉再談指標 Pointer (Part.2)

[02] Functional Component

[02] Functional Component


Comments