बूटस्ट्रैप मीडिया ऑब्जेक्ट्स
मीडिया ऑब्जेक्ट्स
बूटस्ट्रैप कुछ सामग्री के बाईं या दाईं ओर मीडिया ऑब्जेक्ट (जैसे चित्र या वीडियो) को संरेखित करने का एक आसान तरीका प्रदान करता है। इसका उपयोग ब्लॉग टिप्पणियों, ट्वीट्स आदि को प्रदर्शित करने के लिए किया जा सकता है:
जॉन डो 19 फरवरी, 2016 को पोस्ट किया गया
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
जेन डो 20 फरवरी, 2016 को पोस्ट किया गया
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
25 फरवरी, 2016 को एलिसिया कीज़ को पोस्ट किया गया
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो। शो से पहले अपराध या सुविधा का कोई डर नहीं है।
बेसिक मीडिया ऑब्जेक्ट
जॉन डो
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
जॉन डो
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
उदाहरण
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
उदाहरण समझाया गया
.mediaमीडिया ऑब्जेक्ट के लिए एक कंटेनर बनाने के लिए कक्षा के साथ <div> तत्व का उपयोग करें ।
.media-leftमीडिया ऑब्जेक्ट (छवि) को बाईं ओर संरेखित करने के लिए कक्षा का उपयोग करें , या .media-rightकक्षा को दाईं ओर संरेखित करने के लिए उपयोग करें।
पाठ जो छवि के बगल में दिखाई देना चाहिए, एक कंटेनर के अंदर रखा जाता है जिसमें वर्ग = " media-body" होता है।
इसके अतिरिक्त, आप .media-headingशीर्षकों के लिए उपयोग कर सकते हैं।
शीर्ष, मध्य या निचला संरेखण
media-topमीडिया ऑब्जेक्ट को , media-middleया media-bottomवर्ग के साथ ऊपर, मध्य या नीचे संरेखित भी किया जा सकता है :
मीडिया टॉप
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
मीडिया मध्य
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
मीडिया नीचे
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
उदाहरण
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
नेस्टिंग मीडिया ऑब्जेक्ट्स
मीडिया ऑब्जेक्ट को भी नेस्ट किया जा सकता है (मीडिया ऑब्जेक्ट के अंदर एक मीडिया ऑब्जेक्ट):
उदाहरण
जॉन डो 19 फरवरी, 2016 को पोस्ट किया गया
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
जॉन डो 20 फरवरी, 2016 को पोस्ट किया गया
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
जॉन डो 21 फरवरी, 2016 को पोस्ट किया गया
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
नेस्टिंग का एक और उदाहरण
उदाहरण
जॉन डो 19 फरवरी, 2016 को पोस्ट किया गया
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
जॉन डो 20 फरवरी, 2016 को पोस्ट किया गया
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
जॉन डो 21 फरवरी, 2016 को पोस्ट किया गया
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
जेन डो 20 फरवरी, 2016 को पोस्ट किया गया
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।
जेन डो 19 फरवरी, 2016 को पोस्ट किया गया
दर्द ही दर्द का प्यार है, मुख्य पारिस्थितिक समस्या है, लेकिन मैं इस तरह का समय नीचे गिरने के लिए देता हूं, ताकि कुछ बड़ा दर्द और दर्द हो।