이번에는 부트스트랩 공통 컴포넌트를 소개해 드리겠습니다. 부트스트랩 공통 컴포넌트 사용 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.
탐색 바
1 <nav class="navbar navbar-inverse navbar-fixed-top"> 2 <p class="container-fluid"> 3 <p 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 </p>12 <p 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 </p>23 </p>24 </nav>
코드 보기
사이드바
<p class="container-fluid"> <p class="row"> <p 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> </p>
테이블 바
1 <p 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 <p 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 </p>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운부트스트랩 튜토리얼에 주목하세요!
추천 자료:
Jest가 반응 네이티브 구성 요소를 테스트하는 단계는 무엇입니까
위 내용은 부트스트랩의 공통 구성요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
