በ Bootstrap ይጀምሩ

Bootstrap ኃይለኛ፣ በባህሪ የታሸገ የፊት ለፊት መሣሪያ ስብስብ ነው። ማንኛውንም ነገር - ከፕሮቶታይፕ እስከ ምርት - በደቂቃ ውስጥ ይገንቡ።

በዚህ ገጽ ላይ

ፈጣን ጅምር

ምንም የግንባታ ደረጃዎች ሳያስፈልጋቸው የ Bootstrap ምርት-ዝግጁ CSS እና JavaScriptን በCDN በኩል በማካተት ይጀምሩ። በዚህ የ Bootstrap CodePen ማሳያ በተግባር ይመልከቱት ።

index.htmlበፕሮጀክት ስርዎ ውስጥ አዲስ ፋይል ይፍጠሩ ። በተንቀሳቃሽ መሳሪያዎች ላይ ለትክክለኛ ምላሽ ሰጪ ባህሪ<meta name="viewport"> መለያውን ያካትቱ ።

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

የ Bootstrap CSS እና JS ያካትቱ። <link>ከመዘጋቱ በፊት መለያውን በ <head>CSS ውስጥ እና ለጃቫ ስክሪፕት ቅርቅባችን <script>(ተቆልቋይ ማውረጃዎችን፣ ፖፐርን እና የመሳሪያ ምክሮችን ጨምሮ ) መለያውን ያስቀምጡ </body>። ስለ CDN አገናኞቻችን የበለጠ ይረዱ ።

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

እንዲሁም ፖፐር እና የእኛን JS ለየብቻ ማካተት ይችላሉ ። ተቆልቋይ፣ ፖፖቨር ወይም የመሳሪያ ምክሮችን ለመጠቀም ካላሰቡ ፖፐርን ሳያካትት ጥቂት ኪሎባይት ይቆጥቡ።

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

ሰላም ልዑል! Bootstrapped ገጽዎን ለማየት በመረጡት አሳሽ ውስጥ ገጹን ይክፈቱ። አሁን የራስዎን አቀማመጥ በመፍጠር በደርዘን የሚቆጠሩ ክፍሎችን በመጨመር እና የእኛን ኦፊሴላዊ ምሳሌዎችን በመጠቀም በ Bootstrap መገንባት መጀመር ይችላሉ ።

የሲዲኤን ማገናኛዎች

እንደ ዋቢ፣ የእኛ ዋና የሲዲኤን አገናኞች እዚህ አሉ።

መግለጫ	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
ጄ.ኤስ	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

እንዲሁም በይዘት ገፅ ላይ የተዘረዘሩትን ተጨማሪ ግንባታዎቻችንን ለማምጣት ሲዲኤንን መጠቀም ይችላሉ ።

ቀጣይ እርምጃዎች

ቡትስትራፕ ስለሚጠቀምባቸው አንዳንድ አስፈላጊ ዓለም አቀፍ የአካባቢ ቅንብሮች ትንሽ ተጨማሪ ያንብቡ ።
በBootstrap ውስጥ ምን እንደሚካተት በእኛ የይዘት ክፍል እና ጃቫ ስክሪፕት ስለሚያስፈልጋቸው አካላት ዝርዝር ያንብቡ።
ትንሽ ተጨማሪ ኃይል ይፈልጋሉ? የምንጭ ፋይሎችን በጥቅል አስተዳዳሪ በኩል በማካተት በ Bootstrap መገንባት ያስቡበት ።
Bootstrapን እንደ ሞጁል ከ ጋር ለመጠቀም <script type="module">ይፈልጋሉ? እባክዎን Bootstrapን እንደ ሞጁል ክፍል መጠቀማችንን ይመልከቱ።

JS ክፍሎች

የኛን ጃቫ ስክሪፕት እና ፖፐር የትኞቹ ክፍሎች በግልፅ እንደሚፈልጉ ለማወቅ ጓጉተናል? ከታች ያለውን የትዕይንት ክፍሎች ማገናኛ ጠቅ ያድርጉ። ስለ አጠቃላይ ገጽ አወቃቀር እርግጠኛ ካልሆኑ፣ ለአብነት የገጽ አብነት ማንበብዎን ይቀጥሉ።

ጃቫስክሪፕት የሚያስፈልጋቸውን አካላት አሳይ

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

ጠቃሚ ዓለም አቀፍ

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

HTML5 ሰነድ

Bootstrap HTML5 ዶክትፕ መጠቀምን ይጠይቃል። ያለሱ፣ አንዳንድ አስቂኝ እና ያልተሟላ የቅጥ አሰራርን ታያለህ።

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

ምላሽ ሰጪ ዲበ መለያ

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

<meta name="viewport" content="width=device-width, initial-scale=1">

በፈጣን ጅምር ውስጥ የዚህ ምሳሌ በተግባር ላይ ማየት ይችላሉ ።

ሣጥን-መጠን

በሲኤስኤስ ውስጥ ለበለጠ ቀጥተኛ መጠን፣ ዓለም አቀፋዊ 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 እድገት ላይ ወቅታዊ መረጃ ያግኙ እና በእነዚህ አጋዥ ግብዓቶች ማህበረሰቡን ያግኙ።

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

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