ബൂട്ട്സ്ട്രാപ്പിന്റെ കാർഡുകൾ ഒന്നിലധികം വകഭേദങ്ങളും ഓപ്ഷനുകളുമുള്ള വഴക്കമുള്ളതും വിപുലീകരിക്കാവുന്നതുമായ ഉള്ളടക്ക കണ്ടെയ്നർ നൽകുന്നു.
കുറിച്ച്
ഒരു കാർഡ് ഒരു ഫ്ലെക്സിബിൾ, എക്സ്റ്റൻസിബിൾ ഉള്ളടക്ക കണ്ടെയ്നർ ആണ്. തലക്കെട്ടുകൾക്കും അടിക്കുറിപ്പുകൾക്കുമുള്ള ഓപ്ഷനുകൾ, വൈവിധ്യമാർന്ന ഉള്ളടക്കം, സന്ദർഭോചിതമായ പശ്ചാത്തല വർണ്ണങ്ങൾ, ശക്തമായ ഡിസ്പ്ലേ ഓപ്ഷനുകൾ എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു. നിങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പ് 3 പരിചിതമാണെങ്കിൽ, ഞങ്ങളുടെ പഴയ പാനലുകൾ, കിണറുകൾ, ലഘുചിത്രങ്ങൾ എന്നിവയെ കാർഡുകൾ മാറ്റിസ്ഥാപിക്കും. കാർഡുകൾക്കുള്ള മോഡിഫയർ ക്ലാസുകളായി ആ ഘടകങ്ങൾക്ക് സമാനമായ പ്രവർത്തനം ലഭ്യമാണ്.
ഉദാഹരണം
കാർഡുകൾ കഴിയുന്നത്ര ചെറിയ മാർക്ക്അപ്പും ശൈലികളും ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്, പക്ഷേ ഇപ്പോഴും ഒരു ടൺ നിയന്ത്രണവും ഇഷ്ടാനുസൃതമാക്കലും നൽകാൻ കഴിയുന്നു. ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്, അവ എളുപ്പത്തിലുള്ള വിന്യാസം വാഗ്ദാനം ചെയ്യുകയും മറ്റ് ബൂട്ട്സ്ട്രാപ്പ് ഘടകങ്ങളുമായി നന്നായി മിക്സ് ചെയ്യുകയും ചെയ്യുന്നു. അവയ്ക്ക് marginഡിഫോൾട്ടായി ഇല്ല, അതിനാൽ ആവശ്യാനുസരണം സ്പേസിംഗ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക.
മിക്സഡ് ഉള്ളടക്കവും നിശ്ചിത വീതിയുമുള്ള അടിസ്ഥാന കാർഡിന്റെ ഒരു ഉദാഹരണം ചുവടെയുണ്ട്. കാർഡുകൾക്ക് ആരംഭിക്കാൻ നിശ്ചിത വീതിയില്ല, അതിനാൽ അവ സ്വാഭാവികമായും അതിന്റെ പാരന്റ് എലമെന്റിന്റെ മുഴുവൻ വീതിയും നിറയ്ക്കും. ഞങ്ങളുടെ വിവിധ വലുപ്പ ഓപ്ഷനുകൾ ഉപയോഗിച്ച് ഇത് എളുപ്പത്തിൽ ഇച്ഛാനുസൃതമാക്കാവുന്നതാണ് .
കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
ചിത്രങ്ങൾ, ടെക്സ്റ്റ്, ലിസ്റ്റ് ഗ്രൂപ്പുകൾ, ലിങ്കുകൾ എന്നിവയും അതിലേറെയും ഉൾപ്പെടെ വൈവിധ്യമാർന്ന ഉള്ളടക്കത്തെ കാർഡുകൾ പിന്തുണയ്ക്കുന്നു. പിന്തുണയ്ക്കുന്നവയുടെ ഉദാഹരണങ്ങൾ ചുവടെയുണ്ട്.
ശരീരം
ഒരു കാർഡിന്റെ നിർമ്മാണ ബ്ലോക്ക് ആണ് .card-body. ഒരു കാർഡിനുള്ളിൽ നിങ്ങൾക്ക് ഒരു പാഡഡ് വിഭാഗം ആവശ്യമുള്ളപ്പോഴെല്ലാം ഇത് ഉപയോഗിക്കുക.
ഒരു കാർഡ് ബോഡിക്കുള്ളിലെ ചില വാചകമാണിത്.
ശീർഷകങ്ങൾ, വാചകം, ലിങ്കുകൾ
.card-titleഒരു <h*>ടാഗിൽ ചേർത്താണ് കാർഡ് ശീർഷകങ്ങൾ ഉപയോഗിക്കുന്നത് . .card-linkഅതുപോലെ, ഒരു <a>ടാഗിൽ ചേർത്തുകൊണ്ട് ലിങ്കുകൾ കൂട്ടിച്ചേർക്കുകയും പരസ്പരം അടുത്ത് സ്ഥാപിക്കുകയും ചെയ്യുന്നു .
.card-subtitleഒരു <h*>ടാഗിൽ a ചേർത്താണ് സബ്ടൈറ്റിലുകൾ ഉപയോഗിക്കുന്നത് . ഒരു ഇനത്തിൽ .card-titleഇനങ്ങളും .card-subtitleഇനങ്ങളും സ്ഥാപിച്ചിട്ടുണ്ടെങ്കിൽ .card-body, കാർഡിന്റെ തലക്കെട്ടും ഉപശീർഷകവും നന്നായി വിന്യസിച്ചിരിക്കുന്നു.
കാർഡ് ശീർഷകം
കാർഡ് സബ്ടൈറ്റിൽ
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്���ാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
.card-img-topകാർഡിന്റെ മുകളിൽ ഒരു ചിത്രം സ്ഥാപിക്കുന്നു. ഉപയോഗിച്ച് .card-text, കാർഡിലേക്ക് ടെക്സ്റ്റ് ചേർക്കാം. സ്റ്റാൻഡേർഡ് HTML ടാഗുകൾ ഉപയോഗിച്ച് ഉള്ളിലെ ടെക്സ്റ്റും .card-textസ്റ്റൈൽ ചെയ്യാവുന്നതാണ്.
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
ലിസ്റ്റ് ഗ്രൂപ്പുകൾ
ഒരു ഫ്ലഷ് ലിസ്റ്റ് ഗ്രൂപ്പുള്ള ഒരു കാർഡിലെ ഉള്ളടക്കത്തിന്റെ ലിസ്റ്റുകൾ സൃഷ്ടിക്കുക.
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
വെസ്റ്റിബുലം അറ്റ് ഇറോസ്
ഫീച്ചർ ചെയ്തു
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
വെസ്റ്റിബുലം അറ്റ് ഇറോസ്
അടുക്കള സിങ്ക്
നിങ്ങൾക്ക് ആവശ്യമുള്ള കാർഡ് സൃഷ്ടിക്കാൻ ഒന്നിലധികം ഉള്ളടക്ക തരങ്ങൾ മിക്സ് ചെയ്ത് പൊരുത്തപ്പെടുത്തുക, അല്ലെങ്കിൽ എല്ലാം അവിടെ ഇടുക. ഇമേജ് ശൈലികൾ, ബ്ലോക്കുകൾ, ടെക്സ്റ്റ് ശൈലികൾ, ഒരു ലിസ്റ്റ് ഗ്രൂപ്പ് എന്നിവ ചുവടെ കാണിച്ചിരിക്കുന്നു-എല്ലാം ഒരു നിശ്ചിത വീതിയുള്ള കാർഡിൽ പൊതിഞ്ഞിരിക്കുന്നു.
കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
കാർഡുകൾ widthആരംഭിക്കാൻ പ്രത്യേകിച്ചൊന്നും കരുതുന്നില്ല, അതിനാൽ പ്രസ്താവിച്ചില്ലെങ്കിൽ അവ 100% വീതിയുള്ളതായിരിക്കും. ഇഷ്ടാനുസൃത CSS, ഗ്രിഡ് ക്ലാസുകൾ, ഗ്രിഡ് സാസ് മിക്സിനുകൾ അല്ലെങ്കിൽ യൂട്ടിലിറ്റികൾ എന്നിവ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് ആവശ്യാനുസരണം മാറ്റാനാകും.
ഗ്രിഡ് മാർക്ക്അപ്പ് ഉപയോഗിക്കുന്നു
ഗ്രിഡ് ഉപയോഗിച്ച്, ആവശ്യാനുസരണം നിരകളിലും വരികളിലും കാർഡുകൾ പൊതിയുക.
പ്രത്യേക തലക്കെട്ട് ചികിത്സ
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെയുള്ള പിന്തുണയ്ക്കുന്ന വാചകം.
ഞങ്ങളുടെ ടെക്സ്റ്റ് അലൈൻ ക്ലാസുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഏത് കാർഡിന്റെയും ടെക്സ്റ്റ് അലൈൻമെന്റ്-അതിന്റെ പൂർണ്ണമായോ നിർദ്ദിഷ്ട ഭാഗങ്ങളിലോ വേഗത്തിൽ മാറ്റാനാകും .
പ്രത്യേക തലക്കെട്ട് ചികിത്സ
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെയുള്ള പിന്തുണയ്ക്കുന്ന വാചകം.
ചിത്രങ്ങളുമായി പ്രവർത്തിക്കുന്നതിനുള്ള ചില ഓപ്ഷനുകൾ കാർഡുകളിൽ ഉൾപ്പെടുന്നു. ഒരു കാർഡിന്റെ രണ്ടറ്റത്തും "ഇമേജ് ക്യാപ്സ്" ചേർക്കുന്നതിൽ നിന്നും, കാർഡ് ഉള്ളടക്കം ഉപയോഗിച്ച് ചിത്രങ്ങൾ ഓവർലേ ചെയ്യുന്നതിൽ നിന്നും അല്ലെങ്കിൽ ഒരു കാർഡിൽ ചിത്രം ഉൾച്ചേർക്കുന്നതിൽ നിന്നും തിരഞ്ഞെടുക്കുക.
ചിത്ര തൊപ്പികൾ
തലക്കെട്ടുകൾക്കും അടിക്കുറിപ്പുകൾക്കും സമാനമായി, കാർഡുകളിൽ മുകളിലും താഴെയുമുള്ള "ഇമേജ് ക്യാപ്സ്" ഉൾപ്പെടുത്താം—ഒരു കാർഡിന്റെ മുകളിലോ താഴെയോ ഉള്ള ചിത്രങ്ങൾ.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ താഴെയുള്ള പിന്തുണയുള്ള ടെക്സ്റ്റുള്ള വിശാലമായ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ താഴെയുള്ള പിന്തുണയുള്ള ടെക്സ്റ്റുള്ള വിശാലമായ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
ചിത്ര ഓവർലേകൾ
ഒരു ചിത്രം ഒരു കാർഡ് പശ്ചാത്തലമാക്കി മാറ്റി നിങ്ങളുടെ കാർഡിന്റെ വാചകം ഓവർലേ ചെയ്യുക. ചിത്രത്തെ ആശ്രയിച്ച്, നിങ്ങൾക്ക് അധിക ശൈലികളോ യൂട്ടിലിറ്റികളോ ആവശ്യമില്ലായിരിക്കാം.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ താഴെയുള്ള പിന്തുണയുള്ള ടെക്സ്റ്റുള്ള വിശാലമായ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
ഉള്ളടക്കം ചിത്രത്തിന്റെ ഉയരത്തേക്കാൾ വലുതായിരിക്കരുത് എന്നത് ശ്രദ്ധിക്കുക. ഉള്ളടക്കം ചിത്രത്തേക്കാൾ വലുതാണെങ്കിൽ, ഉള്ളടക്കം ചിത്രത്തിന് പുറത്ത് പ്രദർശിപ്പിക്കും.
തിരശ്ചീനമായി
ഗ്രിഡിന്റെയും യൂട്ടിലിറ്റി ക്ലാസുകളുടെയും സംയോജനം ഉപയോഗിച്ച്, മൊബൈൽ-സൗഹൃദവും പ്രതികരിക്കുന്നതുമായ രീതിയിൽ കാർഡുകൾ തിരശ്ചീനമാക്കാം. ചുവടെയുള്ള ഉദാഹരണത്തിൽ, ഞങ്ങൾ ഗ്രിഡ് ഗട്ടറുകൾ നീക്കം ചെയ്യുകയും ബ്രേക്ക്പോയിന്റിൽ കാർഡ് തിരശ്ചീനമാക്കാൻ ക്ലാസുകൾ .no-guttersഉപയോഗിക്കുകയും ചെയ്യുന്നു. നിങ്ങളുടെ കാർഡ് ഉള്ളടക്കം അനുസരിച്ച് കൂടുതൽ ക്രമീകരണങ്ങൾ ആവശ്യമായി വന്നേക്കാം..col-md-*md
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ താഴെയുള്ള പിന്തുണയുള്ള ടെക്സ്റ്റുള്ള വിശാലമായ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
കാർഡ് ശൈലികൾ
കാർഡുകളിൽ അവയുടെ പശ്ചാത്തലം, ബോർഡറുകൾ, നിറം എന്നിവ ഇഷ്ടാനുസൃതമാക്കുന്നതിനുള്ള വിവിധ ഓപ്ഷനുകൾ ഉൾപ്പെടുന്നു.
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
സെക്കൻഡറി കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
വിജയ കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
അപകട കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
മുന്നറിയിപ്പ് കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
വിവര കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
ലൈറ്റ് കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
ഇരുണ്ട കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
സഹായ സാങ്കേതികവിദ്യകളുടെ അർത്ഥം അറിയിക്കുന്നു
അർത്ഥം ചേർക്കാൻ വർണ്ണം ഉപയോഗിക്കുന്നത് ഒരു വിഷ്വൽ സൂചന നൽകുന്നു, അത് സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് കൈമാറില്ല. വർണ്ണത്താൽ സൂചിപ്പിക്കുന്ന വിവരങ്ങൾ ഉള്ളടക്കത്തിൽ നിന്ന് തന്നെ വ്യക്തമാണെന്ന് ഉറപ്പാക്കുക (ഉദാ: ദൃശ്യമായ ടെക്സ്റ്റ്), അല്ലെങ്കിൽ .sr-onlyക്ലാസിനൊപ്പം മറച്ചിരിക്കുന്ന അധിക വാചകം പോലെയുള്ള ഇതര മാർഗങ്ങളിലൂടെ ഉൾപ്പെടുത്തിയിരിക്കുന്നു.
അതിർത്തി
ഒരു കാർഡ് മാറ്റാൻ ബോർഡർ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക . border-colorചുവടെ കാണിച്ചിരിക്കുന്നതുപോലെ നിങ്ങൾക്ക് രക്ഷിതാവിന് അല്ലെങ്കിൽ കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഒരു ഉപവിഭാഗത്തിൽ .text-{color}ക്ലാസുകൾ നൽകാമെന്നത് ശ്രദ്ധിക്കുക..card
തലക്കെട്ട്
പ്രാഥമിക കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
സെക്കൻഡറി കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
വിജയ കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
അപകട കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
മുന്നറിയിപ്പ് കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
വിവര കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
ലൈറ്റ് കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
തലക്കെട്ട്
ഇരുണ്ട കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
മിക്സിൻസ് യൂട്ടിലിറ്റികൾ
നിങ്ങൾക്ക് കാർഡ് ഹെഡറിലെയും അടിക്കുറിപ്പിലെയും ബോർഡറുകൾ ആവശ്യാനുസരണം മാറ്റാനും, ഉപയോഗിച്ച് അവ നീക്കം ചെയ്യാനും background-colorകഴിയും .bg-transparent.
തലക്കെട്ട്
വിജയ കാർഡ് ശീർഷകം
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
കാർഡ് ലേഔട്ട്
കാർഡുകൾക്കുള്ളിലെ ഉള്ളടക്കം സ്റ്റൈൽ ചെയ്യുന്നതിനു പുറമേ, ബൂട്ട്സ്ട്രാപ്പിൽ കാർഡുകളുടെ സീരീസ് ലേഔട്ട് ചെയ്യുന്നതിനുള്ള ചില ഓപ്ഷനുകൾ ഉൾപ്പെടുന്നു. തൽക്കാലം, ഈ ലേഔട്ട് ഓപ്ഷനുകൾ ഇതുവരെ പ്രതികരിക്കുന്നില്ല .
കാർഡ് ഗ്രൂപ്പുകൾ
ഒരേ വീതിയും ഉയരവും ഉള്ള നിരകളുള്ള ഒറ്റ, ഘടിപ്പിച്ച ഘടകമായി കാർഡുകൾ റെൻഡർ ചെയ്യാൻ കാർഡ് ഗ്രൂപ്പുകൾ ഉപയോഗിക്കുക. കാർഡ് ഗ്രൂപ്പുകൾ display: flex;അവയുടെ ഏകീകൃത വലുപ്പം കൈവരിക്കാൻ ഉപയോഗിക്കുന്നു.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ താഴെയുള്ള പിന്തുണയുള്ള ടെക്സ്റ്റുള്ള വിശാലമായ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ഈ കാർഡിന് താഴെ പിന്തുണയ്ക്കുന്ന വാചകമുണ്ട്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ താഴെയുള്ള പിന്തുണയുള്ള ടെക്സ്റ്റുള്ള വിശാലമായ കാർഡാണിത്. ഈ കാർഡിന് തുല്യ ഉയരത്തിലുള്ള പ്രവർത്തനം കാണിക്കുന്ന ആദ്യത്തേതിനേക്കാൾ ദൈർഘ്യമേറിയ ഉള്ളടക്കമുണ്ട്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
അടിക്കുറിപ്പുകളുള്ള കാർഡ് ഗ്രൂപ്പുകൾ ഉപയോഗിക്കുമ്പോൾ, അവയുടെ ഉള്ളടക്കം സ്വയമേവ അണിനിരക്കും.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ താഴെയുള്ള പിന്തുണയുള്ള ടെക്സ്റ്റുള്ള വിശാലമായ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ഈ കാർഡിന് താഴെ പിന്തുണയ്ക്കുന്ന വാചകമുണ്ട്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ താഴെയുള്ള പിന്തുണയുള്ള ടെക്സ്റ്റുള്ള വിശാലമായ കാർഡാണിത്. ഈ കാർഡിന് തുല്യ ഉയരത്തിലുള്ള പ്രവർത്തനം കാണിക്കുന്ന ആദ്യത്തേതിനേക്കാൾ ദൈർഘ്യമേറിയ ഉള്ളടക്കമുണ്ട്.
കാർഡ് ഡെക്കുകൾ
പരസ്പരം ഘടിപ്പിച്ചിട്ടില്ലാത്ത തുല്യ വീതിയും ഉയരവും ഉള്ള ഒരു കൂട്ടം കാർഡുകൾ ആവശ്യമുണ്ടോ? കാർഡ് ഡെക്കുകൾ ഉപയോഗിക്കുക.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ഈ കാർഡിന് താഴെ പിന്തുണയ്ക്കുന്ന വാചകമുണ്ട്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ താഴെയുള്ള പിന്തുണയുള്ള ടെക്സ്റ്റുള്ള വിശാലമായ കാർഡാണിത്. ഈ കാർഡിന് തുല്യ ഉയരത്തിലുള്ള പ്രവർത്തനം കാണിക്കുന്ന ആദ്യത്തേതിനേക്കാൾ ദൈർഘ്യമേറിയ ഉള്ളടക്കമുണ്ട്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
കാർഡ് ഗ്രൂപ്പുകളെപ്പോലെ, ഡെക്കുകളിലെ കാർഡ് ഫൂട്ടറുകൾ സ്വയമേവ അണിനിരക്കും.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ താഴെയുള്ള പിന്തുണയുള്ള ടെക്സ്റ്റുള്ള വിശാലമായ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ഈ കാർഡിന് താഴെ പിന്തുണയ്ക്കുന്ന വാചകമുണ്ട്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ താഴെയുള്ള പിന്തുണയുള്ള ടെക്സ്റ്റുള്ള വിശാലമായ കാർഡാണിത്. ഈ കാർഡിന് തുല്യ ഉയരത്തിലുള്ള പ്രവർത്തനം കാണിക്കുന്ന ആദ്യത്തേതിനേക്കാൾ ദൈർഘ്യമേറിയ ഉള്ളടക്കമുണ്ട്.
ഗ്രിഡ് കാർഡുകൾ
ഓരോ വരിയിലും നിങ്ങൾ എത്ര ഗ്രിഡ് നിരകൾ (നിങ്ങളുടെ കാർഡുകൾക്ക് ചുറ്റും പൊതിഞ്ഞ്) കാണിക്കുന്നു എന്നത് നിയന്ത്രിക്കാൻ ബൂട്ട്സ്ട്രാപ്പ് ഗ്രിഡ് സിസ്റ്റവും അതിന്റെ .row-colsക്ലാസുകളും ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, .row-cols-1ഒരു കോളത്തിൽ .row-cols-md-2കാർഡുകൾ നിരത്തുകയും ഇടത്തരം ബ്രേക്ക്പോയിന്റിൽ നിന്ന് മുകളിലുള്ള ഒന്നിലധികം വരികളിലായി നാല് കാർഡുകൾ തുല്യ വീതിയിലേക്ക് വിഭജിക്കുകയും ചെയ്യുക.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
ഇത് മാറ്റുക .row-cols-3, നാലാമത്തെ കാർഡ് റാപ്പ് നിങ്ങൾ കാണും.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
നിങ്ങൾക്ക് തുല്യ ഉയരം ആവശ്യമുള്ളപ്പോൾ .h-100, കാർഡുകളിലേക്ക് ചേർക്കുക. നിങ്ങൾക്ക് ഡിഫോൾട്ടായി തുല്യ ഉയരങ്ങൾ വേണമെങ്കിൽ, നിങ്ങൾക്ക് $card-height: 100%Sass-ൽ സജ്ജീകരിക്കാം.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
കാർഡ് ശീർഷകം
ഇതൊരു ഹ്രസ്വ കാർഡാണ്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
കാർഡ് നിരകൾ
കാർഡുകൾ പൊതിഞ്ഞ് CSS ഉപയോഗിച്ച് കൊത്തുപണി പോലെയുള്ള കോളങ്ങളായി ക്രമീകരിക്കാം .card-columns. columnഎളുപ്പത്തിലുള്ള വിന്യാസത്തിനായി ഫ്ലെക്സ്ബോക്സിന് പകരം CSS പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ചാണ് കാർഡുകൾ നിർമ്മിച്ചിരിക്കുന്നത് . കാർഡുകൾ മുകളിൽ നിന്ന് താഴേക്കും ഇടത്തുനിന്ന് വലത്തോട്ടും ക്രമീകരിച്ചിരിക്കുന്നു.
ഹെഡ്സ് അപ്പുകൾ! കാർഡ് കോളങ്ങൾക്കൊപ്പം നിങ്ങളുടെ മൈലേജ് വ്യത്യാസപ്പെടാം. കോളങ്ങളിൽ ഉടനീളം കാർഡുകൾ തകരുന്നത് തടയാൻ, ഞങ്ങൾ അവയെ display: inline-blockഇതുവരെ column-break-inside: avoidബുള്ളറ്റ് പ്രൂഫ് സൊല്യൂഷൻ അല്ലാത്തതായി സജ്ജീകരിക്കണം.
ഒരു പുതിയ ലൈനിലേക്ക് പൊതിയുന്ന കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ചുവടെ പിന്തുണയ്ക്കുന്ന ടെക്സ്റ്റുള്ള ദൈർഘ്യമേറിയ കാർഡാണിത്. ഈ ഉള്ളടക്കം അൽപ്പം ദൈർഘ്യമേറിയതാണ്.
ലോറെം ഇപ്സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.
കാർഡ് ശീർഷകം
അധിക ഉള്ളടക്കത്തിലേക്കുള്ള സ്വാഭാവിക ലീഡ്-ഇൻ എന്ന നിലയിൽ ഈ കാർഡിന് താഴെ പിന്തുണയ്ക്കുന്ന വാചകമുണ്ട്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
ലോറെം ഇപ്സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണ സംഖ്യകൾ.
കാർഡ് ശീർഷകം
ഈ കാർഡിന് താഴെ ഒരു സാധാരണ ശീർഷകവും വാചകത്തിന്റെ ചെറിയ ഖണ്ഡികയും ഉണ്ട്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
ലോറെം ഇപ്സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.
കാർഡ് ശീർഷകം
ശീർഷകവും പിന്തുണയ്ക്കുന്ന വാചകവും ഉള്ള മറ്റൊരു കാർഡാണിത്. ഈ കാർഡിന് മൊത്തത്തിൽ അൽപ്പം ഉയരം കൂട്ടാൻ ചില അധിക ഉള്ളടക്കമുണ്ട്.
3 മിനിറ്റ് മുമ്പ് അവസാനം അപ്ഡേറ്റ് ചെയ്തു
ചില അധിക കോഡ് ഉപയോഗിച്ച് കാർഡ് നിരകൾ വിപുലീകരിക്കാനും ഇഷ്ടാനുസൃതമാക്കാനും കഴിയും. .card-columnsനിരകളുടെ എണ്ണം മാറ്റുന്നതിനായി ഒരു കൂട്ടം റെസ്പോൺസീവ് ടയറുകൾ സൃഷ്ടിക്കാൻ ഞങ്ങൾ ഉപയോഗിക്കുന്ന അതേ CSS-CSS കോളങ്ങൾ-ഉപയോഗിക്കുന്ന ക്ലാസിന്റെ ഒരു വിപുലീകരണമാണ് ചുവടെ കാണിച്ചിരിക്കുന്നത് .