مېدىيا ئوبيېكتى
Bootstrap نىڭ مېدىيا ئوبيېكتى ئۈچۈن بىلوگ ئىزاھاتى ، tweet ۋە شۇنىڭغا ئوخشاش قايتا-قايتا تەكرارلىنىدىغان زاپچاسلارنى ياساشقا ئائىت ھۆججەتلەر ۋە مىساللار.
مېدىيا ئوبيېكتى مۇرەككەپ ۋە تەكرارلىنىدىغان زاپچاسلارنى قۇرۇشقا ياردەم بېرىدۇ ، بۇ يەردە بەزى تاراتقۇلار مەزمۇننى چۆرىدىگەن مەزمۇنلار بىلەن بىللە بولىدۇ. ئۇنىڭدىن باشقا ، ئۇ flexbox نىڭ ياردىمىدە پەقەت ئىككى لازىملىق دەرس بىلەنلا ئىشلەيدۇ.
تۆۋەندە يەككە مېدىيا ئوبيېكتىنىڭ مىسالى. پەقەت ئىككى دەرسلا تەلەپ قىلىنىدۇ - ئوراش .media
ۋە .media-body
مەزمۇنلىرىڭىزنىڭ ئەتراپى. ئىختىيارى تاختا ۋە ئارىلىقنى بوشلۇق ئەسلىھەلىرى ئارقىلىق كونترول قىلغىلى بولىدۇ .
مېدىيا ماۋزۇسى
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<div class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
Flexbug # 12: ئىچكى ئېلېمېنتلار ئەۋرىشىم تۈر دەپ قارالمايدۇ
Internet Explorer 10-11 ئۇلىنىش ياكى رەسىم (ياكى ساختا ئېلېمېنت) قاتارلىق ئىچكى ئېلېمېنتلارنى جانلىق تۈر ::before
قىلىپ كۆرسەتمەيدۇ. ::after
بىردىنبىر ھەل قىلىش چارىسى سىزىقسىز display
قىممەت بەلگىلەش (مەسىلەن block
، inline-block
ياكى ، flex
). كۆرسىتىش ئەسلىھەلىرىمىزنىڭ.d-flex
بىرى بولغان ئوڭاي ئوڭشاش سۈپىتىدە ئىشلىتىشنى تەۋسىيە قىلىمىز.
مەنبە: GitHub دىكى Flexbugs
مېدىيا ئوبيېكتلىرى چەكسىز ئۇۋا بولىدۇ ، گەرچە بىز مەلۇم ۋاقىتتا توختاپ قېلىشىڭىزنى تەۋسىيە قىلىمىز. ئانا مېدىيا ئوبيېكتىنىڭ ئىچىگە .media
ئورۇنلاشتۇرۇلغان ..media-body
مېدىيا ماۋزۇسى
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<div class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media mt-3">
<a class="pr-3" href="#">
<img src="..." alt="Generic placeholder image">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
مېدىيا ئوبيېكتىدىكى مېدىيانى flexbox قورالى بىلەن .media-body
مەزمۇنىڭىزنىڭ ئۈستى (سۈكۈتتىكى) ، ئوتتۇرىسى ياكى ئاخىرىغا توغرىلىغىلى بولىدۇ.
يۇقىرى ماسلاشتۇرۇلغان مېدىيا
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس.
<div class="media">
<img class="align-self-start mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
مەركەز ماسلاشتۇرۇلغان تاراتقۇ
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس.
<div class="media">
<img class="align-self-center mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
ئاستىغا توغرىلانغان مېدىيا
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس.
<div class="media">
<img class="align-self-end mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
مېدىيا ئوبيېكتىدىكى مەزمۇن تەرتىپىنى HTML نىڭ ئۆزىنى ئۆزگەرتىش ياكى بەزى خاس ئەۋرىشىم CSS قوشۇش ئارقىلىق order
خاسلىقنى تەڭشەش (سىز تاللىغان پۈتۈن سانغا) ئۆزگەرتىش.
مېدىيا ئوبيېكتى
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
<img class="ml-3" src="..." alt="Generic placeholder image">
</div>
مېدىيا ئوبيېكتىنىڭ قۇرۇلما تەلىپى بەك ئاز بولغاچقا ، سىز بۇ دەرسلەرنى HTML ئېلېمېنتلىرى تىزىملىكىدە ئىشلەتسىڭىزمۇ بولىدۇ. ياكى <ul>
ياكى <ol>
، .list-unstyled
توركۆرگۈنىڭ كۆڭۈلدىكى تىزىملىك ئۇسلۇبىنى ئۆچۈرۈۋېتىڭ ، ئاندىن s .media
غا ئىشلىتىڭ. <li>
بۇرۇنقىدەكلا ، تەڭشەش ئەسلىھەلىرىنى لازىملىق جايلاردا ئىشلىتىڭ.
-
تىزىملىكتىكى مېدىيا ئوبيېكتى
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
تىزىملىكتىكى مېدىيا ئوبيېكتى
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
تىزىملىكتىكى مېدىيا ئوبيېكتى
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>