Source

ናይ ሚድያ ነገር

ሰነዳትን ኣብነታትን ንናይ ቡትስትራፕ ሚድያ ኦብጀክት ከም ብሎግ ርእይቶታት፡ ትዊትን ካልእ ከምኡ ዝኣመሰለን ኣዝዮም ተደጋገምቲ ባእታታት ንምህናጽ።

ኣብነት

እቲ ናይ ሚድያ ነገር ገለ ሚድያታት ኣብ ጎኒ እቲ ዝተባህለ ሚድያ ዘይጠቕለለ ትሕዝቶ ዝቕመጡሉ ዝተሓላለኹን ተደጋገምትን ባእታታት ንምህናጽ ይሕግዝ። ተወሳኺ፡ ሳላ flexbox ክልተ ዘድልዩ ክፍልታት ጥራይ ሒዙ እዩ ነዚ ዝገብሮ።

ኣብ ታሕቲ ኣብነት ናይ ሓደ ናይ ሚድያ ነገራት ኣሎ። ክልተ ክፍልታት ጥራይ እዮም ዘድልዩ- እቲ ምጥቕላልን .mediaኣብ .media-bodyዙርያ ትሕዝቶኻን። ኣማራጺ ፓዲንግን ማርጅንን ብመንገዲ ስፔሲንግ ዩቲሊቲስ ክቆጻጸር ይከኣል ።

64x64 ዝብል እዩ።
ኣርእስቲ ሚድያ
ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ. 
<div class="media">
  <img class="mr-3" src=".../64x64" 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: ኣብ መስመር ዝርከቡ ባእታታት ከም ፍሌክስ ነገራት ኣይሕሰቡን እዮም።

ኢንተርነት ኤክስፕሎረር 10-11 ኣብ መስመር ዝርከቡ ባእታታት ከም መላግቦታት ወይ ምስልታት (ወይ ::beforeከምኡ’ውን ::afterስውር ባእታታት) ከም ፍሌክስ ነገራት ኣይቅርቦምን እዩ። እቲ እንኮ መፍትሒ ኣብ መስመር ዘይኮነ displayዋጋ ምቕማጥ እዩ (ንኣብነት, block, inline-block, ወይ flex). ንሕና ንመክር .d-flex, ሓደ ካብ ናይ ምርኢት ዩቲሊቲታትና , ከም ቀሊል መአረምታ ክትጥቀም።

ምንጪ ፡ ፍሌክስባግስ ኣብ ጊትሃብ

ምድቃል

ናይ ሚድያ ነገራት ደረት ኣልቦ ክሰፍሩ ይኽእሉ እዮም፣ ዋላ እኳ ኣብ ገለ እዋን ደው ክትብሉ እንተመክር። .mediaኣብ ውሽጢ እቲ .media-bodyናይ ወላዲ ሚድያ ነገራት ተሰዂዑ ኣቐምጦ ።

64x64 ዝብል እዩ።
ኣርእስቲ ሚድያ
ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.
64x64 ዝብል እዩ።
ኣርእስቲ ሚድያ
ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ. 
<div class="media">
  <img class="mr-3" src=".../64x64" 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=".../64x64" 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ትሕዝቶኻ ክስለፍ ይኽእል።

64x64 ዝብል እዩ።
ኣብ ላዕሊ ዝተሰለፉ ሚድያታት

ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.

ዶነክ ሰድ ኦዲዮ ዱይ። ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ.

<div class="media">
  <img class="align-self-start mr-3" src=".../64x64" 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>
64x64 ዝብል እዩ።
ብማእከል ዝተሰለፉ መራኸቢ ብዙሃን

ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.

ዶነክ ሰድ ኦዲዮ ዱይ። ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ.

<div class="media">
  <img class="align-self-center mr-3" src=".../64x64" 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>
64x64 ዝብል እዩ።
ኣብ ታሕቲ ዝተሰለፉ ሚድያታት

ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.

ዶነክ ሰድ ኦዲዮ ዱይ። ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ.

<div class="media">
  <img class="align-self-end mr-3" src=".../64x64" 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ንብረት ንምቕማጥ (ናብ ዝመረጽካዮ ምሉእ ቁጽሪ)።

ናይ ሚድያ ነገር
ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.
64x64 ዝብል እዩ። 
<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=".../64x64" alt="Generic placeholder image">
</div>

ዝርዝር ሚድያታት

እቲ ናይ ሚድያ ነገራት ኣዝዩ ውሑድ መዋቕራዊ ጠለባት ስለዘለዎ፡ ነዞም ክፍልታት ኣብ ዝርዝር HTML ባእታታት እውን ክትጥቀመሎም ትኽእል ኢኻ። ኣብ ናትካ <ul>ወይ ፣ ዝኾነ ናይ መርበብ ሓበሬታ ነባሪ ቅዲ ቅዲታት ንምእላይ <ol>ዝብል ወስኸሉ ፣ ድሕሪኡ ኣብ s ካ ተግባራዊ ግበሮ። ከም ወትሩ ንምጽራይ ኣብ ዘድልየሉ ቦታ ናይ ርሕቀት ዩቲሊቲታት ተጠቐም።.list-unstyled.media<li>

  • 64x64 ዝብል እዩ።
    ኣብ ዝርዝር ዝተመርኮሰ ናይ ሚድያ ነገራት
    ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.
  • 64x64 ዝብል እዩ።
    ኣብ ዝርዝር ዝተመርኮሰ ናይ ሚድያ ነገራት
    ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.
  • 64x64 ዝብል እዩ።
    ኣብ ዝርዝር ዝተመርኮሰ ናይ ሚድያ ነገራት
    ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ. 
<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src=".../64x64" 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=".../64x64" 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=".../64x64" 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>