Top, Middle or Bottom Alignment

ستتعلم في هذا الدرس تنسيق ال Media Objects مثل الصور والفيدوهات ببساطة عن طريق ال media ؤخىفشهىثق باستخدام ال Bootstrap

1 صفوف تعليمية

Bootstrap

3,090 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 معاينة حية

HTML

<!-- Media top -->
<div class="media">
  <img src="avatar1.png" class="align-self-start mr-3" style="width:60px">
  <div class="media-body">
    <h4>Media Top</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media middle -->
<div class="media">
  <img src="avatar1.png" class="align-self-center mr-3" style="width:60px">
  <div class="media-body">
    <h4>Media Middle</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media bottom -->
<div class="media">
  <img src="avatar1.png" class="align-self-end mr-3" style="width:60px">
  <div class="media-body">
    <h4>Media Bottom</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

جرّب بنفسك

Top, Middle or Bottom Alignment

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (Bootstrap Media Objects)