പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക
Check
v5.2-ൽ പുതിയത് CSS വേരിയബിളുകൾ, പ്രതികരിക്കുന്ന ഓഫ്‌കാൻവാസ്, പുതിയ യൂട്ടിലിറ്റികൾ എന്നിവയും അതിലേറെയും! ബൂട്ട്സ്ട്രാപ്പ്

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് വേഗതയേറിയതും പ്രതികരിക്കുന്നതുമായ സൈറ്റുകൾ നിർമ്മിക്കുക

ശക്തവും വിപുലീകരിക്കാവുന്നതും ഫീച്ചർ നിറഞ്ഞതുമായ ഫ്രണ്ട്‌എൻഡ് ടൂൾകിറ്റ്. Sass ഉപയോഗിച്ച് നിർമ്മിക്കുകയും ഇഷ്‌ടാനുസൃതമാക്കുകയും ചെയ്യുക, പ്രീ-ബിൽറ്റ് ഗ്രിഡ് സിസ്റ്റവും ഘടകങ്ങളും പ്രയോജനപ്പെടുത്തുക, കൂടാതെ ശക്തമായ JavaScript പ്ലഗിനുകൾ ഉപയോഗിച്ച് പ്രോജക്റ്റുകൾക്ക് ജീവൻ നൽകുക.

നിലവിൽ v5.2.1 · ഡൗൺലോഡ് · v4.6.x ഡോക്സ് · എല്ലാ റിലീസുകളും

നിങ്ങൾ ആഗ്രഹിക്കുന്ന രീതിയിൽ ആരംഭിക്കുക

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് നിർമ്മാണത്തിലേക്ക് നേരിട്ട് പോകുക-സിഡിഎൻ ഉപയോഗിക്കുക, പാക്കേജ് മാനേജർ വഴി ഇൻസ്റ്റാൾ ചെയ്യുക അല്ലെങ്കിൽ സോഴ്‌സ് കോഡ് ഡൗൺലോഡ് ചെയ്യുക.

ഇൻസ്റ്റലേഷൻ ഡോക്‌സ് വായിക്കുക

പാക്കേജ് മാനേജർ വഴി ഇൻസ്റ്റാൾ ചെയ്യുക

npm, RubyGems, Composer അല്ലെങ്കിൽ Meteor വഴി Bootstrap-ന്റെ സോഴ്സ് Sass, JavaScript ഫയലുകൾ ഇൻസ്റ്റാൾ ചെയ്യുക. പാക്കേജ് മാനേജ് ചെയ്യുന്ന ഇൻസ്റ്റാളുകളിൽ ഡോക്യുമെന്റേഷനോ ഞങ്ങളുടെ പൂർണ്ണ ബിൽഡ് സ്ക്രിപ്റ്റുകളോ ഉൾപ്പെടുന്നില്ല. npm വഴി ഒരു ബൂട്ട്‌സ്‌ട്രാപ്പ് പ്രോജക്‌റ്റ് വേഗത്തിൽ സൃഷ്‌ടിക്കാൻ നിങ്ങൾക്ക് ഞങ്ങളുടെ npm ടെംപ്ലേറ്റ് റിപ്പോ ഉപയോഗിക്കാനും കഴിയും .

npm install [email protected]
gem install bootstrap -v 5.2.1

കൂടുതൽ വിവരങ്ങൾക്കും അധിക പാക്കേജ് മാനേജർമാർക്കും ഞങ്ങളുടെ ഇൻസ്റ്റലേഷൻ ഡോക്‌സ് വായിക്കുക .

CDN വഴി ഉൾപ്പെടുത്തുക

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ കംപൈൽ ചെയ്‌ത CSS അല്ലെങ്കിൽ JS മാത്രം ഉൾപ്പെടുത്തേണ്ടിവരുമ്പോൾ, നിങ്ങൾക്ക് jsDelivr ഉപയോഗിക്കാം . ഞങ്ങളുടെ ലളിതമായ ദ്രുത ആരംഭം ഉപയോഗിച്ച് ഇത് പ്രവർത്തനക്ഷമമായി കാണുക , അല്ലെങ്കിൽ നിങ്ങളുടെ അടുത്ത പ്രോജക്റ്റ് ജമ്പ്സ്റ്റാർട്ട് ചെയ്യുന്നതിന് ഉദാഹരണങ്ങൾ ബ്രൗസ് ചെയ്യുക. പോപ്പറും ഞങ്ങളുടെ ജെഎസും വെവ്വേറെ ഉൾപ്പെടുത്താനും നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാം .

<!-- CSS only -->
<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">
<!-- JavaScript Bundle with Popper -->
<script src="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 മാത്രം ഉൾപ്പെടുത്തുക.

// Functions first
@import "../node_modules/bootstrap/scss/functions";

// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

Sass-നൊപ്പം ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിക്കുന്നതിനെക്കുറിച്ച് കൂടുതലറിയുക .

CSS വേരിയബിളുകൾ ഉപയോഗിച്ച് തത്സമയം നിർമ്മിക്കുകയും വിപുലീകരിക്കുകയും ചെയ്യുക

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

CSS വേരിയബിളുകളെക്കുറിച്ച് കൂടുതലറിയുക

CSS വേരിയബിളുകൾ ഉപയോഗിക്കുന്നു

പുതിയ ശൈലികൾ എഴുതാൻ ഞങ്ങളുടെ ഏതെങ്കിലും ആഗോള :rootവേരിയബിളുകൾ ഉപയോഗിക്കുക. CSS വേരിയബിളുകൾ var(--bs-variableName)വാക്യഘടന ഉപയോഗിക്കുന്നു, അവ കുട്ടികളുടെ ഘടകങ്ങൾക്ക് പാരമ്പര്യമായി ലഭിക്കും.

.component {
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-purple);
}

CSS വേരിയബിളുകൾ വഴി ഇഷ്ടാനുസൃതമാക്കൽ

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇഷ്ടാനുസൃതമാക്കാൻ ആഗോള, ഘടകം അല്ലെങ്കിൽ യൂട്ടിലിറ്റി ക്ലാസ് വേരിയബിളുകൾ അസാധുവാക്കുക. ഓരോ നിയമവും വീണ്ടും പ്രഖ്യാപിക്കേണ്ടതില്ല, ഒരു പുതിയ വേരിയബിൾ മൂല്യം മാത്രം.

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-gray-100);
}

.table {
  --bs-table-color: var(--bs-gray-600);
  --bs-table-bg: var(--bs-gray-100);
  --bs-table-border-color: transparent;
}

ഘടകങ്ങൾ, യൂട്ടിലിറ്റി API കാണുക

ബൂട്ട്‌സ്‌ട്രാപ്പ് 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: auto pointer grab,
    )
  )
);

jQuery ഇല്ലാതെ ശക്തമായ JavaScript പ്ലഗിനുകൾ

ടോഗിൾ ചെയ്യാവുന്ന മറഞ്ഞിരിക്കുന്ന ഘടകങ്ങൾ, മോഡലുകൾ, ഓഫ്‌കാൻവാസ് മെനുകൾ, പോപോവറുകൾ, ടൂൾടിപ്പുകൾ എന്നിവയും മറ്റും എളുപ്പത്തിൽ ചേർക്കുക - എല്ലാം jQuery ഇല്ലാതെ. ബൂട്ട്‌സ്‌ട്രാപ്പിലെ JavaScript HTML-ആദ്യമാണ്, അതായത് പ്ലഗിനുകൾ ചേർക്കുന്നത് dataആട്രിബ്യൂട്ടുകൾ ചേർക്കുന്നത് പോലെ എളുപ്പമാണ്. കൂടുതൽ നിയന്ത്രണം വേണോ? വ്യക്തിഗത പ്ലഗിനുകൾ പ്രോഗ്രാമാറ്റിക് ആയി ഉൾപ്പെടുത്തുക.

ബൂട്ട്സ്ട്രാപ്പ് ജാവാസ്ക്രിപ്റ്റിനെക്കുറിച്ച് കൂടുതലറിയുക

ഡാറ്റ ആട്രിബ്യൂട്ട് API

നിങ്ങൾക്ക് HTML എഴുതാൻ കഴിയുമ്പോൾ കൂടുതൽ JavaScript എഴുതുന്നത് എന്തുകൊണ്ട്? dataബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ മിക്കവാറും എല്ലാ JavaScript പ്ലഗിന്നുകളും ഒരു ഫസ്റ്റ് ക്ലാസ് ഡാറ്റ API ഫീച്ചർ ചെയ്യുന്നു, ആട്രിബ്യൂട്ടുകൾ ചേർത്തുകൊണ്ട് JavaScript ഉപയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു .

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
  </ul>
</div>

മൊഡ്യൂളുകളായി ഞങ്ങളുടെ JavaScript നെ കുറിച്ചും പ്രോഗ്രാമാറ്റിക് API ഉപയോഗിക്കുന്നതിനെ കുറിച്ചും കൂടുതലറിയുക .

പ്ലഗിനുകളുടെ സമഗ്രമായ സെറ്റ്

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഒരു ഡസൻ പ്ലഗിനുകൾ അവതരിപ്പിക്കുന്നു, അത് നിങ്ങൾക്ക് ഏത് പ്രോജക്റ്റിലേക്കും ഡ്രോപ്പ് ചെയ്യാം. അവയെല്ലാം ഒറ്റയടിക്ക് ഇടുക, അല്ലെങ്കിൽ നിങ്ങൾക്ക് ആവശ്യമുള്ളവ മാത്രം തിരഞ്ഞെടുക്കുക.


ബൂട്ട്സ്ട്രാപ്പ് ഐക്കണുകൾ ഉപയോഗിച്ച് ഇത് വ്യക്തിഗതമാക്കുക

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഐക്കണുകൾ 1,500-ലധികം ഗ്ലിഫുകൾ ഉൾക്കൊള്ളുന്ന ഒരു ഓപ്പൺ സോഴ്‌സ് എസ്‌വിജി ഐക്കൺ ലൈബ്രറിയാണ്, ഓരോ റിലീസിലും കൂടുതൽ ചേർക്കുന്നു. നിങ്ങൾ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ചാലും ഇല്ലെങ്കിലും, ഏത് പ്രോജക്റ്റിലും പ്രവർത്തിക്കാൻ അവ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു. അവ SVG-കൾ അല്ലെങ്കിൽ ഐക്കൺ ഫോണ്ടുകളായി ഉപയോഗിക്കുക - രണ്ട് ഓപ്ഷനുകളും നിങ്ങൾക്ക് വെക്റ്റർ സ്കെയിലിംഗും CSS വഴി എളുപ്പത്തിൽ ഇഷ്‌ടാനുസൃതമാക്കലും നൽകുന്നു.

ബൂട്ട്സ്ട്രാപ്പ് ഐക്കണുകൾ നേടുക

ബൂട്ട്സ്ട്രാപ്പ് ഐക്കണുകൾ

ഔദ്യോഗിക ബൂട്ട്സ്ട്രാപ്പ് തീമുകൾ ഉപയോഗിച്ച് ഇത് നിങ്ങളുടേതാക്കുക

ഔദ്യോഗിക ബൂട്ട്‌സ്‌ട്രാപ്പ് തീമുകൾ മാർക്കറ്റ്‌പ്ലെയ്‌സിൽ നിന്നുള്ള പ്രീമിയം തീമുകൾ ഉപയോഗിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പിനെ അടുത്ത ഘട്ടത്തിലേക്ക് കൊണ്ടുപോകുക . പുതിയ ഘടകങ്ങളും പ്ലഗിനുകളും ഡോക്യുമെന്റേഷനും ശക്തമായ ബിൽഡ് ടൂളുകളും കൊണ്ട് സമ്പുഷ്ടമായ, അതിന്റേതായ വിപുലീകൃത ചട്ടക്കൂടുകളായിട്ടാണ് തീമുകൾ ബൂട്ട്സ്ട്രാപ്പിൽ നിർമ്മിച്ചിരിക്കുന്നത്.

ബൂട്ട്‌സ്‌ട്രാപ്പ് തീമുകൾ ബ്രൗസ് ചെയ്യുക

ബൂട്ട്സ്ട്രാപ്പ് തീമുകൾ