ප්රධාන අන්තර්ගතය වෙත යන්න
Check
v5.2 හි අලුත් CSS විචල්‍යයන්, ප්‍රතිචාරාත්මක offcanvas, නව උපයෝගිතා, සහ තවත්! Bootstrap

Bootstrap සමඟ වේගවත්, ප්‍රතිචාරාත්මක අඩවි ගොඩනඟන්න

බලවත්, විස්තීරණ සහ විශේෂාංගවලින් පිරුණු ඉදිරිපස මෙවලම් කට්ටලය. Sass සමඟ ගොඩනඟා අභිරුචිකරණය කරන්න, පෙර ගොඩනඟන ලද ජාල පද්ධතිය සහ සංරචක භාවිතා කරන්න, සහ බලවත් ජාවාස්ක්‍රිප්ට් ප්ලගීන සමඟ ව්‍යාපෘති ජීවමාන කරන්න.

npm i [email protected]
ලේඛන කියවන්න

දැනට v5.2.1 · බාගත කරන්න · v4.6.x ලේඛන · සියලුම නිකුතු

ඔබට අවශ්ය ඕනෑම ආකාරයකින් ආරම්භ කරන්න

Bootstrap සමඟ ගොඩනැගීමට දකුණට පනින්න - CDN භාවිතා කරන්න, පැකේජ කළමනාකරු හරහා එය ස්ථාපනය කරන්න, නැතහොත් මූලාශ්‍ර කේතය බාගන්න.

ස්ථාපන ලේඛන කියවන්න

පැකේජ කළමනාකරු හරහා ස්ථාපනය කරන්න

Bootstrap හි මූලාශ්‍ර Sass සහ JavaScript ගොනු npm, RubyGems, Composer, හෝ Meteor හරහා ස්ථාපනය කරන්න. පැකේජ කළමනාකරණය කළ ස්ථාපනයන්හි ලේඛන හෝ අපගේ සම්පූර්ණ ගොඩනැගීමේ ස්ක්‍රිප්ට් ඇතුළත් නොවේ. npm හරහා Bootstrap ව්‍යාපෘතියක් ඉක්මනින් උත්පාදනය කිරීමට ඔබට අපගේ npm අච්චු රෙපෝ භාවිතා කළ හැක .

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

වැඩිදුර තොරතුරු සහ අමතර පැකේජ කළමනාකරුවන් සඳහා අපගේ ස්ථාපන ලේඛන කියවන්න .

CDN හරහා ඇතුලත් කරන්න

ඔබට Bootstrap හි සම්පාදනය කරන ලද CSS හෝ JS පමණක් ඇතුළත් කිරීමට අවශ්‍ය වූ විට, ඔබට jsDelivr භාවිතා කළ හැක . අපගේ සරල ඉක්මන් ආරම්භය සමඟ එය ක්‍රියාවෙන් බලන්න , නැතහොත් ඔබගේ මීළඟ ව්‍යාපෘතිය ජම්ප්ස්ටාට් කිරීමට උදාහරණ බ්‍රවුස් කරන්න. ඔබට Popper සහ අපගේ JS වෙන වෙනම ඇතුළත් කිරීමටද තෝරාගත හැක .

<!-- 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>

අපගේ ආරම්භක මාර්ගෝපදේශ කියවන්න

අපගේ නිල මඟපෙන්වන්නන් සමඟ නව ව්‍යාපෘතියක Bootstrap හි මූලාශ්‍ර ගොනු ඇතුළත් කිරීම සඳහා ඉදිරියට යන්න.

වෙබ්පැක් පාර්සලය වීට්

Sass සමඟ සෑම දෙයක්ම අභිරුචිකරණය කරන්න

මොඩියුලර් සහ අභිරුචිකරණය කළ හැකි ගෘහ නිර්මාණ ශිල්පයක් සඳහා Bootstrap Sass භාවිතා කරයි. ඔබට අවශ්‍ය සංරචක පමණක් ආයාත කරන්න, අනුක්‍රම සහ සෙවනැලි වැනි ගෝලීය විකල්ප සක්‍රීය කරන්න, සහ අපගේ විචල්‍ය, සිතියම්, ශ්‍රිත සහ මික්සින් සමඟ ඔබේම CSS ලියන්න.

අභිරුචිකරණය ගැන තව දැනගන්න

Bootstrap හි Sass සියල්ල ඇතුලත් කරන්න

එක් මෝස්තර පත්‍රිකාවක් ආයාත කරන්න, එවිට ඔබ අපගේ CSS හි සෑම විශේෂාංගයක් සමඟම තරඟ සඳහා පිටත් වේ.

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

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

අපගේ ගෝලීය Sass විකල්ප ගැන තව දැනගන්න .

ඔබට අවශ්ය දේ ඇතුළත් කරන්න

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 සමඟ Bootstrap භාවිතා කිරීම ගැන තව දැනගන්න .

CSS විචල්‍යයන් සමඟ තත්‍ය කාලීනව ගොඩනඟා දිගු කරන්න

ගෝලීය තේමා විලාසයන්, තනි සංරචක සහ උපයෝගිතා සඳහා පවා CSS විචල්‍යයන් වඩා හොඳින් භාවිතා කිරීම සඳහා Bootstrap 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 විචල්‍යයන් හරහා අභිරුචිකරණය කිරීම

ඔබ කැමති ආකාරයට Bootstrap අභිරුචිකරණය කිරීමට ගෝලීය, සංරචක හෝ උපයෝගිතා පන්ති විචල්‍යයන් අභිබවා යන්න. එක් එක් රීතිය නැවත ප්‍රකාශ කිරීමට අවශ්‍ය නැත, නව විචල්‍ය අගයක් පමණි.

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 හමුවන්න

Bootstrap 5 හි අලුත්, අපගේ උපයෝගිතා දැන් අපගේ Utility API මගින් ජනනය වේ. අපි එය ඉක්මනින් සහ පහසුවෙන් අභිරුචිකරණය කළ හැකි විශේෂාංගවලින් පිරුණු Sass සිතියමක් ලෙස ගොඩනඟමු. කිසියම් උපයෝගිතා පන්ති එකතු කිරීම, ඉවත් කිරීම හෝ වෙනස් කිරීම කිසි වි��ෙක පහසු නොවීය. උපයෝගිතා ප්‍රතිචාරාත්මක කරන්න, ව්‍යාජ පන්තියේ ප්‍රභේද එකතු කරන්න, සහ ඒවාට අභිරුචි නම් දෙන්න.

උපයෝගිතා ගැන තව දැනගන්න අභිරුචි කළ සංරචක ගවේෂණය කරන්න

සංරචක ඉක්මනින් අභිරුචිකරණය කරන්න
// 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 ප්ලගීන

ටොගල් කළ හැකි සැඟවුණු මූලද්‍රව්‍ය, මාදිලි සහ ඕෆ්කැන්වස් මෙනු, popovers සහ මෙවලම් ඉඟි, සහ තවත් බොහෝ දේ-සියල්ල jQuery නොමැතිව පහසුවෙන් එක් කරන්න. බූට්ස්ට්‍රැප් හි ජාවාස්ක්‍රිප්ට් HTML-පළමු වේ, එනම් ප්ලගීන එකතු කිරීම dataගුණාංග එකතු කිරීම තරම්ම පහසු ය. වැඩි පාලනයක් අවශ්‍යද? වැඩසටහන්මය වශයෙන් තනි ප්ලගීන ඇතුළත් කරන්න.

Bootstrap JavaScript ගැන තව දැනගන්න

දත්ත ගුණාංග API

ඔබට HTML ලිවිය හැකි විට වැඩිපුර JavaScript ලියන්නේ ඇයි? Bootstrap හි JavaScript ප්ලගීන සියල්ලම පාහේ ප්‍රථම පන්තියේ දත්ත API වලින් සමන්විත වන අතර, ඔබට dataඋපලක්ෂණ එකතු කිරීමෙන් 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 භාවිතා කිරීම ගැන තව දැනගන්න .

සවිස්තරාත්මක ප්ලගීන කට්ටලයක්

Bootstrap ඔබට ඕනෑම ව්‍යාපෘතියකට දැමිය හැකි ප්ලගීන දුසිමක් දක්වයි. ඒවා එකවර දමන්න, නැතහොත් ඔබට අවශ්‍ය ඒවා පමණක් තෝරන්න.

අනතුරු ඇඟවීම

ඔබගේ පරිශීලකයින්ට අනතුරු ඇඟවීමේ පණිවිඩ පෙන්වන්න සහ සඟවන්න.

බොත්තම

බොත්තම් සඳහා ක්රියාකාරී තත්ත්වය ක්රමලේඛනගතව පාලනය කරන්න.

කැරොසල්

crossfade සඳහා සහය ඇතුළුව, ඕනෑම පිටුවකට විනිවිදක දර්ශන එක් කරන්න.

හකුළන්න

අන්තර්ගතයේ ප්‍රදේශ පුළුල් කර හකුළන්න, නැතහොත් ඇකෝනියන් සාදන්න.

පතන

සබැඳි, ක්‍රියා, පෝරම සහ තවත් මෙනු සාදන්න.

මාදිලිය

ඔබේ ව්‍යාපෘතියට නම්‍යශීලී සහ ප්‍රතිචාරාත්මක සංවාද එක් කරන්න.

Offcanvas

සැඟවුණු පැති තීරු ඕනෑම පිටුවකට ගොඩනඟා ටොගල් කරන්න.

පොපෝවර්

අභිරුචි ආවරණ සාදන්න. පොපර් මත ගොඩනගා ඇත.

Scrollspy

පිටු අනුචලනය මත පදනම්ව සක්‍රිය නාවික සබැඳි ස්වයංක්‍රීයව යාවත්කාලීන කරන්න.

ටැබ්

Bootstrap nav සංරචක වලට අන්තර්ගතය ටොගල් කිරීමට ඉඩ දෙන්න.

ටෝස්ට්

ඔබගේ අමුත්තන්ට දැනුම්දීම් පෙන්වන්න සහ සඟවන්න.

මෙවලම් ඉඟිය

බ්‍රව්සර් මෙවලම් ඉඟි අභිරුචි ඒවා සමඟ ප්‍රතිස්ථාපනය කරන්න. පොපර් මත ගොඩනගා ඇත.

Bootstrap Icons සමඟ එය පුද්ගලීකරණය කරන්න

Bootstrap Icons යනු විවෘත මූලාශ්‍ර SVG නිරූපක පුස්තකාලයක් වන අතර, සෑම නිකුතුවකදීම තවත් එකතු කිරීම් සමඟ ග්ලිෆ් 1,500 කට වඩා ඇතුළත් වේ. ඒවා ඔබ Bootstrap භාවිතා කළත් නැතත් ඕනෑම ව්‍යාපෘතියක වැඩ කිරීමට සැලසුම් කර ඇත. ඒවා SVG හෝ අයිකන අකුරු ලෙස භාවිතා කරන්න - විකල්ප දෙකම ඔබට දෛශික පරිමාණය සහ CSS හරහා පහසු අභිරුචිකරණය ලබා දෙයි.

Bootstrap Icons ලබාගන්න

Bootstrap Icons

නිල Bootstrap Themes සමගින් එය ඔබගේ කරගන්න

නිල Bootstrap තේමා වෙළඳපොළෙන් වාරික තේමාවන් සමඟ Bootstrap මීලඟ මට්ටමට ගෙන යන්න . තේමාවන් Bootstrap මත ගොඩනගා ඇත්තේ ඔවුන්ගේම විස්තීරණ රාමු ලෙස, නව සංරචක සහ ප්ලගීන, ලියකියවිලි සහ බලවත් ගොඩනැගීමේ මෙවලම් වලින් පොහොසත් ය.

Bootstrap Themes බ්‍රවුස් කරන්න

බූට්ස්ට්‍රැප් තේමා