በ 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 (መለያ የተሰጠው ) ላይ ሊገኝ ይችላል ።- ገንቢዎች ለከፍተኛው ግኝት በ npm
bootstrap
ወይም በተመሳሳዩ የመላኪያ ዘዴዎች በሚሰራጩበት ጊዜ የBootstrapን ተግባር በሚያሻሽሉ ወይም በሚጨምሩ ጥቅሎች ላይ ያለውን ቁልፍ ቃል መጠቀም አለባቸው ።
እንዲሁም በትዊተር ላይ @getbootstrapን መከተል ትችላለህ ለአዳዲስ ወሬዎች እና ግሩም የሙዚቃ ቪዲዮዎች።