Bootstrap（七）導航 & 導航條 & 分頁導航
阿新 • • 發佈：2018-12-13
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body> <!-- 水平導航欄 --> <nav class="nav"> <a class="nav-link" href="#">測試導航1</a> <a class="nav-link" href="#">測試導航2</a> <a class="nav-link" href="#">測試導航3</a> <a class="nav-link" href="#">測試導航4</a> </nav> <!-- 豎直導航欄 --> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#">測試導航5</a> </li> <li class="nav-item"> <a class="nav-link" href="#">測試導航6</a> </li> <li class="nav-item"> <a class="nav-link" href="#">測試導航7</a> </li> <li class="nav-item"> <a class="nav-link" href="#">測試導航8</a> </li> </ul> <!-- 選項卡 --> <nav class="nav nav-tabs"> <a class="nav-link" href="#">測試導航9</a> <a class="nav-link" href="#">測試導航10</a> <a class="nav-link" href="#">測試導航11</a> <a class="nav-link" href="#">測試導航12</a> </nav> <!-- 膠囊型 --> <nav class="nav nav-pills"> <a class="nav-link" href="#">測試導航13</a> <a class="nav-link" href="#">測試導航14</a> <a class="nav-link" href="#">測試導航15</a> <a class="nav-link" href="#">測試導航16</a> </nav> <!-- 二級導航 --> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#">測試導航17</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">下拉導航</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">測試導航18</a> <a class="dropdown-item" href="#">測試導航19</a> <a class="dropdown-item" href="#">測試導航20</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">測試導航21</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">測試導航22</a> </li> <li class="nav-item"> <a class="nav-link" href="#">測試導航23</a> </li> </ul> </body> </html>
