مرکزی مواد پر جائیں۔
Check
v5.2 میں نیا CSS متغیرات، ریسپانسیو آف کینوس، نئی یوٹیلیٹیز، اور بہت کچھ! بوٹسٹریپ

بوٹسٹریپ کے ساتھ تیز، ذمہ دار سائٹس بنائیں

طاقتور، قابل توسیع، اور خصوصیت سے بھرے فرنٹ اینڈ ٹول کٹ۔ Sass کے ساتھ بنائیں اور اپنی مرضی کے مطابق بنائیں، پہلے سے بنائے گئے گرڈ سسٹم اور اجزاء کا استعمال کریں، اور طاقتور JavaScript پلگ ان کے ساتھ پروجیکٹس کو زندہ کریں۔

npm i [email protected]
دستاویزات پڑھیں

فی الحال v5.2.1 · ڈاؤن لوڈ · v4.6.x دستاویزات · تمام ریلیز

آپ جس طرح چاہیں شروع کریں۔

Bootstrap کے ساتھ عمارت میں سیدھے جائیں—CDN استعمال کریں، اسے پیکیج مینیجر کے ذریعے انسٹال کریں، یا سورس کوڈ ڈاؤن لوڈ کریں۔

انسٹالیشن دستاویزات پڑھیں

پیکیج مینیجر کے ذریعے انسٹال کریں۔

Bootstrap کے سورس Sass اور JavaScript فائلوں کو npm، RubyGems، Composer، یا Meteor کے ذریعے انسٹال کریں۔ پیکیج مینیجڈ انسٹالز میں دستاویزات یا ہماری مکمل تعمیر اسکرپٹ شامل نہیں ہوتی ہیں۔ آپ npm کے ذریعے بوٹسٹریپ پروجیکٹ کو تیزی سے بنانے کے لیے ہمارا npm ٹیمپلیٹ ریپو بھی استعمال کر سکتے ہیں ۔

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

مزید معلومات اور اضافی پیکیج مینیجرز کے لیے ہماری انسٹالیشن دستاویزات پڑھیں ۔

CDN کے ذریعے شامل کریں۔

جب آپ کو صرف Bootstrap کی مرتب کردہ 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>

ہماری شروعاتی گائیڈز پڑھیں

ہمارے آفیشل گائیڈز کے ساتھ ایک نئے پروجیکٹ میں بوٹسٹریپ کی سورس فائلوں کو شامل کرنے پر چھلانگ لگائیں۔

ویب پیک پارسل وائٹ

ساس کے ساتھ ہر چیز کو اپنی مرضی کے مطابق بنائیں

بوٹسٹریپ ماڈیولر اور حسب ضرورت فن تعمیر کے لیے ساس کا استعمال کرتا ہے۔ صرف وہی اجزاء درآمد کریں جن کی آپ کو ضرورت ہے، عالمی اختیارات جیسے گریڈیئنٹس اور شیڈو کو فعال کریں، اور ہمارے متغیرات، نقشوں، فنکشنز اور مکسنز کے ساتھ اپنا سی ایس ایس لکھیں۔

حسب ضرورت بنانے کے بارے میں مزید جانیں۔

بوٹسٹریپ کے تمام ساس کو شامل کریں۔

ایک اسٹائل شیٹ درآمد کریں اور آپ ہماری سی ایس ایس کی ہر خصوصیت کے ساتھ ریس میں شامل ہوں۔

// 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 متغیرات کا استعمال

نئی طرزیں لکھنے کے لیے ہمارے عالمی :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 کے ذریعہ تیار کی گئی ہیں ۔ ہم نے اسے خصوصیت سے بھرے 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 کے بغیر طاقتور جاوا اسکرپٹ پلگ ان

آسانی سے ٹوگل کرنے کے قابل پوشیدہ عناصر، ماڈلز اور آف کینوس مینو، پاپ اوور اور ٹول ٹپس، اور بہت کچھ شامل کریں—سب کچھ jQuery کے بغیر۔ بوٹسٹریپ میں جاوا اسکرپٹ ایچ ٹی ایم ایل فرسٹ ہے، جس کا مطلب ہے کہ پلگ ان کو شامل کرنا اتنا ہی آسان ہے جتنا کہ dataصفات کو شامل کرنا۔ مزید کنٹرول کی ضرورت ہے؟ پروگرام کے لحاظ سے انفرادی پلگ ان شامل کریں۔

Bootstrap JavaScript کے بارے میں مزید جانیں۔

ڈیٹا انتساب API

جب آپ HTML لکھ سکتے ہیں تو مزید جاوا اسکرپٹ کیوں لکھیں؟ بوٹسٹریپ کے تقریباً سبھی جاوا اسکرپٹ پلگ ان میں فرسٹ کلاس ڈیٹا 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 کے استعمال کے بارے میں مزید جانیں ۔

پلگ ان کا جامع سیٹ

بوٹسٹریپ میں درجن بھر پلگ ان ہیں جنہیں آپ کسی بھی پروجیکٹ میں چھوڑ سکتے ہیں۔ ان سب کو ایک ساتھ چھوڑ دیں، یا صرف اپنی ضرورت کا انتخاب کریں۔

الرٹ

اپنے صارفین کو الرٹ پیغامات دکھائیں اور چھپائیں۔

بٹن

بٹنوں کی فعال حالت کو پروگرام کے مطابق کنٹرول کریں۔

Carousel

کسی بھی صفحہ پر سلائیڈ شوز شامل کریں، بشمول کراس فیڈ کے لیے سپورٹ۔

گرنے

مواد کے علاقوں کو پھیلائیں اور سمیٹیں، یا ایکارڈینز بنائیں۔

نیچے گرجانا

لنکس، ایکشنز، فارمز وغیرہ کے مینیو بنائیں۔

موڈل

اپنے پروجیکٹ میں لچکدار اور ذمہ دار ڈائیلاگ شامل کریں۔

آف کینوس

کسی بھی صفحہ میں پوشیدہ سائڈبارز بنائیں اور ٹوگل کریں۔

پاپ اوور

حسب ضرورت اوورلیز بنائیں۔ پوپر پر بنایا گیا۔

اسکرول اسپی

صفحہ اسکرول کی بنیاد پر فعال نیوی لنکس کو خودکار طور پر اپ ڈیٹ کریں۔

ٹیب

Bootstrap nav اجزاء کو مواد کو ٹوگل کرنے کی اجازت دیں۔

ٹوسٹ

اپنے مہمانوں کو اطلاعات دکھائیں اور چھپائیں۔

ٹول ٹِپ

براؤزر ٹول ٹپس کو اپنی مرضی کے مطابق تبدیل کریں۔ پوپر پر بنایا گیا۔

اسے بوٹسٹریپ شبیہیں کے ساتھ ذاتی بنائیں

Bootstrap Icons ایک اوپن سورس SVG آئیکن لائبریری ہے جس میں 1,500 سے زیادہ گلائف شامل ہیں، ہر ریلیز میں مزید اضافہ کیا جاتا ہے۔ وہ کسی بھی پروجیکٹ میں کام کرنے کے لیے ڈیزائن کیے گئے ہیں، چاہے آپ خود بوٹسٹریپ استعمال کریں یا نہ کریں۔ انہیں SVGs یا آئیکون فونٹس کے طور پر استعمال کریں — دونوں اختیارات آپ کو CSS کے ذریعے ویکٹر اسکیلنگ اور آسان حسب ضرورت فراہم کرتے ہیں۔

بوٹسٹریپ شبیہیں حاصل کریں۔

بوٹسٹریپ شبیہیں

اسے آفیشل بوٹسٹریپ تھیمز کے ساتھ اپنا بنائیں

بوٹسٹریپ کو باضابطہ بوٹسٹریپ تھیمز مارکیٹ پلیس سے پریمیم تھیمز کے ساتھ اگلی سطح پر لے جائیں ۔ تھیمز بوٹسٹریپ پر ان کے اپنے توسیعی فریم ورک کے طور پر بنائے گئے ہیں، جو نئے اجزاء اور پلگ ان، دستاویزات، اور طاقتور تعمیراتی ٹولز سے بھرپور ہیں۔

بوٹسٹریپ تھیمز کو براؤز کریں۔

بوٹسٹریپ تھیمز