1. صفحه اصلی
  2. مقالات
  3. Media Object و فیلترها در بوت استرپ 4

Media Object و فیلترها در بوت استرپ 4

امیر زوارمی امیر زوارمی
12 تیر 1398
درسنامه درس 24 از سری آموزش Bootstrap

Media Object

Media Object (شیء رسانه) به طور کلی یعنی چیزهایی مانند تصاویر و ویدیوها! اما در بوت استرپ معمولا ساختار کلی کامنت گونه ای وجود دارد که به آن Media object می گوییم. بوت استرپ راه آسانی برای ترازبندی Media object با محتوا را در نظر گرفته است؛ معمولا Media object ها چیزهایی مانند کامنت ها و توییت ها را می سازند. برای ساخت این اشیاء باید کلاس media. را به یک عنصر نگهدارنده اضافه کنید و سپس محتوای media را درون نگهدارنده قرار داده و کلاس media-body. را به آن بدهید. در آخر نیز padding و margin مورد نظرتان را اضافه کنید. به مثال زیر توجه کنید:

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Media Object</h2>
  <p>Create a media object with the .media and .media-body classes:</p>
  <div class="media border p-3">
    <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <h4>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>      
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

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

حتما اولین سوالی که در ذهن شما آمده است مبحث nesting (تو در تو بودن کامنت ها و ...) است. زمانی که کامنتی گذاشته می شود باید قابلیت پاسخ دادن به آن هم موجود باشد و از آنجا که این پاسخ، جزئی از کامنت اصلی است نیاز به تو رفتگی دارد. اضافه کردن این استایل ها کمی زحمت دارد اما بوت استرپ تمام زحمت را برای ما به دوش می کشد! برای ایجاد media object های تو در تو تنها کافی است که یک media object را درون media object دیگری قرار دهیم! به مثال زیر توجه کنید:

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Nested Media Objects</h2>
  <p>Media objects can also be nested (a media object inside a media object):</p><br>
  <div class="media border p-3">
    <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <h4>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>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="media p-3">
        <img src="https://www.w3schools.com/bootstrap4/img_avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
        <div class="media-body">
          <h4>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>
          <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>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

تراز راست و چپ در Media Object ها

برای قرار دادن تصویر در سمت راست، آن تصویر را پس از نگهدارنده ی media-body. اضافه کنید. به این مثال دقت کنید:

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Right-Aligned Media Image</h2>
  <p>To right-align the media image, add the image after the .media-body container:</p>
  <div class="media border p-3">
    <div class="media-body">
      <h4>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>      
    </div>
    <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

تراز عمودی Media Object ها

برای ترازبندی عمودی تصویر باید از دستورات مدل Flex (جلسه ی قبل) استفاده کنید. کلاس های خانواده ی *-align-self. می توانند تصویر شما را برایتان جا به جا کنند. مثال:

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Media Object</h2>
  <p>Place the media object to the top, middle or at the bottom with the flex utilities, align-self-* classes:</p><br>
  <!-- Media top -->
  <div class="media">
    <img src="https://www.w3schools.com/bootstrap4/img_avatar1.png" class="align-self-start mr-3" style="width:60px">
    <div class="media-body">
      <h4>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>

  <!-- Media middle -->
  <div class="media mt-3">
    <img src="https://www.w3schools.com/bootstrap4/img_avatar1.png" class="align-self-center mr-3" style="width:60px">
    <div class="media-body">
      <h4>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>

  <!-- Media bottom -->
  <div class="media mt-3">
    <img src="https://www.w3schools.com/bootstrap4/img_avatar1.png" class="align-self-end mr-3" style="width:60px">
    <div class="media-body">
      <h4>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>

مشاهده ی خروجی در JSBin

فیلترها در بوت استرپ

بوت استرپ کامپوننتی برای جست و جو و فیلتر کردن نتایج ندارد اما می توانیم از جی کوئری برای فیلتر کردن داده ها یا جست و جوی افراد استفاده کنیم. به این مثال دقت کنید:

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Filterable Table</h2>
  <p>Type something in the input field to search the table for first names, last names or emails:</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="myTable">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>آکادمی</td>
        <td>روکسو</td>
        <td>info@roxo.ir</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@mail.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
      <tr>
        <td>Anja</td>
        <td>Ravendale</td>
        <td>a_r@test.com</td>
      </tr>
    </tbody>
  </table>
  
  <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

توضیح این مثال:

ما با استفاده از jQuery در هر ردیف از جدول loop می کنیم تا ببینیم آیا مقدار وارد شده در input با مقدار یک یا چند ردیف از جدول همخوانی دارد یا خیر. متد toggle ردیف هایی را مخفی می کند (دستور display:none) که در نتیجه ی جست و جو نباشند بنابراین هر چه باقی بماند همان نتیجه خواهد بود. استفاده از تابع ()toLowerCase برای تبدیل حروف بزرگ به کوچک است تا جست و جوی ما case insensitive (حساس نبودن به حروف بزرگ و کوچک) شود؛ به طور مثال اگر کاربر John یا john یا JOHN و ... را سرچ کند همگی نتیجه ی john یا John یا JOHN و ... را برمی گرداند.

جست و جو در لیست ها

مثال قبل روی جدول ها کار می کند اما اگر بخواهیم در یک لیست 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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Filterable List</h2>
  <p>Type something in the input field to search the list for specific items:</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth</li>
  </ul>  
</div>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید این مثال فرقی با مثال بالا نخواهد داشت و دستور toggle برای هر دو کار می کند.

فیلتر کردن تمام عناصر

شما می توانید هر عنصری را که بخواهید جست و جو و فیلتر کنید. به مثال زیر نگاه کنید:

<!DOCTYPE html>
<html>
<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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Filter Anything</h2>
  <p>Type something in the input field to search for a specific text inside the div element with id="myDIV":</p>
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <div id="myDIV" class="mt-3">
    <p>I am a paragraph.</p>
    <div>I am a div element inside div.</div>
    <button class="btn">I am a button</button>
    <button class="btn btn-info">Another button</button>
    <p>Another paragraph.</p>
  </div>
</div>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

این مثال می تواند دکمه ها، متن ها و دیگر عناصر را جست و جو کند! در قسمت کد جی کوئری بالا سلکتور * myDIV# باعث می شود تمام موارد و عناصر انتخاب شده و جست و جو بین همه ی آن ها صورت بگیرد.

امیدواریم از مقاله آموزش کار با Media Object ها و فیلترها در بوت استرپ استفاده کافی را برده باشید.

برچسب‌ها: بوت استرپ bootstrap
تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش Bootstrap توصیه می‌کند:

آشنایی با Bootstrap 4

1

سیستم Grid در بوت استرپ 4

2

متون و تایپوگرافی در بوت استرپ 4

3

طراحی جدول ها در بوت استرپ

4

کار با تصاویر و رنگ ها در Bootstrap 4

5

Jumbotron، دکمه ها و هشدارها در بوت استرپ

6

مجموعه دکمه ها و نشان ها (badge) در بوت استرپ

7

نوار پیشرفت (Progress Bar) در بوت استرپ

8

spinner ها و صفحه بندی (Pagination) در بوت استرپ

9

آشنایی با List Group در بوت استرپ

10

Card ها در بوت استرپ 4

11

منوهای آبشاری (dropdown) در بوت استرپ

12

منوهای مخفی شونده و آکاردئونی در بوت استرپ

13

منوهای Nav در بوت استرپ

14

فرم ها در بوت استرپ 4

15

Input Group ها در بوت استرپ 4

16

فرم های سفارشی در بوت استرپ 4

17

ساخت اسلایدر تصاویر و پنجره های modal در بوت استرپ

18

کار با Tooltip و Popover در بوت استرپ

19

Toast ها و Scrollspy در بوت استرپ

20

utility (کلاس های کمکی) در بوت استرپ - قسمت اول

21

utility (کلاس های کمکی) در بوت استرپ - قسمت دوم

22

مدل Flex در بوت استرپ 4

23

Media Object و فیلترها در بوت استرپ 4

24

سیستم Grid در بوت استرپ 4

25

Gridهای بسیار کوچک در بوت استرپ 4

26

نکات تکمیلی سایزها در Grid

27
نویسنده شوید
دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

دوره‌های آموزشی مرتبط
VIP
آموزش HTML و CSS از صفر تا صد + پروژه محور
آموزش HTML و CSS از صفر تا صد + پروژه محور
265000 تومان
مقالات مرتبط
ویژگی z-index چیست و چگونه کار می کند؟
ساخت لودینگ فقط با CSS
ساخت لودینگ فقط با CSS
15 اردیبهشت 1401
طراحی ریسپانسیو با CSS
آموزش جامع و کامل کار با CSS Grid
CSS با طعم تاکو؛ آموزش ساخت ساندویچ تاکو با HTML و CSS
آخرین سوالات کاربران
alidniry در 1 سال قبل پرسیده:
خطای مسیردهی در HTML و css
ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو