მედია ობიექტი
დოკუმენტაცია და მაგალითები 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: Inline ელემენტები არ განიხილება, როგორც flex ელემენტი
Internet Explorer 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
კონტენტის ზედა (ნაგულისხმევი), შუა ან ბოლოს.
ზედა გასწორებული მედია
მე მას კომაში ჩავსვამ. თქვენ ასობით მიზეზს ასახელებთ და ამბობთ, რომ ნამდვილად შეეცდებით. ამიტომ ჩუმად ვიჯექი, თავაზიანად დავთანხმდი. ვარგისი ჩემი გვირგვინის ბრძოლისთვის. და ჩემს მე-18 დაბადების დღეზე ჩვენ მივიღეთ შესაბამისი ტატუ. ძალიან ელეგანტური, ჰო, ის კლასიკაა. მზად ვარ ნაკლებად გავლილი გზისთვის.
ჰაერზე ვსეირნობ (ამაღამ). მაგრამ დედამიწაზე. ორიგინალი ხარ, მისი გამოცვლა შეუძლებელია. მაგრამ სხვა ცხოვრებაში მე ვიქნებოდი შენი გოგო. კალიში გავემგზავრეთ და სანაპიროზე დავლიეთ. ჩვენ შეგვიძლია ვიცეკვოთ, სანამ არ მოვკვდებით, მე და შენ სამუდამოდ ახალგაზრდები ვიქნებით. გნახე ქალაქის ცენტრში ბლუზს მღეროდი.
<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>
ცენტრში გასწორებული მედია
ის გაცივდება, როგორც საყინულე. ამ ყველაფრის ბოლოს. ფუტკარივით ნაკბენმა დავიმსახურე ჩემი ზოლები. ბიკინი, ყაბაყი, მარტინი, არა წვრილმანი. იმედი მაქვს ჯანსაღი მადა გაქვთ. ჩვენ შეგვიძლია ვიცეკვოთ, სანამ არ მოვკვდებით, მე და შენ სამუდამოდ ახალგაზრდები ვიქნებით. ჩვენ ვცხოვრობთ ცხოვრებით. ჩვენ ამას სწორად ვაკეთებთ. სიტყვა ქუჩაში, შენ გაქვს რაღაც საჩვენებელი, მე.
გსურთ ნახოთ შოუ 3D, ფილმი. ამბობენ, გეშინია, რომ სხვებს არ ჰგავხარო, ფუტურისტულ საყვარელო. გახსენი შენი გული. ამიტომ ჩუმად ვიჯექი, თავაზიანად დავთანხმდი. გასულ პარასკევს ღამით. დიახ, გაგიმართლათ, თუ მის თვითმფრინავში ხართ. მე ვიქნები შენი საჩუქარი, მოგცემ რაიმე კარგი აღსანიშნავად.
<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>
ქვედა გასწორებული მედია
მოდი, შენი ფერები ააფეთქეს. მე ვგრძნობ ამ სინათლეს, რომელიც ჩემშია. მთელი ღამე უკრავენ, შენს სიმღერას. ტოკიოდან მექსიკაში, რიოში. უკან დასახევი არაა. მაგრამ ��ედამიწაზე. ჯადოსნური, ფერადი, მისტერ მისტერია, ეე. განსხვავებული დნმ, მათ არ ესმით შენი.
მაგრამ დედამიწაზე. მას ეს აქვს, 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-ის შეცვლით, ან რაიმე მორგებული flexbox 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
თქვენი <li>
s. როგორც ყოველთვის, გამოიყენეთ ინტერვალის უტილიტები, სადაც საჭიროა დაზუსტება.
-
სიაზე დაფუძნებული მედია ობიექტი
ჩემი ყველა გოგო ვინტაჟური შანელის ბავშვი. ასე რომ, შეგიძლიათ მიიღოთ თქვენი ტორტი. ამაღამ, ამაღამ, ამაღამ, ჰაერზე დავდივარ. ნელ-ნელა ვყლაპავ ჩემს შიშს, ჰო ჰო. სწრაფად იზრდება ელვისებურად. ისეთი ცხელი და მძიმე, 'გათენებამდე. ეს ზღაპარი დამთავრებული რაინდით ბრწყინვალე ჯავშნით. მძიმეა თავი, რომელიც ატარებს გვირგვინს.
-
სიაზე დაფუძნებული მედია ობიექტი
შესაძლოა მიზეზი იმისა, რომ ყველა კარი დაკეტილია. იმიტომ, რომ ერთხელ ჩემი ხარ, ერთხელ ჩემი. იყავი შენი თინეიჯერული ოცნება ამაღამ. მძიმეა თავი, რომელიც ატარებს გვირგვინს. ეს არც დღესასწაულია, არც არაფერი აღსანიშნავი. სრულყოფილი ქარიშხალი, სრულყოფილი ქარიშხალი.
-
სიაზე დაფუძნებული მედია ობიექტი
საკმარისად მამაცი ხარ, რომ შენი ფარშევანგი ვნახო? უკან დასახევი არაა. ეს უკანასკნელად ამბობთ, ბოლო სტრიქონის შემდეგ გაწყვეტთ. ამ ყველაფრის ბოლოს.
<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>