മികച്ചതും വേഗതയേറിയതും ശക്തവുമായ വെബ് വികസനത്തിലേക്കുള്ള ഞങ്ങളുടെ സമീപനം ഉൾപ്പെടെ, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ അടിസ്ഥാന സൗകര്യങ്ങളുടെ പ്രധാന ഭാഗങ്ങളെ കുറിച്ചുള്ള ലോഡൗൺ നേടുക.

HTML5 ഡോക്‌ടൈപ്പ്

ബൂട്ട്‌സ്‌ട്രാപ്പ് ചില HTML ഘടകങ്ങളും HTML5 ഡോക്‌ടൈപ്പ് ഉപയോഗിക്കേണ്ട CSS പ്രോപ്പർട്ടികളും ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ എല്ലാ പ്രോജക്റ്റുകളുടെയും തുടക്കത്തിൽ ഇത് ഉൾപ്പെടുത്തുക.

<!doctype html>
<html lang="en">
  ...
</html>

ആദ്യം മൊബൈൽ

ബൂട്ട്സ്ട്രാപ്പ് 2 ഉപയോഗിച്ച്, ചട്ടക്കൂടിന്റെ പ്രധാന വശങ്ങൾക്കായി ഞങ്ങൾ ഓപ്ഷണൽ മൊബൈൽ ഫ്രണ്ട്ലി ശൈലികൾ ചേർത്തു. ബൂട്ട്‌സ്‌ട്രാപ്പ് 3 ഉപയോഗിച്ച്, ഞങ്ങൾ പ്രോജക്റ്റ് ആദ്യം മുതൽ മൊബൈൽ സൗഹൃദമായി മാറ്റിയെഴുതി. ഓപ്ഷണൽ മൊബൈൽ ശൈലികൾ ചേർക്കുന്നതിനുപകരം, അവ കാമ്പിലേക്ക് തന്നെ ചുട്ടെടുക്കുന്നു. വാസ്തവത്തിൽ, ബൂട്ട്സ്ട്രാപ്പ് ആദ്യം മൊബൈൽ ആണ് . മൊബൈൽ ഫസ്റ്റ് ശൈലികൾ പ്രത്യേക ഫയലുകൾക്ക് പകരം മുഴുവൻ ലൈബ്രറിയിലും കാണാം.

ശരിയായ റെൻഡറിംഗും ടച്ച് സൂമിംഗും ഉറപ്പാക്കാൻ, നിങ്ങളുടെ എന്നതിലേക്ക് വ്യൂപോർട്ട് മെറ്റാ ടാഗ് ചേർക്കുക<head> .

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noവ്യൂപോർട്ട് മെറ്റാ ടാഗിൽ ചേർത്തുകൊണ്ട് നിങ്ങൾക്ക് മൊബൈൽ ഉപകരണങ്ങളിൽ സൂം ചെയ്യാനുള്ള കഴിവുകൾ പ്രവർത്തനരഹിതമാക്കാം . ഇത് സൂം ചെയ്യുന്നത് അപ്രാപ്‌തമാക്കുന്നു, അതായത് ഉപയോക്താക്കൾക്ക് സ്‌ക്രോൾ ചെയ്യാൻ മാത്രമേ കഴിയൂ, കൂടാതെ നിങ്ങളുടെ സൈറ്റിന് ഒരു നേറ്റീവ് ആപ്ലിക്കേഷൻ പോലെ തോന്നും. മൊത്തത്തിൽ, എല്ലാ സൈറ്റുകളിലും ഞങ്ങൾ ഇത് ശുപാർശ ചെയ്യുന്നില്ല, അതിനാൽ ജാഗ്രത പാലിക്കുക!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

ടൈപ്പോഗ്രാഫിയും ലിങ്കുകളും

ബൂട്ട്സ്ട്രാപ്പ് അടിസ്ഥാന ആഗോള ഡിസ്പ്ലേ, ടൈപ്പോഗ്രാഫി, ലിങ്ക് ശൈലികൾ എന്നിവ സജ്ജമാക്കുന്നു. പ്രത്യേകമായി, ഞങ്ങൾ:

background-color: #fff;ന് സജ്ജമാക്കുകbody
@font-family-baseഞങ്ങളുടെ ടൈപ്പോഗ്രാഫിക് അടിസ്ഥാനമായി , @font-size-base, @line-height-baseആട്രിബ്യൂട്ടുകൾ എന്നിവ ഉപയോഗിക്കുക
വഴി ആഗോള ലിങ്ക് വർണ്ണം സജ്ജീകരിക്കുക, @link-colorലിങ്ക് അടിവരയിടുക എന്നതിൽ മാത്രം പ്രയോഗിക്കുക:hover

ഈ ശൈലികൾ ഉള്ളിൽ കാണാം scaffolding.less.

Normalize.css

മെച്ചപ്പെടുത്തിയ ക്രോസ്-ബ്രൗസർ റെൻഡറിങ്ങിനായി, ഞങ്ങൾ Normalize.css ഉപയോഗിക്കുന്നു , നിക്കോളാസ് ഗല്ലഗറും ജോനാഥൻ നീലും ചേർന്നുള്ള ഒരു പ്രോജക്റ്റ് .

കണ്ടെയ്നറുകൾ

സൈറ്റ് ഉള്ളടക്കങ്ങൾ പൊതിയുന്നതിനും ഞങ്ങളുടെ ഗ്രിഡ് സിസ്റ്റം സ്ഥാപിക്കുന്നതിനും ബൂട്ട്‌സ്‌ട്രാപ്പിന് അടങ്ങിയിരിക്കുന്ന ഒരു ഘടകം ആവശ്യമാണ്. നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ ഉപയോഗിക്കുന്നതിന് രണ്ട് കണ്ടെയ്‌നറുകളിൽ ഒന്ന് നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാം. ശ്രദ്ധിക്കുക padding, അതിലധികവും കാരണം, ഒരു കണ്ടെയ്നറും നെസ്റ്റബിൾ അല്ല.

ഒരു റെസ്‌പോൺസീവ് ഫിക്സഡ് വീതി കണ്ടെയ്‌നറിനായി ഉപയോഗിക്കുക .container.

<div class="container">
  ...
</div>

.container-fluidനിങ്ങളുടെ വ്യൂപോർട്ടിന്റെ മുഴുവൻ വീതിയിലും വ്യാപിച്ചുകിടക്കുന്ന പൂർണ്ണ വീതിയുള്ള കണ്ടെയ്‌നറിനായി ഉപയോഗിക്കുക .

<div class="container-fluid">
  ...
</div>

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഒരു റെസ്‌പോൺസീവ്, മൊബൈൽ ഫസ്റ്റ് ഫ്ലൂയിഡ് ഗ്രിഡ് സിസ്റ്റം ഉൾപ്പെടുന്നു, അത് ഉപകരണം അല്ലെങ്കിൽ വ്യൂപോർട്ട് വലുപ്പം വർദ്ധിക്കുന്നതിനനുസരിച്ച് 12 നിരകൾ വരെ ഉചിതമായി സ്കെയിൽ ചെയ്യുന്നു. എളുപ്പമുള്ള ലേഔട്ട് ഓപ്‌ഷനുകൾക്കായുള്ള മുൻകൂട്ടി നിശ്ചയിച്ച ക്ലാസുകളും കൂടുതൽ സെമാന്റിക് ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ശക്തമായ മിക്സിനുകളും ഇതിൽ ഉൾപ്പെടുന്നു .

ആമുഖം

നിങ്ങളുടെ ഉള്ളടക്കം ഉൾക്കൊള്ളുന്ന വരികളുടെയും നിരകളുടെയും ഒരു പരമ്പരയിലൂടെ പേജ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിന് ഗ്രിഡ് സിസ്റ്റങ്ങൾ ഉപയോഗിക്കുന്നു. ബൂട്ട്‌സ്‌ട്രാപ്പ് ഗ്രിഡ് സിസ്റ്റം എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ഇതാ:

.containerശരിയായ വിന്യാസത്തിനും പാഡിംഗിനുമായി വരികൾ (നിശ്ചിത വീതി) അല്ലെങ്കിൽ .container-fluid(മുഴുവൻ വീതി) ഉള്ളിൽ സ്ഥാപിക്കണം .
നിരകളുടെ തിരശ്ചീന ഗ്രൂപ്പുകൾ സൃഷ്ടിക്കാൻ വരികൾ ഉപയോഗിക്കുക.
നിരകൾക്കുള്ളിൽ ഉള്ളടക്കം സ്ഥാപിക്കണം, മാത്രമല്ല നിരകൾ മാത്രം വരികളുടെ ഉടനടി കുട്ടികൾ ആയിരിക്കാം.
.rowഗ്രിഡ് ലേഔട്ടുകൾ വേഗത്തിൽ നിർമ്മിക്കുന്നതിനായി മുൻകൂട്ടി നിശ്ചയിച്ചിട്ടുള്ള ഗ്രിഡ് ക്ലാസുകൾ .col-xs-4ലഭ്യമാണ്. കൂടുതൽ സെമാന്റിക് ലേഔട്ടുകൾക്ക് കുറഞ്ഞ മിക്സിനുകളും ഉപയോഗിക്കാം.
കോളങ്ങൾ വഴി ഗട്ടറുകൾ (കോളത്തിന്റെ ഉള്ളടക്കം തമ്മിലുള്ള വിടവുകൾ) സൃഷ്ടിക്കുന്നു padding. ആ പാഡിംഗ് ആദ്യത്തേയും അവസാനത്തേയും നിരകൾക്കുള്ള വരികളിൽ നെഗറ്റീവ് മാർജിൻ വഴി ഓഫ്സെറ്റ് ചെയ്യുന്നു .row.
താഴെ കൊടുത്തിരിക്കുന്ന ഉദാഹരണങ്ങൾ പുറത്തായത് എന്തുകൊണ്ടെന്നതാണ് നെഗറ്റീവ് മാർജിൻ. ഗ്രിഡ് കോളങ്ങൾക്കുള്ളിലെ ഉള്ളടക്കം ഗ്രിഡ് ഇതര ഉള്ളടക്കത്തിനൊപ്പം അണിനിരത്തുന്നതിനാണ് ഇത്.
നിങ്ങൾ സ്പാൻ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന പന്ത്രണ്ട് നിരകളുടെ എണ്ണം വ്യക്തമാക്കിയാണ് ഗ്രിഡ് കോളങ്ങൾ സൃഷ്ടിക്കുന്നത്. ഉദാഹരണത്തിന്, മൂന്ന് തുല്യ നിരകൾ മൂന്ന് ഉപയോഗിക്കും .col-xs-4.
ഒരു വരിയിൽ 12-ലധികം നിരകൾ സ്ഥാപിച്ചിട്ടുണ്ടെങ്കിൽ, അധിക നിരകളുടെ ഓരോ ഗ്രൂപ്പും ഒരു യൂണിറ്റായി, ഒരു പുതിയ വരിയിൽ പൊതിയുന്നു.
ബ്രേക്ക്‌പോയിന്റ് വലുപ്പത്തേക്കാൾ വലുതോ തുല്യമോ ആയ സ്‌ക്രീൻ വീതിയുള്ള ഉപകരണങ്ങൾക്ക് ഗ്രിഡ് ക്ലാസുകൾ ബാധകമാണ്, കൂടാതെ ചെറിയ ഉപകരണങ്ങളെ ലക്ഷ്യം വച്ചുള്ള ഗ്രിഡ് ക്ലാസുകൾ അസാധുവാക്കുക. അതിനാൽ, ഉദാ, .col-md-*ഒരു എലമെന്റിലേക്ക് ഏതെങ്കിലും ക്ലാസ് പ്രയോഗിക്കുന്നത് മീഡിയം ഉപകരണങ്ങളിൽ മാത്രമല്ല, .col-lg-*ക്ലാസ് ഇല്ലെങ്കിൽ വലിയ ഉപകരണങ്ങളിലും അതിന്റെ സ്റ്റൈലിംഗിനെ ബാധിക്കും.

നിങ്ങളുടെ കോഡിൽ ഈ തത്ത്വങ്ങൾ പ്രയോഗിക്കുന്നതിനുള്ള ഉദാഹരണങ്ങൾ നോക്കുക.

മാധ്യമങ്ങളുടെ ചോദ്യങ്ങൾ

ഞങ്ങളുടെ ഗ്രിഡ് സിസ്റ്റത്തിൽ കീ ബ്രേക്ക്‌പോയിന്റുകൾ സൃഷ്‌ടിക്കാൻ ഞങ്ങളുടെ ലെസ് ഫയലുകളിൽ ഇനിപ്പറയുന്ന മീഡിയ അന്വേഷണങ്ങൾ ഞങ്ങൾ ഉപയോഗിക്കുന്നു.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

max-widthഇടുങ്ങിയ ഒരു കൂട്ടം ഉപകരണങ്ങളിലേക്ക് CSS പരിമിതപ്പെടുത്തുന്നതിന് ഞങ്ങൾ ഇടയ്ക്കിടെ ഈ മീഡിയ അന്വേഷണങ്ങൾ വിപുലീകരിക്കുന്നു .

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ഗ്രിഡ് ഓപ്ഷനുകൾ

ഹാൻഡി ടേബിൾ ഉള്ള ഒന്നിലധികം ഉപകരണങ്ങളിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഗ്രിഡ് സിസ്റ്റത്തിന്റെ വശങ്ങൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് കാണുക.

	അധിക ചെറിയ ഉപകരണങ്ങൾ ഫോണുകൾ (<768px)	ചെറിയ ഉപകരണ ടാബ്‌ലെറ്റുകൾ (≥768px)	ഇടത്തരം ഉപകരണങ്ങൾ ഡെസ്ക്ടോപ്പുകൾ (≥992px)	വലിയ ഉപകരണങ്ങളുടെ ഡെസ്‌ക്‌ടോപ്പുകൾ (≥1200px)
ഗ്രിഡ് പെരുമാറ്റം	എല്ലാ സമയത്തും തിരശ്ചീനമായി	ബ്രേക്ക്‌പോയിന്റുകൾക്ക് മുകളിലുള്ള തിരശ്ചീനമായി ആരംഭിക്കുന്നതിന് ചുരുക്കി
കണ്ടെയ്നർ വീതി	ഒന്നുമില്ല (ഓട്ടോ)	750px	970px	1170px
ക്ലാസ് പ്രിഫിക്സ്	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# നിരകൾ	12
നിരയുടെ വീതി	ഓട്ടോ	~62px	~81px	~97px
ഗട്ടർ വീതി	30px (ഒരു നിരയുടെ ഓരോ വശത്തും 15px)
നെസ്റ്റബിൾ	അതെ
ഓഫ്സെറ്റുകൾ	അതെ
നിര ക്രമപ്പെടുത്തൽ	അതെ

ഉദാഹരണം: സഞ്ചിത-തിരശ്ചീനമായി

ഒരൊറ്റ സെറ്റ് .col-md-*ഗ്രിഡ് ക്ലാസുകൾ ഉപയോഗിച്ച്, ഡെസ്‌ക്‌ടോപ്പ് (ഇടത്തരം) ഉപകരണങ്ങളിൽ തിരശ്ചീനമാകുന്നതിന് മുമ്പ് മൊബൈൽ ഉപകരണങ്ങളിലും ടാബ്‌ലെറ്റ് ഉപകരണങ്ങളിലും (അധികം ചെറുതും ചെറുതുമായ ശ്രേണി) അടുക്കിവെച്ച് ആരംഭിക്കുന്ന ഒരു അടിസ്ഥാന ഗ്രിഡ് സിസ്റ്റം നിങ്ങൾക്ക് സൃഷ്‌ടിക്കാനാകും. ഏതെങ്കിലും ഗ്രിഡ് നിരകൾ സ്ഥാപിക്കുക .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

ഉദാഹരണം: ദ്രാവക കണ്ടെയ്നർ

.containerനിങ്ങളുടെ പുറംഭാഗം എന്നതിലേക്ക് മാറ്റിക്കൊണ്ട് ഏതെങ്കിലും നിശ്ചിത വീതിയുള്ള ഗ്രിഡ് ലേഔട്ടിനെ പൂർണ്ണ വീതിയുള്ള ലേഔട്ടാക്കി മാറ്റുക .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

ഉദാഹരണം: മൊബൈലും ഡെസ്ക്ടോപ്പും

നിങ്ങളുടെ നിരകൾ ചെറിയ ഉപകരണങ്ങളിൽ അടുക്കാൻ ആഗ്രഹിക്കുന്നില്ലേ? .col-xs-* .col-md-*നിങ്ങളുടെ നിരകളിലേക്ക് ചേർത്തുകൊണ്ട് അധിക ചെറുതും ഇടത്തരവുമായ ഉപകരണ ഗ്രിഡ് ക്ലാസുകൾ ഉപയോഗിക്കുക . ഇതെല്ലാം എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെക്കുറിച്ചുള്ള മികച്ച ആശയത്തിന് ചുവടെയുള്ള ഉദാഹരണം കാണുക.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

ഉദാഹരണം: മൊബൈൽ, ടാബ്‌ലെറ്റ്, ഡെസ്ക്ടോപ്പ്

.col-sm-*ടാബ്‌ലെറ്റ് ക്ലാസുകൾ ഉപയോഗിച്ച് കൂടുതൽ ചലനാത്മകവും ശക്തവുമായ ലേഔട്ടുകൾ സൃഷ്‌ടിച്ച് മുമ്പത്തെ ഉദാഹരണം നിർമ്മിക്കുക .

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

ഉദാഹരണം: കോളം പൊതിയൽ

ഒരു വരിയിൽ 12-ലധികം നിരകൾ സ്ഥാപിച്ചിട്ടുണ്ടെങ്കിൽ, അധിക നിരകളുടെ ഓരോ ഗ്രൂപ്പും ഒരു യൂണിറ്റായി, ഒരു പുതിയ വരിയിൽ പൊതിയുന്നു.

.col-xs-9

.col-xs-4
9 + 4 = 13 > 12 മുതൽ, ഈ 4-കോളം വീതിയുള്ള ഡിവി ഒരു പുതിയ ലൈനിൽ ഒരു തുടർച്ചയായ യൂണിറ്റായി പൊതിഞ്ഞിരിക്കുന്നു.

.col-xs-6
പുതിയ വരിയിൽ തുടർന്നുള്ള നിരകൾ തുടരുന്നു.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

പ്രതികരിക്കുന്ന കോളം റീസെറ്റുകൾ

ലഭ്യമായ നാല് നിര ഗ്രിഡുകൾ ഉപയോഗിച്ച്, ചില ബ്രേക്ക്‌പോയിന്റുകളിൽ, ഒന്ന് മറ്റൊന്നിനേക്കാൾ ഉയരമുള്ളതിനാൽ നിങ്ങളുടെ കോളങ്ങൾ ശരിയായി മായ്‌ക്കാത്ത പ്രശ്‌നങ്ങളിൽ നിങ്ങൾ നേരിടേണ്ടിവരും. അത് പരിഹരിക്കാൻ, a .clearfixയുടെയും ഞങ്ങളുടെ പ്രതികരിക്കുന്ന യൂട്ടിലിറ്റി ക്ലാസുകളുടെയും സംയോജനം ഉപയോഗിക്കുക .

.col-xs-6 .col-sm-3
നിങ്ങളുടെ വ്യൂപോർട്ട് വലുപ്പം മാറ്റുക അല്ലെങ്കിൽ ഒരു ഉദാഹരണത്തിനായി നിങ്ങളുടെ ഫോണിൽ അത് പരിശോധിക്കുക.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

റെസ്‌പോൺസീവ് ബ്രേക്ക്‌പോയിന്റുകളിൽ കോളം ക്ലിയറിംഗ് കൂടാതെ, നിങ്ങൾ ഓഫ്‌സെറ്റുകൾ, പുഷ്‌കൾ അല്ലെങ്കിൽ പുൾസ് എന്നിവ പുനഃസജ്ജമാക്കേണ്ടി വന്നേക്കാം . ഗ്രിഡ് ഉദാഹരണത്തിൽ ഇത് പ്രവർത്തനക്ഷമമായി കാണുക .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

ഗട്ടറുകൾ നീക്കം ചെയ്യുക

ഒരു വരിയിൽ നിന്ന് ഗട്ടറുകൾ നീക്കം ചെയ്യുക, അത് .row-no-guttersക്ലാസിനൊപ്പം നിരകളാണ്.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

നിരകൾ ഓഫ്‌സെറ്റ് ചെയ്യുന്നു

.col-md-offset-*ക്ലാസുകൾ ഉപയോഗിച്ച് നിരകൾ വലത്തേക്ക് നീക്കുക . ഈ ക്ലാസുകൾ ഒരു നിരയുടെ ഇടത് മാർജിൻ *നിരകൾ കൊണ്ട് വർദ്ധിപ്പിക്കുന്നു. ഉദാഹരണത്തിന്, നാല് നിരകളിലൂടെ .col-md-offset-4നീങ്ങുന്നു .col-md-4.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0ക്ലാസുകൾക്കൊപ്പം താഴ്ന്ന ഗ്രിഡ് ടയറുകളിൽ നിന്നുള്ള ഓഫ്‌സെറ്റുകൾ നിങ്ങൾക്ക് അസാധുവാക്കാനും കഴിയും .

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

നെസ്റ്റിംഗ് നിരകൾ

ഡിഫോൾട്ട് ഗ്രിഡിനൊപ്പം നിങ്ങളുടെ ഉള്ളടക്കം നെസ്റ്റ് ചെയ്യാൻ, നിലവിലുള്ള കോളത്തിനുള്ളിൽ പുതിയതും ഒരു .rowകൂട്ടം നിരകളും ചേർക്കുക. നെസ്റ്റഡ് വരികൾ 12 അല്ലെങ്കിൽ അതിൽ താഴെ വരെ ചേർക്കുന്ന ഒരു കൂട്ടം നിരകൾ ഉൾപ്പെടുത്തണം (ലഭ്യമായ എല്ലാ 12 കോളങ്ങളും നിങ്ങൾ ഉപയോഗിക്കേണ്ട ആവശ്യമില്ല)..col-sm-*.col-sm-*

ലെവൽ 1: .col-sm-9

ലെവൽ 2: .col-xs-8 .col-sm-6

ലെവൽ 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

നിര ക്രമപ്പെടുത്തൽ

ഞങ്ങളുടെ ബിൽറ്റ്-ഇൻ ഗ്രിഡ് നിരകളുടെ ക്രമവും പരിഷ്‌ക്കരിക്കുന്ന ക്ലാസുകളും ഉപയോഗിച്ച് എളുപ്പത്തിൽ .col-md-push-*മാറ്റുക .col-md-pull-*.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

മിക്സിനുകളും വേരിയബിളുകളും കുറവാണ്

വേഗത്തിലുള്ള ലേഔട്ടുകൾക്കായുള്ള പ്രീ- ബിൽറ്റ് ഗ്രിഡ് ക്ലാസുകൾക്ക് പുറമേ , ബൂട്ട്‌സ്‌ട്രാപ്പിൽ നിങ്ങളുടെ സ്വന്തം ലളിതവും സെമാന്റിക് ലേഔട്ടുകൾ വേഗത്തിൽ സൃഷ്ടിക്കുന്നതിനുള്ള കുറഞ്ഞ വേരിയബിളുകളും മിക്സിനുകളും ഉൾപ്പെടുന്നു.

വേരിയബിളുകൾ

നിരകളുടെ എണ്ണം, ഗട്ടറിന്റെ വീതി, ഫ്ലോട്ടിംഗ് കോളങ്ങൾ ആരംഭിക്കുന്ന മീഡിയ അന്വേഷണ പോയിന്റ് എന്നിവ വേരിയബിളുകൾ നിർണ്ണയിക്കുന്നു. മുകളിൽ ഡോക്യുമെന്റ് ചെയ്‌തിരിക്കുന്ന മുൻ‌നിർവ്വചിച്ച ഗ്രിഡ് ക്ലാസുകൾ സൃഷ്‌ടിക്കുന്നതിനും ചുവടെ ലിസ്‌റ്റ് ചെയ്‌തിരിക്കുന്ന ഇഷ്‌ടാനുസൃത മിക്സിനുകൾക്കും ഞങ്ങൾ ഇവ ഉപയോഗിക്കുന്നു.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

മിക്സിൻസ്

വ്യക്തിഗത ഗ്രിഡ് നിരകൾക്കായി സെമാന്റിക് CSS സൃഷ്ടിക്കുന്നതിന് ഗ്രിഡ് വേരിയബിളുകളുമായി സംയോജിച്ച് മിക്സിനുകൾ ഉപയോഗിക്കുന്നു.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

ഉദാഹരണ ഉപയോഗം

നിങ്ങൾക്ക് വേരിയബിളുകൾ നിങ്ങളുടെ സ്വന്തം ഇഷ്‌ടാനുസൃത മൂല്യങ്ങളിലേക്ക് പരിഷ്‌ക്കരിക്കാം അല്ലെങ്കിൽ അവയുടെ ഡിഫോൾട്ട് മൂല്യങ്ങൾക്കൊപ്പം മിക്സിനുകൾ ഉപയോഗിക്കുക. ഒരു വിടവുള്ള രണ്ട് കോളം ലേഔട്ട് സൃഷ്‌ടിക്കാൻ ഡിഫോൾട്ട് ക്രമീകരണങ്ങൾ ഉപയോഗിക്കുന്നതിന്റെ ഒരു ഉദാഹരണം ഇതാ.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

തലക്കെട്ടുകൾ

<h1>വഴിയുള്ള എല്ലാ HTML തലക്കെട്ടുകളും <h6>ലഭ്യമാണ്. ഒരു തലക്കെട്ടിന്റെ ഫോണ്ട് ശൈലിയുമായി പൊരുത്തപ്പെടാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിലും നിങ്ങളുടെ ടെക്‌സ്‌റ്റ് ഇൻലൈനിൽ പ്രദർശിപ്പിക്കണമെന്ന് ആഗ്രഹിക്കുമ്പോൾ ക്ലാസുകൾ വഴിയും ലഭ്യമാണ് .h1..h6

h1. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്	സെമിബോൾഡ് 36px
h2. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്	സെമിബോൾഡ് 30px
h3. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്	സെമിബോൾഡ് 24px
h4. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്	സെമിബോൾഡ് 18px
h5. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്	സെമിബോൾഡ് 14px
h6. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്	സെമിബോൾഡ് 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>ഒരു പൊതു ടാഗ് അല്ലെങ്കിൽ .smallക്ലാസ് ഉപയോഗിച്ച് ഏത് തലക്കെട്ടിലും ഭാരം കുറഞ്ഞതും ദ്വിതീയവുമായ ടെക്‌സ്‌റ്റ് സൃഷ്‌ടിക്കുക .

h1. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

h2. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

h3. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

h4. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

h5. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

h6. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

ബോഡി കോപ്പി

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഗ്ലോബൽ ഡിഫോൾട്ട് 14pxfont-size ആണ് , 1.428 ആണ് . ഇത് എല്ലാ ഖണ്ഡികകൾക്കും ബാധകമാണ്. കൂടാതെ, (ഖണ്ഡികകൾക്ക്) അവയുടെ കമ്പ്യൂട്ട് ചെയ്ത ലൈൻ-ഹൈറ്റിന്റെ പകുതിയുടെ (സ്ഥിരസ്ഥിതിയായി 10px) താഴെയുള്ള മാർജിൻ ലഭിക്കും.line-height<body><p>

Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്. Nullam id dolor id nibh ultricies vehicula.

കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്. ഡോനെക് ഉള്ളംകോർപ്പർ നുള്ള നോൺ മെറ്റസ് ആക്ടർ ഫ്രിംഗില്ല. ഡ്യൂയിസ് മോളിസ്, ഈസ്റ്റ് നോൺ കമോഡോ ലക്റ്റസ്, നിസി എററ്റ് പോർട്ടിറ്റർ ലിഗുല, എഗെറ്റ് ലാസിനിയ ഒഡിയോ സെം നെക് എലിറ്റ്. ഡോനെക് ഉള്ളംകോർപ്പർ നുള്ള നോൺ മെറ്റസ് ആക്ടർ ഫ്രിംഗില്ല.

Maecenas sed diam eget risus varius blandit sit amet non magna. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. ഡ്യൂയിസ് മോളിസ്, ഈസ്റ്റ് നോൺ കമോഡോ ലക്റ്റസ്, നിസി എററ്റ് പോർട്ടിറ്റർ ലിഗുല, എഗെറ്റ് ലാസിനിയ ഒഡിയോ സെം നെക് എലിറ്റ്.

<p>...</p>

ലീഡ് ബോഡി കോപ്പി

ചേർത്തുകൊണ്ട് ഒരു ഖണ്ഡിക വേറിട്ടുനിൽക്കുക .lead.

Vivamus sagittis lacus vel ague laoreet rutrum faucibus dolor auctor. ഡ്യൂയിസ് മോളിസ്, ഇത് നോൺ കമോഡോ ലക്റ്റസ് ആണ്.

<p class="lead">...</p>

കുറച്ച് കൊണ്ട് നിർമ്മിച്ചത്

ടൈപ്പോഗ്രാഫിക് സ്കെയിൽ വേരിയബിളുകളിലെ രണ്ട് ലെസ് വേരിയബിളുകളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്.less : @font-size-baseഒപ്പം @line-height-base. ആദ്യത്തേത് മുഴുവൻ ഉപയോഗിച്ചിരിക്കുന്ന അടിസ്ഥാന ഫോണ്ട്-വലിപ്പവും രണ്ടാമത്തേത് അടിസ്ഥാന ലൈൻ-ഉയരവുമാണ്. ഞങ്ങളുടെ എല്ലാ തരത്തിലുമുള്ള മാർജിനുകളും പാഡിംഗുകളും ലൈൻ-ഹൈറ്റുകളും മറ്റും സൃഷ്ടിക്കാൻ ഞങ്ങൾ ആ വേരിയബിളുകളും ചില ലളിതമായ ഗണിതവും ഉപയോഗിക്കുന്നു. അവ ഇഷ്‌ടാനുസൃതമാക്കുകയും ബൂട്ട്‌സ്‌ട്രാപ്പ് പൊരുത്തപ്പെടുത്തുകയും ചെയ്യുക.

ഇൻലൈൻ ടെക്സ്റ്റ് ഘടകങ്ങൾ

അടയാളപ്പെടുത്തിയ വാചകം

മറ്റൊരു സന്ദർഭത്തിൽ ടെക്‌സ്‌റ്റിന്റെ പ്രസക്തി കാരണം അത് ഹൈലൈറ്റ് ചെയ്യുന്നതിന്, <mark>ടാഗ് ഉപയോഗിക്കുക.

നിങ്ങൾക്ക് അടയാള ടാഗ് ഉപയോഗിക്കാംഹൈലൈറ്റ്വാചകം.

You can use the mark tag to <mark>highlight</mark> text.

ഇല്ലാതാക്കിയ വാചകം

ഇല്ലാതാക്കിയ ടെക്സ്റ്റിന്റെ ബ്ലോക്കുകൾ സൂചിപ്പിക്കാൻ <del>ടാഗ് ഉപയോഗിക്കുക.

വാചകത്തിന്റെ ഈ വരി ഇല്ലാതാക്കിയ വാചകമായി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

<del>This line of text is meant to be treated as deleted text.</del>

ടെക്‌സ്‌റ്റിലൂടെ സ്‌ട്രൈക്ക്‌ത്രൂ

ഇനി പ്രസക്തമല്ലാത്ത ടെക്‌സ്‌റ്റിന്റെ ബ്ലോക്കുകൾ സൂചിപ്പിക്കാൻ <s>ടാഗ് ഉപയോഗിക്കുക.

ഈ ടെക്‌സ്‌റ്റ് വരി ഇനി കൃത്യമല്ലാത്തതായി കണക്കാക്കാനാണ് ഉദ്ദേശിക്കുന്നത്.

<s>This line of text is meant to be treated as no longer accurate.</s>

വാചകം ചേർത്തു

ഡോക്യുമെന്റിൽ കൂട്ടിച്ചേർക്കലുകൾ സൂചിപ്പിക്കാൻ <ins>ടാഗ് ഉപയോഗിക്കുക.

ഈ വാചകം പ്രമാണത്തിന്റെ ഒരു കൂട്ടിച്ചേർക്കലായി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

അടിവരയിട്ട വാചകം

വാചകത്തിന് അടിവരയിടാൻ <u>ടാഗ് ഉപയോഗിക്കുക.

ഈ വാചകം അടിവരയിട്ടതുപോലെ റെൻഡർ ചെയ്യും

<u>This line of text will render as underlined</u>

ഭാരം കുറഞ്ഞ ശൈലികളുള്ള HTML-ന്റെ ഡിഫോൾട്ട് ഊന്നൽ ടാഗുകൾ ഉപയോഗിക്കുക.

ചെറിയ വാചകം

ഇൻലൈൻ അല്ലെങ്കിൽ ടെക്‌സ്‌റ്റ് ബ്ലോക്കുകൾ ഊന്നിപ്പറയുന്നതിന് <small>, രക്ഷകർത്താവിന്റെ വലുപ്പത്തിന്റെ 85% ടെക്‌സ്‌റ്റ് സജ്ജീകരിക്കാൻ ടാഗ് ഉപയോഗിക്കുക. font-sizeനെസ്റ്റഡ് എലമെന്റുകൾക്കായി ഹെഡ്ഡിംഗ് എലമെന്റുകൾക്ക് അവരുടേതായ ലഭിക്കുന്നു <small>.

നിങ്ങൾക്ക് പകരമായി .smallഏതെങ്കിലും ഒരു ഇൻലൈൻ ഘടകം ഉപയോഗിക്കാം <small>.

വാചകത്തിന്റെ ഈ വരി ഫൈൻ പ്രിന്റ് ആയി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

<small>This line of text is meant to be treated as fine print.</small>

ധീരമായ

ഭാരമേറിയ ഫോണ്ട് ഭാരമുള്ള ടെക്‌സ്‌റ്റിന്റെ ഒരു സ്‌നിപ്പറ്റിന് ഊന്നൽ നൽകുന്നതിന്.

ടെക്‌സ്‌റ്റിന്റെ ഇനിപ്പറയുന്ന സ്‌നിപ്പറ്റ് ബോൾഡ് ടെക്‌സ്‌റ്റായി റെൻഡർ ചെയ്‌തിരിക്കുന്നു .

<strong>rendered as bold text</strong>

ഇറ്റാലിക്സ്

ഇറ്റാലിക്‌സ് ഉള്ള ടെക്‌സ്‌റ്റിന്റെ ഒരു സ്‌നിപ്പറ്റ് ഊന്നിപ്പറയുന്നതിന്.

ടെക്‌സ്‌റ്റിന്റെ ഇനിപ്പറയുന്ന സ്‌നിപ്പെറ്റ് ഇറ്റാലിസ് ചെയ്‌ത ടെക്‌സ്‌റ്റായി റെൻഡർ ചെയ്‌തിരിക്കുന്നു .

<em>rendered as italicized text</em>

ഇതര ഘടകങ്ങൾ

HTML5- <b>ലും ഉപയോഗിക്കാൻ മടിക്കേണ്ടതില്ല. വോയ്‌സ്, ടെക്‌നിക്കൽ പദങ്ങൾ മുതലായവയ്‌ക്കായി അധിക പ്രാധാന്യം നൽകാതെ വാക്കുകളോ ശൈലികളോ ഹൈലൈറ്റ് ചെയ്യുന്നതാണ് ഇത്.<i><b><i>

അലൈൻമെന്റ് ക്ലാസുകൾ

ടെക്‌സ്‌റ്റ് അലൈൻമെന്റ് ക്ലാസുകളുള്ള ഘടകങ്ങളിലേക്ക് ടെക്‌സ്‌റ്റ് എളുപ്പത്തിൽ പുനഃക്രമീകരിക്കുക.

ഇടത് വിന്യസിച്ച വാചകം.

മധ്യഭാഗത്ത് വിന്യസിച്ച വാചകം.

വലത് വിന്യസിച്ച വാചകം.

ന്യായീകരിക്കപ്പെട്ട വാചകം.

പൊതിയുന്ന വാചകമില്ല.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

പരിവർത്തന ക്ലാസുകൾ

ടെക്‌സ്‌റ്റ് ക്യാപിറ്റലൈസേഷൻ ക്ലാസുകളുള്ള ഘടകങ്ങളിൽ ടെക്‌സ്‌റ്റ് രൂപാന്തരപ്പെടുത്തുക.

ചെറിയ അക്ഷരത്തിലുള്ള വാചകം.

വലിയക്ഷരത്തിലുള്ള വാചകം.

വലിയക്ഷരമാക്കിയ വാചകം.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

ചുരുക്കെഴുത്തുകൾ

<abbr>വിപുലീകരിച്ച പതിപ്പ് ഹോവറിൽ കാണിക്കുന്നതിന് ചുരുക്കങ്ങൾക്കും ചുരുക്കെഴുത്തുകൾക്കുമായി HTML ന്റെ മൂലകത്തിന്റെ ശൈലിയിലുള്ള നടപ്പിലാക്കൽ . ഒരു titleആട്രിബ്യൂട്ട് ഉള്ള ചുരുക്കെഴുത്തുകൾക്ക് നേരിയ ഡോട്ട് ഉള്ള ബോർഡറും ഹോവറിൽ ഒരു ഹെൽപ്പ് കഴ്‌സറും ഉണ്ട്, ഇത് ഹോവറിൽ അധിക സന്ദർഭവും സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്കും നൽകുന്നു.

അടിസ്ഥാന ചുരുക്കെഴുത്ത്

ആട്രിബ്യൂട്ട് എന്ന വാക്കിന്റെ ചുരുക്കമാണ് attr .

<abbr title="attribute">attr</abbr>

പ്രാരംഭവാദം

.initialismഅൽപ്പം ചെറിയ ഫോണ്ട്-സൈസിനായി ഒരു ചുരുക്കെഴുത്ത് ചേർക്കുക .

സ്ലൈസ് ചെയ്ത ബ്രെഡിന് ശേഷമുള്ള ഏറ്റവും മികച്ച കാര്യം HTML ആണ്.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

വിലാസങ്ങൾ

ഏറ്റവും അടുത്തുള്ള പൂർവ്വികനെയോ അല്ലെങ്കിൽ മുഴുവൻ ജോലിയുടെയും കോൺടാക്റ്റ് വിവരങ്ങൾ അവതരിപ്പിക്കുക. എല്ലാ വരികളും അവസാനിപ്പിച്ച് ഫോർമാറ്റിംഗ് സംരക്ഷിക്കുക <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

മുഴുവൻ പേര്
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

ബ്ലോക്ക്ക്വോട്ടുകൾ

നിങ്ങളുടെ പ്രമാണത്തിനുള്ളിലെ മറ്റൊരു ഉറവിടത്തിൽ നിന്നുള്ള ഉള്ളടക്കത്തിന്റെ ബ്ലോക്കുകൾ ഉദ്ധരിക്കാൻ.

ഡിഫോൾട്ട് ബ്ലോക്ക്ക്വോട്ട്

ഉദ്ധരണിയായി <blockquote>ഏതെങ്കിലും HTML പൊതിയുക . നേരായ ഉദ്ധരണികൾക്ക്, ഞങ്ങൾ ഒരു ശുപാർശ ചെയ്യുന്നു <p>.

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ബ്ലോക്ക്ക്വോട്ട് ഓപ്ഷനുകൾ

ഒരു സ്റ്റാൻഡേർഡിലെ ലളിതമായ വ്യതിയാനങ്ങൾക്കായി ശൈലിയും ഉള്ളടക്കവും മാറ്റുന്നു <blockquote>.

ഒരു ഉറവിടത്തിന് പേരിടുന്നു

<footer>ഉറവിടം തിരിച്ചറിയാൻ ഒരു ചേർക്കുക . സ്രോതസ് വർക്കിന്റെ പേര് അതിൽ പൊതിയുക <cite>.

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.

ഉറവിട ശീർഷകത്തിൽ പ്രശസ്തനായ ഒരാൾ

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ഇതര ഡിസ്പ്ലേകൾ

.blockquote-reverseവലത് വിന്യസിച്ച ഉള്ളടക്കമുള്ള ഒരു ബ്ലോക്ക് ക്വോട്ടിനായി ചേർക്കുക .

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. പൂർണ്ണസംഖ്യയും ഒരു മുൻകാലവും.

ഉറവിട ശീർഷകത്തിൽ പ്രശസ്തനായ ഒരാൾ

<blockquote class="blockquote-reverse">
  ...
</blockquote>

ലിസ്റ്റുകൾ

ഓർഡർ ചെയ്യാത്തത്

ഓർഡർ വ്യക്തമായി പ്രാധാന്യമില്ലാത്ത ഇനങ്ങളുടെ ഒരു ലിസ്റ്റ് .

ലോറെം ഇപ്സം ഡോളോർ സിറ്റ് അമെറ്റ്
കൺസെക്റ്റൂർ അഡിപിസ്സിംഗ് എലിറ്റ്
പൂർണ്ണസംഖ്യ മോളസ്‌റ്റി ലോറം അറ്റ് മാസ്‌
പ്രെറ്റിയം നിസ്ൽ അലിക്വറ്റിലെ സൗകര്യം
Nulla volutpat aliquam velit
- ഫാസെല്ലസ് ഐക്യുലിസ് നെക്വെ
- പുരുസ് സോഡൽസ് അൾട്രിസികൾ
- വെസ്റ്റിബുലം ലൗറെറ്റ് പോർട്ടിറ്റർ സെം
- AC tristique libero volutpat at
ഫൗസിബസ് പോർട്ട ലാക്കസ് ഫ്രിംഗില്ല വേൽ
എനിയൻ ഇരിക്കുന്നു
എഗെറ്റ് പോർട്ടിറ്റർ ലോറം

<ul>
  <li>...</li>
</ul>

ഉത്തരവിട്ടു

ഓർഡർ വ്യക്തമായി പ്രാധാന്യമുള്ള ഇനങ്ങളുടെ ഒരു ലിസ്റ്റ് .

ലോറെം ഇപ്സം ഡോളോർ സിറ്റ് അമെറ്റ്
കൺസെക്റ്റൂർ അഡിപിസ്സിംഗ് എലിറ്റ്
പൂർണ്ണസംഖ്യ മോളസ്‌റ്റി ലോറം അറ്റ് മാസ്‌
പ്രെറ്റിയം നിസ്ൽ അലിക്വറ്റിലെ സൗകര്യം
Nulla volutpat aliquam velit
ഫൗസിബസ് പോർട്ട ലാക്കസ് ഫ്രിംഗില്ല വേൽ
എനിയൻ ഇരിക്കുന്നു
എഗെറ്റ് പോർട്ടിറ്റർ ലോറം

<ol>
  <li>...</li>
</ol>

ശൈലിയില്ലാത്തത്

ലിസ്റ്റ് ഇനങ്ങളിലെ ഡിഫോൾട്ടും list-styleഇടത് മാർജിനും നീക്കം ചെയ്യുക (ഉടൻ കുട്ടികൾ മാത്രം). ഇത് ഉടനടിയുള്ള കുട്ടികളുടെ ലിസ്റ്റ് ഇനങ്ങൾക്ക് മാത്രമേ ബാധകമാകൂ , അതായത് ഏതെങ്കിലും നെസ്റ്റഡ് ലിസ്റ്റുകൾക്കും നിങ്ങൾ ക്ലാസ് ചേർക്കേണ്ടതുണ്ട്.

ലോറെം ഇപ്സം ഡോളോർ സിറ്റ് അമെറ്റ്
കൺസെക്റ്റൂർ അഡിപിസ്സിംഗ് എലിറ്റ്
പൂർണ്ണസംഖ്യ മോളസ്‌റ്റി ലോറം അറ്റ് മാസ്‌
പ്രെറ്റിയം നിസ്ൽ അലിക്വറ്റിലെ സൗകര്യം
Nulla volutpat aliquam velit
- ഫാസെല്ലസ് ഐക്യുലിസ് നെക്വെ
- പുരുസ് സോഡൽസ് അൾട്രിസികൾ
- വെസ്റ്റിബുലം ലൗറെറ്റ് പോർട്ടിറ്റർ സെം
- AC tristique libero volutpat at
ഫൗസിബസ് പോർട്ട ലാക്കസ് ഫ്രിംഗില്ല വേൽ
എനിയൻ ഇരിക്കുന്നു
എഗെറ്റ് പോർട്ടിറ്റർ ലോറം

<ul class="list-unstyled">
  <li>...</li>
</ul>

ഇൻ ലൈൻ

എല്ലാ ലിസ്റ്റ് ഇനങ്ങളും ഒരു ലൈനിൽ display: inline-block;കുറച്ച് ലൈറ്റ് പാഡിംഗിൽ സ്ഥാപിക്കുക.

ലോറെം ഇപ്സം
ഫാസെല്ലസ് ഐക്യുലിസ്
നുള്ള വൊലുത്പത്

<ul class="list-inline">
  <li>...</li>
</ul>

വിവരണം

അനുബന്ധ വിവരണങ്ങളുള്ള നിബന്ധനകളുടെ ഒരു ലിസ്റ്റ്.

വിവരണ ലിസ്റ്റുകൾ: നിബന്ധനകൾ നിർവചിക്കുന്നതിന് ഒരു വിവരണ പട്ടിക അനുയോജ്യമാണ്.
യൂയിസ്മോഡ്: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്.
Malesuada പോർട്ട: Etiam porta sem malesuada Magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

തിരശ്ചീന വിവരണം

നിബന്ധനകളും വിവരണങ്ങളും <dl>വശങ്ങളിലായി നിരത്തുക. ഡിഫോൾട്ട് <dl>s പോലെ അടുക്കിവെച്ച് ആരംഭിക്കുന്നു, എന്നാൽ navbar വികസിക്കുമ്പോൾ, ഇവയും ചെയ്യുക.

വിവരണ ലിസ്റ്റുകൾ: നിബന്ധനകൾ നിർവചിക്കുന്നതിന് ഒരു വിവരണ പട്ടിക അനുയോജ്യമാണ്.
യൂയിസ്മോഡ്: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്.
Malesuada പോർട്ട: Etiam porta sem malesuada Magna mollis euismod.
ഫെലിസ് യൂയിസ്മോഡ് സെമ്പർ എഗെറ്റ് ലാസിനിയ: ഫ്യൂസ് ഡാപിബസ്, ടെല്ലസ് എസി കർസസ് കമ്മോഡോ, ടോർട്ടർ മൗറിസ് കോൺഡിമെന്റം നിബ്, യുട്ട് ഫെർമെന്റം മാസ് ജസ്തോ സിറ്റ് അമെറ്റ് റിസസ്.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

സ്വയമേവ വെട്ടിച്ചുരുക്കൽ

തിരശ്ചീന വിവരണ ലിസ്‌റ്റുകൾ ഇടത് കോളത്തിൽ ഒതുങ്ങാൻ കഴിയാത്തത്ര നീളമുള്ള പദങ്ങൾ വെട്ടിച്ചുരുക്കും text-overflow. ഇടുങ്ങിയ വ്യൂപോർട്ടുകളിൽ, അവ ഡിഫോൾട്ട് സ്റ്റാക്ക് ചെയ്ത ലേഔട്ടിലേക്ക് മാറും.

ഇൻ ലൈൻ

ഉപയോഗിച്ച് കോഡിന്റെ ഇൻലൈൻ സ്‌നിപ്പെറ്റുകൾ പൊതിയുക <code>.

ഉദാഹരണത്തിന്, <section>ഇൻലൈൻ ആയി പൊതിയണം.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ഉപയോക്തൃ ഇൻപുട്ട്

<kbd>കീബോർഡ് വഴി സാധാരണയായി നൽകുന്ന ഇൻപുട്ട് സൂചിപ്പിക്കാൻ ഉപയോഗിക്കുക .

ഡയറക്ടറികൾ മാറുന്നതിന്, ഡയറക്‌ടറിയുടെ cdപേര് ടൈപ്പ് ചെയ്യുക.
ക്രമീകരണങ്ങൾ എഡിറ്റുചെയ്യാൻ, അമർത്തുക ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

അടിസ്ഥാന ബ്ലോക്ക്

<pre>കോഡിന്റെ ഒന്നിലധികം വരികൾക്കായി ഉപയോഗിക്കുക . ശരിയായ റെൻഡറിങ്ങിനായി കോഡിലെ ഏതെങ്കിലും ആംഗിൾ ബ്രാക്കറ്റുകളിൽ നിന്ന് രക്ഷപ്പെടുന്നത് ഉറപ്പാക്കുക.

<p>സാമ്പിൾ ടെക്സ്റ്റ് ഇവിടെ...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

നിങ്ങൾക്ക് ഓപ്‌ഷണലായി .pre-scrollableക്ലാസ് ചേർക്കാം, അത് പരമാവധി ഉയരം 350px സജ്ജീകരിക്കുകയും y-ആക്സിസ് സ്ക്രോൾബാർ നൽകുകയും ചെയ്യും.

വേരിയബിളുകൾ

വേരിയബിളുകൾ സൂചിപ്പിക്കാൻ <var>ടാഗ് ഉപയോഗിക്കുക.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

സാമ്പിൾ ഔട്ട്പുട്ട്

ഒരു പ്രോഗ്രാമിൽ നിന്നുള്ള ബ്ലോക്കുകളുടെ സാമ്പിൾ ഔട്ട്പുട്ട് സൂചിപ്പിക്കാൻ <samp>ടാഗ് ഉപയോഗിക്കുക.

ഈ ടെക്‌സ്‌റ്റ് ഒരു കമ്പ്യൂട്ടർ പ്രോഗ്രാമിൽ നിന്നുള്ള സാമ്പിൾ ഔട്ട്‌പുട്ടായി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

അടിസ്ഥാന ഉദാഹരണം

അടിസ്ഥാന സ്‌റ്റൈലിങ്ങിന്-ലൈറ്റ് പാഡിംഗിനും തിരശ്ചീനമായ ഡിവൈഡറുകൾക്കും മാത്രം-ബേസ് ക്ലാസ് .tableഏതെങ്കിലും ഒന്നിലേക്ക് ചേർക്കുക <table>. ഇത് വളരെ അനാവശ്യമായി തോന്നിയേക്കാം, എന്നാൽ കലണ്ടറുകളും തീയതി പിക്കറുകളും പോലെയുള്ള മറ്റ് പ്ലഗിനുകൾക്കായി പട്ടികകളുടെ വ്യാപകമായ ഉപയോഗം കണക്കിലെടുക്കുമ്പോൾ, ഞങ്ങളുടെ ഇഷ്‌ടാനുസൃത പട്ടിക ശൈലികൾ വേർതിരിച്ചെടുക്കാൻ ഞങ്ങൾ തിരഞ്ഞെടുത്തു.

ഓപ്ഷണൽ പട്ടിക അടിക്കുറിപ്പ്.
#	പേരിന്റെ ആദ്യഭാഗം	പേരിന്റെ അവസാന ഭാഗം	ഉപയോക്തൃനാമം
1	അടയാളപ്പെടുത്തുക	ഓട്ടോ	@mdo
2	ജേക്കബ്	തോൺടൺ	@കൊഴുപ്പ്
3	ലാറി	പക്ഷി	@ട്വിറ്റർ

<table class="table">
  ...
</table>

വരയുള്ള വരികൾ

.table-stripedഎന്നതിനുള്ളിലെ ഏതെങ്കിലും ടേബിൾ വരിയിലേക്ക് സീബ്രാ-സ്ട്രിപ്പിംഗ് ചേർക്കാൻ ഉപയോഗിക്കുക <tbody>.

ക്രോസ് ബ്രൗസർ അനുയോജ്യത

:nth-childഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 8-ൽ ലഭ്യമല്ലാത്ത CSS സെലക്ടർ വഴിയാണ് വരയുള്ള പട്ടികകൾ രൂപപ്പെടുത്തിയിരിക്കുന്നത് .

#	പേരിന്റെ ആദ്യഭാഗം	പേരിന്റെ അവസാന ഭാഗം	ഉപയോക്തൃനാമം
1	അടയാളപ്പെടുത്തുക	ഓട്ടോ	@mdo
2	ജേക്കബ്	തോൺടൺ	@കൊഴുപ്പ്
3	ലാറി	പക്ഷി	@ട്വിറ്റർ

<table class="table table-striped">
  ...
</table>

ബോർഡർ മേശ

.table-borderedപട്ടികയുടെയും സെല്ലുകളുടെയും എല്ലാ വശങ്ങളിലും ബോർഡറുകൾക്കായി ചേർക്കുക .

#	പേരിന്റെ ആദ്യഭാഗം	പേരിന്റെ അവസാന ഭാഗം	ഉപയോക്തൃനാമം
1	അടയാളപ്പെടുത്തുക	ഓട്ടോ	@mdo
2	ജേക്കബ്	തോൺടൺ	@കൊഴുപ്പ്
3	ലാറി	പക്ഷി	@ട്വിറ്റർ

<table class="table table-bordered">
  ...
</table>

വരികൾ ഹോവർ ചെയ്യുക

.table-hoverഒരു ഉള്ളിലെ പട്ടിക വരികളിൽ ഒരു ഹോവർ അവസ്ഥ പ്രവർത്തനക്ഷമമാക്കാൻ ചേർക്കുക <tbody>.

#	പേരിന്റെ ആദ്യഭാഗം	പേരിന്റെ അവസാന ഭാഗം	ഉപയോക്തൃനാമം
1	അടയാളപ്പെടുത്തുക	ഓട്ടോ	@mdo
2	ജേക്കബ്	തോൺടൺ	@കൊഴുപ്പ്
3	ലാറി	പക്ഷി	@ട്വിറ്റർ

<table class="table table-hover">
  ...
</table>

ഘനീഭവിച്ച മേശ

.table-condensedസെൽ പാഡിംഗ് പകുതിയായി മുറിച്ച് പട്ടികകൾ കൂടുതൽ ഒതുക്കമുള്ളതാക്കാൻ ചേർക്കുക .

#	പേരിന്റെ ആദ്യഭാഗം	പേരിന്റെ അവസാന ഭാഗം	ഉപയോക്തൃനാമം
1	അടയാളപ്പെടുത്തുക	ഓട്ടോ	@mdo
2	ജേക്കബ്	തോൺടൺ	@കൊഴുപ്പ്
3	ലാറി ദി ബേർഡ്		@ട്വിറ്റർ

<table class="table table-condensed">
  ...
</table>

സന്ദർഭോചിതമായ ക്ലാസുകൾ

പട്ടിക വരികൾ അല്ലെങ്കിൽ വ്യക്തിഗത സെല്ലുകൾ വർണ്ണിക്കാൻ സന്ദർഭോചിതമായ ക്ലാസുകൾ ഉപയോഗിക്കുക.

ക്ലാസ്	വിവരണം
`.active`	ഒരു പ്രത്യേക വരിയിലോ സെല്ലിലോ ഹോവർ നിറം പ്രയോഗിക്കുന്നു
`.success`	വിജയകരമായ അല്ലെങ്കിൽ പോസിറ്റീവ് പ്രവർത്തനത്തെ സൂചിപ്പിക്കുന്നു
`.info`	ഒരു നിഷ്പക്ഷ വിവരദായകമായ മാറ്റത്തെയോ പ്രവർത്തനത്തെയോ സൂചിപ്പിക്കുന്നു
`.warning`	ശ്രദ്ധ ആവശ്യമായേക്കാവുന്ന ഒരു മുന്നറിയിപ്പ് സൂചിപ്പിക്കുന്നു
`.danger`	അപകടകരമോ പ്രതികൂലമോ ആയ ഒരു പ്രവർത്തനത്തെ സൂചിപ്പിക്കുന്നു

#	നിരയുടെ തലക്കെട്ട്	നിരയുടെ തലക്കെട്ട്	നിരയുടെ തലക്കെട്ട്
1	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം
2	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം
3	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം
4	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം
5	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം
6	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം
7	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം
8	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം
9	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം	നിര ഉള്ളടക്കം

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

സഹായ സാങ്കേതികവിദ്യകളുടെ അർത്ഥം അറിയിക്കുന്നു

ഒരു ടേബിൾ വരിയിലോ വ്യക്തിഗത സെല്ലിലോ അർത്ഥം ചേർക്കാൻ നിറം ഉപയോഗിക്കുന്നത് ഒരു വിഷ്വൽ സൂചന നൽകുന്നു, അത് സ്‌ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് കൈമാറില്ല. വർണ്ണത്താൽ സൂചിപ്പിച്ചിരിക്കുന്ന വിവരങ്ങൾ ഉള്ളടക്കത്തിൽ നിന്ന് തന്നെ വ്യക്തമാണെന്ന് ഉറപ്പാക്കുക (പ്രസക്തമായ പട്ടിക വരി/സെല്ലിലെ ദൃശ്യമായ വാചകം), അല്ലെങ്കിൽ .sr-onlyക്ലാസിനൊപ്പം മറച്ചിരിക്കുന്ന അധിക വാചകം പോലെയുള്ള ഇതര മാർഗങ്ങളിലൂടെ ഉൾപ്പെടുത്തിയിരിക്കുന്നു.

പ്രതികരിക്കുന്ന പട്ടികകൾ

ചെറിയ ഉപകരണങ്ങളിൽ (768px-ന് താഴെ) തിരശ്ചീനമായി സ്ക്രോൾ ചെയ്യുന്നതിനായി എന്തെങ്കിലും .tableപൊതിഞ്ഞ് പ്രതികരിക്കുന്ന പട്ടികകൾ സൃഷ്‌ടിക്കുക . .table-responsive768px വീതിയിൽ കൂടുതലുള്ള എന്തെങ്കിലും കാണുമ്പോൾ, ഈ പട്ടികകളിൽ നിങ്ങൾക്ക് ഒരു വ്യത്യാസവും കാണാനാകില്ല.

ലംബമായ ക്ലിപ്പിംഗ്/വെട്ടൽ

റെസ്‌പോൺസീവ് ടേബിളുകൾ ഉപയോഗപ്പെടുത്തുന്നു overflow-y: hidden, ഇത് പട്ടികയുടെ താഴെയോ മുകളിലോ ഉള്ള അരികുകൾക്കപ്പുറത്തേക്ക് പോകുന്ന ഏതൊരു ഉള്ളടക്കത്തെയും ക്ലിപ്പ് ചെയ്യുന്നു. പ്രത്യേകിച്ചും, ഇതിന് ഡ്രോപ്പ്ഡൗൺ മെനുകളും മറ്റ് മൂന്നാം കക്ഷി വിജറ്റുകളും ക്ലിപ്പ് ചെയ്യാൻ കഴിയും.

ഫയർഫോക്സും ഫീൽഡ്സെറ്റുകളും

widthഫയർഫോക്സിന് റെസ്പോൺസീവ് ടേബിളിനെ തടസ്സപ്പെടുത്തുന്ന ചില വിചിത്രമായ ഫീൽഡ്സെറ്റ് സ്റ്റൈലിംഗ് ഉണ്ട് . ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഞങ്ങൾ നൽകാത്ത ഒരു ഫയർഫോക്‌സ്-നിർദ്ദിഷ്‌ട ഹാക്ക് ഇല്ലാതെ ഇത് അസാധുവാക്കാൻ കഴിയില്ല :

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

കൂടുതൽ വിവരങ്ങൾക്ക്, ഈ സ്റ്റാക്ക് ഓവർഫ്ലോ ഉത്തരം വായിക്കുക .

#	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്
1	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ
2	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ
3	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ

#	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്	പട്ടിക തലക്കെട്ട്
1	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ
2	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ
3	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ	ടേബിൾ സെൽ

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

അടിസ്ഥാന ഉദാഹരണം

വ്യക്തിഗത ഫോം നിയന്ത്രണങ്ങൾക്ക് ചില ആഗോള സ്റ്റൈലിംഗ് സ്വയമേവ ലഭിക്കും. എല്ലാ ടെക്‌സ്‌റ്റൽ <input>, <textarea>, ഉള്ള <select>ഘടകങ്ങൾ എന്നിവ സ്ഥിരസ്ഥിതിയായി .form-controlസജ്ജീകരിച്ചിരിക്കുന്നു . ഒപ്റ്റിമൽ സ്പേസിംഗിനായി width: 100%;ലേബലുകളും നിയന്ത്രണങ്ങളും പൊതിയുക ..form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ഇൻപുട്ട് ഗ്രൂപ്പുകളുമായി ഫോം ഗ്രൂപ്പുകൾ മിശ്രണം ചെയ്യരുത്

ഫോം ഗ്രൂപ്പുകളെ ഇൻപുട്ട് ഗ്രൂപ്പുകളുമായി നേരിട്ട് മിക്സ് ചെയ്യരുത് . പകരം, ഫോം ഗ്രൂപ്പിനുള്ളിൽ ഇൻപുട്ട് ഗ്രൂപ്പ് നെസ്റ്റ് ചെയ്യുക.

ഇൻലൈൻ ഫോം

ഇടത് വിന്യസിച്ചതും ഇൻലൈൻ-ബ്ലോക്ക് നിയന്ത്രണങ്ങൾക്കുമായി നിങ്ങളുടെ ഫോമിലേക്ക് ചേർക്കുക .form-inline(അത് ഒരു ആയിരിക്കണമെന്നില്ല ). കുറഞ്ഞത് 768px വീതിയുള്ള വ്യൂപോർട്ടുകൾക്കുള്ളിലെ ഫോമുകൾക്ക് മാത്രമേ ഇത് ബാധകമാകൂ.<form>

ഇഷ്ടാനുസൃത വീതികൾ ആവശ്യമായി വന്നേക്കാം

ഇൻപുട്ടുകളും തിരഞ്ഞെടുത്തവയും width: 100%;ബൂട്ട്സ്ട്രാപ്പിൽ ഡിഫോൾട്ടായി പ്രയോഗിച്ചു. ഇൻലൈൻ ഫോമുകൾക്കുള്ളിൽ, width: auto;ഒന്നിലധികം നിയന്ത്രണങ്ങൾ ഒരേ ലൈനിൽ വസിക്കുന്നതിന് ഞങ്ങൾ അത് പുനഃസജ്ജമാക്കുന്നു. നിങ്ങളുടെ ലേഔട്ട് അനുസരിച്ച്, അധിക ഇഷ്‌ടാനുസൃത വീതികൾ ആവശ്യമായി വന്നേക്കാം.

എപ്പോഴും ലേബലുകൾ ചേർക്കുക

ഓരോ ഇൻപുട്ടിനും നിങ്ങൾ ഒരു ലേബൽ ഉൾപ്പെടുത്തിയില്ലെങ്കിൽ നിങ്ങളുടെ ഫോമുകളിൽ സ്‌ക്രീൻ റീഡർമാർക്ക് പ്രശ്‌നമുണ്ടാകും. .sr-onlyഈ ഇൻലൈൻ ഫോമുകൾക്കായി, ക്ലാസ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ലേബലുകൾ മറയ്ക്കാം . aria-label, aria-labelledbyഅല്ലെങ്കിൽ titleആട്രിബ്യൂട്ട് പോലുള്ള സഹായ സാങ്കേതിക വിദ്യകൾക്കായി ഒരു ലേബൽ നൽകുന്നതിന് മറ്റ് ഇതര രീതികളുണ്ട് . ഇവയൊന്നും ഇല്ലെങ്കിൽ, സ്‌ക്രീൻ റീഡറുകൾ placeholderആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നതിന് അവലംബിച്ചേക്കാം, എന്നാൽ placeholderമറ്റ് ലേബലിംഗ് രീതികൾക്ക് പകരമായി ഉപയോഗിക്കുന്നത് ശുപാർശ ചെയ്യുന്നില്ല എന്നത് ശ്രദ്ധിക്കുക.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

തിരശ്ചീന രൂപം

ഫോമിലേക്ക് ചേർത്തുകൊണ്ട് ഒരു തിരശ്ചീന ലേഔട്ടിൽ ലേബലുകളും ഫോം നിയന്ത്രണങ��ങളുടെ ഗ്രൂപ്പുകളും വിന്യസിക്കാൻ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ മുൻകൂട്ടി നിശ്ചയിച്ച ഗ്രിഡ് ക്ലാസുകൾ ഉപയോഗിക്കുക .form-horizontal(അത് ഒരു ആയിരിക്കണമെന്നില്ല <form>). അങ്ങനെ ചെയ്യുന്നത് .form-groupഗ്രിഡ് വരികളായി പ്രവർത്തിക്കുന്നതിന് s മാറ്റുന്നു, അതിനാൽ ആവശ്യമില്ല .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

പിന്തുണയുള്ള നിയന്ത്രണങ്ങൾ

ഒരു ഉദാഹരണ ഫോം ലേഔട്ടിൽ പിന്തുണയ്ക്കുന്ന സ്റ്റാൻഡേർഡ് ഫോം നിയന്ത്രണങ്ങളുടെ ഉദാഹരണങ്ങൾ.

ഇൻപുട്ടുകൾ

ഏറ്റവും സാധാരണമായ ഫോം നിയന്ത്രണം, ടെക്സ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള ഇൻപുട്ട് ഫീൽഡുകൾ. എല്ലാ HTML5 തരങ്ങൾക്കുമുള്ള പിന്തുണ ഉൾപ്പെടുന്നു: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telകൂടാതെ color.

തരം ഡിക്ലറേഷൻ ആവശ്യമാണ്

typeഇൻപുട്ടുകൾ ശരിയായി ഡിക്ലെയർ ചെയ്താൽ മാത്രമേ അവ പൂർണ്ണമായി സ്റ്റൈൽ ചെയ്യപ്പെടുകയുള്ളൂ.

<input type="text" class="form-control" placeholder="Text input">

ഇൻപുട്ട് ഗ്രൂപ്പുകൾ

ഏതെങ്കിലും ടെക്‌സ്‌റ്റ് അധിഷ്‌ഠിതത്തിന് മുമ്പും/അല്ലെങ്കിൽ ശേഷവും സംയോജിത വാചകമോ ബട്ടണുകളോ ചേർക്കുന്നതിന് <input>, ഇൻപുട്ട് ഗ്രൂപ്പ് ഘടകം പരിശോധിക്കുക .

ടെക്സ്റ്റേറിയ

വാചകത്തിന്റെ ഒന്നിലധികം വരികൾ പിന്തുണയ്ക്കുന്ന ഫോം നിയന്ത്രണം. rowsആവശ്യാനുസരണം ആട്രിബ്യൂട്ട് മാറ്റുക .

<textarea class="form-control" rows="3"></textarea>

ചെക്ക്ബോക്സുകളും റേഡിയോകളും

ഒരു ലിസ്റ്റിൽ ഒന്നോ അതിലധികമോ ഓപ്‌ഷനുകൾ തിരഞ്ഞെടുക്കുന്നതിനാണ് ചെക്ക്‌ബോക്‌സുകൾ, അതേസമയം റേഡിയോകൾ പലതിൽ നിന്നും ഒരു ഓപ്‌ഷൻ തിരഞ്ഞെടുക്കുന്നതിനുള്ളതാണ്.

പ്രവർത്തനരഹിതമാക്കിയ ചെക്ക്‌ബോക്‌സുകളും റേഡിയോകളും പിന്തുണയ്‌ക്കുന്നു, എന്നാൽ രക്ഷിതാവിന്റെ ഹോവറിൽ "അനുവദനീയമല്ലാത്ത" കഴ്‌സർ നൽകാൻ , നിങ്ങൾ രക്ഷിതാവിന് ക്ലാസ് <label>ചേർക്കേണ്ടതുണ്ട് , , , അല്ലെങ്കിൽ ..disabled.radio.radio-inline.checkbox.checkbox-inline

ഡിഫോൾട്ട് (സഞ്ചിത)

ഓപ്ഷൻ ഒന്ന് ഇതും അതും-എന്തുകൊണ്ടാണ് ഇത് മികച്ചതെന്ന് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക

ഓപ്ഷൻ രണ്ട് പ്രവർത്തനരഹിതമാക്കി

ഓപ്ഷൻ രണ്ട് മറ്റെന്തെങ്കിലും ആകാം, അത് തിരഞ്ഞെടുക്കുന്നത് ഓപ്ഷൻ ഒന്ന് തിരഞ്ഞെടുത്തത് മാറ്റും

ഓപ്ഷൻ മൂന്ന് പ്രവർത്തനരഹിതമാക്കി

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

ഇൻലൈൻ ചെക്ക്ബോക്സുകളും റേഡിയോകളും

ഒരേ ലൈനിൽ ദൃശ്യമാകുന്ന നിയന്ത്രണങ്ങൾക്കായി ചെക്ക്ബോക്സുകളുടെയോ റേഡിയോകളുടെയോ ഒരു ശ്രേണിയിൽ .checkbox-inlineഅല്ലെങ്കിൽ ക്ലാസുകൾ ഉപയോഗിക്കുക ..radio-inline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

ലേബൽ വാചകമില്ലാത്ത ചെക്ക്ബോക്സുകളും റേഡിയോകളും

എന്നതിനുള്ളിൽ നിങ്ങൾക്ക് ടെക്‌സ്‌റ്റ് ഇല്ലെങ്കിൽ <label>, നിങ്ങൾ പ്രതീക്ഷിക്കുന്നതുപോലെ ഇൻപുട്ട് സ്ഥാനം പിടിച്ചിരിക്കുന്നു. നിലവിൽ നോൺ-ഇൻലൈൻ ചെക്ക്ബോക്സുകളിലും റേഡിയോകളിലും മാത്രമേ പ്രവർത്തിക്കൂ. അസിസ്റ്റീവ് സാങ്കേതികവിദ്യകൾക്കായി ഇപ്പോഴും ഏതെങ്കിലും തരത്തിലുള്ള ലേബൽ നൽകാൻ ഓർക്കുക (ഉദാഹരണത്തിന്, ഉപയോഗിക്കുന്നത് aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

തിരഞ്ഞെടുക്കുന്നു

border-radiusപല നേറ്റീവ് സെലക്ട് മെനുകൾ-അതായത് Safari, Chrome-ൽ ഉള്ള വൃത്താകൃതിയിലുള്ള കോണുകൾ ഉണ്ട്, അത് പ്രോപ്പർട്ടികൾ വഴി പരിഷ്‌ക്കരിക്കാനാകില്ല .

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ആട്രിബ്യൂട്ട് ഉള്ള <select>നിയന്ത്രണങ്ങൾക്കായി multiple, ഒന്നിലധികം ഓപ്ഷനുകൾ ഡിഫോൾട്ടായി കാണിക്കുന്നു.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

സ്റ്റാറ്റിക് നിയന്ത്രണം

ഒരു ഫോമിനുള്ളിൽ ഒരു ഫോം ലേബലിന് അടുത്തായി നിങ്ങൾക്ക് പ്ലെയിൻ ടെക്സ്റ്റ് സ്ഥാപിക്കേണ്ടിവരുമ്പോൾ, a .form-control-staticഎന്നതിലെ ക്ലാസ് ഉപയോഗിക്കുക <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

ഫോക്കസ് സ്റ്റേറ്റ്

outlineചില ഫോം നിയന്ത്രണങ്ങളിൽ ഞങ്ങൾ ഡിഫോൾട്ട് ശൈലികൾ നീക്കം ചെയ്യുകയും box-shadowഅതിന്റെ സ്ഥാനത്ത് ഒരു പ്രയോഗിക്കുകയും ചെയ്യുന്നു :focus.

ഡെമോ `:focus`സ്റ്റേറ്റ്

:focusമുകളിലെ ഉദാഹരണ ഇൻപുട്ട്, a-യിലെ അവസ്ഥ പ്രദർശിപ്പിക്കുന്നതിന് ഞങ്ങളുടെ ഡോക്യുമെന്റേഷനിൽ ഇഷ്‌ടാനുസൃത ശൈലികൾ ഉപയോഗിക്കുന്നു .form-control.

വികലാംഗ സംസ്ഥാനം

disabledഉപയോക്തൃ ഇടപെടലുകൾ തടയാൻ ഒരു ഇൻപുട്ടിൽ ബൂളിയൻ ആട്രിബ്യൂട്ട് ചേർക്കുക . പ്രവർത്തനരഹിതമാക്കിയ ഇൻപുട്ടുകൾ ഭാരം കുറഞ്ഞതായി കാണപ്പെടുകയും ഒരു not-allowedകഴ്‌സർ ചേർക്കുകയും ചെയ്യുന്നു.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

പ്രവർത്തനരഹിതമാക്കിയ ഫീൽഡ്സെറ്റുകൾ

അതിനുള്ളിലെ എല്ലാ നിയന്ത്രണങ്ങളും ഒരേസമയം പ്രവർത്തനരഹിതമാക്കാൻ disableda എന്നതിലേക്ക് ആട്രിബ്യൂട്ട് ചേർക്കുക .<fieldset><fieldset>

എന്നതിന്റെ ലിങ്ക് പ്രവർത്തനത്തെക്കുറിച്ചുള്ള മുന്നറിയിപ്പ്`<a>`

ഡിഫോൾട്ടായി, ബ്രൗസറുകൾ എല്ലാ നേറ്റീവ് ഫോം നിയന്ത്രണങ്ങളെയും ( <input>, <select>കൂടാതെ <button>ഘടകങ്ങൾ) <fieldset disabled>പ്രവർത്തനരഹിതമാക്കിയതായി കണക്കാക്കും, അവയിൽ കീബോർഡ്, മൗസ് ഇടപെടലുകൾ തടയുന്നു. എന്നിരുന്നാലും, നിങ്ങളുടെ ഫോമിൽ <a ... class="btn btn-*">ഘടകങ്ങളും ഉൾപ്പെടുന്നുവെങ്കിൽ, ഇവയ്ക്ക് ഒരു ശൈലി മാത്രമേ നൽകൂ pointer-events: none. ബട്ടണുകൾക്കായുള്ള പ്രവർത്തനരഹിതമായ അവസ്ഥയെക്കുറിച്ചുള്ള വിഭാഗത്തിൽ സൂചിപ്പിച്ചതുപോലെ (പ്രത്യേകിച്ച് ആങ്കർ ഘടകങ്ങൾക്കുള്ള ഉപവിഭാഗത്തിൽ), ഈ CSS പ്രോപ്പർട്ടി ഇതുവരെ സ്റ്റാൻഡേർഡ് ചെയ്തിട്ടില്ല, കൂടാതെ Opera 18-ലും അതിനു താഴെയും അല്ലെങ്കിൽ Internet Explorer 11-ലും പൂർണ്ണമായി പിന്തുണയ്‌ക്കുന്നില്ല, വിജയിച്ചു കീബോർഡ് ഉപയോക്താക്കൾക്ക് ഈ ലിങ്കുകൾ ഫോക്കസ് ചെയ്യാനോ ആക്റ്റിവേറ്റ് ചെയ്യാനോ കഴിയാതെ തടയില്ല. സുരക്ഷിതരായിരിക്കാൻ, അത്തരം ലിങ്കുകൾ പ്രവർത്തനരഹിതമാക്കാൻ ഇഷ്‌ടാനുസൃത JavaScript ഉപയോഗിക്കുക.

ക്രോസ് ബ്രൗസർ അനുയോജ്യത

ബൂട്ട്‌സ്‌ട്രാപ്പ് എല്ലാ ബ്രൗസറുകളിലും ഈ ശൈലികൾ പ്രയോഗിക്കുമ്പോൾ, Internet Explorer 11-ഉം അതിനു താഴെയുള്ളവയും a-ലെ disabledആട്രിബ്യൂട്ടിനെ പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നില്ല <fieldset>. ഈ ബ്രൗസറുകളിലെ ഫീൽഡ് സെറ്റ് പ്രവർത്തനരഹിതമാക്കാൻ ഇഷ്‌ടാനുസൃത JavaScript ഉപയോഗിക്കുക.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

വായന മാത്രമുള്ള അവസ്ഥ

readonlyഇൻപുട്ടിന്റെ മൂല്യത്തിൽ മാറ്റം വരുത്തുന്നത് തടയാൻ ഇൻപുട്ടിൽ ബൂളിയൻ ആട്രിബ്യൂട്ട് ചേർക്കുക . റീഡ്-ഒൺലി ഇൻപുട്ടുകൾ ഭാരം കുറഞ്ഞതായി കാണപ്പെടുന്നു (അപ്രാപ്‌തമാക്കിയ ഇൻപുട്ടുകൾ പോലെ), എന്നാൽ സാധാരണ കഴ്‌സർ നിലനിർത്തുക.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

സഹായ വാചകം

ഫോം നിയന്ത്രണങ്ങൾക്കുള്ള ബ്ലോക്ക് ലെവൽ സഹായ വാചകം.

ഫോം നിയന്ത്രണങ്ങളുമായി സഹായ വാചകം ബന്ധപ്പെടുത്തുന്നു

aria-describedbyആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നതുമായി ബന്ധപ്പെട്ട ഫോം നിയന്ത്രണവുമായി സഹായ വാചകം വ്യക്തമായി ബന്ധപ്പെട്ടിരിക്കണം . ഉപയോക്താവ് ശ്രദ്ധ കേന്ദ്രീകരിക്കുമ്പോഴോ നിയന്ത്രണത്തിൽ പ്രവേശിക്കുമ്പോഴോ സ്‌ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകൾ ഈ സഹായ വാചകം പ്രഖ്യാപിക്കുമെന്ന് ഇത് ഉറപ്പാക്കും.

<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

മൂല്യനിർണ്ണയം പ്രസ്താവിക്കുന്നു

ഫോം നിയന്ത്രണങ്ങളിലെ പിശക്, മുന്നറിയിപ്പ്, വിജയാവസ്ഥകൾ എന്നിവയ്ക്കുള്ള മൂല്യനിർണ്ണയ ശൈലികൾ ബൂട്ട്സ്ട്രാപ്പിൽ ഉൾപ്പെടുന്നു. ഉപയോഗിക്കുന്നതിന്, ചേർക്കുക .has-warning, .has-errorഅല്ലെങ്കിൽ .has-successമാതൃ ഘടകത്തിലേക്ക്. ഏതെങ്കിലും .control-label, .form-control, .help-blockആ ഘടകത്തിനുള്ളിൽ മൂല്യനിർണ്ണയ ശൈലികൾ ലഭിക്കും.

അസിസ്റ്റീവ് ടെക്നോളജികൾക്കും കളർബ്ലൈൻഡ് ഉപയോക്താക്കൾക്കും മൂല്യനിർണ്ണയ നില അറിയിക്കുന്നു

ഒരു ഫോം നിയന്ത്രണത്തിന്റെ അവസ്ഥയെ സൂചിപ്പിക്കാൻ ഈ മൂല്യനിർണ്ണയ ശൈലികൾ ഉപയോഗിക്കുന്നത് ഒരു ദൃശ്യപരവും വർണ്ണാധിഷ്ഠിതവുമായ സൂചന മാത്രമാണ് നൽകുന്നത്, അത് സ്‌ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതിക വിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് അല്ലെങ്കിൽ വർണ്ണ അന്ധതയുള്ള ഉപയോക്താക്കൾക്ക് കൈമാറില്ല.

സംസ്ഥാനത്തിന്റെ ഒരു ബദൽ സൂചനയും നൽകിയിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. ഉദാഹരണത്തിന്, ഫോം കൺട്രോളിന്റെ <label>വാചകത്തിൽ തന്നെ നിങ്ങൾക്ക് അവസ്ഥയെക്കുറിച്ചുള്ള ഒരു സൂചന ഉൾപ്പെടുത്താം (ഇനിപ്പറയുന്ന കോഡ് ഉദാഹരണത്തിലെന്നപോലെ), ഒരു ഗ്ലിഫിക്കൺ.sr-only ഉൾപ്പെടുത്താം ( ക്ലാസ് ഉപയോഗിച്ച് ഉചിതമായ ഇതര ടെക്‌സ്‌റ്റിനൊപ്പം - ഗ്ലിഫിക്കോൺ ഉദാഹരണങ്ങൾ കാണുക ), അല്ലെങ്കിൽ ഒരു നൽകിക്കൊണ്ട് അധിക സഹായ ടെക്സ്റ്റ് ബ്ലോക്ക്. aria-invalid="true"പ്രത്യേകിച്ചും സഹായ സാങ്കേതികവിദ്യകൾക്ക്, അസാധുവായ ഫോം നിയന്ത്രണങ്ങളും ഒരു ആട്രിബ്യൂട്ട് നൽകാം .

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

ഓപ്ഷണൽ ഐക്കണുകൾക്കൊപ്പം

.has-feedbackകൂടാതെ ശരിയായ ഐക്കണും ചേർത്ത് നിങ്ങൾക്ക് ഓപ്‌ഷണൽ ഫീഡ്‌ബാക്ക് ഐക്കണുകൾ ചേർക്കാനും കഴിയും .

<input class="form-control">ഫീഡ്ബാക്ക് ഐക്കണുകൾ ടെക്സ്റ്റ് ഘടകങ്ങളുമായി മാത്രമേ പ്രവർത്തിക്കൂ .

ഐക്കണുകൾ, ലേബലുകൾ, ഇൻപുട്ട് ഗ്രൂപ്പുകൾ

ലേബൽ ഇല്ലാത്ത ഇൻപുട്ടുകൾക്കും വലതുവശത്ത് ആഡ്-ഓൺ ഉള്ള ഇൻപുട്ട് ഗ്രൂപ്പുകൾക്കും ഫീഡ്‌ബാക്ക് ഐക്കണുകളുടെ മാനുവൽ പൊസിഷനിംഗ് ആവശ്യമാണ് . പ്രവേശനക്ഷമത കാരണങ്ങളാൽ എല്ലാ ഇൻപുട്ടുകൾക്കും ലേബലുകൾ നൽകാൻ നിങ്ങളെ ശക്തമായി പ്രോത്സാഹിപ്പിക്കുന്നു. ലേബലുകൾ പ്രദർശിപ്പിക്കുന്നത് തടയാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അവ .sr-onlyക്ലാസിനൊപ്പം മറയ്ക്കുക. നിങ്ങൾ ലേബലുകൾ ഇല്ലാതെ ചെയ്യേണ്ടതുണ്ടെങ്കിൽ top, ഫീഡ്ബാക്ക് ഐക്കണിന്റെ മൂല്യം ക്രമീകരിക്കുക. ഇൻപുട്ട് ഗ്രൂപ്പുകൾക്ക്, rightനിങ്ങളുടെ ആഡോണിന്റെ വീതിയെ ആശ്രയിച്ച് ഉചിതമായ പിക്സൽ മൂല്യത്തിലേക്ക് മൂല്യം ക്രമീകരിക്കുക.

സഹായ സാങ്കേതിക വിദ്യകളിലേക്ക് ഐക്കണിന്റെ അർത്ഥം അറിയിക്കുന്നു

സ്‌ക്രീൻ റീഡറുകൾ പോലെയുള്ള സഹായ സാങ്കേതിക വിദ്യകൾ ഒരു ഐക്കണിന്റെ അർത്ഥം ശരിയായി അറിയിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ, അധിക മറഞ്ഞിരിക്കുന്ന ടെക്‌സ്‌റ്റ് .sr-onlyക്ലാസിൽ ഉൾപ്പെടുത്തുകയും അത് ഉപയോഗിക്കുന്നതുമായി ബന്ധപ്പെട്ട ഫോം നിയന്ത്രണവുമായി വ്യക്തമായി ബന്ധപ്പെടുത്തുകയും വേണം aria-describedby. <label>പകരമായി, ഫോം നിയന്ത്രണവുമായി ബന്ധപ്പെട്ട യഥാർത്ഥമായതിന്റെ ടെക്‌സ്‌റ്റ് മാറ്റുന്നത് പോലെ, അർത്ഥം (ഉദാഹരണത്തിന്, ഒരു പ്രത്യേക ടെക്‌സ്‌റ്റ് എൻട്രി ഫീൽഡിനായി ഒരു മുന്നറിയിപ്പ് ഉണ്ടെന്നത്) മറ്റേതെങ്കിലും രൂപത്തിൽ കൈമാറുന്നുവെന്ന് ഉറപ്പാക്കുക .

ഇനിപ്പറയുന്ന ഉദാഹരണങ്ങൾ ടെക്‌സ്‌റ്റിൽ തന്നെ അവയുടെ ഫോം കൺട്രോളുകളുടെ മൂല്യനിർണ്ണയ നിലയെക്കുറിച്ച് പരാമർശിച്ചിട്ടുണ്ടെങ്കിലും, <label>മുകളിലുള്ള സാങ്കേതികത ( .sr-onlyടെക്‌സ്റ്റും aria-describedby) ഉപയോഗിച്ചും ചിത്രീകരണ ആവശ്യങ്ങൾക്കായി ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

തിരശ്ചീന, ഇൻലൈൻ ഫോമുകളിലെ ഓപ്ഷണൽ ഐക്കണുകൾ

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

`.sr-only`മറഞ്ഞിരിക്കുന്ന ലേബലുകളുള്ള ഓപ്ഷണൽ ഐക്കണുകൾ

.sr-onlyഒരു ഫോം കൺട്രോൾ മറയ്ക്കാൻ നിങ്ങൾ ക്ലാസ് ഉപയോഗിക്കുകയാണെങ്കിൽ <label>(ആട്രിബ്യൂട്ട് പോലുള്ള മറ്റ് ലേബലിംഗ് ഓപ്‌ഷനുകൾ ഉപയോഗിക്കുന്നതിന് പകരം aria-label), ഐക്കൺ ചേർത്തുകഴിഞ്ഞാൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് അതിന്റെ സ്ഥാനം സ്വയമേവ ക്രമീകരിക്കും.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

വലിപ്പം നിയന്ത്രിക്കുക

പോലുള്ള ക്ലാസുകൾ ഉപയോഗിച്ച് ഉയരങ്ങൾ സജ്ജമാക്കുക .input-lg, ഗ്രിഡ് കോളം ക്ലാസുകൾ ഉപയോഗിച്ച് വീതി സജ്ജമാക്കുക .col-lg-*.

ഉയരം വലിപ്പം

ബട്ടൺ വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുന്ന ഉയരം കൂടിയതോ ചെറുതോ ആയ ഫോം നിയന്ത്രണങ്ങൾ സൃഷ്‌ടിക്കുക.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

തിരശ്ചീന ഫോം ഗ്രൂപ്പ് വലുപ്പങ്ങൾ

ദ്രുത വലുപ്പത്തിലുള്ള ലേബലുകളും ഫോം നിയന്ത്രണങ്ങളും .form-horizontalചേർത്ത് .form-group-lgഅല്ലെങ്കിൽ .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

നിരയുടെ വലുപ്പം

ആവശ്യമുള്ള വീതികൾ എളുപ്പത്തിൽ നടപ്പിലാക്കാൻ ഗ്രിഡ് നിരകളിലോ ഏതെങ്കിലും ഇഷ്‌ടാനുസൃത പാരന്റ് എലമെന്റിലോ ഇൻപുട്ടുകൾ പൊതിയുക.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

ബട്ടൺ ടാഗുകൾ

<a>ഒരു , <button>, അല്ലെങ്കിൽ <input>ഘടകത്തിലെ ബട്ടൺ ക്ലാസുകൾ ഉപയോഗിക്കുക .

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

സന്ദർഭ-നിർദ്ദിഷ്ട ഉപയോഗം

ബട്ടൺ ക്ലാസുകളും ഘടകങ്ങളും ഉപയോഗിക്കാമെങ്കിലും <a>, ഞങ്ങളുടെ nav, navbar ഘടകങ്ങൾക്കുള്ളിൽ ഘടകങ്ങൾ മാത്രമേ പിന്തുണയ്ക്കൂ <button>.<button>

ലിങ്കുകൾ ബട്ടണുകളായി പ്രവർത്തിക്കുന്നു

<a>മൂലകങ്ങൾ ബട്ടണുകളായി പ്രവർത്തിക്കാൻ ഉപയോഗിക്കുന്നുവെങ്കിൽ - മറ്റൊരു പ്രമാണത്തിലേക്കോ നിലവിലെ പേജിലെ വിഭാഗത്തിലേക്കോ നാവിഗേറ്റ് ചെയ്യുന്നതിനുപകരം, ഇൻ-പേജ് പ്രവർത്തനം പ്രവർത്തനക്ഷമമാക്കുന്നു role="button".

ക്രോസ് ബ്രൗസർ റെൻഡറിംഗ്

ഒരു മികച്ച സമ്പ്രദായമെന്ന നിലയിൽ, പൊരുത്തപ്പെടുന്ന ക്രോസ്-ബ്രൗസർ റെൻഡറിംഗ് ഉറപ്പാക്കാൻ സാധ്യമാകുമ്പോഴെല്ലാം ഘടകം ഉപയോഗിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു.<button>

മറ്റ് കാര്യങ്ങളിൽ, ഫയർഫോക്‌സ് <30-ൽ ഒരു ബഗ്line-height ഉണ്ട്, അത് -അടിസ്ഥാന ബട്ടണുകൾ സജ്ജീകരിക്കുന്നതിൽ നിന്ന് ഞങ്ങളെ തടയുന്നു <input>, ഇത് ഫയർഫോക്സിലെ മറ്റ് ബട്ടണുകളുടെ ഉയരവുമായി കൃത്യമായി പൊരുത്തപ്പെടുന്നില്ല.

ഓപ്ഷനുകൾ

സ്‌റ്റൈൽ ചെയ്‌ത ബട്ടൺ വേഗത്തിൽ സൃഷ്‌ടിക്കാൻ ലഭ്യമായ ഏതെങ്കിലും ബട്ടൺ ക്ലാസുകൾ ഉപയോഗിക്കുക.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

സഹായ സാങ്കേതികവിദ്യകളുടെ അർത്ഥം അറിയിക്കുന്നു

ഒരു ബട്ടണിലേക്ക് അർത്ഥം ചേർക്കാൻ വർണ്ണം ഉപയോഗിക്കുന്നത് ഒരു വിഷ്വൽ ഇൻഡിക്കേഷൻ മാത്രമേ നൽകുന്നുള്ളൂ, അത് സ്‌ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് കൈമാറില്ല. വർണ്ണത്താൽ സൂചിപ്പിച്ചിരിക്കുന്ന വിവരങ്ങൾ ഒന്നുകിൽ ഉള്ളടക്കത്തിൽ നിന്ന് തന്നെ (ബട്ടണിന്റെ ദൃശ്യമായ ടെക്‌സ്‌റ്റ്) വ്യക്തമാണെന്നും അല്ലെങ്കിൽ .sr-onlyക്ലാസിനൊപ്പം മറച്ചിരിക്കുന്ന അധിക ടെക്‌സ്‌റ്റ് പോലുള്ള ഇതര മാർഗങ്ങളിലൂടെ ഉൾപ്പെടുത്തിയിട്ടുണ്ടെന്നും ഉറപ്പാക്കുക.

വലിപ്പങ്ങൾ

വലുതോ ചെറുതോ ആയ ബട്ടണുകൾ ഇഷ്ടമാണോ? .btn-lg, .btn-smഅല്ലെങ്കിൽ .btn-xsഅധിക വലുപ്പങ്ങൾക്കായി ചേർക്കുക .

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

ബ്ലോക്ക് ലെവൽ ബട്ടണുകൾ സൃഷ്‌ടിക്കുക—ഒരു രക്ഷിതാവിന്റെ മുഴുവൻ വീതിയും ഉള്ളവ— ചേർത്തുകൊണ്ട് .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

സജീവമായ അവസ്ഥ

സജീവമാകുമ്പോൾ ബട്ടണുകൾ അമർത്തിയാൽ (ഇരുണ്ട പശ്ചാത്തലം, ഇരുണ്ട ബോർഡർ, ഇൻസെറ്റ് ഷാഡോ എന്നിവയിൽ) ദൃശ്യമാകും. മൂലകങ്ങൾക്ക് , <button>ഇത് വഴിയാണ് ചെയ്യുന്നത് :active. <a>മൂലകങ്ങൾക്ക്, ഇത് ഉപയോഗിച്ച് ചെയ്തു .active. എന്നിരുന്നാലും, നിങ്ങൾക്ക് s-ൽ ഉപയോഗിക്കാം .active( <button>കൂടാതെaria-pressed="true" ആട്രിബ്യൂട്ടും ഉൾപ്പെടുത്തുക) നിങ്ങൾക്ക് സജീവമായ അവസ്ഥ പ്രോഗ്രാമാറ്റിക് ആയി ആവർത്തിക്കണമെങ്കിൽ.

ബട്ടൺ ഘടകം

ഇത് ഒരു കപട-ക്ലാസ് ആയതിനാൽ ചേർക്കേണ്ടതില്ല :active, എന്നാൽ അതേ രൂപഭാവം നിങ്ങൾക്ക് നിർബന്ധിക്കണമെങ്കിൽ, മുന്നോട്ട് പോയി ചേർക്കുക .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

ആങ്കർ ഘടകം

ബട്ടണുകളിലേക്ക് .activeക്ലാസ് ചേർക്കുക .<a>

പ്രാഥമിക ലിങ്ക് ലിങ്ക്

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

വികലാംഗ സംസ്ഥാനം

ഉപയോഗിച്ച് ബട്ടണുകൾ മങ്ങിക്കുന്നതിലൂടെ അൺക്ലിക്ക് ചെയ്യാൻ കഴിയില്ല opacity.

ബട്ടൺ ഘടകം

ബട്ടണുകളിലേക്ക് disabledആട്രിബ്യൂട്ട് ചേർക്കുക .<button>

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

ക്രോസ് ബ്രൗസർ അനുയോജ്യത

നിങ്ങൾ disableda എന്നതിലേക്ക് ആട്രിബ്യൂട്ട് ചേർക്കുകയാണെങ്കിൽ <button>, Internet Explorer 9-ഉം അതിന് താഴെയുള്ളതും ഞങ്ങൾക്ക് പരിഹരിക്കാൻ കഴിയാത്ത മോശം ടെക്‌സ്‌റ്റ് ഷാഡോ ഉപയോഗിച്ച് ടെക്‌സ്‌റ്റ് ഗ്രേ റെൻഡർ ചെയ്യും.

ആങ്കർ ഘടകം

ബട്ടണുകളിലേക്ക് .disabledക്ലാസ് ചേർക്കുക .<a>

പ്രാഥമിക ലിങ്ക് ലിങ്ക്

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

ഞങ്ങൾ .disabledഇവിടെ ഒരു യൂട്ടിലിറ്റി ക്ലാസായി ഉപയോഗിക്കുന്നു, സാധാരണ .activeക്ലാസിന് സമാനമായതിനാൽ പ്രിഫിക്‌സ് ആവശ്യമില്ല.

ലിങ്ക് പ്രവർത്തനക്ഷമത മുന്നറിയിപ്പ്

pointer-events: nones-ന്റെ ലിങ്ക് പ്രവർത്തനം പ്രവർത്തനരഹിതമാക്കാൻ ശ്രമിക്കുന്നതിന് ഈ ക്ലാസ് ഉപയോഗിക്കുന്നു <a>, എന്നാൽ ആ CSS പ്രോപ്പർട്ടി ഇതുവരെ സ്റ്റാൻഡേർഡ് ചെയ്തിട്ടില്ല കൂടാതെ Opera 18-ലും അതിനു താഴെയും അല്ലെങ്കിൽ Internet Explorer 11-ലും പൂർണ്ണമായി പിന്തുണയ്‌ക്കുന്നില്ല. കൂടാതെ, പിന്തുണയ്‌ക്കുന്ന ബ്രൗസറുകളിൽ പോലും pointer-events: none, കീബോർഡ് നാവിഗേഷൻ ബാധിക്കപ്പെടാതെ തുടരുന്നു, അതായത് കാഴ്ചയുള്ള കീബോർഡ് ഉപയോക്താക്കൾക്കും സഹായ സാങ്കേതിക വിദ്യകളുടെ ഉപയോക്താക്കൾക്കും തുടർന്നും ഈ ലിങ്കുകൾ സജീവമാക്കാൻ കഴിയും. സുരക്ഷിതരായിരിക്കാൻ, അത്തരം ലിങ്കുകൾ പ്രവർത്തനരഹിതമാക്കാൻ ഇഷ്‌ടാനുസൃത JavaScript ഉപയോഗിക്കുക.

പ്രതികരിക്കുന്ന ചിത്രങ്ങൾ

.img-responsiveബൂട്ട്‌സ്‌ട്രാപ്പ് 3-ലെ ചിത്രങ്ങൾ ക്ലാസ് കൂട്ടിച്ചേർക്കുന്നതിലൂടെ പ്രതികരണ സൗഹൃദമാക്കാം . ഇത് , കൂടാതെ ചിത്രത്തിനും ബാധകമാണ് max-width: 100%;, അങ്ങനെ അത് പാരന്റ് എലമെന്റിലേക്ക് നന്നായി സ്കെയിൽ ചെയ്യുന്നു.height: auto;display: block;

.img-responsiveക്ലാസ് ഉപയോഗിക്കുന്ന ചിത്രങ്ങളുടെ മധ്യഭാഗത്തേക്ക് , .center-blockപകരം ഉപയോഗിക്കുക .text-center. ഉപയോഗത്തെക്കുറിച്ചുള്ള കൂടുതൽ വിശദാംശങ്ങൾക്ക് സഹായ ക്ലാസുകളുടെ വിഭാഗം കാണുക ..center-block

SVG ചിത്രങ്ങളും IE 8-10

ഇന്റർനെറ്റ് എക്‌സ്‌പ്ലോറർ 8-10-ൽ, SVG ഇമേജുകൾ .img-responsiveഅനുപാതമില്ലാതെ വലുപ്പമുള്ളതാണ്. ഇത് പരിഹരിക്കാൻ, width: 100% \9;ആവശ്യമുള്ളിടത്ത് ചേർക്കുക. മറ്റ് ഇമേജ് ഫോർമാറ്റുകൾക്ക് സങ്കീർണതകൾ ഉണ്ടാക്കുന്നതിനാൽ ബൂട്ട്സ്ട്രാപ്പ് ഇത് സ്വയമേവ പ്രയോഗിക്കില്ല.

<img src="..." class="img-responsive" alt="Responsive image">

ചിത്ര രൂപങ്ങൾ

<img>ഏത് പ്രോജക്റ്റിലും ചിത്രങ്ങൾ എളുപ്പത്തിൽ സ്റ്റൈൽ ചെയ്യുന്നതിനായി ഒരു ഘടകത്തിലേക്ക് ക്ലാസുകൾ ചേർക്കുക .

ക്രോസ് ബ്രൗസർ അനുയോജ്യത

വൃത്താകൃതിയിലുള്ള കോണുകൾക്കുള്ള പിന്തുണ ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 8-ന് ഇല്ലെന്ന് ഓർമ്മിക്കുക.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

സന്ദർഭോചിതമായ നിറങ്ങൾ

ഒരുപിടി ഊന്നൽ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് നിറത്തിലൂടെ അർത്ഥം അറിയിക്കുക. ഇവ ലിങ്കുകളിലും പ്രയോഗിച്ചേക്കാം, ഞങ്ങളുടെ ഡിഫോൾട്ട് ലിങ്ക് ശൈലികൾ പോലെ ഹോവറിൽ ഇരുണ്ടതാക്കും.

ഫ്യൂസ് ഡാപിബസ്, ടെല്ലസ് എസി കർസസ് കമോഡോ, ടോർട്ടർ മൗറിസ് നിബ്.

Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.

ഡ്യൂയിസ് മോളിസ്, ഈസ്റ്റ് നോൺ കമോഡോ ലക്റ്റസ്, നിസി എററ്റ് പോർട്ടിറ്റർ ലിഗുല.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada Magna mollis euismod.

ഡോനെക് ഉള്ളംകോർപ്പർ നുള്ള നോൺ മെറ്റസ് ആക്ടർ ഫ്രിംഗില്ല.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

പ്രത്യേകതകൾ കൈകാര്യം ചെയ്യുന്നു

മറ്റൊരു സെലക്ടറുടെ പ്രത്യേകത കാരണം ചിലപ്പോൾ ഊന്നൽ ക്ലാസുകൾ പ്രയോഗിക്കാൻ കഴിയില്ല. <span>മിക്ക കേസുകളിലും, നിങ്ങളുടെ വാചകം ക്ലാസിനൊപ്പം പൊതിയുക എന്നതാണ് മതിയായ പരിഹാരം .

സഹായ സാങ്കേതികവിദ്യകളുടെ അർത്ഥം അറിയിക്കുന്നു

അർത്ഥം ചേർക്കാൻ വർണ്ണം ഉപയോഗിക്കുന്നത് ഒരു വിഷ്വൽ സൂചന നൽകുന്നു, അത് സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് കൈമാറില്ല. വർണ്ണത്താൽ സൂചിപ്പിച്ചിരിക്കുന്ന വിവരങ്ങൾ ഉള്ളടക്കത്തിൽ നിന്ന് തന്നെ വ്യക്തമാണെന്ന് ഉറപ്പാക്കുക (സാന്ദർഭിക നിറങ്ങൾ ടെക്‌സ്‌റ്റിൽ/മാർക്ക്അപ്പിൽ ഇതിനകം ഉള്ള അർത്ഥത്തെ ശക്തിപ്പെടുത്താൻ മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂ), അല്ലെങ്കിൽ .sr-onlyക്ലാസിനൊപ്പം മറച്ചിരിക്കുന്ന അധിക ടെക്‌സ്‌റ്റ് പോലുള്ള ഇതര മാർഗങ്ങളിലൂടെ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. .

സാന്ദർഭിക പശ്ചാത്തലങ്ങൾ

സന്ദർഭോചിതമായ ടെക്സ്റ്റ് കളർ ക്ലാസുകൾക്ക് സമാനമായി, ഒരു എലമെന്റിന്റെ പശ്ചാത്തലം ഏത് സാന്ദർഭിക ക്ലാസിലേക്കും എളുപ്പത്തിൽ സജ്ജമാക്കുക. ടെക്സ്റ്റ് ക്ലാസുകൾ പോലെ ഹോവർ ചെയ്യുമ്പോൾ ആങ്കർ ഘടകങ്ങൾ ഇരുണ്ടുപോകും.

Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada Magna mollis euismod.

ഡോനെക് ഉള്ളംകോർപ്പർ നുള്ള നോൺ മെറ്റസ് ആക്ടർ ഫ്രിംഗില്ല.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

പ്രത്യേകതകൾ കൈകാര്യം ചെയ്യുന്നു

മറ്റൊരു സെലക്ടറിന്റെ പ്രത്യേകത കാരണം ചിലപ്പോൾ സന്ദർഭോചിതമായ പശ്ചാത്തല ക്ലാസുകൾ പ്രയോഗിക്കാൻ കഴിയില്ല. <div>ചില സാഹചര്യങ്ങളിൽ, നിങ്ങളുടെ ഘടകത്തിന്റെ ഉള്ളടക്കം ക്ലാസിനൊപ്പം പൊതിയുക എന്നതാണ് മതിയായ പരിഹാരമാർഗം .

സഹായ സാങ്കേതികവിദ്യകളുടെ അർത്ഥം അറിയിക്കുന്നു

സന്ദർഭോചിതമായ വർണ്ണങ്ങൾ പോലെ, വർണ്ണത്തിലൂടെ കൈമാറ്റം ചെയ്യപ്പെടുന്ന ഏതൊരു അർത്ഥവും പൂർണ്ണമായും അവതരണപരമല്ലാത്ത ഒരു ഫോർമാറ്റിൽ അറിയിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക.

ഐക്കൺ അടയ്ക്കുക

മോഡലുകളും അലേർട്ടുകളും പോലുള്ള ഉള്ളടക്കം നിരസിക്കാൻ പൊതുവായ ക്ലോസ് ഐക്കൺ ഉപയോഗിക്കുക.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

കാരറ്റ്സ്

ഡ്രോപ്പ്ഡൗൺ പ്രവർത്തനവും ദിശയും സൂചിപ്പിക്കാൻ കാരറ്റുകൾ ഉപയോഗിക്കുക. ഡ്രോപ്പ്അപ്പ് മെനുകളിൽ ഡിഫോൾട്ട് കാരറ്റ് സ്വയമേ റിവേഴ്സ് ആകുമെന്നത് ശ്രദ്ധിക്കുക .

<span class="caret"></span>

ദ്രുത ഫ്ലോട്ടുകൾ

ഒരു ക്ലാസ് ഉപയോഗിച്ച് ഒരു ഘടകം ഇടത്തോട്ടോ വലത്തോട്ടോ ഫ്ലോട്ട് ചെയ്യുക. !importantനിർദ്ദിഷ്ട പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ ഉൾപ്പെടുത്തിയിരിക്കുന്നു. ക്ലാസുകൾ മിക്സിനുകളായി ഉപയോഗിക്കാം.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

നവബാറുകളിൽ ഉപയോഗിക്കാനുള്ളതല്ല

നവബാറുകളിലെ ഘടകങ്ങൾ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് വിന്യസിക്കാൻ, ഉപയോഗിക്കുക .navbar-leftഅല്ലെങ്കിൽ .navbar-rightപകരം ഉപയോഗിക്കുക. വിശദാംശങ്ങൾക്ക് navbar ഡോക്‌സ് കാണുക.

കേന്ദ്ര ഉള്ളടക്ക ബ്ലോക്കുകൾ

ലേക്ക് ഒരു ഘടകം സജ്ജീകരിക്കുക display: blockവഴി കേന്ദ്രീകരിക്കുക margin. മിക്‌സിനായും ക്ലാസായും ലഭ്യമാണ്.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

ക്ലിയർഫിക്സ്

പാരന്റ് എലമെന്റിലേക്ക്float ചേർത്തുകൊണ്ട് s എളുപ്പത്തിൽ മായ്‌ക്കുക . നിക്കോളാസ് ഗല്ലഗെർ ജനപ്രിയമാക്കിയ മൈക്രോ ക്ലിയർഫിക്സ് ഉപയോഗിക്കുന്നു. മിക്സിയായും ഉപയോഗിക്കാം..clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

ഉള്ളടക്കം കാണിക്കുകയും മറയ്ക്കുകയും ചെയ്യുന്നു

ഉപയോഗവും ക്ലാസുകളും ഉപയോഗിച്ച് (സ്ക്രീൻ റീഡറുകൾക്ക് ഉൾപ്പെടെ) ഒരു ഘടകം കാണിക്കാനോ മറയ്ക്കാനോ നിർബന്ധിക്കുക . ദ്രുത ഫ്ലോട്ടുകൾ പോലെ, പ്രത്യേക വൈരുദ്ധ്യങ്ങൾ ഒഴിവാക്കാൻ ഈ ക്ലാസുകൾ ഉപയോഗിക്കുന്നു . ബ്ലോക്ക് ലെവൽ ടോഗിളിങ്ങിനായി മാത്രമേ അവ ലഭ്യമാകൂ. അവ മിക്സികളായും ഉപയോഗിക്കാം..show.hidden!important

.hideലഭ്യമാണ്, എന്നാൽ ഇത് എല്ലായ്‌പ്പോഴും സ്‌ക്രീൻ റീഡറുകളെ ബാധിക്കില്ല , കൂടാതെ v3.0.1-ൽ ഇത് ഒഴിവാക്കിയിരിക്കുന്നു . ഉപയോഗിക്കുക .hiddenഅല്ലെങ്കിൽ .sr-onlyപകരം.

കൂടാതെ, .invisibleഒരു ഘടകത്തിന്റെ ദൃശ്യപരത മാത്രം ടോഗിൾ ചെയ്യാൻ ഉപയോഗിക്കാനാകും, അതായത് displayഅത് പരിഷ്കരിച്ചിട്ടില്ല, ഘടകത്തിന് ഇപ്പോഴും പ്രമാണത്തിന്റെ ഒഴുക്കിനെ ബാധിക്കാം.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

സ്‌ക്രീൻ റീഡറും കീബോർഡ് നാവിഗേഷൻ ഉള്ളടക്കവും

ഉപയോഗിച്ച് സ്ക്രീൻ റീഡറുകൾ ഒഴികെ എല്ലാ ഉപകരണങ്ങളിലേക്കും ഒരു ഘടകം മറയ്ക്കുക .sr-only. .sr-onlyഎലമെന്റ് ഫോക്കസ് ചെയ്യുമ്പോൾ അത് വീണ്ടും കാണിക്കാൻ ഇതുമായി സംയോജിപ്പിക്കുക .sr-only-focusable(ഉദാ: കീബോർഡ് മാത്രമുള്ള ഉപയോക്താവ്). പ്രവേശനക്ഷമതയുള്ള മികച്ച രീതികൾ പിന്തുടരുന്നതിന് അത്യാവശ്യമാണ് . മിക്‌സിൻ ആയും ഉപയോഗിക്കാം.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

ചിത്രം മാറ്റിസ്ഥാപിക്കൽ

.text-hideഒരു ഘടകത്തിന്റെ ടെക്‌സ്‌റ്റ് ഉള്ളടക്കം പശ്ചാത്തല ഇമേജ് ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കാൻ സഹായിക്കുന്നതിന് ക്ലാസ് അല്ലെങ്കിൽ മിക്സിൻ ഉപയോഗിക്കുക .

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

വേഗത്തിലുള്ള മൊബൈൽ-സൗഹൃദ വികസനത്തിന്, മീഡിയ അന്വേഷണത്തിലൂടെ ഉപകരണം ഉപയോഗിച്ച് ഉള്ളടക്കം കാണിക്കുന്നതിനും മറയ്ക്കുന്നതിനും ഈ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുക. പ്രിന്റ് ചെയ്യുമ്പോൾ ഉള്ളടക്കം ടോഗിൾ ചെയ്യുന്നതിനുള്ള യൂട്ടിലിറ്റി ക്ലാസുകളും ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.

പരിമിതമായ അടിസ്ഥാനത്തിൽ ഇവ ഉപയോഗിക്കാൻ ശ്രമിക്കുക, ഒരേ സൈറ്റിന്റെ തികച്ചും വ്യത്യസ്തമായ പതിപ്പുകൾ സൃഷ്ടിക്കുന്നത് ഒഴിവാക്കുക. പകരം, ഓരോ ഉപകരണത്തിന്റെയും അവതരണത്തിന് അനുബന്ധമായി അവ ഉപയോഗിക്കുക.

ലഭ്യമായ ക്ലാസുകൾ

വ്യൂപോർട്ട് ബ്രേക്ക്‌പോയിന്റുകളിലുടനീളം ഉള്ളടക്കം ടോഗിൾ ചെയ്യുന്നതിന് ലഭ്യമായ ക്ലാസുകളുടെ ഒരൊറ്റയോ സംയോജനമോ ഉപയോഗിക്കുക.

	അധിക ചെറിയ ഉപകരണങ്ങൾഫോണുകൾ (<768px)	ചെറിയ ഉപകരണങ്ങൾടാബ്‌ലെറ്റുകൾ (≥768px)	ഇടത്തരം ഉപകരണങ്ങൾഡെസ്ക്ടോപ്പുകൾ (≥992px)	വലിയ ഉപകരണങ്ങൾഡെസ്ക്ടോപ്പുകൾ (≥1200px)
`.visible-xs-*`	ദൃശ്യമാണ്	മറച്ചിരിക്കുന്നു	മറച്ചിരിക്കുന്നു	മറച്ചിരിക്കുന്നു
`.visible-sm-*`	മറച്ചിരിക്കുന്നു	ദൃശ്യമാണ്	മറച്ചിരിക്കുന്നു	മറച്ചിരിക്കുന്നു
`.visible-md-*`	മറച്ചിരിക്കുന്നു	മറച്ചിരിക്കുന്നു	ദൃശ്യമാണ്	മറച്ചിരിക്കുന്നു
`.visible-lg-*`	മറച്ചിരിക്കുന്നു	മറച്ചിരിക്കുന്നു	മറച്ചിരിക്കുന്നു	ദൃശ്യമാണ്
`.hidden-xs`	മറച്ചിരിക്കുന്നു	ദൃശ്യമാണ്	ദൃശ്യമാണ്	ദൃശ്യമാണ്
`.hidden-sm`	ദൃശ്യമാണ്	മറച്ചിരിക്കുന്നു	ദൃശ്യമാണ്	ദൃശ്യമാണ്
`.hidden-md`	ദൃശ്യമാണ്	ദൃശ്യമാണ്	മറച്ചിരിക്കുന്നു	ദൃശ്യമാണ്
`.hidden-lg`	ദൃശ്യമാണ്	ദൃശ്യമാണ്	ദൃശ്യമാണ്	മറച്ചിരിക്കുന്നു

v3.2.0 മുതൽ, ഓരോ ബ്രേക്ക്‌പോയിന്റിനുമുള്ള ക്ലാസുകൾ മൂന്ന് വ്യതിയാനങ്ങളിലാണ് വരുന്നത്, ചുവടെ ലിസ്‌റ്റ് .visible-*-*ചെയ്‌തിരിക്കുന്ന ഓരോ CSS പ്രോപ്പർട്ടി മൂല്യത്തിനും ഒന്ന്.display

ക്ലാസുകളുടെ ഗ്രൂപ്പ്	സി.എസ്.എസ്`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

അതിനാൽ, അധിക ചെറിയ ( xs) സ്ക്രീനുകൾക്കായി, ലഭ്യമായ .visible-*-*ക്ലാസുകൾ ഇവയാണ്: .visible-xs-block, .visible-xs-inline, കൂടാതെ .visible-xs-inline-block.

ക്ലാസുകൾ .visible-xs, .visible-sm, .visible-md, .visible-lgഎന്നിവയും നിലവിലുണ്ട്, എന്നാൽ v3.2.0 മുതൽ ഒഴിവാക്കിയിരിക്കുന്നു . അനുബന്ധ ഘടകങ്ങൾ .visible-*-blockടോഗിൾ ചെയ്യുന്നതിനുള്ള അധിക പ്രത്യേക കേസുകൾ ഒഴികെ, അവ ഏകദേശം തുല്യമാണ് .<table>

പ്രിന്റ് ക്ലാസുകൾ

റെഗുലർ റെസ്‌പോൺസീവ് ക്ലാസുകൾക്ക് സമാനമായി, പ്രിന്റിനായി ഉള്ളടക്കം ടോഗിൾ ചെയ്യുന്നതിന് ഇവ ഉപയോഗിക്കുക.

ക്ലാസുകൾ	ബ്രൗസർ	അച്ചടിക്കുക
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	മറച്ചിരിക്കുന്നു	ദൃശ്യമാണ്
`.hidden-print`	ദൃശ്യമാണ്	മറച്ചിരിക്കുന്നു

ക്ലാസും .visible-printനിലവിലുണ്ട്, എന്നാൽ v3.2.0-ൽ ഇത് ഒഴിവാക്കിയിരിക്കുന്നു . അനുബന്ധ ഘടകങ്ങളുടെ .visible-print-blockഅധിക പ്രത്യേക കേസുകൾ ഒഴികെ, ഇത് ഏകദേശം തുല്യമാണ് .<table>

ടെസ്റ്റ് കേസുകൾ

പ്രതികരിക്കുന്ന യൂട്ടിലിറ്റി ക്ലാസുകൾ പരിശോധിക്കുന്നതിന് നിങ്ങളുടെ ബ്രൗസറിന്റെ വലുപ്പം മാറ്റുക അല്ലെങ്കിൽ വ്യത്യസ്ത ഉപകരണങ്ങളിൽ ലോഡ് ചെയ്യുക.

ഇതിൽ ദൃശ്യമാണ്...

നിങ്ങളുടെ നിലവിലെ വ്യൂപോർട്ടിൽ ഈ ഘടകം ദൃശ്യമാണെന്ന് പച്ച ചെക്ക്മാർക്കുകൾ സൂചിപ്പിക്കുന്നു .

അധിക ചെറുത് ✔ x-സ്മോളിൽ കാണാം

ചെറുത് ✔ ചെറുതായി കാണാം

ഇടത്തരം ✔ ഇടത്തരം ദൃശ്യം

വലിയ ✔ വലുതായി കാണാം

അധിക ചെറുതും ചെറുതും ✔ x- ചെറുതും ചെറുതുമായതിൽ ദൃശ്യം

ഇടത്തരവും വലുതും ✔ ഇടത്തരം, വലുത് എന്നിവയിൽ കാണാം

അധിക ചെറുതും ഇടത്തരം ✔ x- ചെറുതും ഇടത്തരവും ദൃശ്യം

ചെറുതും വലുതും ✔ ചെറുതും വലുതുമായവയിൽ കാണാം

അധിക ചെറുതും വലുതും ✔ x- ചെറുതും വലുതുമായതിൽ കാണാം

ചെറുതും ഇടത്തരവും ✔ ചെറുതും ഇടത്തരവുമായവയിൽ കാണാം

മറഞ്ഞിരിക്കുന്നു...

ഇവിടെ, പച്ച ചെക്ക്മാർക്കുകൾ നിങ്ങളുടെ നിലവിലെ വ്യൂപോർട്ടിൽ ഘടകം മറഞ്ഞിരിക്കുന്നതായും സൂചിപ്പിക്കുന്നു.

അധിക ചെറുത് ✔ x-സ്മോളിൽ മറച്ചിരിക്കുന്നു

ചെറുത് ✔ ചെറുതായി മറച്ചിരിക്കുന്നു

ഇടത്തരം ✔ ഇടത്തരം മറച്ചിരിക്കുന്നു

വലിയ ✔ വലുതായി മറച്ചിരിക്കുന്നു

അധിക ചെറുതും ചെറുതും ✔ x-ൽ മറച്ചിരിക്കുന്നു - ചെറുതും ചെറുതും

ഇടത്തരവും വലുതും ✔ ഇടത്തരം, വലുത് എന്നിവയിൽ മറച്ചിരിക്കുന്നു

അധിക ചെറുതും ഇടത്തരം ✔ x- ചെറുതും ഇടത്തരവും മറച്ചിരിക്കുന്നു

ചെറുതും വലുതും ✔ ചെറുതും വലുതുമായതിൽ മറച്ചിരിക്കുന്നു

അധിക ചെറുതും വലുതും ✔ x-ൽ ചെറുതും വലുതും മറച്ചിരിക്കുന്നു

ചെറുതും ഇടത്തരവും ✔ ചെറുതും ഇടത്തരവും മറച്ചിരിക്കുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS നിർമ്മിച്ചിരിക്കുന്നത് Less എന്നതിലാണ്, വേരിയബിളുകൾ, മിക്‌സിനുകൾ, CSS കംപൈൽ ചെയ്യുന്നതിനുള്ള ഫംഗ്‌ഷനുകൾ എന്നിവ പോലുള്ള അധിക പ്രവർത്തനങ്ങളുള്ള ഒരു പ്രീപ്രൊസസ്സർ. ഞങ്ങളുടെ കംപൈൽ ചെയ്ത CSS ഫയലുകൾക്ക് പകരം സോഴ്സ് ലെസ് ഫയലുകൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്നവർക്ക് ഫ്രെയിംവർക്കിലുടനീളം ഞങ്ങൾ ഉപയോഗിക്കുന്ന നിരവധി വേരിയബിളുകളും മിക്സിനുകളും ഉപയോഗിക്കാൻ കഴിയും.

ഗ്രിഡ് വേരിയബിളുകളും മിക്സിനുകളും ഗ്രിഡ് സിസ്റ്റം വിഭാഗത്തിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട് .

ബൂട്ട്സ്ട്രാപ്പ് കംപൈൽ ചെയ്യുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പ് കുറഞ്ഞത് രണ്ട് തരത്തിലെങ്കിലും ഉപയോഗിക്കാം: കംപൈൽ ചെയ്‌ത CSS അല്ലെങ്കിൽ സോഴ്‌സ് ലെസ് ഫയലുകൾ. കുറഞ്ഞ ഫയലുകൾ കംപൈൽ ചെയ്യുന്നതിന് , ആവശ്യമായ കമാൻഡുകൾ പ്രവർത്തിപ്പിക്കുന്നതിന് നിങ്ങളുടെ വികസന പരിസ്ഥിതി എങ്ങനെ സജ്ജീകരിക്കാം എന്നറിയാൻ ആരംഭിക്കുക എന്ന വിഭാഗം പരിശോധിക്കുക .

മൂന്നാം കക്ഷി കംപൈലേഷൻ ടൂളുകൾ ബൂട്ട്‌സ്‌ട്രാപ്പിനൊപ്പം പ്രവർത്തിച്ചേക്കാം, പക്ഷേ അവ ഞങ്ങളുടെ കോർ ടീം പിന്തുണയ്ക്കുന്നില്ല.

വേരിയബിളുകൾ

നിറങ്ങൾ, സ്‌പെയ്‌സിംഗ് അല്ലെങ്കിൽ ഫോണ്ട് സ്റ്റാക്കുകൾ പോലുള്ള പൊതുവായി ഉപയോഗിക്കുന്ന മൂല്യങ്ങൾ കേന്ദ്രീകരിക്കുന്നതിനും പങ്കിടുന്നതിനുമുള്ള ഒരു മാർഗമായി മുഴുവൻ പ്രോജക്‌റ്റിലുടനീളം വേരിയബിളുകൾ ഉപയോഗിക്കുന്നു. പൂർണ്ണമായ തകർച്ചയ്ക്ക്, കസ്റ്റമൈസർ കാണുക .

നിറങ്ങൾ

രണ്ട് വർണ്ണ സ്കീമുകൾ എളുപ്പത്തിൽ ഉപയോഗിക്കുക: ഗ്രേസ്കെയിൽ, സെമാന്റിക്. ഗ്രേസ്കെയിൽ നിറങ്ങൾ സാധാരണയായി ഉപയോഗിക്കുന്ന കറുപ്പ് ഷേഡുകളിലേക്ക് ദ്രുത പ്രവേശനം നൽകുന്നു, അർത്ഥവത്തായ സന്ദർഭോചിതമായ മൂല്യങ്ങൾക്ക് നൽകിയിരിക്കുന്ന വിവിധ നിറങ്ങൾ സെമാന്റിക് ഉൾക്കൊള്ളുന്നു.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

ഈ വർണ്ണ വേരിയബിളുകളിൽ ഏതെങ്കിലും അതേപടി ഉപയോഗിക്കുക അല്ലെങ്കിൽ നിങ്ങളുടെ പ്രോജക്റ്റിനായി കൂടുതൽ അർത്ഥവത്തായ വേരിയബിളുകളിലേക്ക് അവയെ വീണ്ടും അസൈൻ ചെയ്യുക.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

സ്കാർഫോൾഡിംഗ്

നിങ്ങളുടെ സൈറ്റിന്റെ അസ്ഥികൂടത്തിന്റെ പ്രധാന ഘടകങ്ങൾ വേഗത്തിൽ ഇഷ്‌ടാനുസൃതമാക്കുന്നതിനുള്ള ഒരുപിടി വേരിയബിളുകൾ.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

ലിങ്കുകൾ

ഒരു മൂല്യം മാത്രം ഉപയോഗിച്ച് ശരിയായ നിറത്തിൽ നിങ്ങളുടെ ലിങ്കുകൾ എളുപ്പത്തിൽ സ്റ്റൈൽ ചെയ്യുക.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

@link-hover-colorശരിയായ ഹോവർ നിറം സ്വയമേവ സൃഷ്‌ടിക്കുന്നതിന് Less-ൽ നിന്നുള്ള മറ്റൊരു ആകർഷണീയമായ ഉപകരണമായ ഒരു ഫംഗ്‌ഷൻ ഉപയോഗിക്കുന്നു എന്നത് ശ്രദ്ധിക്കുക . നിങ്ങൾക്ക് ഉപയോഗിക്കാം darken, lighten, saturateകൂടാതെ desaturate.

ടൈപ്പോഗ്രാഫി

കുറച്ച് ദ്രുത വേരിയബിളുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ടൈപ്പ്ഫേസ്, ടെക്‌സ്‌റ്റ് വലുപ്പം, ലീഡിംഗ് എന്നിവയും മറ്റും എളുപ്പത്തിൽ സജ്ജീകരിക്കുക. എളുപ്പമുള്ള ടൈപ്പോഗ്രാഫിക് മിക്സിനുകൾ നൽകുന്നതിന് ബൂട്ട്സ്ട്രാപ്പ് ഇവയും ഉപയോഗിക്കുന്നു.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

ഐക്കണുകൾ

നിങ്ങളുടെ ഐക്കണുകളുടെ ലൊക്കേഷനും ഫയൽനാമവും ഇഷ്ടാനുസൃതമാക്കുന്നതിനുള്ള രണ്ട് ദ്രുത വേരിയബിളുകൾ.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

ഘടകങ്ങൾ

ബൂട്ട്സ്ട്രാപ്പിൽ ഉടനീളമുള്ള ഘടകങ്ങൾ പൊതുവായ മൂല്യങ്ങൾ ക്രമീകരിക്കുന്നതിന് ചില ഡിഫോൾട്ട് വേരിയബിളുകൾ ഉപയോഗിക്കുന്നു. ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കുന്നവ ഇതാ.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

വെണ്ടർ മിക്സിനുകൾ

നിങ്ങളുടെ കംപൈൽ ചെയ്‌ത CSS-ൽ പ്രസക്തമായ എല്ലാ വെണ്ടർ പ്രിഫിക്‌സുകളും ഉൾപ്പെടുത്തി ഒന്നിലധികം ബ്രൗസറുകളെ പിന്തുണയ്‌ക്കാൻ സഹായിക്കുന്ന മിക്സിനുകളാണ് വെണ്ടർ മിക്സിനുകൾ.

പെട്ടി വലിപ്പം

ഒരൊറ്റ മിക്സിൻ ഉപയോഗിച്ച് നിങ്ങളുടെ ഘടകങ്ങളുടെ ബോക്സ് മോഡൽ പുനഃസജ്ജമാക്കുക. സന്ദർഭത്തിന്, മോസില്ലയിൽ നിന്നുള്ള സഹായകരമായ ഈ ലേഖനം കാണുക .

ഓട്ടോപ്രിഫിക്‌സറിന്റെ ആമുഖത്തോടെ v3.2.0 ആയി മിക്‌സിൻ ഒഴിവാക്കപ്പെട്ടു . ബാക്ക്വേർഡ്-കമ്പാറ്റിബിലിറ്റി സംരക്ഷിക്കാൻ, ബൂട്ട്സ്ട്രാപ്പ് v4 വരെ ബൂട്ട്സ്ട്രാപ്പ് മിക്സിൻ ആന്തരികമായി ഉപയോഗിക്കുന്നത് തുടരും.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

വൃത്താകൃതിയിലുള്ള മൂലകൾ

ഇന്ന് എല്ലാ ആധുനിക ബ്രൗസറുകളും നോൺ-പ്രിഫിക്‌സ് border-radiusപ്രോപ്പർട്ടിയെ പിന്തുണയ്ക്കുന്നു. അതുപോലെ, .border-radius()മിക്‌സിൻ ഇല്ല, എന്നാൽ ഒരു വസ്തുവിന്റെ ഒരു പ്രത്യേക വശത്ത് രണ്ട് കോണുകൾ വേഗത്തിൽ റൗണ്ട് ചെയ്യുന്നതിനുള്ള കുറുക്കുവഴികൾ ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഉൾപ്പെടുന്നു.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

ബോക്സ് (ഡ്രോപ്പ്) ഷാഡോകൾ

നിങ്ങളുടെ ടാർഗെറ്റ് പ്രേക്ഷകർ ഏറ്റവും പുതിയതും മികച്ചതുമായ ബ്രൗസറുകളും ഉപകരണങ്ങളും ഉപയോഗിക്കുന്നുണ്ടെങ്കിൽ, box-shadowപ്രോപ്പർട്ടി സ്വന്തമായി ഉപയോഗിക്കുന്നത് ഉറപ്പാക്കുക. നിങ്ങൾക്ക് പഴയ Android (pre-v4), iOS ഉപകരണങ്ങൾ (പ്രീ-ഐഒഎസ് 5) എന്നിവയ്‌ക്ക് പിന്തുണ ആവശ്യമാണെങ്കിൽ, ആവശ്യമായ പ്രിഫിക്‌സ് എടുക്കാൻ ഒഴിവാക്കിയ മിക്‌സിൻ ഉപയോഗിക്കുക.-webkit

സ്റ്റാൻഡേർഡ് പ്രോപ്പർട്ടിയെ പിന്തുണയ്‌ക്കാത്ത കാലഹരണപ്പെട്ട പ്ലാറ്റ്‌ഫോമുകളെ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഔദ്യോഗികമായി പിന്തുണയ്‌ക്കാത്തതിനാൽ, v3.1.0 മുതൽ മിക്‌സിൻ ഒഴിവാക്കിയിരിക്കുന്നു . ബാക്ക്വേർഡ്-കമ്പാറ്റിബിലിറ്റി സംരക്ഷിക്കാൻ, ബൂട്ട്സ്ട്രാപ്പ് v4 വരെ ബൂട്ട്സ്ട്രാപ്പ് മിക്സിൻ ആന്തരികമായി ഉപയോഗിക്കുന്നത് തുടരും.

നിങ്ങളുടെ ബോക്‌സ് ഷാഡോകളിൽ നിറങ്ങൾ ഉപയോഗിക്കുന്നത് ഉറപ്പാക്കുക, rgba()അതിനാൽ അവ പശ്ചാത്തലങ്ങളുമായി കഴിയുന്നത്ര തടസ്സമില്ലാതെ ലയിപ്പിക്കുക.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

സംക്രമണങ്ങൾ

ഫ്ലെക്സിബിലിറ്റിക്കായി ഒന്നിലധികം മിക്സിനുകൾ. എല്ലാ പരിവർത്തന വിവരങ്ങളും ഒന്ന് ഉപയോഗിച്ച് സജ്ജീകരിക്കുക, അല്ലെങ്കിൽ ആവശ്യാനുസരണം പ്രത്യേക കാലതാമസവും ദൈർഘ്യവും വ്യക്തമാക്കുക.

ഓട്ടോപ്രിഫിക്‌സറിന്റെ ആമുഖത്തോടെ v3.2.0 മുതൽ മിക്‌സിനുകൾ ഒഴിവാക്കിയിരിക്കുന്നു . ബാക്ക്വേർഡ്-കമ്പാറ്റിബിലിറ്റി സംരക്ഷിക്കാൻ, ബൂട്ട്സ്ട്രാപ്പ് v4 വരെ ബൂട്ട്സ്ട്രാപ്പ് മിക്സിനുകൾ ആന്തരികമായി ഉപയോഗിക്കുന്നത് തുടരും.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

രൂപാന്തരങ്ങൾ

ഏതെങ്കിലും ഒബ്ജക്റ്റ് തിരിക്കുക, സ്കെയിൽ ചെയ്യുക, വിവർത്തനം ചെയ്യുക (നീക്കുക), അല്ലെങ്കിൽ വളച്ചൊടിക്കുക.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

ആനിമേഷനുകൾ

CSS3-ന്റെ എല്ലാ ആനിമേഷൻ പ്രോപ്പർട്ടികൾ ഒരു ഡിക്ലറേഷനിലും മറ്റ് മിക്‌സിനുകളിലും വ്യക്തിഗത പ്രോപ്പർട്ടികൾക്കായി ഉപയോഗിക്കുന്നതിനുള്ള ഒരൊറ്റ മിക്‌സിൻ.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

അതാര്യത

എല്ലാ ബ്രൗസറുകൾക്കും അതാര്യത സജ്ജീകരിച്ച് IE8-ന് ഒരു filterഫാൾബാക്ക് നൽകുക.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ്

ഓരോ ഫീൽഡിലും ഫോം നിയന്ത്രണങ്ങൾക്കുള്ള സന്ദർഭം നൽകുക.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

നിരകൾ

ഒരൊറ്റ ഘടകത്തിനുള്ളിൽ CSS വഴി നിരകൾ സൃഷ്ടിക്കുക.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

ഗ്രേഡിയന്റ്സ്

ഏതെങ്കിലും രണ്ട് നിറങ്ങൾ എളുപ്പത്തിൽ പശ്ചാത്തല ഗ്രേഡിയന്റാക്കി മാറ്റുക. കൂടുതൽ വിപുലമായി ഒരു ദിശ സജ്ജീകരിക്കുക, മൂന്ന് നിറങ്ങൾ ഉപയോഗിക്കുക അല്ലെങ്കിൽ ഒരു റേഡിയൽ ഗ്രേഡിയന്റ് ഉപയോഗിക്കുക. ഒരൊറ്റ മിക്‌സിൻ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ആവശ്യമായ എല്ലാ പ്രിഫിക്‌സ്ഡ് വാക്യഘടനകളും ലഭിക്കും.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

നിങ്ങൾക്ക് ഒരു സ്റ്റാൻഡേർഡ് ടു-കളർ, ലീനിയർ ഗ്രേഡിയന്റിന്റെ കോണും വ്യക്തമാക്കാം:

#gradient > .directional(#333; #000; 45deg);

നിങ്ങൾക്ക് ഒരു ബാർബർ-സ്ട്രൈപ്പ് ശൈലിയിലുള്ള ഗ്രേഡിയന്റ് വേണമെങ്കിൽ, അതും എളുപ്പമാണ്. ഒരൊറ്റ നിറം വ്യക്തമാക്കുക, ഞങ്ങൾ ഒരു അർദ്ധസുതാര്യമായ വെള്ള വര ഓവർലേ ചെയ്യും.

#gradient > .striped(#333; 45deg);

മുൻഭാഗം ഉയർത്തി പകരം മൂന്ന് നിറങ്ങൾ ഉപയോഗിക്കുക. ആദ്യ നിറം, രണ്ടാമത്തെ നിറം, രണ്ടാമത്തെ നിറത്തിന്റെ കളർ സ്റ്റോപ്പ് (25% പോലെയുള്ള ഒരു ശതമാനം മൂല്യം), മൂന്നാമത്തെ നിറം എന്നിവ ഈ മിക്സിനുകൾ ഉപയോഗിച്ച് സജ്ജമാക്കുക:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

ഹെഡ്സ് അപ്പുകൾ! filterനിങ്ങൾക്ക് എപ്പോഴെങ്കിലും ഒരു ഗ്രേഡിയന്റ് നീക്കം ചെയ്യേണ്ടതുണ്ടെങ്കിൽ, നിങ്ങൾ ചേർത്തിട്ടുള്ള ഏതെങ്കിലും IE-നിർദ്ദിഷ്ടം നീക്കം ചെയ്യുന്നത് ഉറപ്പാക്കുക . .reset-filter()മിക്‌സിൻ ഉപയോഗിച്ച് നിങ്ങൾക്ക് അത് ചെയ്യാൻ കഴിയും background-image: none;.

യൂട്ടിലിറ്റി മിക്സിനുകൾ

ഒരു നിർദ്ദിഷ്ട ലക്ഷ്യമോ ടാസ്‌ക്കോ കൈവരിക്കുന്നതിന് ബന്ധമില്ലാത്ത CSS പ്രോപ്പർട്ടികൾ സംയോജിപ്പിക്കുന്ന മിക്സിനുകളാണ് യൂട്ടിലിറ്റി മിക്സിനുകൾ.

ക്ലിയർഫിക്സ്

class="clearfix"ഏതെങ്കിലും ഘടകത്തിലേക്ക് ചേർക്കുന്നത് മറക്കുക , പകരം .clearfix()ഉചിതമായിടത്ത് മിക്സിൻ ചേർക്കുക. നിക്കോളാസ് ഗല്ലഗറിൽ നിന്നുള്ള മൈക്രോ ക്ലിയർഫിക്സ് ഉപയോഗിക്കുന്നു .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

തിരശ്ചീന കേന്ദ്രീകരണം

ഏതെങ്കിലും ഘടകത്തെ അതിന്റെ പാരന്റിനുള്ളിൽ വേഗത്തിൽ കേന്ദ്രീകരിക്കുക. ആവശ്യമാണ് widthഅല്ലെങ്കിൽ max-widthസജ്ജീകരിക്കേണ്ടതുണ്ട്.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

സൈസിംഗ് സഹായികൾ

ഒരു വസ്തുവിന്റെ അളവുകൾ കൂടുതൽ എളുപ്പത്തിൽ വ്യക്തമാക്കുക.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

വലുപ്പം മാറ്റാവുന്ന ടെക്‌സ്‌റ്റേറിയങ്ങൾ

ഏതെങ്കിലും ടെക്‌സ്‌റ്റേരിയയ്‌ക്കോ മറ്റേതെങ്കിലും ഘടകത്തിനോ വേണ്ടി വലുപ്പം മാറ്റുന്നതിനുള്ള ഓപ്ഷനുകൾ എളുപ്പത്തിൽ കോൺഫിഗർ ചെയ്യുക. സാധാരണ ബ്രൗസർ സ്വഭാവത്തിലേക്കുള്ള ഡിഫോൾട്ടുകൾ ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

വാചകം വെട്ടിച്ചുരുക്കുന്നു

ഒരൊറ്റ മിക്‌സിൻ ഉപയോഗിച്ച് എലിപ്‌സിസ് ഉപയോഗിച്ച് ടെക്‌സ്‌റ്റ് എളുപ്പത്തിൽ ചുരുക്കുക. മൂലകത്തിന് blockഅല്ലെങ്കിൽ inline-blockലെവൽ ആവശ്യമാണ്.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

റെറ്റിന ചിത്രങ്ങൾ

രണ്ട് ഇമേജ് പാതകളും @1x ഇമേജ് അളവുകളും വ്യക്തമാക്കുക, ബൂട്ട്സ്ട്രാപ്പ് ഒരു @2x മീഡിയാ അന്വേഷണം നൽകും. നിങ്ങൾക്ക് സേവിക്കാൻ നിരവധി ചിത്രങ്ങൾ ഉണ്ടെങ്കിൽ, ഒരൊറ്റ മീഡിയ അന്വേഷണത്തിൽ നിങ്ങളുടെ റെറ്റിന ഇമേജ് CSS സ്വമേധയാ എഴുതുന്നത് പരിഗണിക്കുക.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

ബൂട്ട്‌സ്‌ട്രാപ്പ് നിർമ്മിച്ചിരിക്കുന്നത് കുറവിലാണ്, ഇതിന് ഒരു ഔദ്യോഗിക സാസ് പോർട്ടും ഉണ്ട് . ഞങ്ങൾ ഇത് ഒരു പ്രത്യേക GitHub ശേഖരത്തിൽ പരിപാലിക്കുകയും ഒരു കൺവേർഷൻ സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് അപ്ഡേറ്റുകൾ കൈകാര്യം ചെയ്യുകയും ചെയ്യുന്നു.

എന്താണ് ഉൾപ്പെടുത്തിയിരിക്കുന്നത്

സാസ് പോർട്ടിന് ഒരു പ്രത്യേക റിപ്പോ ഉള്ളതിനാൽ, കുറച്ച് വ്യത്യസ്തമായ പ്രേക്ഷകർക്ക് സേവനം നൽകുന്നതിനാൽ, പ്രോജക്റ്റിന്റെ ഉള്ളടക്കം പ്രധാന ബൂട്ട്സ്ട്രാപ്പ് പ്രോജക്റ്റിൽ നിന്ന് വളരെ വ്യത്യസ്തമാണ്. ഇത് സാസ് പോർട്ട് കഴിയുന്നത്ര സാസ് അധിഷ്ഠിത സിസ്റ്റങ്ങളുമായി പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കുന്നു.

പാത	വിവരണം
`lib/`	റൂബി ജെം കോഡ് (സാസ് കോൺഫിഗറേഷൻ, റെയിലുകൾ, കോമ്പസ് സംയോജനം)
`tasks/`	കൺവെർട്ടർ സ്‌ക്രിപ്‌റ്റുകൾ (അപ്‌സ്ട്രീം കുറച്ച് സാസിലേക്ക് തിരിയുന്നു)
`test/`	കംപൈലേഷൻ ടെസ്റ്റുകൾ
`templates/`	കോമ്പസ് പാക്കേജ് മാനിഫെസ്റ്റ്
`vendor/assets/`	സാസ്, ജാവാസ്ക്രിപ്റ്റ്, ഫോണ്ട് ഫയലുകൾ
`Rakefile`	റാക്ക്, കൺവേർട് എന്നിവ പോലുള്ള ആന്തരിക ജോലികൾ

ഈ ഫയലുകൾ പ്രവർത്തനക്ഷമമായി കാണുന്നതിന് Sass പോർട്ടിന്റെ GitHub ശേഖരം സന്ദർശിക്കുക .

ഇൻസ്റ്റലേഷൻ

Sass-നുള്ള Bootstrap എങ്ങനെ ഇൻസ്റ്റാൾ ചെയ്യാം, ഉപയോഗിക്കണം എന്നതിനെക്കുറിച്ചുള്ള വിവരങ്ങൾക്ക്, GitHub repository readme പരിശോധിക്കുക . ഇത് ഏറ്റവും കാലികമായ ഉറവിടമാണ്, കൂടാതെ റെയിലുകൾ, കോമ്പസ്, സ്റ്റാൻഡേർഡ് സാസ് പ്രോജക്റ്റുകൾ എന്നിവയ്‌ക്കൊപ്പം ഉപയോഗിക്കുന്നതിനുള്ള വിവരങ്ങൾ ഉൾപ്പെടുന്നു.

സാസിനുള്ള ബൂട്ട്സ്ട്രാപ്പ്

സി.എസ്.എസ്

അവലോകനം

HTML5 ഡോക്‌ടൈപ്പ്

ആദ്യം മൊബൈൽ

ടൈപ്പോഗ്രാഫിയും ലിങ്കുകളും

Normalize.css

കണ്ടെയ്നറുകൾ

ഗ്രിഡ് സിസ്റ്റം

ആമുഖം

മാധ്യമങ്ങളുടെ ചോദ്യങ്ങൾ

ഗ്രിഡ് ഓപ്ഷനുകൾ

ഉദാഹരണം: സഞ്ചിത-തിരശ്ചീനമായി

ഉദാഹരണം: ദ്രാവക കണ്ടെയ്നർ

ഉദാഹരണം: മൊബൈലും ഡെസ്ക്ടോപ്പും

ഉദാഹരണം: മൊബൈൽ, ടാബ്‌ലെറ്റ്, ഡെസ്ക്ടോപ്പ്

ഉദാഹരണം: കോളം പൊതിയൽ

പ്രതികരിക്കുന്ന കോളം റീസെറ്റുകൾ

ഗട്ടറുകൾ നീക്കം ചെയ്യുക

നിരകൾ ഓഫ്‌സെറ്റ് ചെയ്യുന്നു

നെസ്റ്റിംഗ് നിരകൾ

നിര ക്രമപ്പെടുത്തൽ

മിക്സിനുകളും വേരിയബിളുകളും കുറവാണ്

വേരിയബിളുകൾ

മിക്സിൻസ്

ഉദാഹരണ ഉപയോഗം

ടൈപ്പോഗ്രാഫി

തലക്കെട്ടുകൾ

h1. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

h2. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

h3. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

h4. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

h5. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

h6. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

h1. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

h2. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

h3. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

h4. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

h5. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

h6. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട് സെക്കൻഡറി ടെക്സ്റ്റ്

ബോഡി കോപ്പി

ലീഡ് ബോഡി കോപ്പി

കുറച്ച് കൊണ്ട് നിർമ്മിച്ചത്

ഇൻലൈൻ ടെക്സ്റ്റ് ഘടകങ്ങൾ

അടയാളപ്പെടുത്തിയ വാചകം

ഇല്ലാതാക്കിയ വാചകം

ടെക്‌സ്‌റ്റിലൂടെ സ്‌ട്രൈക്ക്‌ത്രൂ

വാചകം ചേർത്തു

അടിവരയിട്ട വാചകം

ചെറിയ വാചകം

ധീരമായ

ഇറ്റാലിക്സ്

ഇതര ഘടകങ്ങൾ

അലൈൻമെന്റ് ക്ലാസുകൾ

പരിവർത്തന ക്ലാസുകൾ

ചുരുക്കെഴുത്തുകൾ

അടിസ്ഥാന ചുരുക്കെഴുത്ത്

പ്രാരംഭവാദം

വിലാസങ്ങൾ

ബ്ലോക്ക്ക്വോട്ടുകൾ

ഡിഫോൾട്ട് ബ്ലോക്ക്ക്വോട്ട്

ബ്ലോക്ക്ക്വോട്ട് ഓപ്ഷനുകൾ

ഒരു ഉറവിടത്തിന് പേരിടുന്നു

ഇതര ഡിസ്പ്ലേകൾ

ലിസ്റ്റുകൾ

ഓർഡർ ചെയ്യാത്തത്

ഉത്തരവിട്ടു

ശൈലിയില്ലാത്തത്

ഇൻ ലൈൻ

വിവരണം

തിരശ്ചീന വിവരണം

സ്വയമേവ വെട്ടിച്ചുരുക്കൽ

കോഡ്

ഇൻ ലൈൻ

ഉപയോക്തൃ ഇൻപുട്ട്

അടിസ്ഥാന ബ്ലോക്ക്

വേരിയബിളുകൾ

സാമ്പിൾ ഔട്ട്പുട്ട്

പട്ടികകൾ

അടിസ്ഥാന ഉദാഹരണം

വരയുള്ള വരികൾ

ഡെമോ `:focus`സ്റ്റേറ്റ്

എന്നതിന്റെ ലിങ്ക് പ്രവർത്തനത്തെക്കുറിച്ചുള്ള മുന്നറിയിപ്പ്`<a>`

`.sr-only`മറഞ്ഞിരിക്കുന്ന ലേബലുകളുള്ള ഓപ്ഷണൽ ഐക്കണുകൾ