:::

3-2-1 設計導覽列

導覽列:https://getbootstrap.com/docs/5.0/components/navbar

一、導覽列的基本型態:

<nav class="navbar navbar-expand-lg">
</nav>
  1. .navbar:套用導覽列樣式
  2. .navbar-expand-lg:展開選項,其中 lg 是斷點(當螢幕寬度符合斷點大小時,才會執行指定之樣式
    1. sm >= 576px(手機)
    2. md >= 768px(平板)
    3. lg >= 992px(桌機)
    4. xl >= 1200px(高解析度螢幕)

二、調整導覽列顏色:

  1. 可以套用背景及前景(即文字)顏色或深淺設定
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    </nav>
    1. .navbar-dark:設定導覽列為深色背景(此時文字會是白色),相反設定為.navbar-light(此時文字會是深色)
    2. .bg-primary:設定背景色,B5顏色設定有這幾種:https://bootstrap5.hexschool.com/docs/5.0/utilities/colors/#background-color
  2. 若要自訂顏色,可以自己定義一個class,名稱隨便取即可(請存為 css/style.css),例如:
    .bg-my-blue{
        background-color: #3D81BB;
    }

    然後在index.html中引入自定義的CSS檔

    <link
      href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link href="/css/style.css" rel="stylesheet" />

    最後在導覽列中套用之(取代原先的.bg-primary即可):

    <nav class="navbar navbar-expand-lg navbar-dark bg-my-blue">
    </nav>

 三、調整導覽列離下方元件距離:

  1. 利用BootStrap的空間通用類別,可以調整導覽列和下方內容之間的間隔
    <nav class="navbar navbar-expand-lg navbar-dark bg-my-blue mb-5">
    </nav>
  2. m代表 margin
  3. b代表 margin-bottompadding-bottom
  4. 詳情可參考:https://bootstrap5.hexschool.com/docs/5.0/utilities/spacing/

:::

書籍目錄

展開 | 闔起

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

計數器

今天: 4373437343734373
昨天: 5069506950695069
總計: 5134821513482151348215134821513482151348215134821