باز بدە بۆ ناوەڕۆکی سەرەکی
Check
نوێ لە v5.2 گۆڕاوەکانی CSS، ئۆفکانڤاسی وەڵامدەرەوە، سوودمەندییە نوێیەکان و زۆر شتی تر! بووتستراپ

بە Bootstrap سایتی خێرا و وەڵامدەرەوە دروست بکە

ئامرازەکانی پێشەوەی بەهێز و درێژکراوە و پڕ لە تایبەتمەندی. دروستکردن و خۆکارکردن لەگەڵ Sass، بەکارهێنانی سیستەم و پێکهاتەکانی تۆڕی پێش دروستکراو، و هێنانی پڕۆژەکان بە ژیان بە پێوەکراوەکانی بەهێزی جاڤاسکڕێپت.

npm i [email protected]
دۆکیومێنتەکان بخوێنەرەوە

لە ئێستادا v5.2.1 · دابەزاندن · v4.6.x docs · هەموو بڵاوکراوەکان

بە هەر شێوەیەک بتەوێت دەست پێ بکە

ڕاستەوخۆ باز بدە بۆ ناو بیناکردن بە Bootstrap-CDN بەکاربهێنە، لە ڕێگەی بەڕێوەبەری پاکێجەوە دایبمەزرێنە، یان کۆدی سەرچاوە دابەزێنە.

دۆکیومێنتەکانی دامەزراندن بخوێنەرەوە

لە ڕێگەی بەڕێوەبەری پاکێجەوە دامەزراندن

فایلەکانی Sass و JavaScript سەرچاوەی Bootstrap لە ڕێگەی npm، RubyGems، Composer، یان Meteor دامەزرێنە. دامەزراندنەکانی بەڕێوەبەرایەتی پاکێج بەڵگەنامەکان یان سکریپتی دروستکردنی تەواومان لەخۆناگرێت. هەروەها دەتوانن لە npm template repo ی ئێمە بەکاربهێنن بۆ ئەوەی بە خێرایی پڕۆژەیەکی Bootstrap لە ڕێگەی npm دروست بکەن.

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

بۆ زانیاری زیاتر و بەڕێوەبەری پاکێجی زیادە دۆکیومێنتەکانی دامەزراندنمان بخوێنەرەوە .

لە ڕێگەی CDN ەوە لەخۆ بگرە

کاتێک تەنها پێویستت بە CSS یان JS ی کۆکراوەی Bootstrap هەیە، دەتوانیت 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>

ڕێنماییەکانی دەستپێکردنمان بخوێنەرەوە

بازدانێک بەدەست بهێنە لەسەر خستنەڕووی فایلە سەرچاوەییەکانی Bootstrap لە پرۆژەیەکی نوێدا لەگەڵ ڕێنماییە فەرمییەکانمان.

وێبپاک پارو ڤیت

بە ساس هەموو شتێک بە خواستی خۆت دروست بکە

Bootstrap Sass بەکاردەهێنێت بۆ تەلارسازییەکی مۆدیۆلار و خۆکارانە. تەنها ئەو پێکهاتانە هاوردە بکە کە پێویستت پێیانە، هەڵبژاردەی جیهانی وەک گرادێنت و سێبەر چالاک بکە، و CSS ی خۆت بنووسە بە گۆڕاوەکان و نەخشە و فەنکشنەکان و میکسینەکانمان.

زیاتر بزانە دەربارەی خۆکارکردن

هەموو ساسەکانی Bootstrap لەخۆ بگرە

یەک ستایلشێت هاوردە بکە و بە هەموو تایبەتمەندییەکی CSS ـمانەوە بەرەو پێشبڕکێکان دەڕۆیت.

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

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

زیاتر بزانە دەربارەی بژاردە جیهانییەکانی ساسمان .

ئەوەی پێویستت پێیەتی لەخۆ بگرە

ئاسانترین ڕێگە بۆ خۆکارکردنی 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";

زیاتر بزانە دەربارەی بەکارهێنانی Bootstrap لەگەڵ Sass .

دروستکردن و درێژکردنەوەی لە کاتی ڕاستەقینەدا بە گۆڕاوەکانی CSS

بووتستراپ ٥ لەگەڵ هەر بڵاوکردنەوەیەکدا پەرەدەستێنێت بۆ باشتر بەکارهێنانی گۆڕاوەکانی 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

گۆڕاوە جیهانییەکان، پێکهاتەکان، یان پۆلی سوودمەندەکان جێبەجێ بکە بۆ ئەوەی 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 ـمانەوە دروست دەکرێن . ئێمە وەک نەخشەیەکی ساسی پڕ لە تایبەتمەندی دروستمان کردووە کە دەتوانرێت بە خێرایی و بە ئاسانی بەپێی خواستی خۆت دروستی بکرێت. هەرگیز زیادکردن، لابردنی، یان دەستکاریکردنی هیچ پۆلێکی سوودمەندی ئاسانتر نەبووە. سوودمەندیەکان بکە بە وەڵامدەرەوە، جۆرەکانی پۆلی ساختە زیاد بکە و ناوی تایبەتیان پێ بدە.

زیاتر بزانە دەربارەی خزمەتگوزارییەکان پێکهاتە تایبەتمەندەکان بگەڕێ

بە خێرایی پێکهاتەکان بەپێی خواستی خۆت دروست بکە
// 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. جاڤاسکڕێپت لە Bootstrap HTML-first ە، واتە زیادکردنی پێوەکراوەکان بەقەد زیادکردنی dataتایبەتمەندی ئاسانە. پێویستت بە کۆنترۆڵی زیاترە؟ بە شێوەیەکی بەرنامەیی تاکە پێوەکراوەکان لەخۆ بگرە.

زیاتر بزانە دەربارەی Bootstrap JavaScript

API ی تایبەتمەندی داتا

بۆچی زیاتر جاڤاسکڕێپت بنووسیت لە کاتێکدا دەتوانیت HTML بنووسیت؟ نزیکەی هەموو پێوەکراوەکانی جاڤاسکڕێپتی Bootstrap تایبەتمەندی 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 بەرنامەیی .

کۆمەڵە پێوەکراوەکانی گشتگیر

Bootstrap تایبەتمەندی دەیان پێوەکراو هەیە کە دەتوانیت بیخەیتە ناو هەر پرۆژەیەکەوە. بە یەکجار هەموویان بخەرە ناویەوە، یان تەنها ئەوانە هەڵبژێرە کە پێویستت پێیانە.

ئاگاداری

نامەی ئاگادارکردنەوە بۆ بەکارهێنەرانت پیشان بدە و بیشارەوە.

دوگمه‌

بە شێوەیەکی بەرنامەیی دۆخی چالاک بۆ دوگمەکان کۆنتڕۆڵ بکە.

کارۆسێل

زیادکردنی سلایدشۆ بۆ هەر لاپەڕەیەک، لەنێویاندا پشتگیری بۆ crossfade.

شکست هێنان

فراوانکردن و داڕمانی ناوچەکانی ناوەڕۆک، یان دروستکردنی ئەکۆردیۆن.

فرێدان

دروستکردنی مینیوی بەستەر و کردار و فۆڕم و زۆر شتی تر.

مۆداڵی

دیالۆگی نەرم و وەڵامدەرەوە زیاد بکە بۆ پڕۆژەکەت.

ئۆفکانڤاس

دروستکردن و گۆڕینی لایەنی شاراوە بۆ هەر لاپەڕەیەک.

پۆپۆڤەر

دروستکردنی سەرپۆشی تایبەت. لەسەر پۆپەر دروستکراوە.

سکڕۆڵسپی

بەستەرەکانی nav چالاک بە شێوەیەکی ئۆتۆماتیکی نوێ بکەنەوە بە پشتبەستن بە سکڕۆڵی لاپەڕە.

تاب

ڕێگە بە پێکهاتەکانی Bootstrap nav بدە ناوەڕۆکەکان بگۆڕن.

تۆست

ئاگادارکردنەوەکان پیشان بدە و بیشارەوە بۆ سەردانکەرەکانت.

ئامۆژگاری ئامرازەکان

ئامرازەکانی وێبگەڕ بگۆڕە بە ئامرازەکانی تایبەت. لەسەر پۆپەر دروستکراوە.

بە ئایکۆنی Bootstrap کەسایەتی بکە

Bootstrap Icons کتێبخانەی ئایکۆنی SVG سەرچاوە کراوەیە کە زیاتر لە 1500 گلیفی تێدایە، لەگەڵ زیادکردنی زیاتر لە هەر بڵاوکردنەوەیەکدا. ئەوان بۆ ئەوە دروستکراون کە لە هەر پرۆژەیەکدا کاربکەن، جا تۆ خودی Bootstrap بەکاربهێنیت یان نا. وەک SVG یان فۆنتەکانی ئایکۆن بەکاریان بهێنە-هەردوو هەڵبژاردنەکە پێوانەکردنی ڤێکتەری و خۆکارکردنی ئاسانت پێدەبەخشێت لە ڕێگەی CSS.

ئایکۆنی بووتستراپ بەدەست بهێنە

ئایکۆنەکانی بووتستراپ

بە تەوەرەکانی فەرمی Bootstrap بیکە بە هی خۆت

Bootstrap ببە بۆ ئاستی داهاتوو بە تەوەرەکانی پریمیۆم لە بازاڕی فەرمی Bootstrap Themes . تەوەرەکان لەسەر بووتستراپ وەک چوارچێوەی درێژکراوی خۆیان دروستکراون، دەوڵەمەندن بە پێکهاتە و پێوەکراوەکانی نوێ، بەڵگەنامە و ئامرازی بەهێزی دروستکردن.

گەڕان بەدوای تەوەرەکانی بووتستراپدا

تەوەرەکانی بووتستراپ