മാധ്യമ വസ്തു
ബ്ലോഗ് കമന്റുകൾ, ട്വീറ്റുകൾ തുടങ്ങിയവ പോലുള്ള ഉയർന്ന ആവർത്തന ഘടകങ്ങൾ നിർമ്മിക്കുന്നതിനുള്ള ബൂട്ട്സ്ട്രാപ്പിന്റെ മീഡിയ ഒബ്ജക്റ്റിനായുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും.
ഉദാഹരണം
മീഡിയ ഒബ്ജക്റ്റ് സങ്കീർണ്ണവും ആവർത്തിച്ചുള്ളതുമായ ഘടകങ്ങൾ നിർമ്മിക്കാൻ സഹായിക്കുന്നു, അവിടെ ചില മീഡിയകൾ പ്രസ്തുത മീഡിയയിൽ പൊതിയാത്ത ഉള്ളടക്കത്തിനൊപ്പം സ്ഥാനം പിടിക്കുന്നു. കൂടാതെ, ഫ്ലെക്സ്ബോക്സിന് നന്ദി, ആവശ്യമുള്ള രണ്ട് ക്ലാസുകൾ ഉപയോഗിച്ച് ഇത് ചെയ്യുന്നു.
ഒരൊറ്റ മീഡിയ ഒബ്ജക്റ്റിന്റെ ഒരു ഉദാഹരണം ചുവടെയുണ്ട്. രണ്ട് ക്ലാസുകൾ മാത്രമേ ആവശ്യമുള്ളൂ - പൊതിയുന്നതും നിങ്ങളുടെ ഉള്ളടക്കത്തിന് ചുറ്റുമുള്ളതും .media
. .media-body
ഓപ്ഷണൽ പാഡിംഗും മാർജിനും സ്പെയ്സിംഗ് യൂട്ടിലിറ്റികളിലൂടെ നിയന്ത്രിക്കാനാകും .
മാധ്യമ തലക്കെട്ട്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്കെലറിസ്ക് ആന്റ് സോളിസിറ്റുഡിൻ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.Flexbug #12: ഇൻലൈൻ ഘടകങ്ങൾ ഫ്ലെക്സ് ഇനങ്ങളായി കണക്കാക്കില്ല
ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 10-11 ലിങ്കുകളോ ചിത്രങ്ങളോ (അല്ലെങ്കിൽ കപട ഘടകങ്ങൾ) പോലുള്ള ഇൻലൈൻ ഘടകങ്ങളെ ഫ്ലെക്സ് ഇനങ്ങളായി റെൻഡർ ::before
ചെയ്യുന്നില്ല . ഒരു നോൺ-ഇൻലൈൻ മൂല്യം (ഉദാ, , , അല്ലെങ്കിൽ ) ::after
സജ്ജീകരിക്കുക എന്നതാണ് ഏക പ്രതിവിധി . ഞങ്ങളുടെ ഡിസ്പ്ലേ യൂട്ടിലിറ്റികളിൽ ഒന്നായ ഒരു എളുപ്പ പരിഹാരമായി ഉപയോഗിക്കാൻ ഞങ്ങൾ നിർദ്ദേശിക്കുന്നു .display
block
inline-block
flex
.d-flex
ഉറവിടം: GitHub-ലെ Flexbugs
നെസ്റ്റിംഗ്
മീഡിയ ഒബ്ജക്റ്റുകൾ അനന്തമായി നെസ്റ്റഡ് ചെയ്യാൻ കഴിയും, എന്നിരുന്നാലും ചില ഘട്ടങ്ങളിൽ നിർത്താൻ ഞങ്ങൾ നിർദ്ദേശിക്കുന്നു. ഒരു പാരന്റ് മീഡിയ ഒബ്ജക്റ്റിനുള്ളിൽ നെസ്റ്റഡ് .media
ചെയ്ത സ്ഥലം..media-body
മാധ്യമ തലക്കെട്ട്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്കെലറിസ്ക് ആന്റ് സോളിസിറ്റുഡിൻ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.വിന്യാസം
ഒരു മീഡിയ ഒബ്ജക്റ്റിലെ മീഡിയയെ ഫ്ലെക്സ്ബോക്സ് യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് നിങ്ങളുടെ .media-body
ഉള്ളടക്കത്തിന്റെ മുകളിൽ (ഡിഫോൾട്ട്), മധ്യഭാഗം അല്ലെങ്കിൽ അവസാനം വരെ വിന്യസിക്കാൻ കഴിയും.
മുകളിൽ വിന്യസിച്ച മീഡിയ
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്കെലറിസ്ക് ആന്റ് സോളിസിറ്റുഡിൻ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
ഡോനെക് സെഡ് ഒഡിയോ ദുയി. Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്.
മധ്യത്തിൽ വിന്യസിച്ച മീഡിയ
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്കെലറിസ്ക് ആന്റ് സോളിസിറ്റുഡിൻ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
ഡോനെക് സെഡ് ഒഡിയോ ദുയി. Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്.
താഴെ വിന്യസിച്ച മീഡിയ
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്കെലറിസ്ക് ആന്റ് സോളിസിറ്റുഡിൻ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
ഡോനെക് സെഡ് ഒഡിയോ ദുയി. Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്.
ഓർഡർ ചെയ്യുക
മീഡിയ ഒബ്ജക്റ്റുകളിലെ ഉള്ളടക്കത്തിന്റെ ക്രമം HTML തന്നെ പരിഷ്ക്കരിച്ചുകൊണ്ടോ അല്ലെങ്കിൽ order
പ്രോപ്പർട്ടി സജ്ജീകരിക്കുന്നതിന് ചില ഇഷ്ടാനുസൃത ഫ്ലെക്സ്ബോക്സ് CSS ചേർത്തോ മാറ്റുക (നിങ്ങൾ തിരഞ്ഞെടുക്കുന്ന ഒരു പൂർണ്ണസംഖ്യയിലേക്ക്).
മാധ്യമ വസ്തു
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്കെലറിസ്ക് ആന്റ് സോളിസിറ്റുഡിൻ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.മീഡിയ ലിസ്റ്റ്
മീഡിയ ഒബ്ജക്റ്റിന് വളരെ കുറച്ച് ഘടനാപരമായ ആവശ്യകതകളുള്ളതിനാൽ, നിങ്ങൾക്ക് ഈ ക്ലാസുകൾ ലിസ്റ്റ് HTML ഘടകങ്ങളിലും ഉപയോഗിക്കാം. നിങ്ങളുടെ <ul>
അല്ലെങ്കിൽ , ഏതെങ്കിലും ബ്രൗസർ ഡിഫോൾട്ട് ലിസ്റ്റ് ശൈലികൾ നീക്കം ചെയ്യാൻ <ol>
ചേർക്കുക , തുടർന്ന് നിങ്ങളുടെ s-ലേക്ക് പ്രയോഗിക്കുക. എല്ലായ്പ്പോഴും എന്നപോലെ, ഫൈൻ ട്യൂൺ ചെയ്യാൻ ആവശ്യമുള്ളിടത്തെല്ലാം സ്പെയ്സിംഗ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക..list-unstyled
.media
<li>
-
ലിസ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള മീഡിയ ഒബ്ജക്റ്റ്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്കെലറിസ്ക് ആന്റ് സോളിസിറ്റുഡിൻ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്. -
ലിസ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള മീഡിയ ഒബ്ജക്റ്റ്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്കെലറിസ്ക് ആന്റ് സോളിസിറ്റുഡിൻ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്. -
ലിസ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള മീഡിയ ഒബ്ജക്റ്റ്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്കെലറിസ്ക് ആന്റ് സോളിസിറ്റുഡിൻ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.