最近看了bootstrap的一個小的視頻，快速的做出一個後台介面；介紹了一些典型的用法；
裡面涉及了：
下拉式功能表、膠囊菜單、膠囊菜單垂直顯示、柵格排列、導覽列、字型表徵圖、
圖片樣式、輸入組、摺疊菜單panel、麵包屑、表格樣式、分頁組件樣式；
下面將跟著項目做出的小例子貼出來：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" /> <title>bootstrap小例子</title> <style type="text/css"></style> </head> <body> <!-- 導覽列部分 --> <div class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <div class="navbar-brand"> <small class="glyphicon glyphicon-fire"></small> MicroSoft </div> </div> <ul class="nav navbar-nav nav-stacked navbar-right"> <li> <a href="#"> <span class="glyphicon glyphicon-tasks"></span> <i class="badge">2</i> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-bell"></span> <i class="badge">1</i> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-envelope"></span> <i class="badge">1</i> </a> </li> <li> <a href="#" data-toggle="dropdown"> <img class="img-circle" src="user_photo.png" width="30" height="30"/> <small>Welcome</small> admin <span class="caret"></span> </a> <ul class="nav nav-pills nav-stacked dropdown-menu"> <li class="active"> <a href="#"> <span class="glyphicon glyphicon-cog"></span> Setting </a> </li> <li class="divider"></li> <li> <a href="#"> <span class="glyphicon glyphicon-user"></span> Profile </a> </li> <li class="divider"></li> <li> <a href="#"> <span class="glyphicon glyphicon-off"></span> Logout </a> </li> </ul> </li> </ul> </div> </div> <!-- 頁面部分 --> <div class="row"> <div class="col-sm-2"> <div id="search"> <div class="input-group"> <input class="form-control input-sm" type="text" /> <div class="input-group-btn"> <a href="#" class="btn btn-success btn-sm"> <span class="glyphicon glyphicon-search"></span> </a> </div> </div> </div> <div class="panel-group" id="box"> <div class="panel panel-success"> <div class="panel-heading"> <a href="#collapseA" data-parent="#box" data-toggle="collapse" class="panel-title">使用者管理</a> </div> <div class="panel-collapse collapse in" id="collapseA"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="#">使用者列表</a></li> <li><a href="#">使用者添加</a></li> <li><a href="#">使用者刪除</a></li> </ul> </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <a href="#collapseB" data-parent="#box" data-toggle="collapse" class="panel-title">產品管理</a> </div> <div class="panel-collapse collapse" id="collapseB"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="#">產品列表</a></li> <li><a href="#">產品添加</a></li> <li><a href="#">產品刪除</a></li> </ul> </div> </div> </div> </div> </div> <div class="col-sm-10"> <div class="bread-crumb"> <ul class="breadcrumb"> <li><span class="glyphicon glyphicon-home"></span><a href="#">Home</a></li> <li><a href="#">User</a></li> <li>Add</li> </ul> </div> <div class="panle panel-success"> <div class="panel-heading"> <a class="panel-title">使用者管理</a> </div> <div class="panel-body"> <table class="table table-striped table-hover"> <thead> <tr> <th>ID</th> <th>brand</th> <th>name</th> <th>channel</th> <th>inventory</th> <th>price</th> <th>isSale</th> <th>operation</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Apple</td> <td>Plus 6</td> <td>4G</td> <td>10</td> <td>4500</td> <td>yes</td> <td>add</td> </tr> <tr> <td>2</td> <td>Apple</td> <td>Plus 6</td> <td>4G</td> <td>10</td> <td>4500</td> <td>yes</td> <td>add</td> </tr> <tr> <td>3</td> <td>Apple</td> <td>Plus 6</td> <td>4G</td> <td>10</td> <td>4500</td> <td>yes</td> <td>add</td> </tr> </tbody> <tfoot> <tr> <td colspan="8"> <ul class="pagination"> <li><a href="#">«</a></li> <li><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> </td> </tr> </tfoot> </table> </div> </div> </div> </div> <script type="text/javascript" src="jquery/jquery.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> </body> </html>
作為例子參考還是非常不錯的。不記得的時候查下。
效果圖：
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
