شی رسانه ای
مستندات و مثالهایی برای هدف رسانهای Bootstrap برای ساخت اجزای بسیار تکراری مانند نظرات وبلاگ، توییتها و موارد مشابه.
مثال
شی رسانه به ساخت اجزای پیچیده و تکراری کمک می کند که در آن برخی از رسانه ها در کنار محتوایی قرار می گیرند که در اطراف رسانه مذکور قرار نمی گیرند. به علاوه، این کار را تنها با دو کلاس مورد نیاز به لطف flexbox انجام می دهد.
در زیر نمونهای از یک شی رسانه واحد است. فقط دو کلاس مورد نیاز است - بسته بندی .media
و .media-body
اطراف محتوای شما. padding و حاشیه اختیاری را می توان از طریق ابزارهای فاصله کنترل کرد.
عنوان رسانه
آیا شما همین کار را برای من انجام خواهید داد؟ زمان مواجهه با موسیقی من دیگر موز تو نیستم فرا رسیده است. شنیدم زیباست، قاضی باش و دخترانم رای خواهند داد. می توانم ققنوس را در درونم احساس کنم. بهشت به عشق ما غبطه می خورد، فرشتگان از بالا می گریند. آره، تو منو به آرمان شهر میبری
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
</div>
</div>
Flexbug شماره 12: عناصر درون خطی به عنوان آیتم های انعطاف پذیر در نظر گرفته نمی شوند
اینترنت اکسپلورر 10-11 عناصر درون خطی مانند پیوندها یا تصاویر (یا ::before
و ::after
عناصر شبه) را به عنوان موارد انعطاف پذیر ارائه نمی کند. تنها راه حل این است که یک مقدار غیر خطی تنظیم کنید display
(به عنوان مثال،،، block
یا inline-block
) flex
. پیشنهاد می کنیم از .d-flex
یکی از ابزارهای نمایشگر ما به عنوان یک راه حل آسان استفاده کنید.
منبع: Flexbugs در GitHub
لانه سازی
اشیاء رسانهای را میتوان بینهایت تو در تو قرار داد، اگرچه پیشنهاد میکنیم در نقطهای توقف کنید. مکان تو در تو .media
در .media-body
یک شی رسانه والد.
عنوان رسانه
ایستادن در خط مقدم هنگامی که بمب ها شروع به سقوط می کنند. بهشت به عشق ما غبطه می خورد، فرشتگان از بالا می گریند. نمی توانم شما را با یک میلیون حلقه جایگزین کنم. پسر، وقتی با من باشی من به تو مزه می دهم. راه برگشتی نیست. قبل از اینکه با من ملاقات کنی، حالم خوب بود، اما همه چیز تا حدی سنگین بود. سنگین سر است که تاج بر سر دارد.
عنوان رسانه
درود بر عزیزان بیایید سفر کنیم. بله، ما فرشتگان را به گریه می اندازیم و از بالا بر زمین می بارد. یک چیز خوب برای جشن گرفتن به شما بدهد. زبانم را گاز می گرفتم و نفسم را حبس می کردم. من می خواهم قلبت را با شلوار جین تنگ من به تپش بیاندازم. در حالی که من به تنهایی به یک ضربان متفاوت می روم. تابستان بعد از دبیرستان وقتی برای اولین بار همدیگر را دیدیم. شما خیلی هیپنوتیزم می کنید، آیا می توانید شیطان باشید؟ آیا شما می توانید یک فرشته باشید؟ وقت آن است که بادکنک های بزرگ را بیرون بیاوریم. فکر می کردم من استثنا هستم. بیکینی، کدو سبز، مارتینی، بدون شیر.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Standing on the frontline when the bombs start to fall. Heaven is jealous of our love, angels are crying from up above. Can't replace you with a million rings. Boy, when you're with me I'll give you a taste. There’s no going back. Before you met me I was alright but things were kinda heavy. Heavy is the head that wears the crown.</p>
<div class="media mt-3">
<a class="mr-3" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Greetings loved ones let's take a journey. Yes, we make angels cry, raining down on earth from up above. Give you something good to celebrate. I used to bite my tongue and hold my breath. I'm ma get your heart racing in my skin-tight jeans. As I march alone to a different beat. Summer after high school when we first met. You're so hypnotizing, could you be the devil? Could you be an angel? It's time to bring out the big balloons. Thought that I was the exception. Bikinis, zucchinis, Martinis, no weenies.</p>
</div>
</div>
</div>
</div>
هم ترازی
رسانه موجود در یک شی رسانه را می توان با ابزارهای flexbox در بالای (پیش فرض)، وسط یا انتهای .media-body
محتوای شما تراز کرد.
رسانه با تراز بالا
من او را در کما می گذارم. شما صد دلیل می آورید و می گویید واقعاً تلاش خواهید کرد. پس ساکت نشستم و مودبانه قبول کردم. برای نبرد تاجگذاری من مناسب است. و در هجدهمین تولد من خالکوبی های مشابهی انجام دادیم. خیلی شیک، آره، او یک کلاسیک است. من برای جاده ای که کمتر سفر کرده ام آماده ام.
من روی هوا راه می روم (امشب). اما سر زمین. شما اورجینال هستید، قابل تعویض نیست. اما در زندگی دیگر من دختر تو خواهم شد. به سمت کالی حرکت کردیم و در ساحل مست شدیم. ما می توانیم برقصیم، تا زمانی که بمیریم، من و تو برای همیشه جوان خواهیم بود. تو را در مرکز شهر دیدم که بلوز را میخوانی.
<div class="media">
<img src="..." class="align-self-start mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So I sat quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching tattoos. So très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
<p>I'm walking on air (tonight). But down to earth. You're original, cannot be replaced. But in another life I would be your girl. We drove to Cali and got drunk on the beach. We can dance, until we die, you and I, will be young forever. Saw you downtown singing the Blues.</p>
</div>
</div>
رسانه تراز مرکزی
او مانند یک فریزر سرد خواهد شد. در پایان همه چیز. با نیش زدن مثل زنبور راه راه هایم را به دست آوردم. بیکینی، کدو سبز، مارتینی، بدون شیر. امیدوارم اشتهای سالمی داشته باشید ما می توانیم برقصیم، تا زمانی که بمیریم، من و تو برای همیشه جوان خواهیم بود. ما داریم زندگی میکنیم ما این کار را درست انجام می دهیم. حرف تو خیابون، تو چیزی داری که به من نشون بدی، من.
می خواهم نمایش را به صورت سه بعدی، یک فیلم ببینم. میگن بترس مثل بقیه نیستی ای عاشق آینده نگر. قلبت را باز کن. پس ساکت نشستم و مودبانه قبول کردم. شب جمعه گذشته بله، اگر در هواپیمای او باشید، خوش شانس هستید. من هدیه شما خواهم بود، یک چیز خوب برای جشن گرفتن به شما می دهم.
<div class="media">
<img src="..." class="align-self-center mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>She'll turn cold as a freezer. At the eh-end of it all. Stinging like a bee I earned my stripes. Bikinis, zucchinis, Martinis, no weenies. I hope you got a healthy appetite. We can dance, until we die, you and I, will be young forever. We're living the life. We're doing it right. Word on the street, you got somethin' to show me, me.</p>
<p class="mb-0">Wanna see the show in 3D, a movie. They say, be afraid you're not like the others, futuristic lover. Open up your heart. So I sat quietly, agreed politely. Last Friday night. Yeah, you're lucky if you're on her plane. I'll be your gift, give you something good to celebrate.</p>
</div>
</div>
رسانه با تراز پایین
بیا، بگذار رنگ هایت بترکد. من می توانم این نور را که در درونم است احساس کنم. تمام شب دارند می نوازند، آهنگ تو. از توکیو تا مکزیک، تا ریو. راه برگشتی نیست. اما سر زمین. جادویی، رنگارنگ، آقای رمز و راز، ee. DNA متفاوت، آنها شما را درک نمی کنند.
اما سر زمین. او این را دارد، je ne sais quoi، شما آن را می دانید. می توانم نوشته های روی دیوار را ببینم. پسرها می کوشند گردنشان را بشکنند تا کمی سرک بکشند. مرا ببر، تا تا-تا مرا ببر. قلبت را باز کن. فکر می کردم من استثنا هستم. بوم بوم بوم. ساحل ونیز و پالم اسپرینگز، تابستان همه چیز است. ضربان را برگردانید. (این است که چگونه ما انجام می دهیم)
<div class="media">
<img src="..." class="align-self-end mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Come on, let your colours burst. I can feel this light that's inside of me. All night they're playing, your song. From Tokyo to Mexico, to Rio. There’s no going back. But down to earth. Magical, colorful, Mr. Mystery, ee. Different DNA, they don't understand you.</p>
<p class="mb-0">But down to earth. She's got that, je ne sais quoi, you know it. I can see the writing on the wall. The boys break their necks try'na to creep a little sneak peek. Take me, ta-ta-take me. Open up your heart. Thought that I was the exception. Boom, boom, boom. Venice beach and Palm Springs, summertime is everything. Bring the beat back. (This is how we do)</p>
</div>
</div>
سفارش
ترتیب محتوا در اشیاء رسانه را با تغییر خود HTML یا با افزودن مقداری فلکسباکس CSS سفارشی برای تنظیم order
ویژگی (به یک عدد صحیح دلخواه) تغییر دهید.
شی رسانه ای
من می دانم که قربانی خواهد شد اما این بهای آن است. آیا آنقدر شجاع هستی که بگذاری طاووست را ببینم؟ امشب رویای نوجوانی خود باشید. اوه، من تو را می بینم. راه برگشتی نیست. آره، کارت های اعتباری خود را به حداکثر رساندیم و از بار بیرون انداختیم. پس بگذار تو را با کت و شلوار تولدت بیاورم. ممکن است با ملاقات با او عاشق شوید. دنیا را در کف دستان خود داشت. اجازه نده عظمت تو را پایین بیاورد، اوه، اوه آره. حالا ما در مورد طالع بینی صحبت می کنیم، ناخن هایمان را درست می کنیم، همه ژاپنی ها. مرا آفرودیت خودت کن
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
<p>I know there will be sacrifice but that's the price. Are you brave enough to let me see your peacock? Be your teenage dream tonight. Uh-huh, I see you. There’s no going back. Yeah, we maxed our credit cards and got kicked out of the bar. So let me get you in your birthday suit. You may fall in love when you meet her. Had the world in the palm of your hands. Don't let the greatness get you down, oh, oh yeah. Now we talking astrology, getting our nails did, all Japanese-y. Make me your Aphrodite.</p>
</div>
<img src="..." class="ml-3" alt="...">
</div>
لیست رسانه ها
از آنجایی که شئ رسانه الزامات ساختاری بسیار کمی دارد، می توانید از این کلاس ها در عناصر لیست HTML نیز استفاده کنید. در خود <ul>
یا <ol>
، .list-unstyled
برای حذف هر گونه سبک لیست پیش فرض مرورگر، آن را اضافه کنید و سپس آن .media
را به s خود اعمال کنید <li>
. مثل همیشه، هر جا که برای تنظیم دقیق نیاز بود از ابزارهای فاصله استفاده کنید.
-
شیء رسانه ای مبتنی بر فهرست
همه دختران من بچه شانل قدیمی. بنابراین می توانید کیک خود را بخورید. امشب، امشب، امشب، من روی هوا راه می روم. به آرامی ترسم را می بلعم، آره آره. رشد سریع به رعد و برق. خیلی گرم و سنگین، تا سحر. آن افسانه با شوالیه ای در زره درخشان به پایان می رسد. سنگین سر است که تاج بر سر دارد.
-
شیء رسانه ای مبتنی بر فهرست
شاید دلیلی برای بسته بودن همه درها باشد. چون یک بار مال منی، یک بار مال منی. امشب رویای نوجوانی خود باشید. سنگین سر است که تاج بر سر دارد. این حتی یک تعطیلات نیست، چیزی برای جشن گرفتن نیست. یک طوفان کامل، طوفان کامل.
-
شیء رسانه ای مبتنی بر فهرست
آیا آنقدر شجاع هستی که بگذاری طاووست را ببینم؟ راه برگشتی نیست. این آخرین باری است که می گویید، بعد از آخرین خطی که شکسته اید. در پایان همه چیز.
<ul class="list-unstyled">
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>All my girls vintage Chanel baby. So you can have your cake. Tonight, tonight, tonight, I'm walking on air. Slowly swallowing down my fear, yeah yeah. Growing fast into a bolt of lightning. So hot and heavy, 'Til dawn. That fairy tale ending with a knight in shining armor. Heavy is the head that wears the crown.</p>
</div>
</li>
<li class="media my-4">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your teenage dream tonight. Heavy is the head that wears the crown. It's not even a holiday, nothing to celebrate. A perfect storm, perfect storm.</p>
</div>
</li>
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you say, after the last line you break. At the eh-end of it all.</p>
</div>
</li>
</ul>