ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിച്ച് ആരംഭിക്കുക

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഒരു ശക്തമായ, ഫീച്ചർ പായ്ക്ക് ചെയ്ത ഫ്രണ്ട്‌എൻഡ് ടൂൾകിറ്റാണ്. പ്രോട്ടോടൈപ്പ് മുതൽ പ്രൊഡക്ഷൻ വരെ - മിനിറ്റുകൾക്കുള്ളിൽ എന്തും നിർമ്മിക്കുക.

ഈ പേജിൽ

പെട്ടെന്നുള്ള തുടക്കം

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പ്രൊഡക്ഷൻ-റെഡി CSS-ഉം JavaScript-ഉം CDN വഴി ഉൾപ്പെടുത്തിക്കൊണ്ട് ആരംഭിക്കുക. ഈ ബൂട്ട്‌സ്‌ട്രാപ്പ് കോഡ്‌പെൻ ഡെമോ ഉപയോഗിച്ച് ഇത് പ്രായോഗികമായി കാണുക .

index.htmlനിങ്ങളുടെ പ്രോജക്റ്റ് റൂട്ടിൽ ഒരു പുതിയ ഫയൽ സൃഷ്ടിക്കുക . മൊബൈൽ ഉപകരണങ്ങളിൽ ശരിയായ പ്രതികരണ സ്വഭാവത്തിന്<meta name="viewport"> ടാഗും ഉൾപ്പെടുത്തുക .
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```
ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS, JS എന്നിവ ഉൾപ്പെടുത്തുക. അടയ്‌ക്കുന്നതിന് മുമ്പ് ഞങ്ങളുടെ CSS-നുള്ള ടാഗും <link>ഞങ്ങളുടെ JavaScript ബണ്ടിലിനുള്ള ടാഗും (ഡ്രോപ്പ്‌ഡൗണുകൾ, പോപ്പറുകൾ, ടൂൾടിപ്പുകൾ എന്നിവ സ്ഥാപിക്കുന്നതിനുള്ള പോപ്പർ ഉൾപ്പെടെ ) ടാഗ് സ്ഥാപിക്കുക . ഞങ്ങളുടെ CDN ലിങ്കുകളെക്കുറിച്ച് കൂടുതലറിയുക .<head><script></body>
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>
```
നിങ്ങൾക്ക് പോപ്പറും ഞങ്ങളുടെ ജെഎസും വെവ്വേറെ ഉൾപ്പെടുത്താം. ഡ്രോപ്പ്‌ഡൗണുകളോ പോപോവറോ ടൂൾടിപ്പുകളോ ഉപയോഗിക്കാൻ നിങ്ങൾ ഉദ്ദേശിക്കുന്നില്ലെങ്കിൽ, പോപ്പർ ഉൾപ്പെടുത്താതെ കുറച്ച് കിലോബൈറ്റുകൾ ലാഭിക്കുക.
```
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
```
ഹലോ വേൾഡ്! നിങ്ങളുടെ ബൂട്ട്‌സ്‌ട്രാപ്പ് ചെയ്‌ത പേജ് കാണുന്നതിന് നിങ്ങൾ തിരഞ്ഞെടുത്ത ബ്രൗസറിൽ പേജ് തുറക്കുക. നിങ്ങളുടെ സ്വന്തം ലേഔട്ട് സൃഷ്ടിച്ച് ഡസൻ കണക്കിന് ഘടകങ്ങൾ ചേർത്തും ഞങ്ങളുടെ ഔദ്യോഗിക ഉദാഹരണങ്ങൾ ഉപയോഗിച്ചും ഇപ്പോൾ നിങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിച്ച് നിർമ്മിക്കാൻ തുടങ്ങാം .

CDN ലിങ്കുകൾ

റഫറൻസ് എന്ന നിലയിൽ, ഞങ്ങളുടെ പ്രാഥമിക CDN ലിങ്കുകൾ ഇതാ.

വിവരണം	URL
സി.എസ്.എസ്	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
ജെ.എസ്	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

ഉള്ളടക്ക പേജിൽ ലിസ്റ്റുചെയ്തിരിക്കുന്ന ഞങ്ങളുടെ ഏതെങ്കിലും അധിക ബിൽഡുകൾ ലഭ്യമാക്കുന്നതിനും നിങ്ങൾക്ക് CDN ഉപയോഗിക്കാവുന്നതാണ് .

അടുത്ത ഘട്ടങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിക്കുന്ന ചില പ്രധാനപ്പെട്ട ആഗോള പരിസ്ഥിതി ക്രമീകരണങ്ങളെക്കുറിച്ച് കുറച്ചുകൂടി വായിക്കുക .
ഞങ്ങളുടെ ഉള്ളടക്ക വിഭാഗത്തിലെ ബൂട്ട്‌സ്‌ട്രാപ്പിൽ എന്താണ് ഉൾപ്പെടുത്തിയിരിക്കുന്നതെന്നും ചുവടെയുള്ള JavaScript ആവശ്യമായ ഘടകങ്ങളുടെ ലിസ്റ്റും വായിക്കുക .
കുറച്ചുകൂടി ശക്തി വേണോ? പാക്കേജ് മാനേജർ വഴി ഉറവിട ഫയലുകൾ ഉൾപ്പെടുത്തി ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിച്ച് നിർമ്മിക്കുന്നത് പരിഗണിക്കുക .
ബൂട്ട്‌സ്‌ട്രാപ്പ് ഒരു മൊഡ്യൂളായി ഉപയോഗിക്കാൻ നോക്കുകയാണോ <script type="module">? ഒരു മൊഡ്യൂൾ വിഭാഗമായി ഞങ്ങളുടെ ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിക്കുന്നത് കാണുക.

JS ഘടകങ്ങൾ

ഞങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റും പോപ്പറും ഏതൊക്കെ ഘടകങ്ങൾക്ക് വ്യക്തമായി ആവശ്യമാണെന്ന് ജിജ്ഞാസയുണ്ടോ? താഴെയുള്ള ഷോ ഘടകങ്ങൾ ലിങ്ക് ക്ലിക്ക് ചെയ്യുക. പൊതുവായ പേജ് ഘടനയെക്കുറിച്ച് നിങ്ങൾക്ക് തീർച്ചയില്ലെങ്കിൽ, ഒരു ഉദാഹരണ പേജ് ടെംപ്ലേറ്റിനായി വായിക്കുന്നത് തുടരുക.

JavaScript ആവശ്യമുള്ള ഘടകങ്ങൾ കാണിക്കുക

പിരിച്ചുവിടാനുള്ള അലേർട്ടുകൾ
സ്റ്റേറ്റുകളും ചെക്ക്ബോക്സ്/റേഡിയോ പ്രവർത്തനവും ടോഗിൾ ചെയ്യുന്നതിനുള്ള ബട്ടണുകൾ
എല്ലാ സ്ലൈഡ് പെരുമാറ്റങ്ങൾക്കും നിയന്ത്രണങ്ങൾക്കും സൂചകങ്ങൾക്കുമുള്ള കറൗസൽ
ഉള്ളടക്കത്തിന്റെ ദൃശ്യപരത ടോഗിൾ ചെയ്യുന്നതിന് ചുരുക്കുക
പ്രദർശിപ്പിക്കുന്നതിനും സ്ഥാപിക്കുന്നതിനുമുള്ള ഡ്രോപ്പ്ഡൌണുകൾ ( പോപ്പറും ആവശ്യമാണ് )
പെരുമാറ്റം പ്രദർശിപ്പിക്കുന്നതിനും പൊസിഷനിംഗ് ചെയ്യുന്നതിനും സ്ക്രോൾ ചെയ്യുന്നതിനുമുള്ള മോഡലുകൾ
പ്രതികരിക്കുന്ന സ്വഭാവരീതികൾ നടപ്പിലാക്കുന്നതിനായി ഞങ്ങളുടെ കോലാപ്‌സ്, ഓഫ്‌കാൻവാസ് പ്ലഗിനുകൾ വിപുലീകരിക്കുന്നതിനുള്ള നവബാർ
ഉള്ളടക്ക പാളികൾ ടോഗിൾ ചെയ്യുന്നതിനായി ടാബ് പ്ലഗിൻ ഉപയോഗിച്ച് നവ്സ്
പെരുമാറ്റം പ്രദർശിപ്പിക്കുന്നതിനും പൊസിഷനിംഗ് ചെയ്യുന്നതിനും സ്ക്രോൾ ചെയ്യുന്നതിനുമുള്ള ഓഫ് ക്യാൻവാസുകൾ
സ്ക്രോൾ പെരുമാറ്റത്തിനും നാവിഗേഷൻ അപ്ഡേറ്റുകൾക്കുമായി സ്ക്രോൾസ്പൈ
പ്രദർശിപ്പിക്കുന്നതിനും ഡിസ്മിസ് ചെയ്യുന്നതിനുമുള്ള ടോസ്റ്റുകൾ
പ്രദർശിപ്പിക്കുന്നതിനും സ്ഥാപിക്കുന്നതിനുമുള്ള ടൂൾടിപ്പുകളും പോപ്പോവറുകളും ( പോപ്പർ ആവശ്യമാണ് )

പ്രധാനപ്പെട്ട ആഗോളതലങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഒരുപിടി പ്രധാനപ്പെട്ട ആഗോള ശൈലികളും ക്രമീകരണങ്ങളും ഉപയോഗിക്കുന്നു, ഇവയെല്ലാം ക്രോസ് ബ്രൗസർ ശൈലികളുടെ സാധാരണവൽക്കരണത്തിന് വേണ്ടി മാത്രമുള്ളതാണ്. നമുക്ക് മുങ്ങാം.

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

ബൂട്ട്‌സ്‌ട്രാപ്പിന് HTML5 ഡോക്‌ടൈപ്പിന്റെ ഉപയോഗം ആവശ്യമാണ്. അതില്ലാതെ, രസകരമായതും അപൂർണ്ണവുമായ ചില സ്റ്റൈലിംഗ് നിങ്ങൾ കാണും.

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

പ്രതികരിക്കുന്ന മെറ്റാ ടാഗ്

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

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

ദ്രുത ആരംഭത്തിൽ നിങ്ങൾക്ക് ഇതിന്റെ ഒരു ഉദാഹരണം പ്രവർത്തനത്തിൽ കാണാൻ കഴിയും .

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

CSS-ൽ കൂടുതൽ ലളിതമായ വലുപ്പത്തിനായി, ഞങ്ങൾ ആഗോള box-sizingമൂല്യം content-boxഎന്നതിലേക്ക് മാറ്റുന്നു border-box. paddingഇത് ഒരു ഘടകത്തിന്റെ അന്തിമ കമ്പ്യൂട്ട് ചെയ്ത വീതിയെ ബാധിക്കില്ലെന്ന് ഉറപ്പുനൽകുന്നു , എന്നാൽ ഇത് Google മാപ്‌സ്, Google കസ്റ്റം സെർച്ച് എഞ്ചിൻ എന്നിവ പോലുള്ള ചില മൂന്നാം കക്ഷി സോഫ്റ്റ്‌വെയറുകളിൽ പ്രശ്‌നമുണ്ടാക്കാം.

അപൂർവ സന്ദർഭങ്ങളിൽ നിങ്ങൾ അത് അസാധുവാക്കേണ്ടതുണ്ട്, ഇനിപ്പറയുന്നതുപോലുള്ള ഒന്ന് ഉപയോഗിക്കുക:

.selector-for-some-widget {
  box-sizing: content-box;
}

മുകളിലെ സ്‌നിപ്പറ്റ് ഉപയോഗിച്ച്, നെസ്റ്റഡ് എലമെന്റുകൾ-ഉൾപ്പെടെ ജനറേറ്റ് ചെയ്‌ത ഉള്ളടക്കം ::before, അതിനായി വ്യക്തമാക്കിയത് ::afterഅവകാശമാക്കും .box-sizing.selector-for-some-widget

CSS ട്രിക്കുകളിൽ ബോക്‌സ് മോഡലിനെക്കുറിച്ചും വലുപ്പത്തെക്കുറിച്ചും കൂടുതലറിയുക .

റീബൂട്ട് ചെയ്യുക

മെച്ചപ്പെട്ട ക്രോസ്-ബ്രൗസർ റെൻഡറിങ്ങിനായി, ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലുടനീളമുള്ള പൊരുത്തക്കേടുകൾ ശരിയാക്കാൻ ഞങ്ങൾ റീബൂട്ട് ഉപയോഗിക്കുന്നു , അതേസമയം സാധാരണ HTML ഘടകങ്ങളിലേക്ക് അൽപ്പം കൂടുതൽ അഭിപ്രായമുള്ള റീസെറ്റുകൾ നൽകുന്നു.

സമൂഹം

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ വികസനത്തെക്കുറിച്ച് കാലികമായി തുടരുക, ഈ സഹായകരമായ ഉറവിടങ്ങൾ ഉപയോഗിച്ച് കമ്മ്യൂണിറ്റിയിലേക്ക് എത്തിച്ചേരുക.

ഔദ്യോഗിക ബൂട്ട്സ്ട്രാപ്പ് ബ്ലോഗ് വായിച്ച് സബ്സ്ക്രൈബ് ചെയ്യുക .
ഞങ്ങളുടെ GitHub ചർച്ചകൾ ചോദിക്കുകയും പര്യവേക്ഷണം ചെയ്യുകയും ചെയ്യുക .
IRC-യിലെ സഹ ബൂട്ട്‌സ്ട്രാപ്പർമാരുമായി ചാറ്റ് ചെയ്യുക. irc.libera.chatസെർവറിൽ, ചാനലിൽ #bootstrap.
bootstrap-5സ്റ്റാക്ക് ഓവർഫ്ലോയിൽ (ടാഗ് ചെയ്‌തത് ) നടപ്പിലാക്കുന്നതിനുള്ള സഹായം കണ്ടെത്താം .
npm അല്ലെങ്കിൽ സമാനമായ ഡെലിവറി മെക്കാനിസങ്ങൾ bootstrapവഴി വിതരണം ചെയ്യുമ്പോൾ, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പ്രവർത്തനക്ഷമത പരിഷ്‌ക്കരിക്കുന്നതോ കൂട്ടിച്ചേർക്കുന്നതോ ആയ പാക്കേജുകളിൽ ഡവലപ്പർമാർ കീവേഡ് ഉപയോഗിക്കണം .

ഏറ്റവും പുതിയ ഗോസിപ്പുകൾക്കും ആകർഷകമായ സംഗീത വീഡിയോകൾക്കുമായി നിങ്ങൾക്ക് @getbootstrap Twitter- ൽ പിന്തുടരാനും കഴിയും .