搞本书,看了一天,确实,,UIKIT比它好用。。。
但,艺多不压身吧。
今天自己抄了个大概的,不用其它插件,,但那手风琴,真的找了很多,没有中意的。。。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <style type='text/css'> .footcolor { background-color: #CCC; } .glyphicon { margin-right:10px; } .panel-body { padding:0px; } .panel-body table tr td { padding-left: 15px } .panel-body .table {margin-bottom: 0px; } </style> <body> <div class="container"> <nav class="navbar navbar-default navbar-inverse "> <!-- 此部分不论在任何宽度下都一直存在,常用来展开或收起导航 --> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar1"> <i class="icon-bar"></i> <i class="icon-bar"></i> <i class="icon-bar"></i> </button> <a href="#" class="navbar-brand">brand</a> </div> <!-- 这部分才是真正的导航主体部分 --> <div id="navbar1" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li> <a href="#">菜单</a> </li> <li> <a href="#">菜单</a> </li> <li> <a href="#">菜单</a> </li> <li> <a href="#">菜单</a> </li> <li> <a href="#">菜单</a> </li> <li> <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Sandstone <span class="caret"></span></a> <ul class="dropdown-menu" aria-labelledby="download"> <li><a href="http://jsfiddle.net/bootswatch/m0nv7a0o/">Open Sandbox</a></li> <li class="divider"></li> <li><a href="./bootstrap.min.css">bootstrap.min.css</a></li> <li><a href="./bootstrap.css">bootstrap.css</a></li> <li class="divider"></li> <li><a href="./variables.less">variables.less</a></li> <li><a href="./bootswatch.less">bootswatch.less</a></li> <li class="divider"></li> <li><a href="./_variables.scss">_variables.scss</a></li> <li><a href="./_bootswatch.scss">_bootswatch.scss</a></li> </ul> </li> </nav> </div> <div class="container"> <div class="row"> <div class="col-md-2"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close"> </span>Content</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://www.jquery2dotnet.com">Articles</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-flash text-success"></span><a href="http://www.jquery2dotnet.com">News</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-file text-info"></span><a href="http://www.jquery2dotnet.com">Newsletters</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">Comments</a> <span class="badge">42</span> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th"> </span>Modules</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Invoices</a> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Shipments</a> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Tex</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user"> </span>Account</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="http://www.jquery2dotnet.com">Change Password</a> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Import/Export</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger"> Delete Account</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file"> </span>Reports</a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Sales</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Customers</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-tasks"></span><a href="http://www.jquery2dotnet.com">Products</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-shopping-cart"></span><a href="http://www.jquery2dotnet.com">Shopping Cart</a> </td> </tr> </table> </div> </div> </div> </div> </div> <div class="col-md-10"> <div class="bs-component"> <h3>Heading 3</h3> <ul class="nav nav-list"> <li class="divider"></li> </ul> <table class="table table-striped table-hover table-bordered"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>2</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="info"> <td>3</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="success"> <td>4</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="danger"> <td>5</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="warning"> <td>6</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="active"> <td>7</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table> </div><!-- /example --> <div class="bs-component text-center"> <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div> </div> </div> </div> <footer class="footer "> <div class="container text-center footcolor" > <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <ul class="list-inline"> <li><a href="http://blog.getbootstrap.com">Blog</a></li> <li class="muted">·</li> <li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li> <li class="muted">·</li> <li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li> </ul> </div> </footer> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
时间: 2024-10-31 17:02:32