ናብ ቀንዲ ትሕዝቶ ዘልል
Check
ሓድሽ ኣብ v5.2 CSS ተለዋዋጢ ረቛሒታት፣ ምላሽ ዝህቡ offcanvas፣ ሓደስቲ ዩቲሊቲታትን ካልእን! ቡትስትራፕ

ብቡትስትራፕ ቅልጡፍን ምላሽ ዝህቡን ሳይታት ምህናጽ

ሓያል፡ ዝዝርጋሕን ብባህርያት ዝተዓሸገን ናይ ቅድሚት መሳርሒ። ብሳስ ምህናጽን ምምዕርራይን፡ ቅድሚ ሕጂ ዝተሃንጸ ስርዓተ ሽቦን ኣካላትን ምጥቃም፡ ከምኡ’ውን ብሓያላት ጃቫስክሪፕት ፕላጊናት ንፕሮጀክትታት ህይወት ምሃብ።

npm i [email protected]
ዶክስ ኣንብብ

ኣብዚ እዋን v5.2.1 · ምውራድ · v4.6.x docs · ኩሉ ዝወጸ

ብዝደለኻዮ መንገዲ ጀምር

ትኽ ኢልካ ናብ ህንጻ ብቡትስትራፕ ዘልል-ሲዲኤን ተጠቐም፡ ብመንገዲ ፓኬጅ ማናጀር ጽዓኖ፡ ወይ ድማ ምንጪ ኮድ ኣውርድ።

ናይ ምትካል ሰነዳት ኣንብብ

ብመንገዲ ፓኬጅ ማናጀር ምትካል

ናይ Bootstrap ምንጪ Sassን JavaScriptን ፋይላት ብመንገዲ npm, RubyGems, Composer, ወይ Meteor ምትካል። ብፓኬጅ ዝምራሕ ምትካል ሰነዳት ወይ ምሉእ ህንጻ ስክሪፕትና ዘየጠቓልል እዩ። ብተወሳኺ ብመንገዲ npm ብቕልጡፍ Bootstrap ፕሮጀክት ንምፍጣር npm template repoና ክትጥቀሙ ትኽእሉ ኢኹም ።

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

ንዝያዳ ሓበሬታን ተወሳኺ ኣካየድቲ ፓኬጅን ናይ ምትካል ሰነዳትና ኣንብቡ ።

ብመንገዲ CDN ኣካትት።

ናይ 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 ምንጪ ፋይላት ኣብ ሓድሽ ፕሮጀክት ምስ ወግዓዊ መምርሒታትና ምሕዋስ ዝላ ረኸቡ።

ዌብፓክ ጥቕላል ቪተ

ኩሉ ነገር ብሳስ ኣመዓራርዮ

ቡትስትራፕ ንሳስ ንሞዱላርን ንዓኻ ዝምጥንን ስነ ህንጻ ​​ይጥቀመሉ። ዘድልዩኻ ባእታታት ጥራይ ኣእትዉ፣ ከም ግራድየንትስን ጽላሎትን ዝኣመሰሉ ዓለማዊ ኣማራጺታት ኣንቅሑ፣ ከምኡውን ብናይ ገዛእ ርእስኻ CSS ምስ ተለዋዋጢ ረቛሒታትና፣ ካርታታትና፣ ተግባራትናን ሚክሲንናን ጽሓፍ።

ብዛዕባ ምምዕርራይ ዝያዳ ፍለጡ

ኩሉ ናይ ቡትስትራፕ ሳስ ኣካትት።

ሓደ ቅዲ ጽሑፍ ኣእትዉ እሞ ምስ ነፍሲ ወከፍ ባህሪ ናይ CSSና ናብ ውድድራት ትወጽእ ኣለኻ።

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

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/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";

ብዛዕባ ምጥቃም ቡትስትራፕ ምስ ሳስ ዝያዳ ፍለጡ ።

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

ኣካላት፣ ንዩቲሊቲ ኤፒኣይ ኣማልኡ

ኣብ ቡትስትራፕ 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። ጃቫስክሪፕት ኣብ ቡትስትራፕ HTML-first እዩ፣ እዚ ማለት ድማ ​​ፕላጊናት ምውሳኽ ከምቲ dataattributes ምውሳኽ ቀሊል እዩ። ዝያዳ ምቁጽጻር የድልየካ? ንውልቀ ፕላጊናት ብፕሮግራም ኣካትት።

ብዛዕባ ቡትስትራፕ ጃቫስክሪፕት ዝያዳ ፍለጡ

ዳታ ባህሪ ኤፒኣይ

ኤችቲኤምኤል ክትጽሕፍ ኣብ እትኽእለሉ እዋን ንምንታይ ዝያዳ ጃቫስክሪፕት ትጽሕፍ? 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>

ብዛዕባ ጃቫስክሪፕትና ከም ሞዱላትን ምጥቃም ፕሮግራማዊ ኤፒኣይን ዝያዳ ፍለጡ ።

ኩለመዳያዊ ስብስብ ፕላጊናት

ቡትስትራፕ ኣብ ዝኾነ ፕሮጀክት ከተውድቖም እትኽእል ደርዘን ዝኾኑ ፕላጊናት ኣለዉዎ። ብሓንሳብ ኣእትዎም፡ ወይ ድማ እቶም ዘድልዩኻ ጥራይ ምረጽ።

ምንቃሕ

ንተጠቀምትኻ ናይ መጠንቀቕታ መልእኽትታት ኣርኢን ሕባእን።

መጠወቒ

ንጡፍ ኩነታት ንመጠወቒታት ብፕሮግራም ምቁጽጻር።

ካሮሰል

ኣብ ዝኾነ ገጽ ስላይድ ሾው ምውሳኽ፣ ንcrossfade ዝድግፍ ሓዊስካ።

ፈረሰ

ናይ ትሕዝቶ ከባቢታት ኣስፍሕን ኣፍርስን፣ ወይ ድማ ኣኮርድዮን ፍጠር።

ንቑልቁል ዝወርድ

ናይ መላግቦታት፣ ተግባራት፣ ቅጥዕታትን ካልእን ምልክታታት ምፍጣር።

ሞዳል ዝብል እዩ።

ተዓጻጻፍን ምላሽ ዝህብን ዝርርባት ኣብ ፕሮጀክትካ ወስኸሉ።

ካብ ካንቫስ ወጻኢ

ዝተሓብኡ ጎድናዊ መስመር ናብ ዝኾነ ገጽ ምህናጽን ምቕያርን።

ፖፖቨር

ብሕታዊ ምድብላቕ ምፍጣር። ኣብ ፖፐር ዝተሃንጸ።

ስክሮልስፒ

ኣብ ገጽ ምዝዋር ተመርኲስካ ንጡፋት nav መላግቦታት ብኣውቶማቲክ ምዕራፍ።

ትብ

Bootstrap nav components ትሕዝቶታት ክቕይሩ ፍቐደሎም።

ምጥባስ

ንበጻሕትኻ መተሓሳሰቢታት ኣርእዮምን ሕባእን።

ምኽሪ መሳርሒታት

ንመሳርሒታት መርበብ ሓበሬታ ብብሕታዊ ዝኾኑ ምኽርታት ተክኦ። ኣብ ፖፐር ዝተሃንጸ።

ብ Bootstrap Icons ንዓኻ ዝምጥን ግበሮ

Bootstrap Icons ልዕሊ 1,500 ግሊፍታት ዝሓዘ ክፉት ምንጪ SVG ምልክት ቤተ-መጻሕፍቲ ኮይኑ፡ ኣብ ነፍሲ ወከፍ ምውጻእ ተወሳኺ ይውሰኽ። ኣብ ዝኾነ ፕሮጀክት ንኽሰርሑ ዝተዳለዉ እዮም፡ ንባዕሉ Bootstrap ትጥቀመሉ ትጥቀመሉ ኣይትጥቀመሉን። ከም SVGs ወይ ምልክት ቅርጺ ፊደላት ተጠቐመሎም-ክልቲኦም ኣማራጺታት ቬክተር ምዕባይን ብመንገዲ CSS ቀሊል ምምዕርራይን ይህቡኻ።

ቡትስትራፕ ምልክታት ረኸቡ።

ቡትስትራፕ ምልክታት

ብወግዓዊ Bootstrap Themes ናትካ ግበሮ

ካብ ወግዓዊ ዕዳጋ ቡትስትራፕ ቴምስ ብፕሪምየም ቴማታት ንቡትስትራፕ ናብ ዝቕጽል ደረጃ ውሰዶ ። ቴማታት ኣብ ቡትስትራፕ ከም ናይ ገዛእ ርእሶም ዝተዘርግሐ ፍሬምዎርክ ኮይኖም ዝተሃንጹ ኮይኖም፡ ብሓደስቲ ኣካላትን ፕላጊናትን፡ ሰነዳትን ሓያላት መሳርሒታት ህንጻን ዝሃብተሙ እዮም።

ቡትስትራፕ ቴምስ ዳህሰሱ

ቡትስትራፕ ቴምስ