ምውራድ
ነቲ ዝተጠርነፈ CSSን ጃቫስክሪፕትን፡ ምንጪ ኮድ ንምርካብ Bootstrap ኣውርድዎ፡ ወይ ድማ ምስ ዝፈትውዎም ኣካየድቲ ፓኬጅ ከም npm፡ RubyGemsን ካልእን ኣካትትዎ።
CSSን JSን ዝተጠርነፈ እዩ።
ን Bootstrap v5.2.1 ብቐሊሉ ናብ ፕሮጀክትካ ንምውዳቕ ድሉው ዝኾነ ንጥቕሚ ዝተጠርነፈ ኮድ ኣውርድ፣ እዚ ድማ፤
- ዝተጠርነፉን ዝተቐነሱን CSS bundles ( ንጽጽር CSS ፋይላት ርአ )
- ዝተጠርነፉን ዝተቐነሱን ናይ ጃቫስክሪፕት ፕላጊናት ( ንጽጽር ፋይላት JS ርአ )
እዚ ሰነዳት፡ ምንጪ ፋይላት፡ ወይ ዝኾነ ኣማራጺ ጽግዕተኛነት ጃቫስክሪፕት ከም ፖፐር ዘየጠቓልል እዩ።
ምንጪ ፋይላት
ምንጪ ሳስ፣ ጃቫስክሪፕትን ሰነዳትን ፋይላትና ብምውራድ ቡትስትራፕ ብናይ ገዛእ ርእስኻ ንብረት ሻምብቆ ኣጠቓልል። እዚ ኣማራጺ ገለ ተወሳኺ መሳርሒታት ይሓትት፤
- Sass compiler ንናይ Sass ምንጪ ፋይላት ናብ CSS ፋይላት ንምጥርናፍ ዝሕግዝ
- ኣውቶፕሪፊክሰር ን CSS ሸያጢ ቅድመ-ጥብቆ
Should you require our full set of build tools , ንሳቶም ንቡትስትራፕን ዶክታቱን ንምምዕባል ተኻቲቶም ኣለዉ, ግን ንናይ ገዛእ ርእስኻ ዕላማታት ዘይምቹኣት ክኾኑ ተኽእሎ ኣሎ።
ኣብነታት
ኣብነታትና ኣውሪድኩም ክትምርምሩ ምስ እትደልዩ ፡ ነቶም ድሮ ዝተሃንጹ ኣብነታት ክትሕዙ ትኽእሉ ኢኹም፤
CDN ብመንገዲ jsDelivr
ነቲ ብ jsDelivr ዝግበር ምውራድ ዘልሎ እሞ ነቲ ዝተዓቀበ ስሪት ናይ Bootstrap ዝተጠርነፈ CSSን JSን ናብ ፕሮጀክትካ ኣቕርቦ።
<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">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
ነቲ ዝተጠርነፈ ጃቫስክሪፕትና ትጥቀሙ እንተኾይንኩምን ንፖፐር ብፍሉይ ከተእትውዎ እንተደሊኹምን፡ ቅድሚ JSና ፖፐር ወስኹሉ፡ ብመንገዲ CDN እንተተኻኢሉ።
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
ኣካየድቲ ፓኬጅ
ናይ Bootstrap ምንጪ ፋይላት ናብ ዳርጋ ዝኾነ ፕሮጀክት ምስ ገለ ካብቶም ኣዝዮም ህቡባት ፓኬጅ ኣካየድቲ ስሓቦም። ፓኬጅ ማናጀር ብዘየገድስ፡ ቡትስትራፕ ምስ ወግዓዊ ዝተጠርነፉ ስሪትና ዝሰማማዕ ምድላው Sass compiler ን Autoprefixer ን ከድልዮ እዩ።
npm ዝብል ጽሑፍ ኣሎ።
Bootstrap ኣብ Node.js ዝሰርሑ ኣፕስ ብ npm package ንጽዓኖ :
npm install [email protected]
const bootstrap = require('bootstrap')
ወይ import bootstrap from 'bootstrap'
ድማ ኩሎም ናይ Bootstrap ፕላጊናት ኣብ ሓደ bootstrap
ነገር ክጽዕኖም እዩ። እቲ bootstrap
ሞዱል ባዕሉ ንኹሎም ፕላጊናትና ናብ ወጻኢ ይልእኾም። /js/dist/*.js
ኣብ ትሕቲ ላዕለዋይ ደረጃ ማህደር ናይቲ ፓኬጅ ዝርከቡ ፋይላት ብምጽዓን ናይ ቡትስትራፕ ፕላግ-ኢናት ብኢድካ ክትጽዕኖም ትኽእል ኢኻ ።
Bootstrap's package.json
ኣብ ትሕቲ እዞም ዝስዕቡ መፍትሕታት ገለ ተወሳኺ ሜታዳታ ዝሓዘ እዩ።
sass
- መንገዲ ናብቲ ቀንዲ ሳስ ምንጪ ፋይል ቡትስትራፕstyle
- መንገዲ ናይቲ ብነባሪ ቅጥዕታት ተጠቒምካ ዝተጠርነፈ ዘይተቐነሰ CSS ናይ Bootstrap (ምምዕርራይ የለን)
ፈትሊ
Bootstrap ኣብ Node.js ዝሰርሑ ኣፕስ ብ yarn package ንጽዓኖ :
yarn add [email protected]
ሩቢጀምስ
ኣብ Ruby apps ናትካ Bootstrap ብ Bundler ( ዝምከር ) ከምኡ ውን RubyGems ተጠቂምካ ነዚ ዝስዕብ መስመር ኣብ ናትካ ብምውሳኽ ጽዓኖ Gemfile
:
gem 'bootstrap', '~> 5.2.1'
ከም ኣማራጺ፡ Bundler ዘይትጥቀም እንተኾንካ፡ ነዚ ትእዛዝ ብምፍጻም ነቲ gem ክትጭብጦ ትኽእል ኢኻ፤
gem install bootstrap -v 5.2.1
ንተወሳኺ ዝርዝር ሓበሬታ ናይቲ ዕንቊ README ርአ ።
ኣወሃሃዲ ሙዚቃ
ብተወሳኺ ናይ Bootstrap Sassን JavaScriptን Composer ተጠቂምካ ክትተክልን ከተመሓድርን ትኽእል ኢኻ :
composer require twbs/bootstrap:5.2.1
ንኡጌት።
ኣብ .NET Framework እንተድኣ ኣማዕቢልኩም፡ NuGet ተጠቂምኩም ናይ Bootstrap CSS ወይ Sass ን JavaScriptን ክትጭብጡን ከተመሓድሩን እውን ትኽእሉ ኢኹም ። ሓደስቲ ፕሮጀክትታት libman ወይ ካልእ ሜላ ክጥቀሙ ኣለዎም ምኽንያቱ NuGet ንዝተጠርነፈ ኮድ እምበር ንfrontend assets ዝተዳለወ ኣይኮነን።
Install-Package bootstrap
Install-Package bootstrap.sass