آموزش شی Media در بوت استرپ
آموزش شی Media در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش شی Media در بوت استرپ خواهیم پرداخت.
این درس در مورد Media object بحث می کیم. اینها سبک های آبجکت انتزاعی برای ساخت انواع مختلف مولفه ها (مانند نظرات وبلاگ ، توییت ها و غیره) است که در کنار محتوای متنی، تصویری از چپ یا راست قرار دارد. هدف از هدف رسانه ای این است که کد توسعه این بلوک های اطلاعات را به شدت کوتاه تر کند.
هدف اشیا media (نشانه گذاری نور، قابلیت گسترش پذیری آسان) با استفاده از کلاسها در برخی از نشانه گذاری های ساده به دست می آید. شی forms رسانه ای به دو شکل وجود دارد –
- media. – این کلاس اجازه می دهد تا یک شی رسانه (تصاویر ، فیلم و صدا) در سمت چپ یا راست بلوک محتوا شناور باشد.
- media-list. – اگر در حال تهیه لیستی هستید که موارد در بخشی از لیست غیر مرتب قرار گیرند، از کلاس استفاده کنید. برای موضوعات نظر یا لیست مقالات مفید است.
بیایید یک مثال از رسانه پیش فرض را مشاهده کنیم –
|
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 |
<div class = "media"> <a class = "pull-left" href = "#"> <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object"> </a> <div class = "media-body"> <h4 class = "media-heading">Media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div> </div> <div class = "media"> <a class = "pull-left" href = "#"> <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object"> </a> <div class = "media-body"> <h4 class = "media-heading">Media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. <div class = "media"> <a class = "pull-left" href = "#"> <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object"> </a> <div class = "media-body"> <h4 class = "media-heading">Media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div> </div> </div> </div> |
Media heading
This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
Media heading
This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
Media heading
This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
اجازه دهید مثالی از لیست رسانه ها را ببینیم –
|
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 72 73 74 75 76 77 78 79 80 81 |
<ul class = "media-list"> <li class = "media"> <a class = "pull-left" href = "#"> <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image"> </a> <div class = "media-body"> <h4 class = "media-heading">Media heading</h4> <p> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </p> <!-- Nested media object --> <div class = "media"> <a class = "pull-left" href = "#"> <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image"> </a> <div class = "media-body"> <h4 class = "media-heading">Nested media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. <!-- Nested media object --> <div class = "media"> <a class = "pull-left" href = "#"> <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image"> </a> <div class = "media-body"> <h4 class = "media-heading">Nested media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div> </div> </div> </div> <!-- Nested media object --> <div class = "media"> <a class = "pull-left" href = "#"> <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image"> </a> <div class = "media-body"> <h4 class = "media-heading">Nested media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div> </div> </div> </li> <li class = "media"> <a class = "pull-right" href = "#"> <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image"> </a> <div class = "media-body"> <h4 class = "media-heading">Media heading</h4> This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. </div> </li> </ul> |
-
Media heading
This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
Nested media heading
This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
Nested media heading
This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
Nested media heading
This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
-
Media heading
This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
لیست جلسات قبل آموزش بوت استرپ
- آموزش بوت استرپ
- بررسی اجمالی بوت استرپ
- آموزش راه اندازی بوت استرپ
- آموزش سیستم شبکه در بوت استرپ
- بررسی اجمالی CSS در بوت استرپ
- آموزش تایپوگرافی در بوت استرپ
- آموزش کد در بوت استرپ
- آموزش جدول در بوت استرپ
- آموزش فرم ها در بوت استرپ
- آموزش دکمه ها در بوت استرپ
- آموزش تصاویر در بوت استرپ
- آموزش کلاس های کمکی در بوت استرپ
- آموزش ابزارهای پاسخگو در بوت استرپ
- آموزش Glyphicons در بوت استرپ
- آموزش منوهای کشویی در بوت استرپ
- آموزش گروه های دکمه ای در بوت استرپ
- آموزش گروه های ورودی در بوت استرپ
- آموزش عناصر ناوبری در بوت استرپ
- آموزش Navbar در بوت استرپ
- آموزش Breadcrumbs در بوت استرپ
- آموزش صفحه بندی در بوت استرپ
- آموزش لیبل ها در بوت استرپ
- آموزش بج ها در بوت استرپ
- آموزش Jumbotron در بوت استرپ
- آموزش تصاویر کوچک در بوت استرپ
- آموزش هشدارها در بوت استرپ
- آموزش نوارهای پیشرفت در بوت استرپ
.svg)
دیدگاه شما