XOOPS輕鬆架 - 線上書籍

:::

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

1. BootStrap4 有內建導覽列：<http://bootstrap.hexschool.com/docs/4.0/components/navbar/>
2. 直接照著下面的架構做即可： ```
  <pre class="brush:xml;gutter:false;">
  <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. 若想加入一個不含子選單的選項，可用： ```
  <pre class="brush:xml;gutter:false;">
  <li class="nav-item">
      <a class="nav-link" href="#">選項</a>
  </li>
  ```
7. 若想加入一個有含子選單的選項，可用（注意 id 必須每個選項不一樣）：
  
   ```
  <pre class="brush:xml;gutter:false;">
  <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` 讓導覽列在電腦螢幕上看起來瘦一點。
  
   ```
  <pre class="brush:xml;gutter:false;">
  <nav class="navbar navbar-expand-md  p-sm-0 m-sm-0">
  ```
9. 讓導覽列的選項置中，利用 `.mx-auto` 即可（即 `margin-left: auto; margin-right: auto;` 之意）： ```
  <pre class="brush:xml;gutter:false;">
  <ul class="navbar-nav mx-auto">
  ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器