in English

መግቢያ

ምላሽ ሰጪ፣ ሞባይል-የመጀመሪያ ጣቢያዎችን፣ በjsDelivr እና የአብነት ማስጀመሪያ ገጽን ለመገንባት በዓለም ላይ በጣም ታዋቂ በሆነው በ Bootstrap ጀምር።

ፈጣን ጅምር

Bootstrapን ወደ ፕሮጀክትዎ በፍጥነት ማከል ይፈልጋሉ? jsDelivrን ተጠቀም፣ ነፃ ክፍት ምንጭ ሲዲኤን። የጥቅል አስተዳዳሪን በመጠቀም ወይንስ የምንጭ ፋይሎችን ማውረድ ይፈልጋሉ? ወደ ማውረዶች ገጽ ይሂዱ ።

CSS

የእኛን CSS ለመጫን ከሌሎች የቅጥ ሉሆች በፊት የቅጥ <link>ሉህን ይቅዱ ።<head>

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

ጄ.ኤስ

ብዙ ክፍሎቻችን ለመስራት ጃቫስክሪፕት መጠቀምን ይጠይቃሉ። በተለይም jQuery ፣ ፖፐር እና የራሳችን ጃቫስክሪፕት ፕለጊን ያስፈልጋቸዋል ። እኛ የ jQuery's slim build እንጠቀማለን ፣ ግን ሙሉው ስሪትም ይደገፋል።

ከሚከተሉት <script>ዎች</body> ውስጥ አንዱን ለማንቃት ከመዝጊያ መለያው በፊት በገጾችዎ መጨረሻ ላይ ያስቀምጡ ። jQuery መጀመሪያ፣ ከዚያ ፖፐር፣ እና ከዚያ የእኛ ጃቫስክሪፕት ፕለጊኖች መምጣት አለባቸው።

ጥቅል

እያንዳንዱን የቡትስትራፕ ጃቫስክሪፕት ፕለጊን ከሁለቱ ጥቅሎቻችን ጋር ያካትቱ። ሁለቱም bootstrap.bundle.jsእና ለመሳሪያዎቻችን እና ለፖፖቨር ፖፐርንbootstrap.bundle.min.js ያካትታሉ ፣ ግን jQuery አይደለም ። በመጀመሪያ jQueryን፣ ከዚያ የቡትስትራክ ጃቫስክሪፕት ጥቅልን ያካትቱ። በ Bootstrap ውስጥ ምን እንደሚካተት የበለጠ መረጃ ለማግኘት እባክዎ የይዘት ክፍላችንን ይመልከቱ።

<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ን፣ ጃቫስክሪፕትን እና ፖፐርን በግልፅ እንደሚፈልጉ ለማወቅ ይፈልጋሉ? ከታች ያለውን የትዕይንት ክፍሎች ማገናኛ ጠቅ ያድርጉ። ስለገጹ አወቃቀር እርግጠኛ ካልሆኑ፣ ለገጽ አብነት ምሳሌ ማንበብዎን ይቀጥሉ።

ጃቫስክሪፕት የሚያስፈልጋቸውን አካላት አሳይ
  • ለማሰናበት ማንቂያዎች
  • ግዛቶችን እና የአመልካች ሳጥን/የሬዲዮ ተግባርን ለመቀየር ቁልፎች
  • ለሁሉም የስላይድ ባህሪያት፣ ቁጥጥሮች እና ጠቋሚዎች Carousel
  • የይዘት ታይነትን ለመቀየር ሰብስብ
  • የማሳያ እና አቀማመጥ ተቆልቋይ (እንዲሁም ፖፐር ያስፈልገዋል )
  • የማሳያ፣ አቀማመጥ እና የማሸብለል ባህሪ
  • ምላሽ ሰጪ ባህሪን ተግባራዊ ለማድረግ የስብስብ ተሰኪያችንን ለማራዘም Navbar
  • Scrollspy ለማሸብለል ባህሪ እና የአሰሳ ዝመናዎች
  • ለማሳየት እና ለማስቀመጥ የሚረዱ መሳሪያዎች እና ፖፖቨር (ፖፐርም ያስፈልገዋል )

የጀማሪ አብነት

ገጾችዎን በቅርብ ጊዜ የንድፍ እና የእድገት ደረጃዎች ማቀናበሩን ያረጋግጡ። ይህ ማለት HTML5 ዶክታይፕ መጠቀም እና ለትክክለኛ ምላሽ ሰጪ ባህሪያት የመመልከቻ ሜታ መለያን ማካተት ማለት ነው። ሁሉንም አንድ ላይ አስቀምጡ እና ገጾችዎ እንደዚህ መምሰል አለባቸው።

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

ለአጠቃላይ ገጽ መስፈርቶች የሚያስፈልግህ ያ ብቻ ነው። የጣቢያዎን ይዘት እና አካላት መዘርጋት ለመጀመር የአቀማመጥ ሰነዶችን ወይም የእኛን ይፋዊ ምሳሌ ይጎብኙ ።

ጠቃሚ ዓለም አቀፍ

ቡትስትራፕ በሚጠቀሙበት ጊዜ ልታስተዋውቃቸው የሚገቡ በጣት የሚቆጠሩ ጠቃሚ አለምአቀፋዊ ስታይል እና መቼቶችን ይጠቀማል፣ ሁሉም ከሞላ ጎደል የአሳሽ ስልቶችን መደበኛ ለማድረግ ያተኮሩ ናቸው። ወደ ውስጥ እንዝለቅ።

HTML5 ሰነድ

Bootstrap HTML5 ዶክትፕ መጠቀምን ይጠይቃል። ያለሱ፣ አንዳንድ አስቂኝ ያልተሟላ የቅጥ ስራዎችን ያያሉ፣ ነገር ግን እሱን ጨምሮ ምንም አይነት እንቅፋት መፍጠር የለበትም።

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

ምላሽ ሰጪ ዲበ መለያ

ቡትስትራፕ በመጀመሪያ ሞባይል ተዘጋጅቷል ፣ ይህ ስልት በመጀመሪያ ለሞባይል መሳሪያዎች ኮድን የምናመቻችበት እና ከዚያም እንደ አስፈላጊነቱ የCSS የሚዲያ መጠይቆችን የምንጨምርበት ነው። ለሁሉም መሳሪያዎች ትክክለኛ አተረጓጎም እና የንክኪ ማጉላትን ለማረጋገጥ፣ ምላሽ ሰጪውን የመመልከቻ ዲበ መለያ ወደ እርስዎ ያክሉ <head>።

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

በጅማሬ አብነት ውስጥ የዚህ ምሳሌ በተግባር ላይ ማየት ይችላሉ ።

ሣጥን-መጠን

በሲኤስኤስ ውስጥ ለበለጠ ቀጥተኛ መጠን፣ ዓለም አቀፋዊ box-sizingእሴቱን ከ content-boxወደ ቀይርነው border-box። ይህ የአንድን ንጥረ ነገር የመጨረሻ ስሌት ስፋት እንደማይጎዳው ያረጋግጣል padding፣ ነገር ግን እንደ ጎግል ካርታዎች እና ጉግል ብጁ የፍለጋ ሞተር ባሉ የሶስተኛ ወገን ሶፍትዌሮች ላይ ችግር ሊፈጥር ይችላል።

በጣም አልፎ አልፎ እሱን መሻር ሲያስፈልግ፣ የሚከተለውን የመሰለ ነገር ተጠቀም፡-

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

ከላይ በተጠቀሰው ቅንጣቢ፣ በ ::beforeእና በኩል የመነጨ ይዘትን ጨምሮ የጎጆ ክፍሎች - ሁሉም ለዚያ ::afterየተገለጹትን ይወርሳሉ ።box-sizing.selector-for-some-widget

ስለ ሣጥን ሞዴል እና መጠን በ CSS ዘዴዎች የበለጠ ይወቁ ።

ዳግም አስነሳ

ለተሻሻለ የአሳሽ አተረጓጎም ፣ በአሳሾች እና በመሳሪያዎች ላይ ያሉ አለመግባባቶችን ለማስተካከል ዳግም ማስጀመርን እንጠቀማለን ለተለመዱት የኤችቲኤምኤል አባሎች ትንሽ ተጨማሪ የሃሳብ ዳግም ማስጀመሪያዎችን እያቀረብን ነው።

ማህበረሰብ

በBootstrap እድገት ላይ ወቅታዊ መረጃ ያግኙ እና በእነዚህ አጋዥ ግብዓቶች ማህበረሰቡን ያግኙ።

  • ለኦፊሴላዊው ቡትስትራክ ብሎግ አንብብ እና ተመዝገብ ።
  • በ IRC ውስጥ ካሉ ቡትስትራፕሮች ጋር ይወያዩ። በአገልጋዩ irc.libera.chatላይ ፣ #bootstrapበሰርጡ ውስጥ።
  • bootstrap-4የማስፈጸሚያ እገዛ በ Stack Overflow (መለያ የተሰጠው ) ላይ ሊገኝ ይችላል ።
  • ገንቢዎች ለከፍተኛው ግኝት በ npmbootstrap ወይም በተመሳሳዩ የመላኪያ ዘዴዎች በሚሰራጩበት ጊዜ የBootstrapን ተግባር በሚቀይሩ ወይም በሚጨምሩ ጥቅሎች ላይ ያለውን ቁልፍ ቃል መጠቀም አለባቸው ።

እንዲሁም በትዊተር ላይ @getbootstrapን መከተል ትችላለህ ለአዳዲስ ወሬዎች እና ግሩም የሙዚቃ ቪዲዮዎች።

ሲኤስፒዎች እና የተከተቱ SVGs

በርካታ የቡትስትራፕ ክፍሎች በአሳሽ እና በመሳሪያዎች ላይ ያለማቋረጥ እና በቀላሉ ክፍሎችን ለመቅረጽ በእኛ CSS ውስጥ የተከተቱ SVGs ያካትታሉ። ይበልጥ ጥብቅ የሲኤስፒ ውቅረቶች ላሏቸው ድርጅቶች፣የእኛን የተከተቱ SVGs (ሁሉም በ በኩል የሚተገበሩ background-image) ጉዳዮችን መዝግበናል ስለዚህ አማራጮችዎን በጥልቀት መገምገም ይችላሉ።

በማህበረሰብ ውይይት ላይ በመመስረት ፣ ይህንን በራስዎ ኮድ ቤዝ ውስጥ ለመፍታት አንዳንድ አማራጮች ዩአርኤሎችን በአገር ውስጥ በተስተናገዱ ንብረቶች መተካት፣ ምስሎችን ማስወገድ እና የመስመር ውስጥ ምስሎችን መጠቀም (በሁሉም አካላት የማይቻል) እና የእርስዎን CSP ማሻሻል ያካትታሉ። የእኛ ምክረ ሃሳብ የራስዎን የደህንነት ፖሊሲዎች በጥንቃቄ መገምገም እና አስፈላጊ ከሆነ የተሻለውን የወደፊት መንገድ ላይ መወሰን ነው።