പ്രോജക്റ്റിന്റെ അവലോകനം, അതിന്റെ ഉള്ളടക്കങ്ങൾ, ഒരു ലളിതമായ ടെംപ്ലേറ്റ് ഉപയോഗിച്ച് എങ്ങനെ ആരംഭിക്കാം.
ഡൗൺലോഡ് ചെയ്യുന്നതിന് മുമ്പ്, ഒരു കോഡ് എഡിറ്ററും (ഞങ്ങൾ സപ്ലൈം ടെക്സ്റ്റ് 2 ശുപാർശ ചെയ്യുന്നു ) കൂടാതെ HTML, CSS എന്നിവയെക്കുറിച്ചുള്ള കുറച്ച് പ്രവർത്തന പരിജ്ഞാനവും ഉണ്ടെന്ന് ഉറപ്പാക്കുക. ഞങ്ങൾ ഇവിടെ ഉറവിട ഫയലുകളിലൂടെ നടക്കില്ല, പക്ഷേ അവ ഡൗൺലോഡ് ചെയ്യാൻ ലഭ്യമാണ്. സമാഹരിച്ച ബൂട്ട്സ്ട്രാപ്പ് ഫയലുകൾ ഉപയോഗിച്ച് ആരംഭിക്കുന്നതിൽ ഞങ്ങൾ ശ്രദ്ധ കേന്ദ്രീകരിക്കും.
ആരംഭിക്കാനുള്ള ഏറ്റവും വേഗമേറിയ മാർഗം: ഞങ്ങളുടെ CSS, JS, ഇമേജുകൾ എന്നിവയുടെ സമാഹരിച്ചതും ചെറുതാക്കിയതുമായ പതിപ്പുകൾ നേടുക. ഡോക്സോ യഥാർത്ഥ ഉറവിട ഫയലുകളോ ഇല്ല.
GitHub-ൽ നിന്ന് നേരിട്ട് ഏറ്റവും പുതിയ പതിപ്പ് ഡൗൺലോഡ് ചെയ്ത് ഡോക്സിന്റെ ഒരു പ്രാദേശിക പകർപ്പിനൊപ്പം എല്ലാ CSS-നും JavaScript-നുമുള്ള യഥാർത്ഥ ഫയലുകൾ നേടുക.
ഡൗൺലോഡിനുള്ളിൽ നിങ്ങൾ ഇനിപ്പറയുന്ന ഫയൽ ഘടനയും ഉള്ളടക്കങ്ങളും കണ്ടെത്തും, പൊതുവായ അസറ്റുകൾ യുക്തിസഹമായി ഗ്രൂപ്പുചെയ്യുകയും സമാഹരിച്ചതും ചെറുതാക്കിയതുമായ വ്യതിയാനങ്ങൾ നൽകുകയും ചെയ്യുന്നു.
ഡൗൺലോഡ് ചെയ്തുകഴിഞ്ഞാൽ, (കംപൈൽ ചെയ്ത) ബൂട്ട്സ്ട്രാപ്പിന്റെ ഘടന കാണുന്നതിന് കംപ്രസ് ചെയ്ത ഫോൾഡർ അൺസിപ്പ് ചെയ്യുക. നിങ്ങൾ ഇതുപോലുള്ള ഒന്ന് കാണും:
ബൂട്ട്സ്ട്രാപ്പ് / ├── css / │ ├── ബൂട്ട്സ്ട്രാപ്പ് . css │ ├── ബൂട്ട്സ്ട്രാപ്പ് . മിനി . css ├── js / │ ├── ബൂട്ട്സ്ട്രാപ്പ് . js │ ├── ബൂട്ട്സ്ട്രാപ്പ് . മിനി . js ├── img / │ ├── glyphicons - halflings . png │ ├── glyphicons - halflings - white . png └── വായിക്കുക . എംഡി
ബൂട്ട്സ്ട്രാപ്പിന്റെ ഏറ്റവും അടിസ്ഥാന രൂപമാണിത്: ഏത് വെബ് പ്രോജക്റ്റിലും ദ്രുത ഡ്രോപ്പ്-ഇൻ ഉപയോഗത്തിനായി സമാഹരിച്ച ഫയലുകൾ. ഞങ്ങൾ സമാഹരിച്ച CSS ഉം JS ഉം നൽകുന്നു ( bootstrap.*
), അതുപോലെ സമാഹരിച്ചതും ചെറുതാക്കിയതുമായ CSS, JS ( bootstrap.min.*
) എന്നിവയും. ഇമേജ് ഫയലുകൾ പിഎൻജികൾ കംപ്രസ്സുചെയ്യുന്നതിനുള്ള Mac ആപ്പായ ImageOptim ഉപയോഗിച്ച് കംപ്രസ് ചെയ്യുന്നു.
എല്ലാ JavaScript പ്ലഗിന്നുകളിലും jQuery ഉൾപ്പെടുത്തണമെന്ന് ദയവായി ശ്രദ്ധിക്കുക.
ബൂട്ട്സ്ട്രാപ്പ് എല്ലാത്തരം കാര്യങ്ങൾക്കുമായി HTML, CSS, JS എന്നിവയാൽ സജ്ജീകരിച്ചിരിക്കുന്നു, എന്നാൽ ബൂട്ട്സ്ട്രാപ്പ് ഡോക്യുമെന്റേഷന്റെ മുകളിൽ ദൃശ്യമാകുന്ന ഒരുപിടി വിഭാഗങ്ങൾ ഉപയോഗിച്ച് അവയെ സംഗ്രഹിക്കാം .
തരവും പശ്ചാത്തലവും, ലിങ്ക് ശൈലികൾ, ഗ്രിഡ് സിസ്റ്റം, രണ്ട് ലളിതമായ ലേഔട്ടുകൾ എന്നിവ പുനഃസജ്ജമാക്കുന്നതിനുള്ള ബോഡിക്കുള്ള ആഗോള ശൈലികൾ.
ടൈപ്പോഗ്രാഫി, കോഡ്, ടേബിളുകൾ, ഫോമുകൾ, ബട്ടണുകൾ എന്നിവ പോലുള്ള സാധാരണ HTML ഘടകങ്ങൾക്കുള്ള ശൈലികൾ. വലിയ ചെറിയ ഐക്കൺ സെറ്റായ ഗ്ലിഫിക്കോണുകളും ഉൾപ്പെടുന്നു .
ടാബുകളും ഗുളികകളും, നവബാർ, അലേർട്ടുകൾ, പേജ് ഹെഡറുകൾ എന്നിവയും മറ്റും പോലുള്ള പൊതുവായ ഇന്റർഫേസ് ഘടകങ്ങൾക്കുള്ള അടിസ്ഥാന ശൈലികൾ.
ഘടകഭാഗങ്ങൾക്ക് സമാനമായി, ടൂൾടിപ്പുകൾ, പോപോവറുകൾ, മോഡലുകൾ എന്നിവയും മറ്റും പോലെയുള്ള സംവേദനാത്മക ഘടകങ്ങളാണ് ഈ Javascript പ്ലഗിനുകൾ.
ഘടകങ്ങളും ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിനുകളും ചേർന്ന് ഇനിപ്പറയുന്ന ഇന്റർഫേസ് ഘടകങ്ങൾ നൽകുന്നു :
ഭാവിയിലെ ഗൈഡുകളിൽ, കൂടുതൽ വിശദമായി നമുക്ക് ഈ ഘടകങ്ങളിലൂടെ വ്യക്തിഗതമായി നടന്നേക്കാം. അതുവരെ, അവ എങ്ങനെ ഉപയോഗിക്കാമെന്നും ഇഷ്ടാനുസൃതമാക്കാമെന്നും സംബന്ധിച്ച വിവരങ്ങൾക്കായി ഡോക്യുമെന്റേഷനിൽ ഇവ ഓരോന്നും നോക്കുക.
ഉള്ളടക്കത്തെക്കുറിച്ചുള്ള ഒരു ഹ്രസ്വ ആമുഖം വഴി, ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിക്കുന്നതിൽ നമുക്ക് ശ്രദ്ധ കേന്ദ്രീകരിക്കാം. അത് ചെയ്യുന്നതിന്, ഞങ്ങൾ ഫയൽ ഘടനയിൽ സൂചിപ്പിച്ച എല്ലാം ഉൾക്കൊള്ളുന്ന ഒരു അടിസ്ഥാന HTML ടെംപ്ലേറ്റ് ഉപയോഗിക്കും .
ഇപ്പോൾ, ഒരു സാധാരണ HTML ഫയൽ നോക്കുക :
- <!DOCTYPE html>
- <html>
- <തല>
- <title> ബൂട്ട്സ്ട്രാപ്പ് 101 ടെംപ്ലേറ്റ് </title>
- </head>
- <ശരീരം>
- <h1> ഹലോ, ലോകം! </h1>
- <script src = "https://code.jquery.com/jquery-latest.js" ></script>
- </body>
- </html>
ഇതൊരു ബൂട്ട്സ്ട്രാപ്പ് ചെയ്ത ടെംപ്ലേറ്റ് ആക്കുന്നതിന്, ഉചിതമായ CSS, JS ഫയലുകൾ ഉൾപ്പെടുത്തുക:
- <!DOCTYPE html>
- <html>
- <തല>
- <title> ബൂട്ട്സ്ട്രാപ്പ് 101 ടെംപ്ലേറ്റ് </title>
- <!-- ബൂട്ട്സ്ട്രാപ്പ് -->
- <link href = "css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <ശരീരം>
- <h1> ഹലോ, ലോകം! </h1>
- <script src = "https://code.jquery.com/jquery-latest.js" ></script>
- <script src = "js/bootstrap.min.js" ></script>
- </body>
- </html>
നിങ്ങൾ സജ്ജമായി! ആ രണ്ട് ഫയലുകൾ ചേർത്തുകൊണ്ട്, നിങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിച്ച് ഏത് സൈറ്റും ആപ്ലിക്കേഷനും വികസിപ്പിക്കാൻ കഴിയും.
കുറച്ച് ഉദാഹരണ ലേഔട്ടുകൾ ഉപയോഗിച്ച് അടിസ്ഥാന ടെംപ്ലേറ്റിന് അപ്പുറത്തേക്ക് നീങ്ങുക. ഈ ഉദാഹരണങ്ങൾ ആവർത്തിക്കാനും അവ അന്തിമഫലമായി ഉപയോഗിക്കാതിരിക്കാനും ഞങ്ങൾ ആളുകളെ പ്രോത്സാഹിപ്പിക്കുന്നു.
ഒരു പ്രാഥമിക സന്ദേശത്തിനായി ഒരു ഹീറോ യൂണിറ്റും പിന്തുണയ്ക്കുന്ന മൂന്ന് ഘടകങ്ങളും ഫീച്ചർ ചെയ്യുന്നു.
തടസ്സങ്ങളില്ലാത്ത ലിക്വിഡ് ലേഔട്ട് സൃഷ്ടിക്കുന്നതിന് ഞങ്ങളുടെ പുതിയ പ്രതികരിക്കുന്ന, ഫ്ലൂയിഡ് ഗ്രിഡ് സിസ്റ്റം ഉപയോഗിക്കുന്നു.
എല്ലാ ബൂട്ട്സ്ട്രാപ്പ് CSS ഉം ജാവാസ്ക്രിപ്റ്റും ഉൾപ്പെടുന്ന ഒരു ബെയർബോൺസ് HTML പ്രമാണം.
വിവരങ്ങൾ, ഉദാഹരണങ്ങൾ, കോഡ് സ്നിപ്പെറ്റുകൾ എന്നിവയ്ക്കായി ഡോക്സിലേക്ക് പോകുക, അല്ലെങ്കിൽ അടുത്ത കുതിച്ചുചാട്ടം നടത്തി വരാനിരിക്കുന്ന ഏതെങ്കിലും പ്രോജക്റ്റിനായി ബൂട്ട്സ്ട്രാപ്പ് ഇഷ്ടാനുസൃതമാക്കുക.
ബൂട്ട്സ്ട്രാപ്പ് ഡോക്സ് സന്ദർശിക്കുക ബൂട്ട്സ്ട്രാപ്പ് ഇഷ്ടാനുസൃതമാക്കുക