XOOPS輕鬆架 - 線上書籍

:::

BootStarp4實做入門
==============

1. BootStrap4 有內建導覽列：<http://bootstrap.hexschool.com/docs/4.0/components/navbar/>
2. 直接照著下面的架構做即可： ```
    
    <nav class="navbar navbar-expand-md">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                
    
            </ul>
        </div>
    </nav>  
    ```
3. `.navbar-expand-md` 是指在 md 範圍以上才會直接展開選項
4. `<button>`中的`data-target="#navbarSupportedContent"` 必須對應下方`<div>`中的`id="navbarSupportedContent"`
5. 目前就只能一層，要多層的話，須改用其他的導覽列工具。
6. 若想加入一個不含子選單的選項，可用： ```
    
    <li class="nav-item">
        <a class="nav-link" href="#">選項</a>
    </li>
    ```
7. 若想加入一個有含子選單的選項，可用（注意 id 必須每個選項不一樣）：
    
     ```
    
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbar1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">選項1</a>
        <div class="dropdown-menu" aria-labelledby="navbar1">
            <a class="dropdown-item" href="#">子選項1</a>
            <a class="dropdown-item" href="#">子選項2</a>
        </div>
    </li>
    ```
8. 我們可以在`<nav>`中加入 `p-sm-0 m-sm-0` 讓導覽列在電腦螢幕上看起來瘦一點。
    
     ```
    
    <nav class="navbar navbar-expand-md  p-sm-0 m-sm-0">
    ```
9. 讓導覽列的選項置中，利用 `.mx-auto` 即可（即 `margin-left: auto; margin-right: auto;` 之意）： ```
    
    <ul class="navbar-nav mx-auto">
    ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D947

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器