in English

ആമുഖം

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

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

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

സി.എസ്.എസ്

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

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

ജെ.എസ്

ഞങ്ങളുടെ പല ഘടകങ്ങളും പ്രവർത്തിക്കാൻ JavaScript ഉപയോഗിക്കേണ്ടതുണ്ട്. പ്രത്യേകമായി, അവർക്ക് jQuery , പോപ്പർ , കൂടാതെ ഞങ്ങളുടെ സ്വന്തം JavaScript പ്ലഗിന്നുകൾ എന്നിവ ആവശ്യമാണ്. ഞങ്ങൾ jQuery-യുടെ സ്ലിം ബിൽഡ് ഉപയോഗിക്കുന്നു , എന്നാൽ പൂർണ്ണ പതിപ്പും പിന്തുണയ്ക്കുന്നു.

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

ബണ്ടിൽ

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

വേർതിരിക്കുക

പ്രത്യേക സ്‌ക്രിപ്‌റ്റ് സൊല്യൂഷനുമായി പോകാൻ നിങ്ങൾ തീരുമാനിക്കുകയാണെങ്കിൽ, ആദ്യം പോപ്പർ വരണം (നിങ്ങൾ ടൂൾടിപ്പുകളോ പോപ്പോവറുകളോ ഉപയോഗിക്കുകയാണെങ്കിൽ), തുടർന്ന് ഞങ്ങളുടെ JavaScript പ്ലഗിനുകൾ.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

ഘടകങ്ങൾ

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

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

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

നിങ്ങളുടെ പേജുകൾ ഏറ്റവും പുതിയ ഡിസൈൻ, ഡെവലപ്‌മെന്റ് സ്റ്റാൻഡേർഡുകൾ ഉപയോഗിച്ച് സജ്ജീകരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. അതിനർത്ഥം ഒരു 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 ഘടകങ്ങളിലേക്ക് അൽപ്പം കൂടുതൽ അഭിപ്രായമുള്ള റീസെറ്റുകൾ നൽകുന്നു.

സമൂഹം

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

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

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

CSP-കളും ഉൾച്ചേർത്ത SVG-കളും

ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും ഉടനീളം സ്ഥിരമായും എളുപ്പത്തിലും ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്യുന്നതിനായി ഞങ്ങളുടെ CSS-ൽ ഉൾച്ചേർത്ത SVG-കൾ നിരവധി ബൂട്ട്‌സ്‌ട്രാപ്പ് ഘടകങ്ങളിൽ ഉൾപ്പെടുന്നു. കൂടുതൽ കർശനമായ CSP കോൺഫിഗറേഷനുകളുള്ള ഓർഗനൈസേഷനുകൾക്കായി , ഞങ്ങളുടെ ഉൾച്ചേർത്ത SVG-കളുടെ എല്ലാ സംഭവങ്ങളും ഞങ്ങൾ ഡോക്യുമെന്റ് ചെയ്തിട്ടുണ്ട് (ഇവയെല്ലാം മുഖേന പ്രയോഗിക്കുന്നു background-image) അതിനാൽ നിങ്ങൾക്ക് നിങ്ങളുടെ ഓപ്ഷനുകൾ കൂടുതൽ വിശദമായി അവലോകനം ചെയ്യാൻ കഴിയും.

കമ്മ്യൂണിറ്റി സംഭാഷണത്തെ അടിസ്ഥാനമാക്കി , നിങ്ങളുടെ സ്വന്തം കോഡ്ബേസിൽ ഇത് പരിഹരിക്കുന്നതിനുള്ള ചില ഓപ്‌ഷനുകളിൽ URL-കൾ പ്രാദേശികമായി ഹോസ്റ്റ് ചെയ്‌ത അസറ്റുകൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുക, ഇമേജുകൾ നീക്കം ചെയ്യുക, ഇൻലൈൻ ഇമേജുകൾ ഉപയോഗിക്കുക (എല്ലാ ഘടകങ്ങളിലും സാധ്യമല്ല), നിങ്ങളുടെ CSP പരിഷ്‌ക്കരിക്കുക എന്നിവ ഉൾപ്പെടുന്നു. നിങ്ങളുടെ സ്വന്തം സുരക്ഷാ നയങ്ങൾ ശ്രദ്ധാപൂർവ്വം അവലോകനം ചെയ്യുകയും ആവശ്യമെങ്കിൽ മുന്നോട്ടുള്ള ഒരു മികച്ച പാത തീരുമാനിക്കുകയും ചെയ്യുക എന്നതാണ് ഞങ്ങളുടെ ശുപാർശ.