ብ ቡትስትራፕ ጀምር

ቡትስትራፕ ሓያልን ብባህርያት ዝተዓሸገን ናይ ቅድሚት መሳርሒ እዩ። ዝኾነ ነገር-ካብ ፕሮቶታይፕ ክሳብ ምፍራይ-ኣብ ደቓይቕ ምህናጽ።

ኣብዚ ገጽ

ቅልጡፍ ምጅማር

ዝኾነ ናይ ህንጸት ስጉምትታት ከየድለየካ ብመንገዲ CDN ናይ Bootstrap ንፍርያት ድሉው ዝኾነ CSSን JavaScriptን ብምሕዋስ ጀምር። በዚ Bootstrap CodePen demo ብተግባር ርኣይዎ ።

index.htmlኣብ ሱር ፕሮጀክትካ ሓድሽ ፋይል ፍጠር ። <meta name="viewport">ከምኡ’ውን ኣብ ሞባይል መሳርሒታት ብግቡእ ምላሽ ዝህብ ባህሪ ንምርካብ ነቲ መለለዪ ኣካትት ።

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

ናይ Bootstrap CSSን JSን ኣካትት። <link>ቅድሚ ምዕጻው ነቲ መለለዪ ኣብቲ ንሲኤስኤስና ኣቐምጦ <head>፣ ከምኡውን ነቲ <script>መለለዪ ንጃቫስክሪፕትና ጽንጽዋይ (ንፖፐር ንኣቀማምጣ ንቑልቁል ዝወርድ፣ ፖፐርን መሳርሒታትን ሓዊስካ) ቅድሚ ምዕጻው ኣቐምጦ </body>። ብዛዕባ ናይ CDN መላግቦታትና ዝያዳ ፍለጡ ።

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <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">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

ፖፐርን ናትና JSን እውን በበይኖም ከተእትውዎም ትኽእሉ ኢኹም ። ድሮፕዳውንስ፡ ፖፖቨርስ ወይ ቱልቲፕስ ክትጥቀም እንተዘይሓሲብካ፡ ፖፐር ብዘይምሕዋስ ገለ ኪሎባይት ቆጥብ።

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

ሰላም ዓለም! ኣብቲ ዝመረጽካዮ መርበብ ሓበሬታ ነቲ ገጽ ከፊትካ Bootstrapped ዝብል ገጽካ ርአ። ሕጂ ናትካ ኣቀማምጣ ብምፍጣር ፡ ዓሰርተታት ኣካላት ብምውሳኽን ወግዓውያን ኣብነታትና ብምጥቃምን ብ Bootstrap ምህናጽ ክትጅምር ትኽእል ኢኻ ።

ናይ ሲዲኤን መላግቦታት

ከም መወከሲ፡ ቀንዲ ናይ CDN መላግቦታትና ኣብዚ ኣለዉ።

መግለፂ	URL ዝብል ጽሑፍ ኣሎ።
ሲኤስኤስ	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
ጀይ ኤስ	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

ከምኡ ’ ውን ዝኾነ ኣብ ገጽ ትሕዝቶታት ተዘርዚሩ ዘሎ ተወሳኺ ህንጻታትና ንምምጻእ CDN ክትጥቀሙ ትኽእሉ ኢኹም ።

ዝቕጽል ስጉምትታት

ብዛዕባ ገለ ኣገደስቲ ዓለማዊ ቅጥዕታት ከባቢ ቡትስትራፕ ዝጥቀመሎም ቁሩብ ተወሳኺ ኣንብብ ።
ብዛዕባ ኣብ ቡትስትራፕ እንታይ ተኻቲቱ ዘሎ ኣብ ክፍሊ ትሕዝቶናን ዝርዝር ናይቶም ጃቫስክሪፕት ዘድልዮም ኣካላትን ኣብ ታሕቲ ኣንብቡ።
ቁሩብ ተወሳኺ ሓይሊ የድልየካ? ብመንገዲ package manager ምንጪ ፋይላት ብምሕዋስ ብ Bootstrap ምህናጽ ኣብ ግምት ኣእቱ ።
Bootstrap ከም ሞዱል ምስ <script type="module">? በጃኹም ኣብቲ Bootstrap ከም ሞዱል ምጥቃምና ዝብል ክፍሊ ተወከሱ ።

JS ኣካላት

ኣየኖት ኣካላት ብግልጺ ናትና ጃቫስክሪፕትን ፖፐርን ዘድልዮም ክትፈልጡ ትደልዩ? ኣብ ታሕቲ ዘሎ show components ዝብል ሊንክ ጠውቑ። ብዛዕባ ሓፈሻዊ ኣቃውማ ገጽ ብፍጹም ርግጸኛ እንተዘይኮንካ፡ ንሓደ ኣብነት ገጽ ቅጥዒ ምንባብ ቀጽል።

ጃቫስክሪፕት ዘድልዮም ኣካላት ኣርኢ

ንኽትስጎግ ዝሕግዙ መጠንቀቕታታት
ንመቐያየሪ ኩነታትን ሳጹን ምልክት/ተግባራት ሬድዮን ዝኸውን መጠወቒታት
ካሮሰል ንኹሎም ስላይድ ባህርያት፣ ቁጽጽርን መርኣይታትን
ንርኡይነት ትሕዝቶ ንምቕያር ምዕጻፍ
ንምርኣይን ንኣቀማምጣን ዝኸውን ድሮፕዳውንድ ( ፖፐር እውን የድልዮ )
ንኣርኢ፣ ኣቀማምጣን ስክሮል ባህሪን ዝሕግዙ ሞዳላት
Navbar ንናይ Collapseን Offcanvasን ፕላጊናትና ብምዝርጋሕ ምላሽ ዝህቡ ባህርያት ንምትግባር
Navs ምስ Tab ፕላግ-ኢን ንመቐያየሪ ትሕዝቶ መስኮታት
ንኣርኢ፣ ኣቀማምጣን ስክሮል ባህሪን ዝኸውን ካብ ካንቫስ ወጻኢ
Scrollspy ንናይ ስክሮል ባህርን ናይ ምድህሳስ ምዕባለታትን
ንምርኣይን ንምስሓብን ዝኸውን ቶስት
ንመርእስቲን ንኣቀማምጣን ዝኸውን መሳርሒታትን ፖፖቨርን ( ፖፐር እውን የድልዮ )

ኣገደስቲ ዓለማውያን

ቡትስትራፕ ብኣጻብዕ ዝቑጸሩ ኣገደስቲ ዓለማዊ ቅዲታትን ቅጥዕታትን ዝጥቀም ኮይኑ፡ ኩሎም ዳርጋ ንፍሉይ ናብ ንቡር ምግባር ቅዲታት መስቀላዊ መርበብ ሓበሬታ ዝቐንዑ እዮም። እስከ ንጥሕል።

HTML5 ዶክታይፕ

ቡትስትራፕ HTML5 doctype ምጥቃም የድሊ። ብዘይ ንሱ ገለ ፋንኪን ዘይተማልአን ቅዲ ክትሪኢ ኢኻ።

<!doctype html>
<html lang="en">
  ...
</html>

ምላሽ ዝህብ ሜታ መለለዪ

Bootstrap is developed mobile first , መጀመርታ ንሞባይል መሳርሒታት ኮድ ንመሓየሽ ድሕሪኡ ድማ CSS ሚድያ ሕቶታት ተጠቒምና ከም ኣድላይነቱ ንባእታታት ንምዕባይ ዝሕግዝ ስትራተጂ እዩ። ንኹሎም መሳርሒታት ብግቡእ ምቕራብን ምትንኻፍ ምዕባይን ንምርግጋጽ፡ ነቲ ምላሽ ዝህብ ቪውፖርት ሜታ መለለዪ ናብቲ ናትካ ወስኸሉ <head>።

<meta name="viewport" content="width=device-width, initial-scale=1">

ናይዚ ኣብነት ብተግባር ኣብቲ ቅልጡፍ ምጅማር ክትሪእዎ ትኽእሉ ኢኹም ።

ሳንዱቕ-ዓቐን ምግባር

ንዝያዳ ቅኑዕ ዓቐን ኣብ CSS፡ ነቲ ዓለማዊ box-sizingዋጋ ካብ content-boxናብ ንቕይሮ border-box። paddingእዚ ድማ ነቲ ናይ መወዳእታ ዝተቖጽረ ስፍሓት ናይ ሓደ ባእታ ከምዘይጸልዎ የረጋግጽ ፣ ግን ኣብ ገለ ናይ ሳልሳይ ወገን ሶፍትዌር ከም Google Mapsን Google Custom Search Engineን ጸገም ከስዕብ ይኽእል።

ኣብቲ ሳሕቲ ክትሽፍኖ ዘድልየካ ኣጋጣሚ፡ ከምዚ ዝስዕብ ዝኣመሰለ ነገር ተጠቐም፤

.selector-for-some-widget {
  box-sizing: content-box;
}

በዚ ኣብ ላዕሊ ዝተጠቕሰ ቁንጣሮ ጽሑፍ፡ ዝተሰፍሩ ባእታታት-ብመንገዲን ዝተፈጥረ ትሕዝቶ ሓዊስካ- ::beforeኩሎም ነቲ ንዕኡ ::afterዝተገልጸ ክወርሱ እዮም ።box-sizing.selector-for-some-widget

ብዛዕባ ሞዴል ሳንዱቕን ዓቐንን ኣብ CSS Tricks ዝያዳ ፍለጡ ።

ዳግማይ ምጅማር

ንዝተመሓየሸ ስግረ-መርበብ ኣቀራርባ፡ ኣብ መላእ ዳህሰስቲን መሳርሕታትን ንዘሎ ዘይምስምማዕ ንምእራም Reboot ንጥቀም ፡ ኣብ ርእሲኡ ድማ ቁሩብ ዝያዳ ርእይቶ ዘለዎ ዳግመ-ምትዕርራይ ናብ ልሙዳት ባእታታት HTML ንህብ።

ማሕበረሰብ

ብዛዕባ ምዕባለ ቡትስትራፕ እዋናዊ ሓበሬታ ክትረኽቡን በዞም ሓገዝቲ ጸጋታት ናብ ሕብረተሰብ ምብጻሕን።

ን The Official Bootstrap Blog ኣንብቡን ሳብስክራይብ ግበሩን ።
ንናይ GitHub ዘተታትና ሕተቱን ዳህሰሱን ።
ምስ ብጾትካ Bootstrappers ኣብ IRC ዕላል ግበር። ኣብ irc.libera.chatሰርቨር፡ ኣብቲ #bootstrapቻነል።
ናይ ኣተገባብራ ሓገዝ ኣብ Stack Overflow (tagged bootstrap-5) ክትረክብ ትኽእል ኢኻ።
ዲቨሎፐራት ንዝለዓለ ርኽበት ብመንገዲ npmbootstrap ወይ ተመሳሳሊ ናይ ኣወሃህባ ኣገባባት ክዝርግሑ ከለዉ ንተግባራዊነት ቡትስትራፕ ዝቕይሩ ወይ ዝውስኹ ፓኬጃት ነቲ ቁልፊ ቃል ክጥቀሙሉ ይግባእ ።

ብተወሳኺ ኣብ ትዊተር @getbootstrap ክትከታተሉ ትኽእሉ ኢኹም ፡ እዋናዊ ሕሜታን ዘደንቑ ሙዚቃዊ ቪድዮታትን ንምርካብ።