HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container" style="margin-top:40px">
    <div class="row">
        <div class="col-xs-3 col-xs-offset-4" style="border:1px solid silver;padding:0px;">
            <div class="brand">
                <img src="https://www.documentree.com/images/yourlogohere.png" alt="Brand" />
            </div>
            <div class="col-xs-12">
                <div class="row canvas"></div>                             
            </div>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        .brand{
            width:100%;
            background:silver;
            display:flex;
            align-content: center;
            max-height: 35px;            
        }
        .brand > img{
            margin-left:5px;
            max-height:40px;
            width:auto;            
        }
        .mylabel{
            border-left:1px solid #fafafa;
            border-bottom:black;
            border-bottom:1px solid #fafafa;
            height: 90px;
            padding: 0;
            position: relative;
            cursor:pointer;
        }
        .mylabel > a{
            color:black;
        }
        .mylabel > a > p:first-of-type{
            font-size:9px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1; /* number of lines to show */
            line-height: 14px;        /* fallback */
            max-height: 14px;       /* fallback */            
            margin: 0;            
            text-align:center;            
        }
        .mylabel > a > p:last-of-type{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
    //-- Crear productos dinamicamente
    var products = [];
    products.push({"title":"Tablet Samsung Tab SM-T133","price":"156","discount":"10","photo":"http://fravega.vteximg.com.br/arquivos/ids/290643-280-280/700391_1.jpg","link":""});
    products.push({"title":"Tablet Samsung Galaxy Tab E 96","price":"156","discount":"13","photo":"http://fravega.vteximg.com.br/arquivos/ids/278245-280-280/700270_1.jpg","link":""});
    products.push({"title":"Celular Libre Lenovo Vibe K5 Negro","price":"280","discount":"5","photo":"http://fravega.vteximg.com.br/arquivos/ids/287959-280-280/780686_1.jpg","link":""});
    products.push({"title":"Celular Libre Alcatel IDOL 3","price":"247","discount":"18","photo":"http://fravega.vteximg.com.br/arquivos/ids/284084-280-280/_MG_0204-copy.jpg","link":""});
    products.push({"title":"Tablet Eurocase I748 Tabi 7","price":"130","discount":"20","photo":"http://fravega.vteximg.com.br/arquivos/ids/290699-280-280/700393_1.jpg","link":""});
    products.push({"title":"Celular Libre Samsung Galaxy A5 2016 Dorado","price":"499","discount":"10","photo":"http://fravega.vteximg.com.br/arquivos/ids/284088-280-280/CELULAR-LIBRE-SAMSUNG-GALAXY-A5-2016-DORADO.jpg","link":""});
    products.push({"title":"Celular Libre Admiral ADS1 Blanco","price":"187","discount":"10","photo":"http://fravega.vteximg.com.br/arquivos/ids/294640-280-280/780607_1.jpg","link":""});
    products.push({"title":"Celular Libre Huawei G8 Plateado","price":"550","discount":"5","photo":"http://fravega.vteximg.com.br/arquivos/ids/284323-280-280/CELULAR-LIBRE-HUAWEI-G8-PLATEADO.jpg","link":""});
    products.push({"title":"Celular Libre Samsung Galaxy J1 MINI White","price":"156","discount":"15","photo":"http://fravega.vteximg.com.br/arquivos/ids/294473-280-280/Celular-Libre-Samsung-Galaxy-J1-MINI-White.jpg","link":""});
    
    
    function shuffle(a) {
        for (let i = a.length; i; i--) {
            let j = Math.floor(Math.random() * i);
            [a[i - 1], a[j]] = [a[j], a[i - 1]];
        }
        return a;
    }
    
    showProducts();
    function showProducts(){
        products = shuffle(products);
        $(".canvas").html("");  //-- Empty
        //-- Print                
        $.each(products, function(e, data){
            if (e < 6){
                //-- Check discount
                if (data.discount === undefined || data.discount <= 0){
                    var html_discount = '';
                    var new_price = data.price;
                }else{
                    var html_discount = '<span class="label discount">-'+data.discount+'%</span>';
                    var new_price = parseInt(data.price) - (parseInt(data.price) * parseInt(data.discount) / 100);
                }                        
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Display Ads - Dynamic"
Bootstrap 3.3.0 Snippet by pablocorezzola

Related: See More

Questions / Comments:

"Display Ads - Dynamic" Bootstrap 3.3.0 Snippet by pablocorezzola

Related: See More

Questions / Comments:

"Display Ads - Dynamic"
Bootstrap 3.3.0 Snippet by pablocorezzola