Bootstrap Blog Gönderisi Örneği


Bloglarda böyle üst bilgi – başlık – kısa özet – altbilgi tarzı listelenen gönderilere bir örnek oluşturdum, onu paylaşıyorum.

Ekran Görüntüsü

<div class="panel panel-default">
	<div class="panel-heading">
    <a href="icerik-standart.html">
        <h2 class="baslik" href="icerik-standart.html">Konu Başlığı 1</h2>
    </a>
</div>
	<div class="panel-body">
		<div class="col-lg-3">
			<img src="img/1.jpg" class="pull-left img-thumbnail" alt="Renkli Bağlantılar" width="200" height="200">						
		</div>

		<div class="col-lg-9">
			Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. 
Lorem Ipsum, adı bilinmeyen bir matbaacının 
bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak 
karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.				
			<p><br>
				<span class="badge">etiket 1</span>
				<span class="badge">etiket 2</span>
				<span class="badge">etiket 3</span>
				<span class="badge">etiket 4</span>
				<span class="badge">etiket 5</span>									
			</p>										
		</div>
	</div>
	<div class="panel-footer">
		<ul class="list-inline list-unstyled makale-altbilgi">
			<li><span><i class="glyphicon glyphicon-calendar"></i> 13.12.2016 </span></li>
			<li>|</li>
			<span><i class="glyphicon glyphicon-comment"></i> 26 Yorum</span>
			<li>|</li>
			<li>
			   <span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star-empty"></span>
			</li>
			<li>|</li>
			<li>
			<!-- Bu kısım için font awesome lazım. 
http://fortawesome.github.io/Font-Awesome/ -->
			  <span><i class="fa fa-facebook-square"></i></span>
			  <span><i class="fa fa-twitter-square"></i></span>
			  <span><i class="fa fa-google-plus-square"></i></span>
			</li>
		</ul>
	</div>
</div>

Yararlanılan Kaynaklar
http://bootsnipp.com/snippets/featured/blog-post-list-with-photo


Bunlar da hoşunuza gidebilir...


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir