Apps Script用Sheet生成動態網頁(30): 套用Bootstrap 5浮動標籤

浮動標籤是Bootstrap 5裡頭新增的功能，個人覺得很有趣，然後看到Apple登入頁面也是使用浮動標籤，就來套用到這個專案的登入頁面。

若是要在Bootstrap 4中使用浮動標籤，可以參考Anton Staroverov的Bootstrap 4 Float Label示範。

先直接看成果

新的登入頁面(上圖)

舊的登入頁面(上圖)

改動內容

浮動標籤是參考Bootstrap 5的官方範例，在稍微調整一下Bootstrap React的寫法。這裡有一個重點是一定要記得先寫Control再寫Label，如果是反過來寫，就沒有那個浮動標籤的效果。

以下舉帳號部份的修改，就是在Group的class加上form-floating。因為我同學提醒，多層可能會導致BS的CSS判斷上有問題，所以之前一些有的沒的Row的阿、Col的阿，我就都都清掉了。

src/client/demo-bootstrap/components/LoginForm.jsx

<Form.Group className="form-floating" controlId="loginAccount">

<Form.Control

type="text"

name="username"

placeholder="輸入帳號(email)"

autocomplete="username"

required

/>

<Form.Label>輸入帳號(email)</Form.Label>

</Form.Group>

然後把Google和LINE登入按鈕移出LoginForm，放到登入頁面內。並用Stack讓它們湊在一塊。日後如果要加上微軟,Yahoo, Facebook等登入方式也可以簡單構成。

src/client/demo-bootstrap/pages/Login.jsx

<Stack gap={2}>

<Row>

<Col><hr /></Col><Col className="text-center">或是免註冊登入</Col><Col><hr /></Col>

</Row>

<a

href={getLineLoginURL()}

className="btn btn-success rounded-pill"

>

以LINE登入

</a>

<a

href={getGoogleLoginURL()}

className="btn btn-outline-secondary rounded-pill"

>

以Google登入

</a>

</Stack>

然後因為之前沒有做嚮應式調整，所以這次調整就都把它們加上，現在在解析度不同的時候，不會一直拉寬那個登入的表單的欄位及內容。

<Row className="justify-content-center">

<Col md={9} lg={5}> ... </Col>

</Row>