<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-3 col-md-2"> <button class="btn btn-block btn-primary" href="/" role="button">Баланс 10000 ₽</button> </div> <div class="col-sm-9 col-md-10"> <button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh"><span class="glyphicon glyphicon-refresh"></span></button> </div> </div> <hr/> <div class="row"> <div class="col-sm-3 col-md-2"> <a href="#" class="btn btn-danger btn-sm btn-block" role="button">Добавить объявление</a> <hr/> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#agencys" data-toggle="tab"><span class="badge pull-right">3</span>Агенств </a></li> <li><a href="#premis" data-toggle="tab"><span class="badge pull-right">300</span>Объявлений </a></li> <li><a href="#xml" data-toggle="tab">XML</a></li> <hr/> <li><a href="#1" data-toggle="tab"><span class="badge pull-right">200</span>Бэст-Новострой </a></li> <li><a href="#2" data-toggle="tab"><span class="badge pull-right">100</span>Estatet </a></li> <li><a href="#3" data-toggle="tab"><span class="badge pull-right">150</span>JQestate </a></li> </ul> </div> <div class="col-sm-9 col-md-10"> <div class="tab-content"> <div class="tab-pane active" id="agencys"> <ul class="nav nav-tabs"> <li class="active"><a href="#agency" data-toggle="tab"><span class="tabs-pic glyphicon glyphicon-inbox"></span>Агенства</a></li> <li><a href="#agency_add" data-toggle="tab"><span class="glyphicon glyphicon-plus no-margin"></span></a></li> <div class="pull-right"> <span class="text-muted"><b>1</b>–<b>3</b> из <b>3</b></span> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-left"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="agency"> <div class="list-group"> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-home"></span> <span class="name" style="min-width: 120px; display: inline-block;">Бэст-Новострой</span> <span class="">200 объявлений</span> <span class="text-muted" style="font-size: 11px;">- обновлено в 20:17</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-home"></span> <span class="name" style="min-width: 120px; display: inline-block;">Estatet</span> <span class="">100 объявлений</span> <span class="text-muted" style="font-size: 11px;">- обновлено вчера</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-home"></span> <span class="name" style="min-width: 120px; display: inline-block;">JQestate</span> <span class="">150 объявлений</span> <span class="text-muted" style="font-size: 11px;">- обновлено 3 дня назад</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> </div> </div> <div class="tab-pane fade in" id="agency_add"> <div class="list-group"> <div class="list-group-item"> <span class="text-center">Форма для добавления "Агенства"</span> </div> </div> </div> </div> </div> <div class="tab-pane" id="premis"> <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab"><span class="tabs-pic glyphicon glyphicon-list-alt"></span>Объявления</a></li> <li><a href="/add" data-toggle="tab"><span class="glyphicon glyphicon-plus no-margin"></span></a></li> <div class="pull-right"> <span class="text-muted"><b>1</b>–<b>3</b> из <b>300</b></span> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-left"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="home"> <div class="list-group"> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">1.700.000 ₽</span> <span class="">1-Новокузьминская ул., 7</span> <span class="text-muted" style="font-size: 11px;">- добавлено в 20:17</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">+ Агенство</button> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">100.700.000 ₽</span> <span class="">Зеленый вал, 34</span> <span class="text-muted" style="font-size: 11px;">- добавлено вчера</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">+ Агенство</button> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">1.100.700.000 ₽</span> <span class="">Ленина, 89</span> <span class="text-muted" style="font-size: 11px;">- добавлено 3 дня назад</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">+ Агенство</button> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> </div> </div> </div> </div> <div class="tab-pane" id="1"> <ul class="nav nav-tabs"> <li class="active"><a href="#agency1" data-toggle="tab"><span class="tabs-pic glyphicon glyphicon-home"></span>Бест-Новострой</a></li> <li><a href="#edite1" data-toggle="tab">Редактировать</a></li> <div class="pull-right"> <span class="text-muted"><b>1</b>–<b>3</b> из <b>200</b></span> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-left"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="agency1"> <div class="list-group"> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">1.700.000 ₽</span> <span class="">1-Новокузьминская ул., 7</span> <span class="text-muted" style="font-size: 11px;">- добавлено в 20:17</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">100.700.000 ₽</span> <span class="">Зеленый вал, 34</span> <span class="text-muted" style="font-size: 11px;">- добавлено вчера</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">1.100.700.000 ₽</span> <span class="">Ленина, 89</span> <span class="text-muted" style="font-size: 11px;">- добавлено 3 дня назад</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> </div> </div> <div class="tab-pane fade in" id="edite1"> <div class="list-group"> <div class="list-group-item"> <span class="text-center">Форма для редактирования "Агенства Бест-Новострой"</span> </div> </div> </div> </div> </div> <div class="tab-pane" id="2"> <ul class="nav nav-tabs"> <li class="active"><a href="#agency2" data-toggle="tab"><span class="tabs-pic glyphicon glyphicon-home"></span>Estatet</a></li> <li><a href="#edite2" data-toggle="tab">Редактировать</a></li> <div class="pull-right"> <span class="text-muted"><b>1</b>–<b>3</b> из <b>100</b></span> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-left"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="agency2"> <div class="list-group"> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">1.700.000 ₽</span> <span class="">1-Новокузьминская ул., 7</span> <span class="text-muted" style="font-size: 11px;">- добавлено в 20:17</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">100.700.000 ₽</span> <span class="">Зеленый вал, 34</span> <span class="text-muted" style="font-size: 11px;">- добавлено вчера</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">1.100.700.000 ₽</span> <span class="">Ленина, 89</span> <span class="text-muted" style="font-size: 11px;">- добавлено 3 дня назад</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> </div> </div> <div class="tab-pane fade in" id="edite2"> <div class="list-group"> <div class="list-group-item"> <span class="text-center">Форма для редактирования "Агенства Estatet"</span> </div> </div> </div> </div> </div> <div class="tab-pane" id="3"> <ul class="nav nav-tabs"> <li class="active"><a href="#agency3" data-toggle="tab"><span class="tabs-pic glyphicon glyphicon-home"></span>JQestate</a></li> <li><a href="#edite3" data-toggle="tab">Редактировать</a></li> <div class="pull-right"> <span class="text-muted"><b>1</b>–<b>3</b> из <b>100</b></span> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-left"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="agency3"> <div class="list-group"> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">1.700.000 ₽</span> <span class="">1-Новокузьминская ул., 7</span> <span class="text-muted" style="font-size: 11px;">- добавлено в 20:17</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">100.700.000 ₽</span> <span class="">Зеленый вал, 34</span> <span class="text-muted" style="font-size: 11px;">- добавлено вчера</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-file"></span> <span class="name" style="min-width: 120px; display: inline-block;">1.100.700.000 ₽</span> <span class="">Ленина, 89</span> <span class="text-muted" style="font-size: 11px;">- добавлено 3 дня назад</span> <span class="pull-right"> <button class="btn btn-xs btn-primary" href="/" role="button">Редактировать</button> <button class="btn btn-xs btn-danger" href="/" role="button">Удалить</button> </span> </a> </div> </div> <div class="tab-pane fade in" id="edite3"> <div class="list-group"> <div class="list-group-item"> <span class="text-center">Форма для редактирования "Агенства JQestate"</span> </div> </div> </div> </div> </div> </div> </div> </div> </div>

body{ margin-top:50px;} .nav-tabs .tabs-pic:not(.no-margin) { margin-right:10px; } .tab-pane .list-group-item:first-child {border-top-right-radius: 0px;border-top-left-radius: 0px;} .tab-pane .list-group-item:last-child {border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;} .tab-pane .list-group .checkbox { display: inline-block;margin: 0px; } .tab-pane .list-group input[type="checkbox"]{ margin-top: 2px; } .tab-pane .list-group .glyphicon { margin-right:5px; } a.list-group-item.read { color: #222;background-color: #F3F3F3; } hr { margin-top: 5px;margin-bottom: 10px; } .nav-pills>li>a {padding: 5px 10px;} .ad { padding: 5px;background: #F5F5F5;color: #222;font-size: 80%;border: 1px solid #E5E5E5; } .ad a.title {color: #15C;text-decoration: none;font-weight: bold;font-size: 110%;} .ad a.url {color: #093;text-decoration: none;}