Медиа объект
Блог пікірлері, твиттер және т.б. сияқты қайталанатын құрамдастарды құру үшін Bootstrap медиа нысанына арналған құжаттар мен мысалдар.
Мысал
Мультимедиа нысаны күрделі және қайталанатын құрамдастарды құруға көмектеседі, мұнда кейбір медиа аталған медианы қоршамайтын мазмұнмен қатар орналасқан. Сонымен қатар, ол flexbox арқасында мұны тек екі талап етілетін сыныппен жасайды.
Төменде жалғыз медиа нысанының мысалы келтірілген. Тек екі сынып қажет — орау .media
және .media-body
мазмұнның айналасы. Қосымша толтыру және маржаны аралық утилиталар арқылы басқаруға болады .
Бұқаралық ақпарат құралдарының тақырыбы
Мен үшін де солай істейсің бе? Мен енді сенің музаң емеспін музыкамен бетпе-бет келудің уақыты келді. Әдемі екенін естідім, қазы болыңыз, менің қыздарым дауыс береді. Мен ішімде Фениксті сезінемін. Аспан біздің махаббатымызды қызғанады, жоғарыдан періштелер жылайды. Иә, сен мені утопияға апардың.
<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: кірістірілген элементтер икемді элементтер ретінде қарастырылмайды
::before
Internet Explorer 10-11 сілтемелер немесе кескіндер ( немесе ::after
псевдо-элементтер) сияқты кірістірілген элементтерді икемді элементтер ретінде көрсетпейді . Жалғыз уақытша шешім - кірістірілген емес display
мәнді орнату (мысалы, block
, inline-block
, немесе flex
). Оңай түзету ретінде дисплей утилиталарымыздың.d-flex
бірін пайдалануды ұсынамыз .
Дереккөз: GitHub сайтындағы Flexbugs
Ұя салу
Мультимедиа нысандарын шексіз кірістіруге болады, бірақ біз сізге бір сәтте тоқтауды ұсынамыз. Негізгі медиа нысанының .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-дің өзін өзгерту арқылы немесе order
сипатты орнату үшін (сіз таңдаған бүтін санға) кейбір реттелетін flexbox CSS қосу арқылы медиа нысандарындағы мазмұн ретін өзгертіңіз.
Медиа объект
Мен құрбандық болатынын білемін, бірақ бұл баға. Маған тауысыңызды көруге мүмкіндік беретіндей батылсыз ба? Бүгін түнде жасөспірім арманыңыз болыңыз. Ух, мен сені көріп тұрмын. Артқа жол жоқ. Иә, біз несие карталарын барынша арттырдық және бардан қуылды. Ендеше мен саған туған күніңнің костюмін кигізіп берейін. Сіз оны кездестіргенде ғашық болуыңыз мүмкін. Әлем алақанда болды. Ұлылық сізді ренжітпесін, о, иә. Қазір біз астрологиямен сөйлесіп жатырмыз, тырнақтарымызды алу, барлығы жапондық-y. Мені Афродита қыл.
<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>
. Әдеттегідей, дәл баптау үшін қажет жерде аралық утилиталарды пайдаланыңыз.
-
Тізімге негізделген медиа нысаны
Менің барлық қыздарым винтажды Chanel сәбиі. Сондықтан сіз өз тортыңызды жей аласыз. Бүгін түнде, бүгін түнде, мен эфирде жүрмін. Менің қорқынышымды баяу жұтып қойдым, иә. Жылдам өсіп келе жатқан найзағай. Таң атқанша ыстық және ауыр. Бұл ертегі жарқыраған сауыт киген рыцарьмен аяқталады. Тәжін киген басы ауыр.
-
Тізімге негізделген медиа нысаны
Мүмкін, барлық есіктердің жабылуының себебі. Себебі сен менікісің, бірде менікісің. Бүгін түнде жасөспірім арманыңыз болыңыз. Тәжін киген басы ауыр. Бұл тіпті мереке емес, тойлайтын ештеңе жоқ. Керемет дауыл, тамаша дауыл.
-
Тізімге негізделген медиа нысаны
Маған тауысыңызды көруге мүмкіндік беретіндей батылсыз ба? Артқа жол жоқ. Бұл сіз соңғы рет айтасыз, соңғы жолдан кейін сіз үзесіз. Бәрінің соңында.
<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>