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

          برنامه نویس 
            بازدید : 33
          دوشنبه 24 تیر 1398
           نظرات (0)
        

Media Object

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!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>Createamedia objectwith 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 February19,2016</i></small></h4>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>      
    </div>
  </div>
</div>
 
</body>
</html>

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

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

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!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(amedia objectinsideamedia 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 February19,2016</i></small></h4>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod 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 February202016</i></small></h4>
          <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>  
    </div>
  </div>
</div>
 
</body>
</html>

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

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

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!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>Toright-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 February19,2016</i></small></h4>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod 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. می توانند تصویر شما را برایتان جا به جا کنند. مثال:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!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 objecttothe top,middle orat 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 doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod 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 doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod 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 doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>
 
</body>
</html>

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

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

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<!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 inthe input field tosearch the table forfirst names,last names oremails:</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 intbody,toprevent filtering the table headers.</p>
</div>
 
<script>
$(document).ready(function(){
  $("#myInput").on("keyup",function(){
    varvalue=$(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 ای جست و جویی انجام دهیم چطور؟ به مثال زیر توجه کنید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!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 inthe input field tosearch the list forspecific 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(){
    varvalue=$(this).val().toLowerCase();
    $("#myList li").filter(function(){
      $(this).toggle($(this).text().toLowerCase().indexOf(value)>-1)
    });
  });
});
</script>
 
</body>
</html>

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

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

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

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!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 inthe input field tosearch foraspecific 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>Iamaparagraph.</p>
    <div>Iamadiv element inside div.</div>
    <button class="btn">Iamabutton</button>
    <button class="btn btn-info">Another button</button>
    <p>Another paragraph.</p>
  </div>
</div>
 
<script>
$(document).ready(function(){
  $("#myInput").on("keyup",function(){
    varvalue=$(this).val().toLowerCase();
    $("#myDIV *").filter(function(){
      $(this).toggle($(this).text().toLowerCase().indexOf(value)>-1)
    });
  });
});
</script>
 
</body>
</html>

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

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

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

منبع: روکسو

ارسال نظر برای این مطلب