導航欄： 1 <nav class="navbar navbar-inverse navbar-fixed-top"> 2 <div class="container-fluid"> 3 <div class="navbar-header"> 4 <button type="button" clas ...
導航欄：
1 <nav class="navbar navbar-inverse navbar-fixed-top"> 2 <div class="container-fluid"> 3 <div class="navbar-header"> 4 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 5 <span class="sr-only">Toggle navigation</span> 6 <span class="icon-bar"></span> 7 <span class="icon-bar"></span> 8 <span class="icon-bar"></span> 9 </button> 10 <a class="navbar-brand" href="https://v3.bootcss.com/examples/dashboard/#">Project name</a> 11 </div> 12 <div id="navbar" class="navbar-collapse collapse"> 13 <ul class="nav navbar-nav navbar-right"> 14 <li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li> 15 <li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li> 16 <li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li> 17 <li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li> 18 </ul> 19 <form class="navbar-form navbar-right"> 20 <input type="text" class="form-control" placeholder="Search..."> 21 </form> 22 </div> 23 </div> 24 </nav>View Code
側邊條：
<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="https://v3.bootcss.com/examples/dashboard/#">Overview <span class="sr-only">(current)</span></a></li> <li><a href="">Reports</a></li> <li><a href="">Analytics</a></li> <li><a href="">Export</a></li> </ul> <ul class="nav nav-sidebar"> <li><a href="">Nav item</a></li> <li><a href="">Nav item again</a></li> <li><a href="">One more nav</a></li> <li><a href="">Another nav item</a></li> <li><a href="">More navigation</a></li> </ul> <ul class="nav nav-sidebar"> <li><a href="">Nav item again</a></li> <li><a href="">One more nav</a></li> <li><a href="https://www.baidu.com">Another nav item</a></li> </ul> </div>
表格欄：
1 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 2 <h2 class="sub-header">Section title</h2> 3 <div class="table-responsive"> 4 <table class="table table-striped table-hover table-bordered"> 5 <thead> 6 <tr> 7 <th>#</th> 8 <th>Header</th> 9 <th>Header</th> 10 <th>Header</th> 11 <th>Header</th> 12 </tr> 13 </thead> 14 <tbody> 15 <tr> 16 <td>1,001</td> 17 <td>Lorem</td> 18 <td>ipsum</td> 19 <td>dolor</td> 20 <td>sit</td> 21 </tr> 22 <tr> 23 <td>1,002</td> 24 <td>amet</td> 25 <td>consectetur</td> 26 <td>adipiscing</td> 27 <td>elit</td> 28 </tr> 29 <tr> 30 <td>1,003</td> 31 <td>Integer</td> 32 <td>nec</td> 33 <td>odio</td> 34 <td>Praesent</td> 35 </tr> 36 <tr> 37 <td>1,003</td> 38 <td>libero</td> 39 <td>Sed</td> 40 <td>cursus</td> 41 <td>ante</td> 42 </tr> 43 <tr> 44 <td>1,004</td> 45 <td>dapibus</td> 46 <td>diam</td> 47 <td>Sed</td> 48 <td>nisi</td> 49 </tr> 50 <tr> 51 <td>1,005</td> 52 <td>Nulla</td> 53 <td>quis</td> 54 <td>sem</td> 55 <td>at</td> 56 </tr> 57 <tr> 58 <td>1,006</td> 59 <td>nibh</td> 60 <td>elementum</td> 61 <td>imperdiet</td> 62 <td>Duis</td> 63 </tr> 64 <tr> 65 <td>1,007</td> 66 <td>sagittis</td> 67 <td>ipsum</td> 68 <td>Praesent</td> 69 <td>mauris</td> 70 </tr> 71 <tr> 72 <td>1,008</td> 73 <td>Fusce</td> 74 <td>nec</td> 75 <td>tellus</td> 76 <td>sed</td> 77 </tr> 78 <tr> 79 <td>1,009</td> 80 <td>augue</td> 81 <td>semper</td> 82 <td>porta</td> 83 <td>Mauris</td> 84 </tr> 85 <tr> 86 <td>1,010</td> 87 <td>massa</td> 88 <td>Vestibulum</td> 89 <td>lacinia</td> 90 <td>arcu</td> 91 </tr> 92 <tr> 93 <td>1,011</td> 94 <td>eget</td> 95 <td>nulla</td> 96 <td>Class</td> 97 <td>aptent</td> 98 </tr> 99 <tr> 100 <td>1,012</td> 101 <td>taciti</td> 102 <td>sociosqu</td> 103 <td>ad</td> 104 <td>litora</td> 105 </tr> 106 <tr> 107 <td>1,013</td> 108 <td>torquent</td> 109 <td>per</td> 110 <td>conubia</td> 111 <td>nostra</td> 112 </tr> 113 <tr> 114 <td>1,014</td> 115 <td>per</td> 116 <td>inceptos</td> 117 <td>himenaeos</td> 118 <td>Curabitur</td> 119 </tr> 120 <tr> 121 <td>1,015</td> 122 <td>sodales</td> 123 <td>ligula</td> 124 <td>in</td> 125 <td>libero</td> 126 </tr> 127 </tbody> 128 </table> 129 </div>View Code
導航欄：
2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!--導航區開始--> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">主頁</a></li> <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">簡介</a></li> <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">消息</a></li> </ul> <!--導航區結束--> <!--面板區開始--> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">這裡是主頁的內容</div> <div role="tabpanel" class="tab-pane" id="profile">這裡是簡介頁面的內容</div> <div role="tabpanel" class="tab-pane" id="messages">這裡是消息頁面的內容</div> </div> <!--面板區結束-->View Code
https://q1mi.github.io/Blog/2017/11/21/aboutBootstrap02/
