اصلي منځپانګې ته لاړ شئ
Check
په v5.2 کې نوی د سی ایس ایس متغیرونه، ځواب ویونکی آف کینوس، نوې اسانتیاوې، او نور ډیر څه! بوټسټپ

د بوټسټریپ سره ګړندي ، ځواب ویونکي سایټونه جوړ کړئ

ځواکمن، د توزیع وړ، او د ځانګړتیاوو څخه ډک فرنټ اینډ اوزار کټ. د Sass سره جوړ او تنظیم کړئ، د مخکې جوړ شوي گرډ سیسټم او اجزاو څخه کار واخلئ، او د ځواکمن جاواسکریپټ پلگ انونو سره پروژې ژوند ته راوړو.

npm i [email protected]
اسناد ولولئ

اوس مهال v5.2.1 · ډاونلوډ · v4.6.x سندونه · ټول خپرونه

په هر ډول چې تاسو غواړئ پیل کړئ

د بوټسټریپ سره سم ودانولو ته لاړ شئ — CDN وکاروئ ، د بسته بندۍ مدیر له لارې یې نصب کړئ ، یا د سرچینې کوډ ډاونلوډ کړئ.

د نصبولو اسناد ولولئ

د بسته بندۍ مدیر له لارې نصب کړئ

د بوټسټریپ سرچینې ساس او جاواسکریپټ فایلونه د npm ، RubyGems ، کمپوزر ، یا Meteor له لارې نصب کړئ. د بسته بندۍ اداره کولو کې اسناد یا زموږ بشپړ جوړ شوي سکریپټونه شامل نه دي. تاسو کولی شئ زموږ د npm ټیمپلیټ ریپو هم وکاروئ ترڅو ژر تر ژره د npm له لارې د بوټسټریپ پروژه رامینځته کړئ.

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

د نورو معلوماتو او اضافي کڅوړې مدیرانو لپاره زموږ د نصبولو اسناد ولولئ .

د CDN له لارې شامل کړئ

کله چې تاسو یوازې د بوټسټریپ تالیف شوي CSS یا JS شاملولو ته اړتیا لرئ ، تاسو کولی شئ jsDelivr وکاروئ . دا زموږ د ساده ګړندي پیل سره په عمل کې وګورئ ، یا د خپلې راتلونکې پروژې د پیل کولو لپاره مثالونه براوز کړئ. تاسو کولی شئ په جلا توګه پوپر او زموږ 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>

زموږ د پیل کولو لارښوونې ولولئ

زموږ د رسمي لارښودونو سره په نوې پروژه کې د بوټسټریپ سرچینې فایلونو په شمول یو کود ترلاسه کړئ.

ویبپاک پارسل ویټ

د ساس سره هرڅه تنظیم کړئ

بوټسټریپ د ماډلر او دودیز کولو وړ جوړښت لپاره ساس کاروي. یوازې هغه اجزا وارد کړئ چې تاسو ورته اړتیا لرئ، نړیوال اختیارونه لکه ګریډینټ او سیوري فعال کړئ، او زموږ د متغیرونو، نقشو، فنکشنونو او مکسینونو سره خپل CSS ولیکئ.

د دودیز کولو په اړه نور معلومات ترلاسه کړئ

د بوټسټریپ ټول ساس پکې شامل کړئ

یو سټایل شیټ وارد کړئ او تاسو زموږ د CSS د هرې ځانګړتیا سره ریس ته ځئ.

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

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

زموږ د نړیوال Sass اختیارونو په اړه نور معلومات ترلاسه کړئ .

هغه څه شامل کړئ چې تاسو ورته اړتیا لرئ

د بوټسټریپ دودیز کولو ترټولو اسانه لار — یوازې هغه سی ایس ایس پکې شامل کړئ چې تاسو ورته اړتیا لرئ.

// 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 متغیرونو سره په ریښتیني وخت کې جوړ او پراخ کړئ

بوټسټریپ 5 د هر ریلیز سره وده کوي ترڅو د نړیوال موضوع سټایلونو ، انفرادي برخو او حتی اسانتیاو لپاره د CSS متغیرونو څخه غوره ګټه پورته کړي. موږ د رنګونو، فونټ سټایلونو او نورو لپاره لسګونه متغیرونه په یوه :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 سره لیدنه وکړئ

په Bootstrap 5 کې نوی، زموږ اسانتیاوې اوس زموږ د Utility 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 پرته ځواکمن جاواسکریپټ پلگ ان

په اسانۍ سره د بدلولو وړ پټ عناصر، موډلونه او آف کینوس مینو، پاپ اوورونه او ټلیپونه، او نور ډیر څه اضافه کړئ - ټول د jQuery پرته. dataپه بوټسټریپ کې جاواسکریپټ HTML لومړی دی ، پدې معنی چې د پلگ ان اضافه کول د ځانګړتیاو اضافه کولو په څیر اسانه دي. نور کنټرول ته اړتیا لرئ؟ په برنامه توګه انفرادي پلگ انونه شامل کړئ.

د Bootstrap JavaScript په اړه نور معلومات ترلاسه کړئ

د ډاټا خاصیت API

ولې نور جاواسکریپټ ولیکئ کله چې تاسو HTML لیکلی شئ؟ د بوټسټریپ نږدې ټول جاواسکریپټ پلگ ان د لومړي درجې ډیټا API ځانګړتیاوي لري، تاسو ته اجازه درکوي یوازې د dataځانګړتیاو په اضافه کولو سره جاواسکریپټ وکاروئ.

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

زموږ د جاوا سکریپټ د ماډلونو په توګه او د پروګراماتي API کارولو په اړه نور معلومات زده کړئ .

د پلگ انونو جامع سیټ

بوټسټریپ یو درجن پلگ انونه وړاندې کوي چې تاسو کولی شئ په هره پروژه کې پریږدئ. دا ټول په یوځل کې پریږدئ، یا یوازې هغه انتخاب کړئ چې تاسو ورته اړتیا لرئ.

خبرتیا

خپلو کاروونکو ته د خبرتیا پیغامونه وښایاست او پټ کړئ.

تڼۍ

په برنامه توګه د بټونو لپاره فعال حالت کنټرول کړئ.

کاروسل

هرې پاڼې ته سلایډونه اضافه کړئ، په شمول د کراسفیډ ملاتړ.

سقوط

د منځپانګې ساحې پراخې او سقوط کړئ، یا موافقتونه جوړ کړئ.

ښکته کول

د لینکونو، کړنو، فورمو او نورو مینو جوړ کړئ.

موډل

خپلې پروژې ته انعطاف منونکي او ځواب ویونکي ډیالوګونه اضافه کړئ.

آفکانوس

په هره پاڼه کې پټ سایډ بارونه جوړ او بدل کړئ.

Popover

دودیز پوښښ جوړ کړئ. په پاپپر جوړ شوی.

scrollspy

د پاڼې سکرول پراساس په اتوماتيک ډول فعال نیوی لینکونه تازه کړئ.

ټب

د Bootstrap nav اجزاوو ته اجازه ورکړئ چې مینځپانګې بدل کړي.

توست

خپلو لیدونکو ته خبرتیاوې وښایاست او پټ کړئ.

وسیلې

د براوزر وسیلې د دودیز سره بدل کړئ. په پاپپر جوړ شوی.

دا د بوټسټریپ شبیهونو سره شخصي کړئ

Bootstrap Icons د خلاصې سرچینې SVG آئیکون کتابتون دی چې له 1,500 څخه ډیر ګلیفونه لري، په هر ریلیز کې نور اضافه شوي. دوی په هره پروژه کې د کار کولو لپاره ډیزاین شوي، ایا تاسو پخپله بوټسټریپ کاروئ یا نه. دوی د SVGs یا آیکون فونټونو په توګه وکاروئ — دواړه اختیارونه تاسو ته د ویکتور اندازه کول او د CSS له لارې اسانه تخصیص درکوي.

د بوټسټریپ عکسونه ترلاسه کړئ

د بوټسټریپ شبیه

دا د رسمي بوټسټریپ موضوعاتو سره خپل کړئ

بوټسټریپ د رسمي بوټسټریپ موضوعاتو بازار څخه د پریمیم موضوعاتو سره بلې کچې ته ورسوئ . موضوعات په بوټسټریپ کې د خپل پراخ شوي چوکاټ په توګه جوړ شوي، د نوي اجزاو او پلگ انونو، اسنادو، او پیاوړي جوړونې وسیلو سره بډایه دي.

د بوټسټریپ موضوعات وپلټئ

د بوټسټریپ موضوعات