መእተዊ

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

ቅልጡፍ ምጅማር

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

ሲኤስኤስ

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

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

ጀይ ኤስ

ብዙሓት ኣካላትና ንኽሰርሑ ጃቫስክሪፕት ምጥቃም የድልዮም። ብፍላይ jQuery , Popper , ከምኡ ውን ናይ ገዛእ ርእስና ናይ ጃቫስክሪፕት ፕላጊናት የድልዮም። jQuery's slim build ንጥቀም , ግን ምሉእ ስሪት እውን ይድገፍ እዩ።

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

ጥቕላል

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

ፍለ

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

ኣካላት

ኣየኖት ኣካላት ብግልጺ jQuery, ናትና ጃቫስክሪፕት, ከምኡውን Popper ዘድልዮም ክትፈልጡ ትደልዩ? ኣብ ታሕቲ ዘሎ 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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 ንህብ።

ማሕበረሰብ

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

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

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

CSPsን ዝተሰረቱ SVGsን እዮም።

ሓያሎ ኣካላት ቡትስትራፕ ኣብ CSSና ዝተሰረቱ SVGs የጠቓልሉ እሞ ንኣካላት ብቐጻልን ብቐሊሉን ኣብ መላእ መርበብ ሓበሬታታትን መሳርሕታትን ቅዲ ይገብሩ። ንዝያዳ ጽኑዕ ናይ CSP ውቅርታት ዘለዎም ትካላት ፣ ንኹሉ ኣጋጣሚታት ናይቶም ዝተሰረቱ SVGታትና (ኩሎም ብመንገዲ background-image) ሰኒድናዮም ኣለና፣ ምእንቲ ኣማራጺታትካ ብዕምቆት ክትምርምሮም ትኽእል።

Based on community conversation , ገለ ኣማራጺታት ነዚ ኣብ ናይ ገዛእ ርእስኻ ኮድቤዝ ንምፍታሕ፡ ነቶም URLs ብናይ ከባቢኻ ዝተኣንገዱ ንብረታት ምትካእ፡ ነቶም ምስልታት ምእላይን ኣብ መስመር ዝርከቡ ምስልታት ምጥቃምን (ኣብ ኩሎም ኣካላት ኣይከኣልን)፡ ከምኡ’ውን CSPኻ ምቕያር የጠቓልል። ለበዋና ናይ ገዛእ ርእስኻ ፖሊሲታት ጸጥታ ብጥንቃቐ ምግምጋምን ኣድላዪ እንተኾይኑ ንቕድሚት ዝበለጸ መንገዲ ምውሳንን እዩ።