ടൈപ്പോഗ്രാഫി
ആഗോള ക്രമീകരണങ്ങൾ, തലക്കെട്ടുകൾ, ബോഡി ടെക്സ്റ്റ്, ലിസ്റ്റുകൾ എന്നിവയും മറ്റും ഉൾപ്പെടെ, ബൂട്ട്സ്ട്രാപ്പ് ടൈപ്പോഗ്രാഫിക്കുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും.
ആഗോള ക്രമീകരണങ്ങൾ
ബൂട്ട്സ്ട്രാപ്പ് അടിസ്ഥാന ആഗോള ഡിസ്പ്ലേ, ടൈപ്പോഗ്രാഫി, ലിങ്ക് ശൈലികൾ എന്നിവ സജ്ജമാക്കുന്നു. കൂടുതൽ നിയന്ത്രണം ആവശ്യമുള്ളപ്പോൾ, ടെക്സ്റ്റ്വൽ യൂട്ടിലിറ്റി ക്ലാസുകൾ പരിശോധിക്കുക .
- ഓരോ OS-നും ഉപകരണത്തിനും ഏറ്റവും മികച്ചത് തിരഞ്ഞെടുക്കുന്ന ഒരു നേറ്റീവ് ഫോണ്ട് സ്റ്റാക്ക് ഉപയോഗിക്കുക.
font-family
- കൂടുതൽ ഉൾക്കൊള്ളുന്നതും ആക്സസ് ചെയ്യാവുന്നതുമായ തരം സ്കെയിലിനായി, ബ്രൗസർ ഡിഫോൾട്ട് റൂട്ട്
font-size
(സാധാരണയായി 16px) ഞങ്ങൾ അനുമാനിക്കുന്നു, അതിനാൽ സന്ദർശകർക്ക് അവരുടെ ബ്രൗസർ ഡിഫോൾട്ടുകൾ ആവശ്യാനുസരണം ഇഷ്ടാനുസൃതമാക്കാനാകും. $font-family-base
ഞങ്ങളുടെ ടൈപ്പോഗ്രാഫിക് അടിസ്ഥാനമായി ,$font-size-base
,$line-height-base
ആട്രിബ്യൂട്ടുകൾ എന്നിവ ഉപയോഗിക്കുക<body>
.- വഴി ഗ്ലോബൽ ലിങ്ക് വർണ്ണം സജ്ജീകരിക്കുകയും
$link-color
ലിങ്ക് അടിവരകൾ എന്നതിൽ മാത്രം പ്രയോഗിക്കുകയും ചെയ്യുക:hover
. - ( സ്ഥിരസ്ഥിതിയായി) ഒരു
$body-bg
സജ്ജീകരിക്കാൻ ഉപയോഗിക്കുക .background-color
<body>
#fff
ഈ ശൈലികൾ ഉള്ളിൽ കണ്ടെത്താൻ കഴിയും _reboot.scss
, കൂടാതെ ആഗോള വേരിയബിളുകൾ നിർവചിച്ചിരിക്കുന്നത് _variables.scss
. സജ്ജീകരിക്കുന്നത് ഉറപ്പാക്കുക $font-size-base
.rem
തലക്കെട്ടുകൾ
<h1>
വഴിയുള്ള എല്ലാ HTML തലക്കെട്ടുകളും <h6>
ലഭ്യമാണ്.
തലക്കെട്ട് | ഉദാഹരണം |
---|---|
|
h1. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് |
|
h2. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് |
|
h3. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് |
|
h4. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് |
|
h5. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് |
|
h6. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് |
.h1
.h6
ഒരു തലക്കെട്ടിന്റെ ഫോണ്ട് സ്റ്റൈലിംഗുമായി പൊരുത്തപ്പെടാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിലും അനുബന്ധ HTML ഘടകം ഉപയോഗിക്കാൻ കഴിയില്ല എന്നതിന്, ക്ലാസുകൾ വഴിയും ലഭ്യമാണ് .
h1. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്
h2. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്
h3. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്
h4. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്
h5. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്
h6. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്
തലക്കെട്ടുകൾ ഇഷ്ടാനുസൃതമാക്കുന്നു
ബൂട്ട്സ്ട്രാപ്പ് 3-ൽ നിന്ന് ചെറിയ ദ്വിതീയ തലക്കെട്ട് ടെക്സ്റ്റ് പുനഃസൃഷ്ടിക്കാൻ ഉൾപ്പെടുത്തിയിരിക്കുന്ന യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുക.
മങ്ങിയ ദ്വിതീയ വാചകത്തോടുകൂടിയ ഫാൻസി ഡിസ്പ്ലേ തലക്കെട്ട്
പ്രദർശന തലക്കെട്ടുകൾ
നിങ്ങളുടെ പേജ് ഉള്ളടക്കത്തിന്റെ മാംസത്തിൽ മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്ന തരത്തിലാണ് പരമ്പരാഗത തലക്കെട്ട് ഘടകങ്ങൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. വേറിട്ടുനിൽക്കാൻ നിങ്ങൾക്ക് ഒരു തലക്കെട്ട് ആവശ്യമുള്ളപ്പോൾ, ഒരു ഡിസ്പ്ലേ തലക്കെട്ട് ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക - വലുതും അൽപ്പം കൂടുതൽ അഭിപ്രായമുള്ളതുമായ തലക്കെട്ട് ശൈലി. ഈ തലക്കെട്ടുകൾ സ്ഥിരസ്ഥിതിയായി പ്രതികരിക്കുന്നില്ലെന്ന് ഓർമ്മിക്കുക, എന്നാൽ പ്രതികരിക്കുന്ന ഫോണ്ട് വലുപ്പങ്ങൾ പ്രവർത്തനക്ഷമമാക്കുന്നത് സാധ്യമാണ് .
ഡിസ്പ്ലേ 1 |
ഡിസ്പ്ലേ 2 |
ഡിസ്പ്ലേ 3 |
ഡിസ്പ്ലേ 4 |
നയിക്കുക
ചേർത്തുകൊണ്ട് ഒരു ഖണ്ഡിക വേറിട്ടുനിൽക്കുക .lead
.
Vivamus sagittis lacus vel ague laoreet rutrum faucibus dolor auctor. ഡ്യൂയിസ് മോളിസ്, ഇത് നോൺ കമോഡോ ലക്റ്റസ് ആണ്.
ഇൻലൈൻ ടെക്സ്റ്റ് ഘടകങ്ങൾ
സാധാരണ ഇൻലൈൻ HTML5 ഘടകങ്ങൾക്കുള്ള സ്റ്റൈലിംഗ്.
നിങ്ങൾക്ക് അടയാള ടാഗ് ഉപയോഗിക്കാംഹൈലൈറ്റ്വാചകം.
വാചകത്തിന്റെ ഈ വരി ഇല്ലാതാക്കിയ വാചകമായി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.
ഈ ടെക്സ്റ്റ് വരി ഇനി കൃത്യമല്ലാത്തതായി കണക്കാക്കാനാണ് ഉദ്ദേശിക്കുന്നത്.
ഈ വാചകം പ്രമാണത്തിന്റെ ഒരു കൂട്ടിച്ചേർക്കല���യി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.
ഈ വാചകം അടിവരയിട്ടതുപോലെ റെൻഡർ ചെയ്യും
വാചകത്തിന്റെ ഈ വരി ഫൈൻ പ്രിന്റ് ആയി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.
ഈ വരി ബോൾഡ് ടെക്സ്റ്റായി റെൻഡർ ചെയ്തു.
ഈ വരി ചെരിഞ്ഞ വാചകമായി റെൻഡർ ചെയ്തു.
.mark
കൂടാതെ ടാഗുകൾ കൊണ്ടുവരുന്ന അനാവശ്യമായ സെമാന്റിക് പ്രത്യാഘാതങ്ങൾ ഒഴിവാക്കിക്കൊണ്ട് അതേ ശൈലികൾ പ്രയോഗിക്കാൻ .small
ക്ലാസുകളും ലഭ്യമാണ് .<mark>
<small>
മുകളിൽ കാണിച്ചിട്ടില്ലെങ്കിലും, HTML5- <b>
ലും ഉപയോഗിക്കാൻ മടിക്കേണ്ടതില്ല. വോയ്സ്, ടെക്നിക്കൽ പദങ്ങൾ മുതലായവയ്ക്കായി അധിക പ്രാധാന്യം നൽകാതെ വാക്കുകളോ ശൈലികളോ ഹൈലൈറ്റ് ചെയ്യുന്നതാണ് ഇത്.<i>
<b>
<i>
ടെക്സ്റ്റ് യൂട്ടിലിറ്റികൾ
ഞങ്ങളുടെ ടെക്സ്റ്റ് യൂട്ടിലിറ്റികളും കളർ യൂട്ടിലിറ്റികളും ഉപയോഗിച്ച് ടെക്സ്റ്റ് വിന്യാസം, രൂപാന്തരം, ശൈലി, ഭാരം, നിറം എന്നിവ മാറ്റുക .
ചുരുക്കെഴുത്തുകൾ
<abbr>
വിപുലീകരിച്ച പതിപ്പ് ഹോവറിൽ കാണിക്കുന്നതിന് ചുരുക്കങ്ങൾക്കും ചുരുക്കെഴുത്തുകൾക്കുമായി HTML ന്റെ മൂലകത്തിന്റെ ശൈലിയിലുള്ള നടപ്പിലാക്കൽ . ചുരുക്കെഴുത്തുകൾക്ക് ഒരു ഡിഫോൾട്ട് അടിവരയുമുണ്ട്, കൂടാതെ ഹോവറിൽ അധിക സന്ദർഭം നൽകാനും സഹായക സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് ഒരു ഹെൽപ്പ് കഴ്സർ നേടാനും കഴിയും.
.initialism
അൽപ്പം ചെറിയ ഫോണ്ട്-സൈസിനായി ഒരു ചുരുക്കെഴുത്ത് ചേർക്കുക .
atr
HTML
ബ്ലോക്ക്ക്വോട്ടുകൾ
നിങ്ങളുടെ പ്രമാണത്തിനുള്ളിലെ മറ്റൊരു ഉറവിടത്തിൽ നിന്നുള്ള ഉള്ളടക്കത്തിന്റെ ബ്ലോക്കുകൾ ഉദ്ധരിക്കാൻ. ഉദ്ധരണിയായി <blockquote class="blockquote">
ഏതെങ്കിലും HTML പൊതിയുക .
ലോറെം ഇപ്സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.
ഒരു ഉറവിടത്തിന് പേരിടുന്നു
<footer class="blockquote-footer">
ഉറവിടം തിരിച്ചറിയാൻ ഒരു ചേർക്കുക . സ്രോതസ് വർക്കിന്റെ പേര് അതിൽ പൊതിയുക <cite>
.
ലോറെം ഇപ്സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.
വിന്യാസം
നിങ്ങളുടെ ബ്ലോക്ക്ക്വോട്ടിന്റെ വിന്യാസം മാറ്റാൻ ആവശ്യമായ ടെക്സ്റ്റ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക.
ലോറെം ഇപ്സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.
ലോറെം ഇപ്സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.
ലിസ്റ്റുകൾ
ശൈലിയില്ലാത്തത്
ലിസ്റ്റ് ഇനങ്ങളിലെ ഡിഫോൾട്ടും list-style
ഇടത് മാർജിനും നീക്കം ചെയ്യുക (ഉടൻ കുട്ടികൾ മാത്രം). ഇത് ഉടനടിയുള്ള കുട്ടികളുടെ ലിസ്റ്റ് ഇനങ്ങൾക്ക് മാത്രമേ ബാധകമാകൂ , അതായത് ഏതെങ്കിലും നെസ്റ്റഡ് ലിസ്റ്റുകൾക്കും നിങ്ങൾ ക്ലാസ് ചേർക്കേണ്ടതുണ്ട്.
- ലോറെം ഇപ്സം ഡോളോർ സിറ്റ് അമെറ്റ്
- കൺസെക്റ്റൂർ അഡിപിസ്സിംഗ് എലിറ്റ്
- പൂർണ്ണസംഖ്യ മോളസ്റ്റി ലോറം അറ്റ് മാസ്
- പ്രെറ്റിയം നിസ്ൽ അലിക്വറ്റിലെ സൗകര്യം
- Nulla volutpat aliquam velit
- ഫാസെല്ലസ് ഐക്യുലിസ് നെക്വെ
- പുരുസ് സോഡൽസ് അൾട്രിസികൾ
- വെസ്റ്റിബുലം ലൗറെറ്റ് പോർട്ടിറ്റർ സെം
- AC tristique libero volutpat at
- ഫൗസിബസ് പോർട്ട ലാക്കസ് ഫ്രിംഗില്ല വേൽ
- എനിയൻ ഇരിക്കുന്നു
- എഗെറ്റ് പോർട്ടിറ്റർ ലോറം
ഇൻ ലൈൻ
ഒരു ലിസ്റ്റിന്റെ ബുള്ളറ്റുകൾ നീക്കം ചെയ്ത് margin
രണ്ട് ക്ലാസുകളുടെ സംയോജനത്തോടെ കുറച്ച് ലൈറ്റ് പ്രയോഗിക്കുക, .list-inline
കൂടാതെ .list-inline-item
.
- ലോറെം ഇപ്സം
- ഫാസെല്ലസ് ഐക്യുലിസ്
- നുള്ള വൊലുത്പത്
വിവരണ ലിസ്റ്റ് വിന്യാസം
ഞങ്ങളുടെ ഗ്രിഡ് സിസ്റ്റത്തിന്റെ മുൻകൂട്ടി നിശ്ചയിച്ച ക്ലാസുകൾ (അല്ലെങ്കിൽ സെമാന്റിക് മിക്സിനുകൾ) ഉപയോഗിച്ച് നിബന്ധനകളും വിവരണങ്ങളും തിരശ്ചീനമായി വിന്യസിക്കുക. .text-truncate
ദൈർഘ്യമേറിയ നിബന്ധനകൾക്കായി, ഒരു എലിപ്സിസ് ഉപയോഗിച്ച് ടെക്സ്റ്റ് ചുരുക്കാൻ നിങ്ങൾക്ക് ഓപ്ഷണലായി ഒരു ക്ലാസ് ചേർക്കാം .
- വിവരണ ലിസ്റ്റുകൾ
- നിബന്ധനകൾ നിർവചിക്കുന്നതിന് ഒരു വിവരണ പട്ടിക അനുയോജ്യമാണ്.
- യൂയിസ്മോഡ്
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്.
- Malesuada പോർട്ട
- Etiam porta sem malesuada Magna mollis euismod.
- വെട്ടിച്ചുരുക്കിയ പദം വെട്ടിച്ചുരുക്കിയിരിക്കുന്നു
- ഫ്യൂസ് ഡാപിബസ്, ടെല്ലസ് എസി കർസസ് കമ്മോഡോ, ടോർട്ടർ മൗറിസ് കോൺഡിമെന്റം നിബ്, യുട്ട് ഫെർമെന്റം മാസ് ജസ്തോ സിറ്റ് അമെറ്റ് റിസസ്.
- നെസ്റ്റിംഗ്
-
- നെസ്റ്റഡ് ഡെഫനിഷൻ ലിസ്റ്റ്
- എനിയൻ പോസുവേർ, ടോർട്ടോർ സെഡ് കർസസ് ഫ്യൂജിയാറ്റ്, നോൺക് ഓഗ് ബ്ലാൻഡിറ്റ് നൺക്.
പ്രതികരിക്കുന്ന ഫോണ്ട് വലുപ്പങ്ങൾ
ബൂട്ട്സ്ട്രാപ്പ് v4.3, റെസ്പോൺസീവ് ഫോണ്ട് സൈസുകൾ പ്രവർത്തനക്ഷമമാക്കുന്നതിനുള്ള ഓപ്ഷനോടുകൂടി ഷിപ്പ് ചെയ്യുന്നു, ഇത് ഉപകരണത്തിലും വ്യൂപോർട്ട് വലുപ്പത്തിലും ടെക്സ്റ്റ് കൂടുതൽ സ്വാഭാവികമായി സ്കെയിൽ ചെയ്യാൻ അനുവദിക്കുന്നു. Sass വേരിയബിൾ മാറ്റി ബൂട്ട്സ്ട്രാപ്പ് റീകംപൈൽ ചെയ്തുകൊണ്ട് RFS പ്രവർത്തനക്ഷമമാക്കാം .$enable-responsive-font-sizes
true
RFS പിന്തുണയ്ക്കുന്നതിന് , ഞങ്ങളുടെ സാധാരണ font-size
പ്രോപ്പർട്ടികൾ മാറ്റിസ്ഥാപിക്കാൻ ഞങ്ങൾ ഒരു സാസ് മിക്സിൻ ഉപയോഗിക്കുന്നു. റെസ്പോൺസീവ് സ്കെയിലിംഗ് സ്വഭാവം പ്രവർത്തനക്ഷമമാക്കുന്നതിന് റെസ്പോൺസീവ് ഫോണ്ട് സൈസുകൾ calc()
മിക്സ്, വ്യൂപോർട്ട് യൂണിറ്റുകൾ എന്നിവ ഉപയോഗിച്ച് ഫംഗ്ഷനുകളായി സമാഹരിക്കും. RFS- നെ കുറിച്ചും അതിന്റെ കോൺഫിഗറേഷനെ കുറിച്ചും കൂടുതൽ അതിന്റെ rem
GitHub റിപ്പോസിറ്ററിയിൽ കാണാം .