Source

መእተዊ

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

ቅልጡፍ ምጅማር

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

ሲኤስኤስ

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

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

ጀይ ኤስ

ብዙሓት ኣካላትና ንኽሰርሑ ጃቫስክሪፕት ምጥቃም የድልዮም። ብፍላይ jQuery , Popper.js , ከምኡ ውን ናይ ገዛእ ርእስና ናይ ጃቫስክሪፕት ፕላጊናት የድልዮም። ነዞም ዝስዕቡ <script>s ኣብ ጥቓ መወዳእታ ገጻትካ፡ ልክዕ ቅድሚ እቲ መዕጸዊ </body>መለለዪ፡ ኣቐምጦም፡ ንኽንኽእሎም። jQuery መጀመርታ ክመጽእ ኣለዎ፡ ድሕሪኡ Popper.js፡ ድሕሪኡ ድማ ናትና ናይ ጃቫስክሪፕት ፕላጊናት።

jQuery's slim build ንጥቀም , ግን ምሉእ ስሪት እውን ይድገፍ እዩ።

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

ኣየኖት ኣካላት ብግልጺ jQuery, ናትና JS, ከምኡውን Popper.js ዘድልዮም ክትፈልጡ ትደልዩ? ኣብ ታሕቲ ዘሎ show components ዝብል ሊንክ ጠውቑ። ብዛዕባ ሓፈሻዊ ኣቃውማ ገጽ ብፍጹም ርግጸኛ እንተዘይኮንካ፡ ንሓደ ኣብነት ገጽ ቅጥዒ ምንባብ ቀጽል።

ናትናን bootstrap.bundle.jsፖፐርን bootstrap.bundle.min.jsዘጠቓልል ፣ ግን jQuery ኣይኮነን ። ብዛዕባ ኣብ ቡትስትራፕ እንታይ ተኻቲቱ ዘሎ ተወሳኺ ሓበሬታ ንምርካብ፡ በጃኹም ኣብ ክፍሊ ትሕዝቶና ርኣዩ ።

ጃቫስክሪፕት ዘድልዮም ኣካላት ኣርኢ
  • ንኽትስጎግ ዝሕግዙ መጠንቀቕታታት
  • ንመቐያየሪ ኩነታትን ሳጹን ምልክት/ተግባራት ሬድዮን ዝኸውን መጠወቒታት
  • ካሮሰል ንኹሎም ስላይድ ባህርያት፣ ቁጽጽርን መርኣይታትን
  • ንርኡይነት ትሕዝቶ ንምቕያር ምዕጻፍ
  • ንምርኣይን ንኣቀማምጣን ዝኸውን ድሮፕዳውንድ ( Popper.js እውን የድልዮ )
  • ንኣርኢ፣ ኣቀማምጣን ስክሮል ባህሪን ዝሕግዙ ሞዳላት
  • ናቭባር ንናይ Collapse ፕላግ-ኢንና ብምዝርጋሕ ምላሽ ዝህብ ባህሪ ንምትግባር
  • ንመርእስቲን ንኣቀማምጣን ዝኸውን መሳርሒታትን ፖፖቨርን ( Popper.js እውን የድልዮ )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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, shrink-to-fit=no">

ናይዚ ኣብነት ብተግባር ኣብቲ ናይ መጀመርታ ቅጥዒ ክትሪኦ ትኽእል ኢኻ ።

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

ንዝያዳ ቅኑዕ ዓቐን ኣብ 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 ንህብ።

ማሕበረሰብ

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

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

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