Bootstrap Snippet Lista de prop using HTML CSS Bootstrap jQuery

/* Ref: Thanks to: http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html */ body { background-color:#eee; } #pinBoot { position: relative; max-width: 100%; width: 100%; } img { width: 100%; max-width: 100%; height: auto; } .white-panel { position: absolute; background: white; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); padding: 10px; } /* stylize any heading tags withing white-panel below */ .white-panel h1 { font-size: 1em; } .white-panel h1 a { color: #A92733; } .white-panel:hover { box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); margin-top: -5px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } :focus { outline: none; } .row { margin-right: 0; margin-left: 0; } /* Sometimes the sub menus get too large for the page and prevent the menu from scrolling, limiting functionality A quick fix is to change .side-menu to -> position:absolute and uncomment the code below. You also need to uncomment -> <div class="absolute-wrapper"> </div> in the html file you also need to tweek the animation. Just uncomment the code in that section -------------------------------------------------------------------------------------------------------------------- If you want to make it really neat i suggest you look into an alternative like http://areaaperta.com/nicescroll/ This will allow the menu to say fixed on body scoll and scoll on the side bar if it get to large */ /*.absolute-wrapper{ position: fixed; width: 300px; height: 100%; background-color: #f8f8f8; border-right: 1px solid #e7e7e7; }*/ .side-menu { position: fixed; width: 300px; height: 100%; background-color: #f8f8f8; border-right: 1px solid #e7e7e7; } .side-menu .navbar { border: none; } .side-menu .navbar-header { width: 100%; border-bottom: 1px solid #e7e7e7; } .side-menu .navbar-nav .active a { background-color: transparent; margin-right: -1px; border-right: 5px solid #e7e7e7; } .side-menu .navbar-nav li { display: block; width: 100%; border-bottom: 1px solid #e7e7e7; } .side-menu .navbar-nav li a { padding: 15px; } .side-menu .navbar-nav li a .glyphicon { padding-right: 10px; } .side-menu #dropdown { border: 0; margin-bottom: 0; border-radius: 0; background-color: transparent; box-shadow: none; } .side-menu #dropdown .caret { float: right; margin: 9px 5px 0; } .side-menu #dropdown .indicator { float: right; } .side-menu #dropdown > a { border-bottom: 1px solid #e7e7e7; } .side-menu #dropdown .panel-body { padding: 0; background-color: #f3f3f3; } .side-menu #dropdown .panel-body .navbar-nav { width: 100%; } .side-menu #dropdown .panel-body .navbar-nav li { padding-left: 15px; border-bottom: 1px solid #e7e7e7; } .side-menu #dropdown .panel-body .navbar-nav li:last-child { border-bottom: none; } .side-menu #dropdown .panel-body .panel > a { margin-left: -20px; padding-left: 35px; } .side-menu #dropdown .panel-body .panel-body { margin-left: -15px; } .side-menu #dropdown .panel-body .panel-body li { padding-left: 30px; } .side-menu #dropdown .panel-body .panel-body li:last-child { border-bottom: 1px solid #e7e7e7; } .side-menu #search-trigger { background-color: #f3f3f3; border: 0; border-radius: 0; position: absolute; top: 0; right: 0; padding: 15px 18px; } .side-menu .brand-name-wrapper { min-height: 50px; } .side-menu .brand-name-wrapper .navbar-brand { display: block; } .side-menu #search { position: relative; z-index: 1000; } .side-menu #search .panel-body { padding: 0; } .side-menu #search .panel-body .navbar-form { padding: 0; padding-right: 50px; width: 100%; margin: 0; position: relative; border-top: 1px solid #e7e7e7; } .side-menu #search .panel-body .navbar-form .form-group { width: 100%; position: relative; } .side-menu #search .panel-body .navbar-form input { border: 0; border-radius: 0; box-shadow: none; width: 100%; height: 50px; } .side-menu #search .panel-body .navbar-form .btn { position: absolute; right: 0; top: 0; border: 0; border-radius: 0; background-color: #f3f3f3; padding: 15px 18px; } /* Main body section */ .side-body { margin-left: 310px; } /* small screen */ @media (max-width: 768px) { .side-menu { position: relative; width: 100%; height: 0; border-right: 0; border-bottom: 1px solid #e7e7e7; } .side-menu .brand-name-wrapper .navbar-brand { display: inline-block; } /* Slide in animation */ @-moz-keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @-webkit-keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @-moz-keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } @-webkit-keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } @keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } /* Slide side menu*/ /* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */ .side-menu-container > .navbar-nav.slide-in { -moz-animation: slidein 300ms forwards; -o-animation: slidein 300ms forwards; -webkit-animation: slidein 300ms forwards; animation: slidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .side-menu-container > .navbar-nav { /* Add position:absolute for scrollable menu -> see top comment */ position: fixed; left: -300px; width: 300px; top: 43px; height: 100%; border-right: 1px solid #e7e7e7; background-color: #f8f8f8; -moz-animation: slideout 300ms forwards; -o-animation: slideout 300ms forwards; -webkit-animation: slideout 300ms forwards; animation: slideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* Uncomment for scrollable menu -> see top comment */ /*.absolute-wrapper{ width:285px; -moz-animation: slideout 300ms forwards; -o-animation: slideout 300ms forwards; -webkit-animation: slideout 300ms forwards; animation: slideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }*/ @-moz-keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @-webkit-keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @-moz-keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } @-webkit-keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } @keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } /* Slide side body*/ .side-body { margin-left: 5px; margin-top: 70px; position: relative; -moz-animation: bodyslideout 300ms forwards; -o-animation: bodyslideout 300ms forwards; -webkit-animation: bodyslideout 300ms forwards; animation: bodyslideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .body-slide-in { -moz-animation: bodyslidein 300ms forwards; -o-animation: bodyslidein 300ms forwards; -webkit-animation: bodyslidein 300ms forwards; animation: bodyslidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* Hamburger */ .navbar-toggle { border: 0; float: left; padding: 18px; margin: 0; border-radius: 0; background-color: #f3f3f3; } /* Search */ #search .panel-body .navbar-form { border-bottom: 0; } #search .panel-body .navbar-form .form-group { margin: 0; } .navbar-header { /* this is probably redundant */ position: fixed; z-index: 3; background-color: #f8f8f8; } /* Dropdown tweek */ #dropdown .panel-body .navbar-nav { margin: 0; } }

$(document).ready(function() { $('#pinBoot').pinterest_grid({ no_columns: 4, padding_x: 10, padding_y: 10, margin_bottom: 50, single_column_breakpoint: 700 }); }); /* Ref: Thanks to: http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html */ /* Pinterest Grid Plugin Copyright 2014 Mediademons @author smm 16/04/2014 usage: $(document).ready(function() { $('#blog-landing').pinterest_grid({ no_columns: 4 }); }); */ ;(function ($, window, document, undefined) { var pluginName = 'pinterest_grid', defaults = { padding_x: 10, padding_y: 10, no_columns: 3, margin_bottom: 50, single_column_breakpoint: 700 }, columns, $article, article_width; function Plugin(element, options) { this.element = element; this.options = $.extend({}, defaults, options) ; this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype.init = function () { var self = this, resize_finish; $(window).resize(function() { clearTimeout(resize_finish); resize_finish = setTimeout( function () { self.make_layout_change(self); }, 11); }); self.make_layout_change(self); setTimeout(function() { $(window).resize(); }, 500); }; Plugin.prototype.calculate = function (single_column_mode) { var self = this, tallest = 0, row = 0, $container = $(this.element), container_width = $container.width(); $article = $(this.element).children(); if(single_column_mode === true) { article_width = $container.width() - self.options.padding_x; } else { article_width = ($container.width() - self.options.padding_x * self.options.no_columns) / self.options.no_columns; } $article.each(function() { $(this).css('width', article_width); }); columns = self.options.no_columns; $article.each(function(index) { var current_column, left_out = 0, top = 0, $this = $(this), prevAll = $this.prevAll(), tallest = 0; if(single_column_mode === false) { current_column = (index % columns); } else { current_column = 0; } for(var t = 0; t < columns; t++) { $this.removeClass('c'+t); } if(index % columns === 0) { row++; } $this.addClass('c' + current_column); $this.addClass('r' + row); prevAll.each(function(index) { if($(this).hasClass('c' + current_column)) { top += $(this).outerHeight() + self.options.padding_y; } }); if(single_column_mode === true) { left_out = 0; } else { left_out = (index % columns) * (article_width + self.options.padding_x); } $this.css({ 'left': left_out, 'top' : top }); }); this.tallest($container); $(window).resize(); }; Plugin.prototype.tallest = function (_container) { var column_heights = [], largest = 0; for(var z = 0; z < columns; z++) { var temp_height = 0; _container.find('.c'+z).each(function() { temp_height += $(this).outerHeight(); }); column_heights[z] = temp_height; } largest = Math.max.apply(Math, column_heights); _container.css('height', largest + (this.options.padding_y + this.options.margin_bottom)); }; Plugin.prototype.make_layout_change = function (_self) { if($(window).width() < _self.options.single_column_breakpoint) { _self.calculate(true); } else { _self.calculate(false); } }; $.fn[pluginName] = function (options) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); } }); } })(jQuery, window, document); $(function () { $('.navbar-toggle').click(function () { $('.navbar-nav').toggleClass('slide-in'); $('.side-body').toggleClass('body-slide-in'); $('#search').removeClass('in').addClass('collapse').slideUp(200); /// uncomment code for absolute positioning tweek see top comment in css //$('.absolute-wrapper').toggleClass('slide-in'); }); // Remove menu for searching $('#search-trigger').click(function () { $('.navbar-nav').removeClass('slide-in'); $('.side-body').removeClass('body-slide-in'); /// uncomment code for absolute positioning tweek see top comment in css //$('.absolute-wrapper').removeClass('slide-in'); }); });

"Lista de prop"
Bootstrap 3.3.0 Snippet by matiasg1989

Related: See More

Questions / Comments:

"Lista de prop" Bootstrap 3.3.0 Snippet by matiasg1989

Related: See More

Questions / Comments:

"Lista de prop"
Bootstrap 3.3.0 Snippet by matiasg1989