ወደ ዋናው ይዘት ዝለል
Check
አዲስ በ v5.2 የሲኤስኤስ ተለዋዋጮች፣ ምላሽ ሰጪ ከሸራ፣ አዲስ መገልገያዎች እና ሌሎችም! ቡት ማሰሪያ

በBootstrap ፈጣን ምላሽ ሰጪ ጣቢያዎችን ይገንቡ

ኃይለኛ፣ ሊሰፋ የሚችል እና በባህሪ የታሸገ የፊት ለፊት መሣሪያ ስብስብ። በ Sass ይገንቡ እና ያብጁ፣ ቀድሞ የተሰራውን የፍርግርግ ስርዓት እና አካላትን ይጠቀሙ እና ፕሮጄክቶችን ከጃቫ ስክሪፕት ተሰኪዎች ጋር ህያው ያድርጉ።

npm i [email protected]
ሰነዶቹን ያንብቡ

በአሁኑ ጊዜ v5.2.1 · አውርድ · v4.6.x ሰነዶች · ሁሉም የተለቀቁ

በፈለከው መንገድ ጀምር

በ Bootstrap ወደ ግንባታ በቀጥታ ይዝለሉ - ሲዲኤን ይጠቀሙ፣ በጥቅል አስተዳዳሪ ይጫኑት ወይም የምንጭ ኮዱን ያውርዱ።

የመጫኛ ሰነዶችን ያንብቡ

በጥቅል አስተዳዳሪ በኩል ጫን

የ Bootstrap ምንጭ Sass እና JavaScript ፋይሎችን በ npm፣ RubyGems፣ Composer ወይም Meteor ይጫኑ። በጥቅል የሚተዳደሩ ጭነቶች ሰነዶችን ወይም ሙሉ የግንባታ ስክሪፕቶቻችንን አያካትቱም። የBootstrap ፕሮጀክትን በፍጥነት በ npm ለማመንጨት የእኛን npm አብነት repo መጠቀም ይችላሉ ።

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

ለተጨማሪ መረጃ እና ተጨማሪ የጥቅል አስተዳዳሪዎች የእኛን የመጫኛ ሰነዶች ያንብቡ ።

በሲዲኤን ያካትቱ

የ Bootstrapን የተቀናበረ 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>

ለመጀመር መመሪያዎቻችንን ያንብቡ

ከኦፊሴላዊ መመሪያዎቻችን ጋር በአዲስ ፕሮጀክት ውስጥ የ Bootstrap ምንጭ ፋይሎችን በማካተት ዝለል ያድርጉ።

የድር ጥቅል እሽግ Vite

ሁሉንም ነገር በ Sass ያብጁ

Bootstrap Sassን ለሞዱል እና ሊበጅ ለሚችል አርክቴክቸር ይጠቀማል። የሚያስፈልጓቸውን ክፍሎች ብቻ ያስመጡ፣ እንደ ቅልመት እና ጥላዎች ያሉ አለምአቀፍ አማራጮችን ያንቁ እና የራስዎን CSS በእኛ ተለዋዋጮች፣ ካርታዎች፣ ተግባራት እና ድብልቅ ነገሮች ይፃፉ።

ስለማበጀት የበለጠ ይረዱ

ሁሉንም የ Bootstrap's 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";

Bootstrapን በ Sass ስለመጠቀም የበለጠ ይረዱ ።

ከሲኤስኤስ ተለዋዋጮች ጋር በቅጽበት ይገንቡ እና ያራዝሙ

ቡትስትራፕ 5 የሲኤስኤስ ተለዋዋጮችን ለአለምአቀፍ ገጽታ ቅጦች፣ ለግለሰብ ክፍሎች እና ለመገልገያዎችም በተሻለ ሁኔታ ለመጠቀም በእያንዳንዱ ልቀት እየተሻሻለ ነው። ለቀለም፣ ለፎንት ስታይል እና ለሌሎችም በደርዘን የሚቆጠሩ ተለዋዋጮችን :rootበማንኛውም ቦታ ለመጠቀም ደረጃ እናቀርባለን። በክፍሎች እና በመገልገያዎች ላይ፣ የCSS ተለዋዋጮች ለሚመለከተው ክፍል የተቀመጡ እና በቀላሉ ሊሻሻሉ ይችላሉ።

ስለ CSS ተለዋዋጮች የበለጠ ይወቁ

የ CSS ተለዋዋጮችን በመጠቀም

አዳዲስ ቅጦችን ለመጻፍ ማናቸውንም ዓለም አቀፍ :rootተለዋዋጮችን ይጠቀሙ። የሲኤስኤስ ተለዋዋጮች 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);
}

በሲኤስኤስ ተለዋዋጮች ማበጀት።

ቡትስትራፕን ልክ እንደፈለጋችሁ ለማበጀት ሁለንተናዊ፣ አካል ወይም የመገልገያ ክፍል ተለዋዋጮችን ይሽሩ። እያንዳንዱን ደንብ እንደገና ማወጅ አያስፈልግም፣ አዲስ ተለዋዋጭ እሴት ብቻ።

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

አካላት፣ የዩቲሊቲ ኤፒአይን ያሟሉ

አዲስ በ Bootstrap 5፣ የእኛ መገልገያዎች አሁን በእኛ መገልገያ ኤፒአይ ነው የሚመነጩት ። በፍጥነት እና በቀላሉ ሊበጅ የሚችል በባህሪ የታሸገ የሳስ ካርታ ነው የገነባነው። ማንኛውንም የመገልገያ ክፍሎችን ማከል፣ ማስወገድ ወይም ማሻሻል ቀላል ሆኖ አያውቅም። መገልገያዎችን ምላሽ ሰጪ ያድርጉ፣ የውሸት-ክፍል ልዩነቶችን ያክሉ እና ብጁ ስሞችን ይስጧቸው።

ስለ መገልገያዎች የበለጠ ይወቁ ብጁ ክፍሎችን ያስሱ

ክፍሎችን በፍጥነት ያብጁ
// 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 ኤችቲኤምኤል-መጀመሪያ ነው፣ ይህ ማለት ፕለጊን ማከል ባህሪያትን እንደማከል ቀላል dataነው። ተጨማሪ ቁጥጥር ይፈልጋሉ? ነጠላ ተሰኪዎችን በፕሮግራም ያካትቱ።

ስለ Bootstrap JavaScript ተጨማሪ ይወቁ

የውሂብ መገለጫ ኤፒአይ

HTML መፃፍ ሲችሉ ለምን ተጨማሪ ጃቫ ስክሪፕት ይፃፉ? ከሞላ ጎደል ሁሉም የ Bootstrap ጃቫስክሪፕት ፕለጊኖች አንደኛ ደረጃ ዳታ ኤፒአይ አላቸው፣ ይህም 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>

ስለ ጃቫ ስክሪፕት እንደ ሞጁሎች እና ፕሮግራማዊ ኤፒአይ በመጠቀም የበለጠ ይወቁ ።

አጠቃላይ የተሰኪዎች ስብስብ

ቡትስትራፕ ወደ ማንኛውም ፕሮጀክት መጣል የሚችሏቸው ደርዘን ተሰኪዎችን ያሳያል። ሁሉንም በአንድ ጊዜ አስገባቸው፣ ወይም የሚፈልጉትን ብቻ ይምረጡ።

ማንቂያ

ለተጠቃሚዎችዎ የማንቂያ መልዕክቶችን አሳይ እና ደብቅ።

አዝራር

ለአዝራሮች ንቁውን ሁኔታ በፕሮግራማዊ መንገድ ይቆጣጠሩ።

ካሩሰል

የመሻገሪያ መሻገሪያ ድጋፍን ጨምሮ ተንሸራታች ትዕይንቶችን ወደ ማንኛውም ገጽ ያክሉ።

ሰብስብ

የይዘት ቦታዎችን ዘርጋ እና ሰብስብ ወይም አኮርዲዮን ይፍጠሩ።

ዝቅ በል

የአገናኞች፣ የእርምጃዎች፣ ቅጾች እና ተጨማሪ ምናሌዎችን ይፍጠሩ።

ሞዳል

በፕሮጀክትዎ ላይ ተለዋዋጭ እና ምላሽ ሰጪ መገናኛዎችን ያክሉ።

Offcanvas

የተደበቁ የጎን አሞሌዎችን ወደ ማንኛውም ገጽ ይገንቡ እና ይቀያይሩ።

ፖፖቨር

ብጁ ተደራቢዎችን ይፍጠሩ። በፖፐር ላይ የተገነባ.

Scrollspy

በገጽ ማሸብለል ላይ በመመስረት ንቁ የናቪ አገናኞችን በራስ-ሰር ያዘምኑ።

ትር

የ Bootstrap nav ክፍሎች ይዘቶችን እንዲቀይሩ ፍቀድ።

ቶስት

ለጎብኚዎችዎ ማሳወቂያዎችን አሳይ እና ደብቅ።

ጠቃሚ ምክር

የአሳሽ መሣሪያ ምክሮችን በብጁ ይተኩ። በፖፐር ላይ የተገነባ.

በBootstrap አዶዎች ግላዊ ያድርጉት

Bootstrap Icons ከ1,500 ግሊፍስ በላይ የሚያሳይ ክፍት ምንጭ SVG አዶ ቤተ-መጽሐፍት ነው፣ እያንዳንዱ ልቀት የበለጠ ይጨምራል። እርስዎ Bootstrapን እራስዎ ቢጠቀሙም ባይጠቀሙም በማንኛውም ፕሮጀክት ውስጥ እንዲሰሩ የተነደፉ ናቸው። እንደ SVGs ወይም የአዶ ቅርጸ-ቁምፊዎች ተጠቀምባቸው - ሁለቱም አማራጮች የቬክተር ልኬትን እና በ CSS በኩል ቀላል ማበጀትን ይሰጡሃል።

የ Bootstrap አዶዎችን ያግኙ

የማስነሻ አዶዎች

Make it yours with official Bootstrap Themes

Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.

Browse Bootstrap Themes

የማስነሻ ገጽታዎች