መግቢያ

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

በዚህ ገጽ ላይ

ፈጣን ጅምር

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

CSS

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

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

ጄ.ኤስ

ብዙ ክፍሎቻችን ለመስራት ጃቫስክሪፕት መጠቀምን ይጠይቃሉ። በተለይም የራሳችንን ጃቫስክሪፕት ፕለጊን እና ፖፐርን ይፈልጋሉ ። ከሚከተሉት <script>ዎች</body> ውስጥ አንዱን ለማንቃት ከመዝጊያ መለያው በፊት በገጾችዎ መጨረሻ ላይ ያስቀምጡ ።

ጥቅል

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

የተለየ

ከተለየ የስክሪፕት መፍትሄ ጋር ለመሄድ ከወሰኑ ፖፐር መጀመሪያ መምጣት አለበት (የመሳሪያ ምክሮችን ወይም ፖፖቨርዎችን እየተጠቀሙ ከሆነ) እና በመቀጠል የእኛ ጃቫ ስክሪፕት ተሰኪዎች።

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

ሞጁሎች

የሚጠቀሙ ከሆነ <script type="module">፣እባክዎ Bootstrapን እንደ ሞጁል ክፍል መጠቀማችንን ይመልከቱ።

አካላት

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

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

ለማሰናበት ማንቂያዎች
ግዛቶችን እና የአመልካች ሳጥን/የሬዲዮ ተግባርን ለመቀየር ቁልፎች
ለሁሉም የስላይድ ባህሪያት፣ ቁጥጥሮች እና ጠቋሚዎች 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">

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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">

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

ሣጥን-መጠን

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

በጣም አልፎ አልፎ እሱን መሻር በሚፈልጉበት ጊዜ የሚከተለውን ነገር ይጠቀሙ።

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

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

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

ዳግም አስነሳ

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

ማህበረሰብ

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

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

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