"a list items with json notation"
Bootstrap 3.1.0 Snippet by muhittinbudak

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="row"> <h2 class="main-list">List items with json</h2> <div id="example"></div> </div> <div class="row"> <a href="https://bootsnipp.com/snippets/ZaAVl" target="_blank" class="btn btn-success">get from github json</a> </div> </div>
/* list item Restriction. */ .main-list { padding-left: .5em; } .main-list .media { /* margin-top: 20px; */ padding-bottom: 1.1em; border-bottom: 1px solid #3C3C3C; } .main-list .media:first-child { /* border-top: 2px solid blue;*/ padding-top:15px; } .main-list .media:last-child { /*border: none;*/ border-bottom: 1px solid #D6D6D6; } .habertext { border: 1px solid #D9534F; } /* list item shortening a long sentence. */ #listitem { overflow: hidden; width:100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .image-container { width: 150px; height: 100px; overflow: hidden; /* Dışarı taşan kısmı gizle */ position: relative; border-radius: 5px; /* Köşeleri yuvarlatır */ } .image-container img { width: 100%; /* Genişliği kapsayacak şekilde ayarla */ height: auto; /* Oranı koru (sıkıştırma yok) */ display: block; position: relative; top: 0; /* Gerekirse yukarıdan kırp */ }
$(document).ready(function() { // json list var data = { "example": [{ "haberImgUrl": "https://observation.org/media/photo/46744451.jpg", "haberTitle": "Colobus", "haberText": "Colobus is simply dummy text of the printing and typesetting industry.", "haberUrl": "https://en.wikipedia.org/wiki/Red_colobus" }, { "haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17AQbDsnhpPf0nxqd1lKg3xzFP59Ase7JkY1CI2LOSVPiigyeMsPIjGUbD2el3qmnvMSkyvqjzneVtS4bhbukcCKQfs4V8Yliz9H_1dRSk5OHqkT8QkGBYp3C7FRFg7nCT-U3NnZ_syFgHSkcbiBUzbi3j-NY4j0GVhUFdIikWBUuty92QAkoZrc8pV16/s518/eagle.jpg", "haberTitle": "Bald Eagle", "haberText" : "Bald Eagle is simply dummy text of the printing and typesetting industry.", "haberUrl": "https://en.wikipedia.org/wiki/Bald_eagle" }, { "haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_TdgzR3iOmGCzVCGCrIFmdxCJlPbikcneeYhQbtuNdZsvOXWPjy6M7WiJXFalTWLzb_HlkVGFKd6d-lRECI5awOekrK5gPCrVE-ZPRXGZ6mF1Pc0DryeajLprb3MLcridAKqfX5kU10nb8NFTyHcnpX5txGLi64KkR3G9LhbW7LWBRJviAzecnln8G1Z/s518/elephant.jpg", "haberTitle": "African Elephant", "haberText" : "African Elephant is simply dummy text of the printing and typesetting industry.", "haberUrl": "https://en.wikipedia.org/wiki/African_elephant" }, { "haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwTZ_5LjFqnXDQx2Vy-_WhqThY3JcO3VMvhqpcpYiyLbFDkX6yCpT_9bXcDmIcJ7vAZQ5moGKwswFrxt5JZuibuORhS8b3w1Bdhgg7W4kxIPYvXjM0rcAnhSjjKhsSWhs8NpH5naNZJ0kdMjWCYKziIpdy_VbkaEyPJm-woV-1UQZm65jQha_vHYljO60/s518/ivanovic.jpg", "haberTitle": "Ana ivanovic", "haberText" : "Ana ivanovic is simply dummy text of the printing and typesetting industry.", "haberUrl": "https://en.wikipedia.org/wiki/Ana_Ivanovic" }, { "haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s518/lion.jpg", "haberTitle": "lion", "haberText" : "Lion is simply dummy text of the printing and typesetting industry.", "haberUrl": "https://en.wikipedia.org/wiki/Panthera_leo_melanochaita" }, { "haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp_5UOnwG08ciFaMVPVebxAEmLQvwwqkHF-Ks7EYqe5yeIfiLM5tjL2by_TPztgRxb_u09PSxUeJfwp2ESTK7h1LeWD9FJt_3_fwKIpZloU341Vjp6FiI49-82eKeizkeGnz4e6B-ZgYnS7SxKXF60nqFeh7o71DNYrVpRXHFM3pfvoknxyn7zgvYRhLC/s518/lizard.jpg", "haberTitle": "lizard", "haberText" : "Lizard is simply dummy text of the printing and typesetting industry.", "haberUrl": "https://en.wikipedia.org/wiki/Lizard" }, { "haberImgUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcRlWMXJAYstGEw6LQAJ6WdK2xdXs5veW4tLxETzua0tqpxODsqZXExvIXl3gVQMnAb2sVL84_WBM9mGv_u6WYyUtt4B7N82iiy6KceAwel9y4mYxq2Dw9Fi0XnatN16HEPVXOaTPn7Z2ISVQNdFmiaeM3fZNK8QZKXEEn9XOmSCmv1SB3OHDZFTX6vmK/s518/squid.jpg", "haberTitle": "Squid", "haberText" : "Squid is simply dummy text of the printing and typesetting industry.", "haberUrl": "https://en.wikipedia.org/wiki/Squid" }] }; // listing var output = '<ul class="media-list main-list" style="border-top: 2px solid red;" >'; $.each(data.example, function(key, unsur) { output += "<li class='media'><a class='pull-left' href='" + unsur.haberUrl +"'><div class='image-container'><img class='media-object img-responsive img-rounded' src='"+unsur.haberImgUrl+"''></div></a><div class='media-body'><h4 class='media-heading'>" + unsur.haberTitle + "</h4><p id='listitem' class='by-author'>" + unsur.haberText + "</p><div class='btn-toolbar' style='margin-top:10px;'><a href='"+ unsur.haberUrl + "' class='btn btn-lg btn-danger habertext'>Habere Git <span class='glyphicon glyphicon-chevron-right'></span></a></div></li>" }); output += "</ul>"; $('#example').append(output); });

Related: See More


Questions / Comments: