آموزش Bootstrap جلسه بیست و هشتم (Media Object)

بازدید
8483

دسته بندی :آموزش Bootstrap,آموزش طراحی وب

در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و هشتم (Media Object)

آموزش Bootstrap جلسه بیست و هشتم (Media Object) از سری آموزش های تک قسمتی است

سلام برنامه در این آموزش به شما نحوه کار با media Object را یاد می دهد

به واسطه این آموزش می توانید صفحه کامنت سایتتان را طراحی کنید

یکی از مشکلات عمده بخش کامنت رسپانسیو نبودن آن است

در این آموزش به واسطه کلاس های بوت استرپ می توانید بخش کامنت را در سایت خود راه اندازی کنید

همچنین می توانید در بخش کامنت خود از تصاویر و آواتار کاربران نیز استفاده کنید

Media Objects

همانطور که بالاتر توضیح دادیم از مدیا آبجکت ها بیشتر در موارد کامنت گذاری و پرسش و پاسخ استفاده میشود یکی از مهمترین موارد برای سئو سایت ها بخش درگیر شدن کاربران است که توسط کامنت انجام میشود.بوت استرپ هم برای این بخش کلاس های زیاد و جالبی را قرار داده است.

یکی از مهمترین موارد در کامنت ها خوانایی آن ها است اینکه بتوان تشخیص داد چه کسی به چه کسی پاسخ داده است و این پاسخ ها تا چند مرحله تو در تو انجام شده است و دیگری خوانایی متن های قرار داده شده در کامنت است که مرتب باشد و در دستگاه های مختلف بهم ریختگی نداشته باشد.

بوت استرپ یک حالت پیشفرض برای نمایش کامنت ها دارد که حالت basic آن است شما میتوانید این حالت را در کد زیر ببینید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Media Object</h2>
  <p>Use the "media-left" class to left-align a media object. Text that should appear next to the image, is placed inside a container with class="media-body".</p>
  <p>Tip: Use the "media-right" class to right-align the media object.</p><br>
  
  <!-- Left-aligned media object -->
  <div class="media">
    <div class="media-left">
      <img src="img_avatar1.png" class="media-object" style="width:60px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">Left-aligned</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <hr>
  
  <!-- Right-aligned media object -->
  <div class="media">
    <div class="media-body">
      <h4 class="media-heading">Right-aligned</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="media-right">
      <img src="img_avatar1.png" class="media-object" style="width:60px">
    </div>
  </div>
</div>

</body>
</html>

همانطور که در کد بالا میبینید با دو کلاس media-left و media-right شما میتوانید قرار گرفتن آواتار شخ کامنت دهنده را تعیین کنید که در راست مطلب قرار بگیرد و یا در چپ مطلب قرار داشته باشد.

کلاس های Media

برای استفاده از حالت کامنت ما از کلاس media استفاده میکنیم و باقی کلاس ها نظیر media-body و media-heading را داخل آن قرار میدهیم هر کدام از کلاس ها را روی کد برای شما نشان میدهیم تا واضح تر باشند. همچنین با استفاده از کلاس های media-top و media-middle و media-bottom میتوانید تعیین کنید که تویر آواتار نسبت به متن چه موقعیتی داشته باشد یعنی بالاتر از متن قرار گیرد هم سطح با متن باشد یا پایین تر از متن باشد .

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Media Object</h2>
  <p>The media object can also be top, middle or bottom-aligned with the "media-top", "media-middle" or "media-bottom" class:</p><br>
  <div class="media">
    <div class="media-left media-top">
      <img src="img_avatar1.png" class="media-object" style="width:80px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media Top</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <hr>
  <div class="media">
    <div class="media-left media-middle">
      <img src="img_avatar1.png" class="media-object" style="width:80px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media Middle</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <hr>
  <div class="media">
    <div class="media-left media-bottom">
      <img src="img_avatar1.png" class="media-object" style="width:80px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media Bottom</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

</body>
</html>

تمام موارد توضیح داده شده در کد بالا موجود است که میتوانید از آن استفاده کنید.

اشیاء و رسانه تودرتو

همانطور که گفته شد برای خوانایی کامنت ها باید از حالت تودرتو استفاده کنیم تا مشخص باشد که هرکامنت در جواب به کامنتی دیگر است یا به صورت مستقل بیان شده است. اینکه چگونه باید این حالت را به وجود آورد مشابه حالت ایجاد پاراگراف در برنامه وورد است که ابتدای پاراگراف یک تو رفتگی دارد در اینجا هم کامنتی که در جواب کامنتی دیگر است یک مرحله تو تر میرود برای واضح بودن موضوع تصویر زیر مثال مناسبی است:

با توجه به تصویر بد نیست که شما یک نمونه کد از این حالت را ببینید اما قبل از آن به نکته ای توجه کنید.

استفاده از کامنت های تودرتو خود را به ۳ پاسخ محدود کنید چراکه از خوانایی کامنت ها میکاهد

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Nested Media Objects</h2>
  <p>Media objects can also be nested (a media object inside a media object):</p><br>
  <div class="media">
    <div class="media-left">
      <img src="img_avatar1.png" class="media-object" style="width:45px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">John Doe <small><i>Posted on February 19, 2016</i></small></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      
      <!-- Nested media object -->
      <div class="media">
        <div class="media-left">
          <img src="img_avatar2.png" class="media-object" style="width:45px">
        </div>
        <div class="media-body">
          <h4 class="media-heading">John Doe <small><i>Posted on February 20, 2016</i></small></h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

          <!-- Nested media object -->
          <div class="media">
            <div class="media-left">
              <img src="img_avatar3.png" class="media-object" style="width:45px">
            </div>
            <div class="media-body">
              <h4 class="media-heading">John Doe <small><i>Posted on February 21, 2016</i></small></h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
          
        </div>
        
        <!-- Nested media object -->
        <div class="media">
          <div class="media-left">
            <img src="img_avatar4.png" class="media-object" style="width:45px">
          </div>
          <div class="media-body">
            <h4 class="media-heading">Jane Doe <small><i>Posted on February 20, 2016</i></small></h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </div>
        
      </div>
    </div>
    
    <!-- Nested media object -->    
    <div class="media">
      <div class="media-left">
        <img src="img_avatar5.png" class="media-object" style="width:45px">
      </div>
      <div class="media-body">
        <h4 class="media-heading">Jane Doe <small><i>Posted on February 19, 2016</i></small></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

  </div>
</div>

</body>
</html>

به عنوان آخرین مورد برای بهینه تر بودن سایت شما:

اگر از بخش کامنت در سایت خود استفاده میکنید حتما به نکته ای توجه کنید آن هم اینکه کامنت های خیلی قدیمی را پاک کنید و ترتیب نمایش کامنت در سایت خود به صورت جدیدترین کامنت در بالا قرار دهید چرا که تعداد زیاد کامنت باعث سنگینی یک صفحه میشود و لود آن را دچار مشکل میکند.

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و هفتم (Input Sizing)

آموزش Bootstrap جلسه بیست و نهم (Carousel)

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

و یا آن را در آپارت مشاهده کنید

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید

سلام برنامه | HiProgram

مرجع آموزش برنامه نویسی وب و اندروید

مطالب پربازدید

آخرین ارسالی ها

آموزش رفع محدودیت سایز آپلود در وردپرس

آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)

آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

پکیج های آموزشی

پکیج طراحی قالب وردپرس

اتوماتیک کردن کارها در وردپرس

پکیج طراحی قالب جوملا ۳

آموزش تصویری html5

آموزش تصویری css3