መግቢያ
ምላሽ ሰጪ፣ ሞባይል-የመጀመሪያ ጣቢያዎችን፣ በjsDelivr እና የአብነት ማስጀመሪያ ገጽን ለመገንባት በዓለም ላይ በጣም ታዋቂ በሆነው በ Bootstrap ጀምር።
ፈጣን ጅምር
Bootstrapን ወደ ፕሮጀክትዎ በፍጥነት ማከል ይፈልጋሉ? jsDelivr ላይ ባሉ ሰዎች በነጻ የቀረበ jsDelivr ይጠቀሙ። የጥቅል አስተዳዳሪን በመጠቀም ወይንስ የምንጭ ፋይሎችን ማውረድ ይፈልጋሉ? ወደ ማውረዶች ገጽ ይሂዱ።
CSS
የእኛን CSS ለመጫን ከሌሎች የቅጥ ሉሆች በፊት የቅጥ <link>
ሉህን ይቅዱ ።<head>
ጄ.ኤስ
ብዙ ክፍሎቻችን ለመስራት ጃቫስክሪፕት መጠቀምን ይጠይቃሉ። በተለይም jQuery ፣ Popper.js እና የራሳችን ጃቫስክሪፕት ፕለጊን ያስፈልጋቸዋል ። የሚከተሉትን ዎች ለማንቃት ከመዝጊያ መለያው <script>
በፊት በገጾችዎ መጨረሻ አጠገብ ያስቀምጡ ። </body>
jQuery መጀመሪያ፣ከዚያ Popper.js፣እና ከዚያ የእኛ ጃቫስክሪፕት ተሰኪዎች መምጣት አለበት።
እኛ የ jQuery's slim build እንጠቀማለን ፣ ግን ሙሉው ስሪትም ይደገፋል።
የትኞቹ አካላት jQuery፣ our JS እና Popper.js በግልፅ እንደሚፈልጉ ለማወቅ ጉጉት አለ? ከታች ያለውን የትዕይንት ክፍሎች ማገናኛ ጠቅ ያድርጉ። ስለ አጠቃላይ ገጽ አወቃቀር እርግጠኛ ካልሆኑ፣ ለአብነት የገጽ አብነት ማንበብዎን ይቀጥሉ።
የእኛ bootstrap.bundle.js
እና ፖፐርንbootstrap.bundle.min.js
ያካትታል , ግን jQuery አይደለም . በ Bootstrap ውስጥ ምን እንደሚካተት የበለጠ መረጃ ለማግኘት እባክዎ የይዘት ክፍላችንን ይመልከቱ።
ጃቫስክሪፕት የሚያስፈልጋቸውን አካላት አሳይ
- ለማሰናበት ማንቂያዎች
- ግዛቶችን እና የአመልካች ሳጥን/የሬዲዮ ተግባርን ለመቀየር ቁልፎች
- ለሁሉም የስላይድ ባህሪያት፣ ቁጥጥሮች እና ጠቋሚዎች Carousel
- የይዘት ታይነትን ለመቀየር ሰብስብ
- የማሳያ እና አቀማመጥ ተቆልቋይ (እንዲሁም Popper.js ያስፈልገዋል )
- የማሳያ፣ አቀማመጥ እና የማሸብለል ባህሪ
- ምላሽ ሰጪ ባህሪን ተግባራዊ ለማድረግ የስብስብ ተሰኪያችንን ለማራዘም Navbar
- ለማሳየት እና ቦታ ለማስቀመጥ የሚረዱ ጥቆማዎች እና ፖፖቨር ( Popper.js ንም ይፈልጋል )
- Scrollspy ለማሸብለል ባህሪ እና የአሰሳ ዝመናዎች
የጀማሪ አብነት
ገጾችዎን በቅርብ ጊዜ የንድፍ እና የእድገት ደረጃዎች ማቀናበሩን ያረጋግጡ። ይህ ማለት HTML5 ዶክታይፕ መጠቀም እና ለትክክለኛ ምላሽ ሰጪ ባህሪያት የመመልከቻ ሜታ መለያን ማካተት ማለት ነው። ሁሉንም አንድ ላይ አስቀምጡ እና ገጾችዎ እንደዚህ መምሰል አለባቸው።
ለአጠቃላይ ገጽ መስፈርቶች የሚያስፈልግህ ያ ብቻ ነው። የጣቢያዎን ይዘት እና አካላት መዘርጋት ለመጀመር የአቀማመጥ ሰነዶችን ወይም የእኛን ይፋዊ ምሳሌ ይጎብኙ ።
ጠቃሚ ዓለም አቀፍ
ቡትስትራፕ በሚጠቀሙበት ጊዜ ልታስተዋውቃቸው የሚገቡ በጣት የሚቆጠሩ ጠቃሚ አለምአቀፋዊ ስታይል እና መቼቶችን ይጠቀማል፣ ሁሉም ከሞላ ጎደል የአሳሽ ስልቶችን መደበኛ ለማድረግ ያተኮሩ ናቸው። ወደ ውስጥ እንዝለቅ።
HTML5 ሰነድ
Bootstrap HTML5 ዶክትፕ መጠቀምን ይጠይቃል። ያለሱ፣ አንዳንድ አስቂኝ ያልተሟላ የቅጥ ስራዎችን ያያሉ፣ ነገር ግን እሱን ጨምሮ ምንም አይነት እንቅፋት መፍጠር የለበትም።
ምላሽ ሰጪ ዲበ መለያ
ቡትስትራፕ በመጀመሪያ ሞባይል ተዘጋጅቷል ፣ ይህ ስልት በመጀመሪያ ለሞባይል መሳሪያዎች ኮድን የምናመቻችበት እና ከዚያም እንደ አስፈላጊነቱ የCSS የሚዲያ መጠይቆችን የምንጨምርበት ነው። ለሁሉም መሳሪያዎች ትክክለኛ አተረጓጎም እና የንክኪ ማጉላትን ለማረጋገጥ፣ ምላሽ ሰጪውን የመመልከቻ ዲበ መለያ ወደ እርስዎ ያክሉ <head>
።
በጅማሬ አብነት ውስጥ የዚህ ምሳሌ በተግባር ላይ ማየት ይችላሉ ።
ሣጥን-መጠን
በሲኤስኤስ ውስጥ ለበለጠ ቀጥተኛ መጠን፣ ዓለም አቀፋዊ box-sizing
እሴቱን ከ content-box
ወደ ቀይርነው border-box
። ይህ የአንድን ንጥረ ነገር የመጨረሻ ስሌት ስፋት እንደማይጎዳው ያረጋግጣል padding
፣ ነገር ግን እንደ ጎግል ካርታዎች እና ጉግል ብጁ የፍለጋ ሞተር ባሉ የሶስተኛ ወገን ሶፍትዌሮች ላይ ችግር ሊፈጥር ይችላል።
በጣም አልፎ አልፎ እሱን መሻር በሚፈልጉበት ጊዜ የሚከተለውን ነገር ይጠቀሙ።
ከላይ በተጠቀሰው ቅንጣቢ፣ በ ::before
እና በኩል የመነጨ ይዘትን ጨምሮ የጎጆ ክፍሎች - ሁሉም ለዚያ ::after
የተገለጹትን ይወርሳሉ ።box-sizing
.selector-for-some-widget
ስለ ሣጥን ሞዴል እና መጠን በ CSS ዘዴዎች የበለጠ ይወቁ ።
ዳግም አስነሳ
ለተሻሻለ የአሳሽ አተረጓጎም ፣ በአሳሾች እና በመሳሪያዎች ላይ ያሉ አለመግባባቶችን ለማስተካከል ዳግም ማስጀመርን እንጠቀማለን ለተለመዱት የኤችቲኤምኤል አባሎች ትንሽ ተጨማሪ የሃሳብ ዳግም ማስጀመሪያዎችን እያቀረብን ነው።
ማህበረሰብ
በBootstrap እድገት ላይ ወቅታዊ መረጃ ያግኙ እና በእነዚህ አጋዥ ግብዓቶች ማህበረሰቡን ያግኙ።
- @getbootstrap በትዊተር ላይ ይከተሉ ።
- ለኦፊሴላዊው የ Bootstrap ብሎግ ያንብቡ እና ይመዝገቡ ።
- በ IRC ውስጥ ካሉ ቡትስትራፕሮች ጋር ይወያዩ። በአገልጋዩ
irc.freenode.net
ላይ ፣##bootstrap
በሰርጡ ውስጥ። bootstrap-4
የማስፈጸሚያ እገዛ በ Stack Overflow (መለያ የተሰጠው ) ላይ ሊገኝ ይችላል ።- ገንቢዎች ለከፍተኛው ግኝት በ npm
bootstrap
ወይም በተመሳሳዩ የመላኪያ ዘዴዎች በሚሰራጩበት ጊዜ የBootstrapን ተግባር በሚቀይሩ ወይም በሚጨምሩ ጥቅሎች ላይ ያለውን ቁልፍ ቃል መጠቀም አለባቸው ።
እንዲሁም በትዊተር ላይ @getbootstrapን መከተል ትችላለህ ለአዳዲስ ወሬዎች እና ግሩም የሙዚቃ ቪዲዮዎች።