Source

መግቢያ

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

ፈጣን ጅምር

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

CSS

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

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

ጄ.ኤስ

ብዙ ክፍሎቻችን ለመስራት ጃቫስክሪፕት መጠቀምን ይጠይቃሉ። በተለይም jQuery ፣ Popper.js እና የራሳችን ጃቫስክሪፕት ፕለጊን ያስፈልጋቸዋል ። የሚከተሉትን ዎች ለማንቃት ከመዝጊያ መለያው <script>በፊት በገጾችዎ መጨረሻ አጠገብ ያስቀምጡ ። </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-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

የትኞቹ አካላት jQuery፣ our JS እና Popper.js በግልፅ እንደሚፈልጉ ለማወቅ ጉጉት አለ? ከታች ያለውን የትዕይንት ክፍሎች ማገናኛ ጠቅ ያድርጉ። ስለ አጠቃላይ ገጽ አወቃቀር እርግጠኛ ካልሆኑ፣ ለአብነት የገጽ አብነት ማንበብዎን ይቀጥሉ።

የእኛ bootstrap.bundle.jsእና ፖፐርንbootstrap.bundle.min.js ያካትታል , ግን jQuery አይደለም . በ Bootstrap ውስጥ ምን እንደሚካተት የበለጠ መረጃ ለማግኘት እባክዎ የይዘት ክፍላችንን ይመልከቱ።

ጃቫስክሪፕት የሚያስፈልጋቸውን አካላት አሳይ
  • ለማሰናበት ማንቂያዎች
  • ግዛቶችን እና የአመልካች ሳጥን/የሬዲዮ ተግባርን ለመቀየር ቁልፎች
  • ለሁሉም የስላይድ ባህሪያት፣ ቁጥጥሮች እና ጠቋሚዎች Carousel
  • የይዘት ታይነትን ለመቀየር ሰብስብ
  • የማሳያ እና አቀማመጥ ተቆልቋይ (እንዲሁም Popper.js ያስፈልገዋል )
  • የማሳያ፣ አቀማመጥ እና የማሸብለል ባህሪ
  • ምላሽ ሰጪ ባህሪን ተግባራዊ ለማድረግ የስብስብ ተሰኪያችንን ለማራዘም Navbar
  • ለማሳየት እና ቦታ ለማስቀመጥ የሚረዱ ጥቆማዎች እና ፖፖቨር ( Popper.js ንም ይፈልጋል )
  • 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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 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 እድገት ላይ ወቅታዊ መረጃ ያግኙ እና በእነዚህ አጋዥ ግብዓቶች ማ���በረሰቡን ያግኙ።

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

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