Bootstrap snippet: cvdtable

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Пользователи <span class="sr-only">(current)</span></a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Выход</a></li> </ul> </div> </div> </nav> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Пользователи</h2> <div id="custom-search-input"> <div class="input-group col-md-12"> <input type="text" class="form-control input-lg" placeholder="Иванов Сергей Петрович" /> <span class="input-group-btn"> <button class="btn btn-info btn-lg" type="button"> <i class="glyphicon glyphicon-search"></i> </button> </span> </div> </div> </div> <div id="filter-panel" class="filter-panel col-md-12"> <div class="panel panel-default"> <div class="panel-body"> <form class="form-inline" role="form"> <div class="form-group"> <label class="filter-col" for="pref-perpage">Роль</label> <select id="pref-perpage" class="form-control" multiple="multiple" style="min-width:200px"> <option value="3">Администратор</option> <option value="4">Маркетолог</option> <option value="5">Юрист бекофиса</option> <option value="6">Руководитель филиала</option> <option selected="selected" value="7">Менеджер продаж</option> <option value="8">Юрист фронтофиса</option> </select> </div> <!-- form group [rows] --> <div class="form-group"> <label class="filter-col" for="pref-perpage">Филиал</label> <select id="pref-perpage2" class="form-control" multiple="multiple" style="min-width:200px"> <option value="2">Головной офис</option> <option value="3">Москва Калужская</option> <option value="4">Барнаул</option> <option value="5">Сызрань</option> </select> </div> <!-- form group [rows] --> <div class="form-group"> <label class="filter-col" for="pref-perpage">Статус</label> <select id="pref-perpage3" class="form-control"> <option value="2">Активен</option> <option value="3">Выключен</option> </select> </div> <!-- form group [rows] --> <div class="form-group pull-right"> <button type="submit" class="btn btn-default filter-col"> <span class="glyphicon glyphicon-record"></span> Применить </button> </div> </form> </div> </div> </div> </div> </div> <div class="container bootstrap snippet"> <div class="row"> <div class="container col-md-4 col-md-offset-4" > <ul class="pagination pagination-lg"> <li class="disabled"><a href="#">&laquo;</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></a></li> <li><a href="#">5</a></li> <li><a href="#">&raquo;</a></li> </ul> </div> <div class="col-lg-12"> <div class="main-box no-header clearfix"> <div class="main-box-body clearfix"> <div class="table-responsive"> <table class="table user-list"> <thead> <tr> <th><span>Пользователь</span></th> <th><span>Создан</span></th> <th class="text-center"><span>Статус</span></th> <th><span>Email</span></th> <th><span>Телефон</span></th> <th><span>Филиал</span></th> <th>&nbsp;</th> </tr> </thead> <tbody> <tr> <td> <img src="http://eightbitavatar.herokuapp.com/?id=marlon@brando.com&s=male&size=100" alt=""> <a href="#" class="user-link">Говнюков Петр Алексеевич</a> <span class="user-subhead">Администратор</span> </td> <td>2013/08/12</td> <td class="text-center"> <span class="label label-default">Активен</span> </td> <td> <a href="#">marlon@brando.com</a> </td> <td> <a href="#">+7(903)123-34-32</a> </td> <td> <a href="#">Головной офис</a> </td> <td style="width: 20%;"> <button type="button" class="btn btn-primary"><i class="fa fa-pencil"></i></button> <button type="button" class="btn btn-warning"><i class="fa fa-power-off"></i></button> <button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i></button> </td> </tr> <tr> <td> <img src="http://eightbitavatar.herokuapp.com/?id=Fullname2&s=female&size=100" alt=""> <a href="#" class="user-link">Full name 2</a> <span class="user-subhead">Admin</span> </td> <td>2013/08/12</td> <td class="text-center"> <span class="label label-success">Active</span> </td> <td> <a href="#">marlon@brando.com</a> </td> <td> <a href="#">+7(903)123-34-32</a> </td> <td> <a href="#">Головной офис</a> </td> <td style="width: 20%;"> <a href="#" class="table-link"> <span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-search-plus fa-stack-1x fa-inverse"></i> </span> </a> <a href="#" class="table-link"> <span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> </span> </a> <a href="#" class="table-link danger"> <span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-trash-o fa-stack-1x fa-inverse"></i> </span> </a> </td> </tr> <tr> <td> <img src="http://eightbitavatar.herokuapp.com/?id=Fullname3&s=male&size=100" alt=""> <a href="#" class="user-link">Full name 3</a> <span class="user-subhead">Member</span> </td> <td>2013/08/12</td> <td class="text-center"> <span class="label label-danger">inactive</span> </td> <td> <a href="#">marlon@brando.com</a> </td> <td> <a href="#">+7(903)123-34-32</a> </td> <td> <a href="#">Головной офис</a> </td> <td style="width: 20%;"> <a href="#" class="table-link"> <span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-search-plus fa-stack-1x fa-inverse"></i> </span> </a> <a href="#" class="table-link"> <span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> </span> </a> <a href="#" class="table-link danger"> <span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-trash-o fa-stack-1x fa-inverse"></i> </span> </a> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="container col-md-4 col-md-offset-4" > <ul class="pagination pagination-lg"> <li class="disabled"><a href="#">&laquo;</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></a></li> <li><a href="#">5</a></li> <li><a href="#">&raquo;</a></li> </ul> </div> </div> </div>
@import url('http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css'); @import url('http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2-bootstrap.css'); body{ background:#eee; } .main-box.no-header { padding-top: 20px; } .main-box { background: #FFFFFF; -webkit-box-shadow: 1px 1px 2px 0 #CCCCCC; -moz-box-shadow: 1px 1px 2px 0 #CCCCCC; -o-box-shadow: 1px 1px 2px 0 #CCCCCC; -ms-box-shadow: 1px 1px 2px 0 #CCCCCC; box-shadow: 1px 1px 2px 0 #CCCCCC; margin-bottom: 16px; -webikt-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .table a.table-link.danger { color: #e74c3c; } .label { border-radius: 3px; font-size: 0.875em; font-weight: 600; } .user-list tbody td .user-subhead { font-size: 0.875em; font-style: italic; } .user-list tbody td .user-link { display: block; font-size: 1.25em; padding-top: 3px; margin-left: 60px; } a { color: #3498db; outline: none!important; } .user-list tbody td>img { position: relative; max-width: 50px; float: left; margin-right: 15px; } .table thead tr th { text-transform: uppercase; font-size: 0.875em; } .table thead tr th { border-bottom: 2px solid #e7ebee; } .table tbody tr td:first-child { font-size: 1.125em; font-weight: 300; } .table tbody tr td { font-size: 0.875em; vertical-align: middle; border-top: 1px solid #e7ebee; padding: 12px 8px; }
//Select2 $.getScript('http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.min.js',function(){ /* dropdown and filter select */ var select = $('#pref-perpage').select2({ placeholder: "Любая", // closeOnSelect:false }); $('#pref-perpage2').select2({ placeholder: "Любой", // closeOnSelect:false }); /* Select2 plugin as tagpicker */ $("#tagPicker").select2({ closeOnSelect:false }); }); //script $(document).ready(function() {});
morskoi

cvdtable

morskoi
  Feb 16th, 10:17
179 Views