"Blog Catagory List"
Bootstrap 3.1.0 Snippet by escapedlion

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/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="wrapper"> <div class="box"> <div class="row row-offcanvas row-offcanvas-left"> <!-- sidebar --> <div class="column col-sm-2 col-xs-1 sidebar-offcanvas" id="sidebar"> <ul class="nav"> <li> <a href="#" data-toggle="offcanvas" class="visible-xs text-center"><i class="glyphicon glyphicon-chevron-right"></i></a> </li> </ul> <ul class="nav hidden-xs" id="lg-menu"> <li class="active"><a href="dashboard"><span class="glyphicon glyphicon-list-alt"></span>Сводка</a></li> <li><a href="brief"><span class="glyphicon glyphicon-list"></span>Общая сводка</a></li> <li><a href="proposed"><span class="glyphicon glyphicon-paperclip"></span>Персональные проекты</a></li> <li><a href="index"><span class="glyphicon glyphicon-home"></span>Задачи</a></li> <li><a href="meaningful"><span class="glyphicon glyphicon-tags"></span>Приоритетные</a></li> <li><a href="archive"><span class="glyphicon glyphicon-book"></span>Архив</a></li> <li><a href="statistic"><span class="glyphicon glyphicon-leaf"></span>Статистика</a></li> </ul> <ul class="list-unstyled hidden-xs" id="sidebar-footer"> <li> <img src="http://bug.netgon.ru/images/logotype.png" alt="" width="200px;"> </li> </ul> <!-- tiny only nav--> <ul class="nav visible-xs" id="xs-menu"> <li><a href="dashboard" class="text-center"><i class="glyphicon glyphicon-list-alt"></i></a></li> <li><a href="brief" class="text-center"><i class="glyphicon glyphicon-list"></i></a></li> <li><a href="proposed" class="text-center"><i class="glyphicon glyphicon-paperclip"></i></a></li> <li><a href="index" class="text-center"><i class="glyphicon glyphicon-home"></i></a></li> <li><a href="meaningful" class="text-center"><i class="glyphicon glyphicon-tags"></i></a></li> <li><a href="archive" class="text-center"><i class="glyphicon glyphicon-book"></i></a></li> <li><a href="statistic" class="text-center"><i class="glyphicon glyphicon-leaf"></i></a></li> </ul> </div><!-- /sidebar --> <!-- main right col --> <div class="column col-sm-10 col-xs-11" id="main"> <!-- top nav --> <div class="navbar navbar-blue navbar-static-top"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <nav class="collapse navbar-collapse" role="navigation"> <ul class="nav navbar-nav navbar-left"> <li><a href="#"><span class="glyphicon glyphicon-align-justify"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span>DonSinDRom</a></li> <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>Задачи<span class="badge">21</span></a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope"></span>Сообщения<span class="badge">42</span></a></li> <li><a href="#"><span class="glyphicon glyphicon-signal"></span>Рейтинг<span class="badge">142</span></a></li> <li><a href="#"><span class="glyphicon glyphicon-th"></span>RSS</a></li> <li> <form class="navbar-form"> <div class="input-group input-group-sm" style="max-width:360px;"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i></a> <ul class="dropdown-menu"> <li><a href="">More</a></li> <li><a href="">More</a></li> <li><a href="">More</a></li> <li><a href="">More</a></li> <li><a href="">More</a></li> <li><a href="">More</a></li> <li><a href="">More</a></li> <li><a href="">More</a></li> <li><a href="">More</a></li> </ul> </li> </ul> </nav> </div><!-- /top nav --> <div class="padding"> <div class="full col-sm-9"> <!-- content --> <div class="row"> <!-- main col left --> <div class="col-sm-12"> <div class="panel panel-default"> <div class="panel-heading"> <h4>Доработка трекера. Часть #1. <strong>/Сводка</strong> <span class="pull-right">500$</span> <span class="pull-right"> <i class="price-text-color fa fa-star"></i> <i class="price-text-color fa fa-star"></i> <i class="price-text-color fa fa-star"></i> <i class="price-text-color fa fa-star"></i> <i class="fa fa-star"></i> </span> </h4> </div> <div class="panel-body"> <p> 6. Интеграция с GIT, SVN, DropBox, BitBucket(?) 8. Сократить срок нахождения проекта в трекере до 1-2 недель. [выполнено] Богдан Сделать возможно в админке задавать данный срок.[не выполнено] 9. Сейчас окно редактора комментариев всплывающее. Стоит его сделать как обычное редактирование, т.е. открывать форму как изначальную, только в режиме редактирования. 10. Вести что-то вроде базы или каталога с заказчиками и информацией о них. Тоже можно сделать касательно исполнителей. Возможно предусмотреть расширение трекера до CRM как дополнения или отдельного продукта в связке с трекером. 11. Отображать у новых админов старые задачи. < ... </p> <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> </div> <div class="panel-footer"> <span>12:09 02/09/2013</span> <span class="glyphicon glyphicon-thumbs-up"></span> <span>+12</span> <span class="glyphicon glyphicon-thumbs-down"></span> <span class="glyphicon glyphicon-eye-open">12</span> <span>Внутренний проект</span> <span>На согласовании</span> <span class="glyphicon glyphicon-ok pull-right">Завершить</span> <span class="glyphicon glyphicon-remove pull-right">Отказаться</span> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4>Доработка трекера. Часть #1. <strong>/Сводка</strong> <span class="pull-right">500$</span> <span class="pull-right"> <i class="price-text-color fa fa-star"></i> <i class="price-text-color fa fa-star"></i> <i class="price-text-color fa fa-star"></i> <i class="price-text-color fa fa-star"></i> <i class="fa fa-star"></i> </span> </h4> </div> <div class="panel-body"> <p> 6. Интеграция с GIT, SVN, DropBox, BitBucket(?) 8. Сократить срок нахождения проекта в трекере до 1-2 недель. [выполнено] Богдан Сделать возможно в админке задавать данный срок.[не выполнено] 9. Сейчас окно редактора комментариев всплывающее. Стоит его сделать как обычное редактирование, т.е. открывать форму как изначальную, только в режиме редактирования. 10. Вести что-то вроде базы или каталога с заказчиками и информацией о них. Тоже можно сделать касательно исполнителей. Возможно предусмотреть расширение трекера до CRM как дополнения или отдельного продукта в связке с трекером. 11. Отображать у новых админов старые задачи. < ... </p> <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> </div> <div class="panel-footer"> <span>12:09 02/09/2013</span> <span class="glyphicon glyphicon-thumbs-up"></span> <span>+12</span> <span class="glyphicon glyphicon-thumbs-down"></span> <span class="glyphicon glyphicon-eye-open">12</span> <span>Внутренний проект</span> <span>На согласовании</span> <span class="glyphicon glyphicon-ok pull-right">Завершить</span> <span class="glyphicon glyphicon-remove pull-right">Отказаться</span> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4>Доработка трекера. Часть #1. <strong>/Сводка</strong> <span class="pull-right">500$</span> <span class="pull-right"> <i class="price-text-color fa fa-star"></i> <i class="price-text-color fa fa-star"></i> <i class="price-text-color fa fa-star"></i> <i class="price-text-color fa fa-star"></i> <i class="fa fa-star"></i> </span> </h4> </div> <div class="panel-body"> <p> 6. Интеграция с GIT, SVN, DropBox, BitBucket(?) 8. Сократить срок нахождения проекта в трекере до 1-2 недель. [выполнено] Богдан Сделать возможно в админке задавать данный срок.[не выполнено] 9. Сейчас окно редактора комментариев всплывающее. Стоит его сделать как обычное редактирование, т.е. открывать форму как изначальную, только в режиме редактирования. 10. Вести что-то вроде базы или каталога с заказчиками и информацией о них. Тоже можно сделать касательно исполнителей. Возможно предусмотреть расширение трекера до CRM как дополнения или отдельного продукта в связке с трекером. 11. Отображать у новых админов старые задачи. < ... </p> <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> </div> <div class="panel-footer"> <span>12:09 02/09/2013</span> <span class="glyphicon glyphicon-thumbs-up"></span> <span>+12</span> <span class="glyphicon glyphicon-thumbs-down"></span> <span class="glyphicon glyphicon-eye-open">12</span> <span>Внутренний проект</span> <span>На согласовании</span> <span class="glyphicon glyphicon-ok pull-right">Завершить</span> <span class="glyphicon glyphicon-remove pull-right">Отказаться</span> </div> </div> <div class="pagination-centering"> <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> </div> </div> </div> </div><!-- /col-9 --> </div><!-- /padding --> </div><!-- /main --> </div> </div> </div> <!--post modal--> <div id="postModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> Update Status </div> <div class="modal-body"> <form class="form center-block"> <div class="form-group"> <textarea class="form-control input-lg" autofocus="" placeholder="What do you want to share?"></textarea> </div> </form> </div> <div class="modal-footer"> <div> <button class="btn btn-primary btn-sm" data-dismiss="modal" aria-hidden="true">Post</button> <ul class="pull-left list-inline"> <li><a href=""><i class="glyphicon glyphicon-upload"></i></a></li> <li><a href=""><i class="glyphicon glyphicon-camera"></i></a></li> <li><a href=""><i class="glyphicon glyphicon-map-marker"></i></a></li> </ul> </div> </div> </div> </div> </div>
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); /* custom template */ html, body { height: 100%; font-family:verdana,arial,sans-serif; color:#555555; } .nav { font-family:Arial,sans-serif; font-size:13px; } a { color:#222222; } a:hover { text-decoration:none; } hr { border-color:#dedede; } .wrapper, .row { height: 100%; margin-left:0; margin-right:0; } .wrapper:before, .wrapper:after, .column:before, .column:after { content: ""; display: table; } .wrapper:after, .column:after { clear: both; } .column { height: 100%; overflow: auto; *zoom:1; } .column .padding { padding: 20px; } .full{ padding-top:70px; } .box { bottom: 0; /* increase for footer use */ left: 0; position: absolute; right: 0; top: 0; background-color:#444444; /* background-image:url('/assets/example/bg_suburb.jpg'); background-size:cover; background-attachment:fixed; */ } .glyphicon { margin-right: 5px; } .badge { margin-left: 5px; } .divider { margin-top:32px; } .navbar-blue { border-width:0; background-color:#3B5999; color:#ffffff; font-family:arial,sans-serif; top:0; position:fixed; width:inherit; } .navbar-blue li > a,.navbar-toggle { color:#efefef; } .navbar-blue .dropdown-menu li a {color:#2A4888;} .navbar-blue .dropdown-menu li > a {padding-left:30px;} .navbar-blue li>a:hover, .navbar-blue li>a:focus, .navbar-blue .open, .navbar-blue .open>a, .navbar-blue .open>a:hover, .navbar-blue .open>a:focus { background-color:#2A4888; color:#fff; } #main { background-color:#e9eaed; padding-left:0; padding-right:0; } #main .img-circle { margin-top:18px; height:70px; width:70px; } #sidebar { padding:0px; padding-top:15px; } #sidebar, #sidebar a, #sidebar-footer a { color:#ffffff; background-color:transparent; text-shadow:0 0 2px #000000; padding-left:5px; } #sidebar .nav li>a:hover { background-color:#393939; } .logo { display:block; padding:3px; background-color:#fff; color:#3B5999; height:28px; width:28px; margin:9px; margin-right:2px; margin-left:15px; font-size:20px; font-weight:700; text-align:center; text-decoration:none; text-shadow:0 0 1px; border-radius:2px; } #sidebar-footer { background-color:#444; position:absolute; bottom:5px; padding:5px; } #footer { margin-bottom:20px; } /* bootstrap overrides */ h1,h2,h3 { font-weight:800; } .navbar-toggle, .close { outline:0; } .navbar-toggle .icon-bar { background-color: #fff; } .btn-primary,.label-primary,.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { background-color:#3B5999; color:#fffffe; } .btn-default { color:#666666; text-shadow:0 0 1px rgba(0,0,0,.3); } .form-control { } .panel textarea, .well textarea, textarea.form-control { resize: none; } .badge{ color:#3B5999; background-color:#fff; } .badge:hover, .badge-inverse{ background-color:#3B5999; color:#fff; } .jumbotron { background-color:transparent; } .label-default { background-color:#dddddd; } .page-header { margin-top: 55px; padding-top: 9px; border-top:1px solid #eeeeee; font-weight:700; text-transform:uppercase; letter-spacing:2px; } .panel-default .panel-heading { background-color:#f9fafb; color:#555555; } .col-sm-9.full { width: 100%; } .pagination-centering { text-align: center; } .modal-header, .modal-footer { background-color:#f2f2f2; font-weight:800; font-size:12px; } .modal-footer i, .well i { font-size:20px; color:#c0c0c0; } .modal-body { padding:0px; } .modal-body textarea.form-control { resize: none; border:0; box-shadow:0 0 0; } small.text-muted { font-family:courier,courier-new,monospace; } /* adjust the contents on smaller devices */ @media (max-width: 768px) { .column .padding { padding: 7px; } .full{ padding-top:20px; } .navbar-blue { background-color:#3B5999; top:0; width:100%; position:relative; } } /* * off canvas sidebar * -------------------------------------------------- */ @media screen and (max-width: 768px) { .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .row-offcanvas-left.active { left: 33%; } .row-offcanvas-left.active .sidebar-offcanvas { left: -33%; position: absolute; top: 0; width: 33%; margin-left: 5px; } #sidebar, #sidebar a, #sidebar-footer a { padding-left:3px; } }

Related: See More


Questions / Comments: