ናይ ሚድያ ነገር
ሰነዳትን ኣብነታትን ንናይ ቡትስትራፕ ሚድያ ኦብጀክት ከም ብሎግ ርእይቶታት፡ ትዊትን ካልእ ከምኡ ዝኣመሰለን ኣዝዮም ተደጋገምቲ ባእታታት ንምህናጽ።
ኣብነት
እቲ ናይ ሚድያ ነገር ገለ ሚድያታት ኣብ ጎኒ እቲ ዝተባህለ ሚድያ ዘይጠቕለለ ትሕዝቶ ዝቕመጡሉ ዝተሓላለኹን ተደጋገምትን ባእታታት ንምህናጽ ይሕግዝ። ተወሳኺ፡ ሳላ flexbox ክልተ ዘድልዩ ክፍልታት ጥራይ ሒዙ እዩ ነዚ ዝገብሮ።
ኣብ ታሕቲ ኣብነት ናይ ሓደ ናይ ሚድያ ነገራት ኣሎ። ክልተ ክፍልታት ጥራይ እዮም ዘድልዩ- እቲ ምጥቕላልን .mediaኣብ .media-bodyዙርያ ትሕዝቶኻን። ኣማራጺ ፓዲንግን ማርጅንን ብመንገዲ ስፔሲንግ ዩቲሊቲስ ክቆጻጸር ይከኣል ።
ኣርእስቲ ሚድያ
ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.<div class="media">
<img src="..." class="mr-3" alt="...">
<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: ኣብ መስመር ዝርከቡ ባእታታት ከም ፍሌክስ ነገራት ኣይሕሰቡን እዮም።
ኢንተርነት ኤክስፕሎረር 10-11 ኣብ መስመር ዝርከቡ ባእታታት ከም መላግቦታት ወይ ምስልታት (ወይ ::beforeከምኡ’ውን ::afterስውር ባእታታት) ከም ፍሌክስ ነገራት ኣይቅርቦምን እዩ። እቲ እንኮ መፍትሒ ኣብ መስመር ዘይኮነ displayዋጋ ምቕማጥ እዩ (ንኣብነት, block, inline-block, ወይ flex). ንሕና ንመክር .d-flex, ሓደ ካብ ናይ ምርኢት ዩቲሊቲታትና , ከም ቀሊል መአረምታ ክትጥቀም።
ምድቃል
ናይ ሚድያ ነገራት ደረት ኣልቦ ክሰፍሩ ይኽእሉ እዮም፣ ዋላ እኳ ኣብ ገለ እዋን ደው ክትብሉ እንተመክር። .mediaኣብ ውሽጢ እቲ .media-bodyናይ ወላዲ ሚድያ ነገራት ተሰዂዑ ኣቐምጦ ።
ኣርእስቲ ሚድያ
ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.<div class="media">
<img src="..." class="mr-3" alt="...">
<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="mr-3" href="#">
<img src="..." class="mr-3" alt="...">
</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ትሕዝቶኻ ክስለፍ ይኽእል።
ኣብ ላዕሊ ዝተሰለፉ ሚድያታት
ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.
ዶነክ ሰድ ኦዲዮ ዱይ። ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ.
<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>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>ብማእከል ዝተሰለፉ መራኸቢ ብዙሃን
ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.
ዶነክ ሰድ ኦዲዮ ዱይ። ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ.
<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>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>ኣብ ታሕቲ ዝተሰለፉ ሚድያታት
ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.
ዶነክ ሰድ ኦዲዮ ዱይ። ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ.
<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>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ንብረት ንምቕማጥ (ናብ ዝመረጽካዮ ምሉእ ቁጽሪ)።
ናይ ሚድያ ነገር
ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.<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 src="..." class="ml-3" alt="...">
</div>ዝርዝር ሚድያታት
እቲ ናይ ሚድያ ነገራት ኣዝዩ ውሑድ መዋቕራዊ ጠለባት ስለዘለዎ፡ ነዞም ክፍልታት ኣብ ዝርዝር HTML ባእታታት እውን ክትጥቀመሎም ትኽእል ኢኻ። ኣብ ናትካ <ul>ወይ ፣ ዝኾነ ናይ መርበብ ሓበሬታ ነባሪ ቅዲ ቅዲታት ንምእላይ <ol>ዝብል ወስኸሉ ፣ ድሕሪኡ ኣብ s ካ ተግባራዊ ግበሮ። ከም ወትሩ ንምጽራይ ኣብ ዘድልየሉ ቦታ ናይ ርሕቀት ዩቲሊቲታት ተጠቐም።.list-unstyled.media<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>
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 src="..." class="mr-3" alt="...">
<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 src="..." class="mr-3" alt="...">
<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>