मीडिया ऑब्जेक्ट
ब्लॉग टिप्पण्या, ट्विट्स आणि सारखे उच्च पुनरावृत्ती घटक तयार करण्यासाठी बूटस्ट्रॅपच्या मीडिया ऑब्जेक्टसाठी दस्तऐवजीकरण आणि उदाहरणे.
उदाहरण
मीडिया ऑब्जेक्ट क्लिष्ट आणि पुनरावृत्ती करणारे घटक तयार करण्यात मदत करते जिथे काही मीडिया सामग्रीच्या बाजूने स्थित आहे जे सांगितलेल्या मीडियाभोवती गुंडाळत नाही. शिवाय, फ्लेक्सबॉक्सला धन्यवाद फक्त दोन आवश्यक वर्गांसह हे करते.
खाली एकल मीडिया ऑब्जेक्टचे उदाहरण आहे. फक्त दोन वर्ग आवश्यक आहेत - रॅपिंग .media
आणि .media-body
तुमच्या सामग्रीभोवती. पर्यायी पॅडिंग आणि मार्जिन स्पेसिंग युटिलिटीजद्वारे नियंत्रित केले जाऊ शकतात .
मीडिया हेडिंग
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.फ्लेक्सबग #12: इनलाइन घटकांना फ्लेक्स आयटम मानले जात नाही
इंटरनेट एक्सप्लोरर 10-11 इनलाइन घटक जसे की लिंक्स किंवा इमेजेस (किंवा ::before
आणि ::after
स्यूडो-एलिमेंट्स) फ्लेक्स आयटम म्हणून प्रस्तुत करत नाहीत. एकच उपाय म्हणजे एक नॉन-लाइन display
मूल्य (उदा., block
, inline-block
, किंवा flex
) सेट करणे. .d-flex
आम्ही आमच्या डिस्प्ले युटिलिटींपैकी एक, सोप्या निराकरणासाठी वापरण्याचा सल्ला देतो.
स्रोत: GitHub वर फ्लेक्सबग्स
घरटी
मीडिया ऑब्जेक्ट्स अमर्यादपणे नेस्ट केले जाऊ शकतात, जरी आम्ही तुम्हाला काही क्षणी थांबण्याचा सल्ला देतो. मूळ मीडिया ऑब्जेक्टच्या .media
आत नेस्टेड ठेवा ..media-body
मीडिया हेडिंग
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.संरेखन
मीडिया ऑब्जेक्टमधील मीडिया तुमच्या .media-body
सामग्रीच्या शीर्षस्थानी (डीफॉल्ट), मध्य किंवा शेवटी फ्लेक्सबॉक्स युटिलिटीसह संरेखित केला जाऊ शकतो.
शीर्ष संरेखित मीडिया
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
Donec sed odio dui. नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नरे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus.
केंद्र-संरेखित माध्यम
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
Donec sed odio dui. नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नरे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus.
तळाशी संरेखित माध्यम
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
Donec sed odio dui. नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नरे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus.
ऑर्डर करा
HTML मध्येच बदल करून किंवा मालमत्ता सेट करण्यासाठी काही कस्टम फ्लेक्सबॉक्स CSS जोडून मीडिया ऑब्जेक्टमधील सामग्रीचा क्रम बदला order
(आपल्या निवडीच्या पूर्णांकावर).
मीडिया ऑब्जेक्ट
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.मीडिया यादी
मीडिया ऑब्जेक्टला खूप कमी स्ट्रक्चरल आवश्यकता असल्यामुळे, तुम्ही हे वर्ग HTML घटकांच्या सूचीवर देखील वापरू शकता. तुमच्या <ul>
किंवा वर, कोणतीही ब्राउझर डीफॉल्ट सूची शैली काढून टाकण्यासाठी <ol>
जोडा आणि नंतर तुमच्या s वर लागू करा. नेहमीप्रमाणेच, जिथे आवश्यक असेल तिथे स्पेसिंग युटिलिटी वापरा..list-unstyled
.media
<li>
-
सूची-आधारित मीडिया ऑब्जेक्ट
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस. -
सूची-आधारित मीडिया ऑब्जेक्ट
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस. -
सूची-आधारित मीडिया ऑब्जेक्ट
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.