መእተዊ

ብ Bootstrap ጀምር፣ እዚ ኣብ ዓለምና ዝበዝሐ ተፈታዊ ፍሬምዎርክ ንምህናጽ ምላሽ ዝህቡ፣ ሞባይል-ቀዳማይ መርበባት ሓበሬታ፣ ምስ jsDelivrን ቅጥዒ መበገሲ ገጽን።

ኣብዚ ገጽ

ቅልጡፍ ምጅማር

Bootstrap ኣብ ፕሮጀክትኩም ብቕልጡፍ ክትውስኹ ትደልዩ ዶ? jsDelivr ተጠቐም፣ ነጻ ክፉት ምንጪ CDN። ፓኬጅ ማናጀር ምጥቃም ወይስ ምንጪ ፋይላት ምውራድ የድልየካ? ናብቲ ናይ ምውራድ ገጽ ኣቕንዑ ።

ሲኤስኤስ

<link>ነቲ ቅዲ ጽሑፍ ኣብ ቅድሚ ኩሎም ካልኦት ቅዲ ጽሑፋት ናትካ ቅዳሕ-ለጥፍዎ <head>CSS ናትና ንምጽዓን።

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

ጀይ ኤስ

ብዙሓት ኣካላትና ንኽሰርሑ ጃቫስክሪፕት ምጥቃም የድልዮም። ብፍላይ ድማ ናይ ገዛእ ርእስና ናይ ጃቫስክሪፕት ፕላጊንን ፖፐርን የድልዮም ። ሓደ ካብዞም ዝስዕቡ <script>s ኣብ ጥቓ መወዳእታ ገጻትካ፡ ልክዕ ቅድሚ እቲ መዕጸዊ </body>መለለዪ፡ ኣቐምጦም፡ ንኽንኽእሎም ።

ጥቕላል

ነፍሲ ወከፍ ቡትስትራፕ ጃቫስክሪፕት ፕላግ-ኢንን ጽግዕተኛነትን ምስ ሓደ ካብ ክልተ ጽንጽዋያትና ኣካትት። ክልቲኦምን ንመሳርሒታትናን ፖፖቨርስናን bootstrap.bundle.jsፖፐር ሓዊስካ። ብዛዕባ ኣብ ቡትስትራፕ እንታይ ተኻቲቱ ዘሎ ተወሳኺ ሓበሬታ ንምርካብ፡ በጃኹም ኣብ ክፍሊ ትሕዝቶና ርኣዩ ።bootstrap.bundle.min.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

ፍለ

ምስቲ ዝተፈላለየ ስክሪፕት ፍታሕ ክትከይድ እንተ ወሲንካ፡ ፖፐር መጀመርታ ክመጽእ ኣለዎ (መሳርሒታት ወይ ፖፖቨር ትጥቀም እንተኾንካ)፡ ድሕሪኡ ድማ ናትና ናይ ጃቫስክሪፕት ፕላግ-ኢናት።

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

ሞዱላት

ትጥቀሙ እንተኾይንኩም ፡ በጃኹም ኣብቲ Bootstrap ከም ሞዱል ምጥቃም ዝብል ክፍሊና<script type="module"> ተወከሱ ።

ኣካላት

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

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

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

መበገሲ ቅጥዒ

ገጻትካ ብሓድሽ ደረጃታት ዲዛይንን ምዕባለን ከምዝተዳለወ ኣረጋግጽ። እዚ ማለት HTML5 doctype ምጥቃምን ንግቡእ ምላሽ ዝህቡ ባህርያት ዝኸውን viewport meta tag ምሕዋስን ማለት እዩ። ኩሉ ብሓባር ኣቐምጦ እሞ ገጻትካ ከምዚ ክመስሉ ኣለዎም፤

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

ንዝቕጽል ስጉምትታት ፡ ትሕዝቶን ኣካላትን መርበብ ሓበሬታኻ ምቕማጥ ንምጅማር ፡ ኣብ ናይ Layout docs ወይ ወግዓዊ ኣብነታትና ምብጻሕ።

ኣገደስቲ ዓለማውያን

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

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

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