ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിച്ച് വേഗതയേറിയതും പ്രതികരിക്കുന്നതുമായ സൈറ്റുകൾ നിർമ്മിക്കുക
ശക്തവും വിപുലീകരിക്കാവുന്നതും ഫീച്ചർ നിറഞ്ഞതുമായ ഫ്രണ്ട്എൻഡ് ടൂൾകിറ്റ്. Sass ഉപയോഗിച്ച് നിർമ്മിക്കുകയും ഇഷ്ടാനുസൃതമാക്കുകയും ചെയ്യുക, പ്രീ-ബിൽറ്റ് ഗ്രിഡ് സിസ്റ്റവും ഘടകങ്ങളും പ്രയോജനപ്പെടുത്തുക, കൂടാതെ ശക്തമായ JavaScript പ്ലഗിനുകൾ ഉപയോഗിച്ച് പ്രോജക്റ്റുകൾക്ക് ജീവൻ നൽകുക.
ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിച്ച് നിർമ്മാണത്തിലേക്ക് നേരിട്ട് പോകുക-സിഡിഎൻ ഉപയോഗിക്കുക, പാക്കേജ് മാനേജർ വഴി ഇൻസ്റ്റാൾ ചെയ്യുക അല്ലെങ്കിൽ സോഴ്സ് കോഡ് ഡൗൺലോഡ് ചെയ്യുക.
npm, RubyGems, Composer അല്ലെങ്കിൽ Meteor വഴി Bootstrap-ന്റെ സോഴ്സ് Sass, JavaScript ഫയലുകൾ ഇൻസ്റ്റാൾ ചെയ്യുക. പാക്കേജ് മാനേജ് ചെയ്യുന്ന ഇൻസ്റ്റാളുകളിൽ ഡോക്യുമെന്റേഷനോ ഞങ്ങളുടെ പൂർണ്ണ ബിൽഡ് സ്ക്രിപ്റ്റുകളോ ഉൾപ്പെടുന്നില്ല. npm വഴി ഒരു ബൂട്ട്സ്ട്രാപ്പ് പ്രോജക്റ്റ് വേഗത്തിൽ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് ഞങ്ങളുടെ npm ടെംപ്ലേറ്റ് റിപ്പോ ഉപയോഗിക്കാനും കഴിയും .
<!-- CSS only --><linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"crossorigin="anonymous">
<!-- JavaScript Bundle with Popper --><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"crossorigin="anonymous"></script>
ഞങ്ങളുടെ ആരംഭിക്കുന്നതിനുള്ള ഗൈഡുകൾ വായിക്കുക
ഞങ്ങളുടെ ഔദ്യോഗിക ഗൈഡുകൾക്കൊപ്പം ഒരു പുതിയ പ്രോജക്റ്റിൽ ബൂട്ട്സ്ട്രാപ്പിന്റെ ഉറവിട ഫയലുകൾ ഉൾപ്പെടുത്തി മുന്നേറുക.
മോഡുലറും ഇഷ്ടാനുസൃതമാക്കാവുന്നതുമായ ആർക്കിടെക്ചറിനായി ബൂട്ട്സ്ട്രാപ്പ് സാസ് ഉപയോഗിക്കുന്നു. നിങ്ങൾക്ക് ആവശ്യമുള്ള ഘടകങ്ങൾ മാത്രം ഇറക്കുമതി ചെയ്യുക, ഗ്രേഡിയന്റുകളും ഷാഡോകളും പോലുള്ള ആഗോള ഓപ്ഷനുകൾ പ്രവർത്തനക്ഷമമാക്കുക, ഞങ്ങളുടെ വേരിയബിളുകൾ, മാപ്പുകൾ, ഫംഗ്ഷനുകൾ, മിക്സിനുകൾ എന്നിവ ഉപയോഗിച്ച് നിങ്ങളുടെ സ്വന്തം CSS എഴുതുക.
ഒരു സ്റ്റൈൽഷീറ്റ് ഇമ്പോർട്ടുചെയ്യുക, ഞങ്ങളുടെ CSS-ന്റെ എല്ലാ ഫീച്ചറുകളും ഉപയോഗിച്ച് നിങ്ങൾ മത്സരങ്ങളിൽ പങ്കെടുക്കുന്നു.
// Variable overrides first
$primary:#900;$enable-shadows:true;$prefix:"mo-";// Then import Bootstrap
@import"../node_modules/bootstrap/scss/bootstrap";
CSS വേരിയബിളുകൾ ഉപയോഗിച്ച് തത്സമയം നിർമ്മിക്കുകയും വിപുലീകരിക്കുകയും ചെയ്യുക
ആഗോള തീം ശൈലികൾ, വ്യക്തിഗത ഘടകങ്ങൾ, യൂട്ടിലിറ്റികൾ എന്നിവയ്ക്കായി CSS വേരിയബിളുകൾ മികച്ച രീതിയിൽ ഉപയോഗിക്കുന്നതിന് ഓരോ റിലീസിലും ബൂട്ട്സ്ട്രാപ്പ് 5 വികസിച്ചുകൊണ്ടിരിക്കുന്നു. വർണ്ണങ്ങൾ, ഫോണ്ട് ശൈലികൾ എന്നിവയ്ക്കും അതിലേറെ കാര്യങ്ങൾക്കുമായി ഞങ്ങൾ ഡസൻ കണക്കിന് വേരിയബിളുകൾ നൽകുന്നു :root. ഘടകങ്ങളിലും യൂട്ടിലിറ്റികളിലും, CSS വേരിയബിളുകൾ പ്രസക്തമായ ക്ലാസിലേക്ക് സ്കോപ്പ് ചെയ്യപ്പെടുകയും എളുപ്പത്തിൽ പരിഷ്ക്കരിക്കപ്പെടുകയും ചെയ്യും.
പുതിയ ശൈലികൾ എഴുതാൻ ഞങ്ങളുടെ ഏതെങ്കിലും ആഗോള :rootവേരിയബിളുകൾ ഉപയോഗിക്കുക. CSS വേരിയബിളുകൾ var(--bs-variableName)വാക്യഘടന ഉപയോഗിക്കുന്നു, അവ കുട്ടികളുടെ ഘടകങ്ങൾക്ക് പാരമ്പര്യമായി ലഭിക്കും.
ബൂട്ട്സ്ട്രാപ്പ് ഇഷ്ടാനുസൃതമാക്കാൻ ആഗോള, ഘടകം അല്ലെങ്കിൽ യൂട്ടിലിറ്റി ക്ലാസ് വേരിയബിളുകൾ അസാധുവാക്കുക. ഓരോ നിയമവും വീണ്ടും പ്രഖ്യാപിക്കേണ്ടതില്ല, ഒരു പുതിയ വേരിയബിൾ മൂല്യം മാത്രം.
ബൂട്ട്സ്ട്രാപ്പ് 5-ൽ പുതിയത്, ഞങ്ങളുടെ യൂട്ടിലിറ്റി API ആണ് ഇപ്പോൾ ഞങ്ങളുടെ യൂട്ടിലിറ്റികൾ സൃഷ്ടിക്കുന്നത് . വേഗത്തിലും എളുപ്പത്തിലും ഇഷ്ടാനുസൃതമാക്കാൻ കഴിയുന്ന ഒരു ഫീച്ചർ പായ്ക്ക് ചെയ്ത സാസ് മാപ്പായി ഞങ്ങൾ ഇത് നിർമ്മിച്ചു. ഏതെങ്കിലും യൂട്ടിലിറ്റി ക്ലാസുകൾ ചേർക്കുന്നതോ നീക്കം ചെയ്യുന്നതോ പരിഷ്ക്കരിക്കുന്നതോ ഒരിക്കലും എളുപ്പമായിരുന്നില്ല. യൂട്ടിലിറ്റികൾ റെസ്പോൺസീവ് ആക്കുക, കപട-ക്ലാസ് വേരിയന്റുകൾ ചേർക്കുക, അവയ്ക്ക് ഇഷ്ടാനുസൃത പേരുകൾ നൽകുക.
// Create and extend utilities with the Utility API
@import"bootstrap/scss/bootstrap";$utilities:map-merge($utilities,("cursor":(property:cursor,class:cursor,responsive:true,values:autopointergrab,)));
jQuery ഇല്ലാതെ ശക്തമായ JavaScript പ്ലഗിനുകൾ
ടോഗിൾ ചെയ്യാവുന്ന മറഞ്ഞിരിക്കുന്ന ഘടകങ്ങൾ, മോഡലുകൾ, ഓഫ്കാൻവാസ് മെനുകൾ, പോപോവറുകൾ, ടൂൾടിപ്പുകൾ എന്നിവയും മറ്റും എളുപ്പത്തിൽ ചേർക്കുക - എല്ലാം jQuery ഇല്ലാതെ. ബൂട്ട്സ്ട്രാപ്പിലെ JavaScript HTML-ആദ്യമാണ്, അതായത് പ്ലഗിനുകൾ ചേർക്കുന്നത് dataആട്രിബ്യൂട്ടുകൾ ചേർക്കുന്നത് പോലെ എളുപ്പമാണ്. കൂടുതൽ നിയന്ത്രണം വേണോ? വ്യക്തിഗത പ്ലഗിനുകൾ പ്രോഗ്രാമാറ്റിക് ആയി ഉൾപ്പെടുത്തുക.
നിങ്ങൾക്ക് HTML എഴുതാൻ കഴിയുമ്പോൾ കൂടുതൽ JavaScript എഴുതുന്നത് എന്തുകൊണ്ട്? dataബൂട്ട്സ്ട്രാപ്പിന്റെ മിക്കവാറും എല്ലാ JavaScript പ്ലഗിന്നുകളും ഒരു ഫസ്റ്റ് ക്ലാസ് ഡാറ്റ API ഫീച്ചർ ചെയ്യുന്നു, ആട്രിബ്യൂട്ടുകൾ ചേർത്തുകൊണ്ട് JavaScript ഉപയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു .
ബൂട്ട്സ്ട്രാപ്പ് ഒരു ഡസൻ പ്ലഗിനുകൾ അവതരിപ്പിക്കുന്നു, അത് നിങ്ങൾക്ക് ഏത് പ്രോജക്റ്റിലേക്കും ഡ്രോപ്പ് ചെയ്യാം. അവയെല്ലാം ഒറ്റയടിക്ക് ഇടുക, അല്ലെങ്കിൽ നിങ്ങൾക്ക് ആവശ്യമുള്ളവ മാത്രം തിരഞ്ഞെടുക്കുക.
ബൂട്ട്സ്ട്രാപ്പ് ഐക്കണുകൾ ഉപയോഗിച്ച് ഇത് വ്യക്തിഗതമാക്കുക
ബൂട്ട്സ്ട്രാപ്പ് ഐക്കണുകൾ 1,500-ലധികം ഗ്ലിഫുകൾ ഉൾക്കൊള്ളുന്ന ഒരു ഓപ്പൺ സോഴ്സ് എസ്വിജി ഐക്കൺ ലൈബ്രറിയാണ്, ഓരോ റിലീസിലും കൂടുതൽ ചേർക്കുന്നു. നിങ്ങൾ ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിച്ചാലും ഇല്ലെങ്കിലും, ഏത് പ്രോജക്റ്റിലും പ്രവർത്തിക്കാൻ അവ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നു. അവ SVG-കൾ അല്ലെങ്കിൽ ഐക്കൺ ഫോണ്ടുകളായി ഉപയോഗിക്കുക - രണ്ട് ഓപ്ഷനുകളും നിങ്ങൾക്ക് വെക്റ്റർ സ്കെയിലിംഗും CSS വഴി എളുപ്പത്തിൽ ഇഷ്ടാനുസൃതമാക്കലും നൽകുന്നു.
ഔദ്യോഗിക ബൂട്ട്സ്ട്രാപ്പ് തീമുകൾ ഉപയോഗിച്ച് ഇത് നിങ്ങളുടേതാക്കുക
ഔദ്യോഗിക ബൂട്ട്സ്ട്രാപ്പ് തീമുകൾ മാർക്കറ്റ്പ്ലെയ്സിൽ നിന്നുള്ള പ്രീമിയം തീമുകൾ ഉപയോഗിച്ച് ബൂട്ട്സ്ട്രാപ്പിനെ അടുത്ത ഘട്ടത്തിലേക്ക് കൊണ്ടുപോകുക . പുതിയ ഘടകങ്ങളും പ്ലഗിനുകളും ഡോക്യുമെന്റേഷനും ശക്തമായ ബിൽഡ് ടൂളുകളും കൊണ്ട് സമ്പുഷ്ടമായ, അതിന്റേതായ വിപുലീകൃത ചട്ടക്കൂടുകളായിട്ടാണ് തീമുകൾ ബൂട്ട്സ്ട്രാപ്പിൽ നിർമ്മിച്ചിരിക്കുന്നത്.