Bootstrap 4 Konusunda Yardım

Merhaba arkadaşlar.
Önceden html ve css ile kodlamış olduğum makale kısmını bootstrap 4 ile kodlamak istiyorum. Aşağıdaki resimler makale kısımlarına ait. Kodlamaya başladım ama çizgi ve üst bilgiler kısmında tıkandım. Bu konuda yardımcı olabilir misiniz. Bir resimli bir resimsiz yapmak istiyorum.

Resimli MakaleResimsiz MakaleBootstrap 4 kodlamamın şuanki durumu.

<!--- İçerik --->
<div class="col col-lg-6">
	<div class="card">
		<div class="card-block makale">
			<div class="media">
				<img class="d-flex mr-3" src="temalar/bootstrap/images/1.jpg" width="100px" height="100px" alt="Generic placeholder image">
				<div class="media-body">
					
					<!--- Bilgiler --->
					<div class="pull-right">
						<p class="text-muted" style="border-bottom: 1px #efefef solid; padding-bottom: 2px;">
							<small>
								<span class="pull-right">
									<i class="fa fa-calendar-o fa-fw"></i> 3 gün önce 
									<i class="fa fa-eye fa-fw"></i> 85 
								</span>
								<i class="fa fa-user"></i>
								<a href="#">Admin</a>
							</small>
						</p>
					</div>
					<!--# Bilgiler #-->

					<h5 class="mt-0">Media heading</h5>
					<p class="makale-text">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
				</div>
			</div>
		</div>
	</div>			
</div>
<!--# İçerik #-->

 

Selamlar,

Dostum blog sayfaları için hazır boş bootstrap template leri var onları deneyebilirsin.

Ayrıca bootstrap ögelerini öğrenirsen zaten bu sorun olmaz senin için.  Önce biraz bootstrap ile uğraş. İçeriğini çöz gerisi çok kolay gelir.

Buradan inceleyerek yapıyorum ama sorunumu çözecek elamanı bulamadım.
https://v4-alpha.getbootstrap.com/getting-started/introduction/

Bootstrap 4'e geçmek için biraz erken bence. Ben daha geçmedim. Zaten versiyon 4, tam anlamıyla da bitmedi. Hala üzerinde çalışıyorlar. Resimdeki özellikleri HTML kullanmadan Bootstrap 3 ile yapmak için ise aşağıdaki kodları kullanabilirsin.

<div class="media">
  <div class="media-left">
    <img src="temalar/bootstrap/images/1.jpg" width="100" class="img-responsive" alt="Generic placeholder image">
  </div>
  <div class="media-body">
    <ul class="text-right text-muted">
      <li>
        <i class="fa fa-calendar-o fa-fw"></i> 
        <span>3 gün önce</span>
      </li>
      <li>
        <i class="fa fa-eye-o fa-fw"></i> 
        <span>85</span>
      </li>
      <li class="pull-left">
        <i class="fa fa-user"></i>
        <a href="#">Admin</a>
      </li>
    </ul>
    <a href="#" class="media-heading">Media Heading</a>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  </div>
</div>

 

Teşekkür ederim.

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git