:::

3-2-1-5 在導覽列加入搜尋框

一、加入搜尋框

  1. 導覽列的搜尋框
    <form class="d-flex">
      <input
        class="form-control me-2"
        type="search"
        placeholder="搜尋文章"
        aria-label="Search"
      />
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
    1. 這個搜尋框目前尚不完整,等系統做完再來改它,暫時修改placeholder(佔位提示)屬性為中文即可
    2. .d-flex 等同於 display: flex; 的意思,flex可參考:https://wcc723.github.io/css/2017/07/21/css-flex/
    3. d工具可參考:https://bootstrap5.hexschool.com/docs/5.0/utilities/display/

二、修改按鈕樣式:

  1. 可以利用.input-group輸入表單群組來修改輸入框及送出按鈕,如此搜尋框和按鈕可整合為一體
  2. 輸入表單群組可參考:https://bootstrap5.hexschool.com/docs/5.0/forms/input-group/#button-addons
  3. 例如:
    <form class="d-flex">
      <div class="input-group">
        <input
          class="form-control"
          type="search"
          placeholder="搜尋文章"
        />
        <button class="btn btn-success" type="button">
          搜尋
        </button>
      </div>
    </form>


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1780

計數器

今天: 4076407640764076
昨天: 5069506950695069
總計: 5134524513452451345245134524513452451345245134524