Toggle main menu visibility
新聞
下載
教材
影音
討論
其他選單
好站連結
行事曆
電子相簿
常見問題
萬用表單
即時留言簿
友站消息
社大學員
:::
登入
登入
帳號
密碼
登入
重整畫面
:::
所有書籍
「Groundwork CSS」目錄
MarkDown
3. 按鈕 Buttons
1. 預設空白頁面
2. 格線系統 The Grid
3. 按鈕 Buttons
4. 導覽列 Navigation
5. 頁籤 Tabs
6. UI元件 UI Elements
7. 表格 Tables
8. 圖示 Social Icons
9. 文字 ResponsiveText
10. 彈跳視窗（燈箱） Modals
11. 提示 Tooltips
12. 滑動 Orbit
5. 頁籤 Tabs
Groundwork CSS ============== ### 一般的導覽列 ``` <nav> <ul> <li><a href="#">連結1</a></li> <li><a href="#">連結2</a></li> </ul> </nav> ``` ### 水平導覽列（依據格線，會塞滿能用空間） - 要加上<nav> - <ul>要加上class="row" - <li>要上每個選項要用掉幾分之幾 ``` <nav class="small-tablet"> <ul class="row"> <li class="one small-tablet fourth"><a href="#nowhere" title="連結 1 的提示">連結 1</a></li> <li class="menu one small-tablet fourth"><a href="#nowhere" title="連結 2 的提示">連結 2</a> <ul style="display: none;"> <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li> <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li> <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li> <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li> </ul> </li> <li class="one small-tablet fourth"><a href="#nowhere" title="連結 3 的提示">連結 3</a></li> <li class="one small-tablet fourth"><a href="#nowhere" title="連結 4 的提示">連結 4</a></li> </ul> </nav> ``` ### 水平導覽列（行內，工具列多大就多大） - 要加上<nav>並加上class="inline" - <ul>不需要class="row" - <li>不需要加class，除非有子選單才需要class="menu" ``` <nav class="inline"> <ul> <li><a href="#nowhere" title="連結 1 的提示">連結 1</a></li> <li<class="menu"><a href="#nowhere" title="連結 2 的提示">連結 2</a> <ul style="display: none;"> <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li> <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li> <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li> <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li> </ul> </li> <li><a href="#nowhere" title="連結 3 的提示">連結 3</a></li> <li><a href="#nowhere" title="連結 4 的提示">連結 4</a></li> </ul> </nav> ``` ### 垂直導覽列 - 要加上<nav> - <ul>要指定佔幾分之幾 - <li>不需要加class，除非有子選單才需要class="menu" ``` <nav class="small-tablet"> <ul class="one small-tablet fourth"> <li><a href="#nowhere" title="連結 1 的提示">連結 1</a></li> <li class="menu"><a href="#nowhere" title="連結 2 的提示">連結 2</a> <ul style="display: none;"> <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li> <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li> <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li> <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li> </ul> </li> <li><a href="#nowhere" title="連結 3 的提示">連結 3</a></li> <li><a href="#nowhere" title="連結 4 的提示">連結 4</a></li> </ul> </nav> ``` ### 分頁 - 要加上<nav>並加上class="pagination" - <ul>不需要class="row" - 每一個按鈕的結構都是用<li>包住<a>，所有頁的按鈕要一次全部列出 - 上一頁的按鈕：<li>加上 class="prev" - 上一頁的按鈕：<li>加上 class="next" - 第一頁的按鈕：<li>加上 class="first" - 最後頁的按鈕：<li>加上 class="last" - 要顯示的按鈕：<li>加上 style="display: inline-block;" - 不顯示的按鈕：<li>加上 style="display: none;" - 當前頁面按鈕：<li>加上 class="active" ``` <nav class="pagination"> <ul> <li class="prev"> <a href="#">«</a> </li> <li style="display: none;" class="first"> <a href="#">1</a> </li> <li style="display: none;"> <a href="#">2</a> </li> <li style="display: none;"> <a href="#">3</a> </li> <li style="display: none;"> <a href="#">4</a> </li> <li style="display: none;"> <a href="#">5</a> </li> <li style="display: none;"> <a href="#">6</a> </li> <li style="display: none;"> <a href="#">7</a> </li> <li style="display: none;"> <a href="#">8</a> </li> <li style="display: inline-block;"> <a href="#">9</a> </li> <li style="display: inline-block;"> <a href="#">10</a> </li> <li style="display: inline-block;"> <a href="#">11</a> </li> <li style="display: inline-block;"> <a href="#">12</a> </li> <li style="display: inline-block;"> <a href="#">13</a> </li> <li style="display: inline-block;"> <a href="#">14</a> </li> <li style="display: inline-block;"> <a href="#">15</a> </li> <li style="display: inline-block;"> <a href="#">16</a> </li> <li style="display: inline-block;"> <a href="#">17</a> </li> <li style="display: inline-block;"> <a href="#">18</a> </li> <li class="active"> <a href="#">19</a> </li> <li style="display: inline-block;"> <a href="#">20</a> </li> <li style="display: inline-block;"> <a href="#">21</a> </li> <li style="display: inline-block;"> <a href="#">22</a> </li> <li style="display: inline-block;"> <a href="#">23</a> </li> <li style="display: inline-block;"> <a href="#">24</a> </li> <li style="display: inline-block;"> <a href="#">25</a> </li> <li style="display: inline-block;"> <a href="#">26</a> </li> <li style="display: inline-block;"> <a href="#">27</a> </li> <li style="display: inline-block;"> <a href="#">28</a> </li> <li style="display: inline-block;"> <a href="#">29</a> </li> <li style="display: inline-block;"> <a href="#">30</a> </li> <li style="display: none;"> <a href="#">31</a> </li> <li style="display: none;"> <a href="#">32</a> </li> <li style="display: none;"> <a href="#">33</a> </li> <li style="display: none;"> <a href="#">34</a> </li> <li style="display: none;"> <a href="#">35</a> </li> <li style="display: none;"> <a href="#">36</a> </li> <li style="display: none;"> <a href="#">37</a> </li> <li style="display: none;"> <a href="#">38</a> </li> <li style="display: none;" class="last"> <a href="#">39</a> </li> <li class="next"> <a href="#">»</a> </li> </ul> </nav> ```
:::
搜尋
search
進階搜尋
QR Code 區塊
快速登入
所有討論區
「PHP全端開發」線上課程討論區
XOOPS使用討論區
一般研習學員
社大學員專用
路過哈啦區
XOOPS佈景設計
XOOPS模組開發
Tad書籍區
即時留言簿
書籍目錄
展開
|
闔起
線上使用者
63
人線上 (
12
人在瀏覽
線上書籍
)
會員: 0
訪客: 63
更多…
3. 按鈕 Buttons
