Bootstrap常用组件 程序员文章站 2022-06-22 15:28:49 导航栏： 1 2 3 4 导航栏： 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 上一篇： 【Python学习之一】list与tuple 下一篇： .NET6 ConfigurationManager的实现及使用方式 推荐阅读 oracle数据库常用的99条查询语句 Webpack 常用命令总结以及常用打包压缩方法 oracle常用sql查询语句部分集合(图文) Oracle数据库基本常用命令汇总 oracle中110个常用函数介绍 twig模板常用语句实例小结 MongoDB 常用的数据备份梳理汇总 PHP的几个常用加密函数 利用jquery和BootStrap实现动态滚动条效果 python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)