Source

ആമുഖം

jsDelivr ഉം ടെംപ്ലേറ്റ് സ്റ്റാർട്ടർ പേജും ഉപയോഗിച്ച് പ്രതികരിക്കുന്ന, മൊബൈൽ-ആദ്യ സൈറ്റുകൾ നിർമ്മിക്കുന്നതിനുള്ള ലോകത്തിലെ ഏറ്റവും ജനപ്രിയമായ ചട്ടക്കൂടായ Bootstrap ഉപയോഗിച്ച് ആരംഭിക്കുക.

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

നിങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് വേഗത്തിൽ ബൂട്ട്സ്ട്രാപ്പ് ചേർക്കാൻ നോക്കുകയാണോ? jsDelivr-ലെ ആളുകൾ സൗജന്യമായി നൽകുന്ന jsDelivr ഉപയോഗിക്കുക. ഒരു പാക്കേജ് മാനേജർ ഉപയോഗിക്കുന്നുണ്ടോ അല്ലെങ്കിൽ ഉറവിട ഫയലുകൾ ഡൗൺലോഡ് ചെയ്യേണ്ടതുണ്ടോ? ഡൗൺലോഡ് പേജിലേക്ക് പോകുക.

സി.എസ്.എസ്

ഞങ്ങളുടെ CSS ലോഡുചെയ്യുന്നതിന് മറ്റെല്ലാ സ്റ്റൈൽഷീറ്റുകളിലേക്കും സ്റ്റൈൽഷീറ്റ് പകർത്തി ഒട്ടിക്കുക <link>.<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

ജെ.എസ്

ഞങ്ങളുടെ പല ഘടകങ്ങളും പ്രവർത്തിക്കാൻ JavaScript ഉപയോഗിക്കേണ്ടതുണ്ട്. പ്രത്യേകമായി, അവർക്ക് jQuery , Popper.js , ഞങ്ങളുടെ സ്വന്തം JavaScript പ്ലഗിന്നുകൾ എന്നിവ ആവശ്യമാണ്. അവ പ്രവർത്തനക്ഷമമാക്കുന്നതിന്, ക്ലോസിംഗ് ടാഗിന് <script>തൊട്ടുമുമ്പ് നിങ്ങളുടെ പേജുകളുടെ അവസാനത്തോട് അടുത്ത് ഇനിപ്പറയുന്നവ സ്ഥാപിക്കുക. </body>jQuery ആദ്യം വരണം, തുടർന്ന് Popper.js, തുടർന്ന് ഞങ്ങളുടെ JavaScript പ്ലഗിനുകൾ.

ഞങ്ങൾ jQuery-യുടെ സ്ലിം ബിൽഡ് ഉപയോഗിക്കുന്നു , എന്നാൽ പൂർണ്ണ പതിപ്പും പിന്തുണയ്ക്കുന്നു.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

ഞങ്ങളുടെ bootstrap.bundle.jsഒപ്പം പോപ്പർbootstrap.bundle.min.js ഉൾപ്പെടുന്നു , പക്ഷേ jQuery അല്ല . ബൂട്ട്സ്ട്രാപ്പിൽ എന്താണ് ഉൾപ്പെടുത്തിയിരിക്കുന്നതെന്നതിനെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾക്ക്, ഞങ്ങളുടെ ഉള്ളടക്ക വിഭാഗം കാണുക.

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

സ്റ്റാർട്ടർ ടെംപ്ലേറ്റ്

നിങ്ങളുടെ പേജുകൾ ഏറ്റവും പുതിയ ഡിസൈൻ, ഡെവലപ്‌മെന്റ് സ്റ്റാൻഡേർഡുകൾ ഉപയോഗിച്ച് സജ്ജീകരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. അതിനർത്ഥം ഒരു HTML5 ഡോക്‌ടൈപ്പ് ഉപയോഗിക്കുകയും ശരിയായ പ്രതികരണ സ്വഭാവങ്ങൾക്കായി ഒരു വ്യൂപോർട്ട് മെറ്റാ ടാഗ് ഉൾപ്പെടുത്തുകയും ചെയ്യുന്നു. എല്ലാം ഒരുമിച്ച് ചേർക്കുക, നിങ്ങളുടെ പേജുകൾ ഇതുപോലെയായിരിക്കണം:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

മൊത്തത്തിലുള്ള പേജ് ആവശ്യകതകൾക്ക് നിങ്ങൾക്ക് വേണ്ടത് അത്രമാത്രം. നിങ്ങളുടെ സൈറ്റിന്റെ ഉള്ളടക്കവും ഘടകങ്ങളും ലേഔട്ട് ചെയ്യാൻ ആരംഭിക്കുന്നതിന് ലേഔട്ട് ഡോക്‌സ് അല്ലെങ്കിൽ ഞങ്ങളുടെ ഔദ്യോഗിക ഉദാഹരണങ്ങൾ സന്ദർശിക്കുക .

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

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

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

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

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

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 ഘടകങ്ങളിലേക്ക് അൽപ്പം കൂടുതൽ അഭിപ്രായമുള്ള റീസെറ്റുകൾ നൽകുന്നു.

സമൂഹം

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

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

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