ቡት ማሰሪያ

ስካፎልዲንግ

Bootstrap የተገነባው ምላሽ በሚሰጥ ባለ 12-አምድ ፍርግርግ ላይ ነው። በዚያ ስርዓት ላይ በመመስረት ቋሚ እና ፈሳሽ ስፋት አቀማመጦችንም አካተናል።

አለምአቀፍ ቅጦች ለሲኤስኤስ ዳግም ማስጀመር፣ የፊደል አጻጻፍ እና አገናኞች

HTML5 ሰነድ ያስፈልገዋል

ቡትስትራፕ የኤችቲኤምኤል 5 ሰነዶችን መጠቀም የሚያስፈልጋቸው የኤችቲኤምኤል ኤለመንቶችን እና የ CSS ንብረቶችን ይጠቀማል። በፕሮጀክትዎ ውስጥ በእያንዳንዱ የቡት ስታራፕ ገፅ መጀመሪያ ላይ ማካተትዎን እርግጠኛ ይሁኑ።

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

ትየባ እና አገናኞች

በስካፎልዲንግ. less ፋይል ውስጥ መሰረታዊ አለምአቀፋዊ ማሳያን፣ የፊደል አጻጻፍ እና የአገናኝ ስልቶችን አዘጋጅተናል። በተለይም እኛ፡-

  • በሰውነት ላይ ህዳግ ያስወግዱ
  • background-color: white;ላይ ያቀናብሩbody
  • @baseFontFamily, @baseFontSize, እና @baseLineHeightባህሪያትን እንደ የፊደል አጻጻፍ መሰረታችን ይጠቀሙ
  • የአለም አቀፉን የአገናኝ ቀለም ያዘጋጁ @linkColorእና የአገናኝ መስመሮቹን በ ላይ ብቻ ይተግብሩ:hover

Normalize በኩል ዳግም አስጀምር

ከBootstrap 2 ጀምሮ፣ ባህላዊው የሲኤስኤስ ዳግም ማስጀመር ከ Normalize.css የመጡ ንጥረ ነገሮችን ለመጠቀም ተሻሽሏል ፣ የኒኮላስ ጋልገር ፕሮጄክት HTML5 Boilerplateንም ያጎለብታል ።

አዲሱ ዳግም ማስጀመር አሁንም በ reset.less ውስጥ ሊገኝ ይችላል ፣ ነገር ግን ለአጭር ጊዜ እና ለትክክለኛነት ብዙ አባሎች ተወግደዋል።

ነባሪ የፍርግርግ ስርዓት 12 አምዶች ምላሽ ሰጪ ጠመዝማዛ

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

እንደ Bootstrap አካል የቀረበው ነባሪ የፍርግርግ ስርዓት 940 ፒክስል ስፋት ያለው ባለ 12-አምድ ፍርግርግ ነው።

እንዲሁም ለተለያዩ መሳሪያዎች እና ጥራቶች አራት ምላሽ ሰጪ ልዩነቶች አሉት፡ ስልክ፣ ታብሌት ቁም ነገር፣ የጡባዊ ገጽታ እና ትናንሽ ዴስክቶፖች እና ትልቅ ሰፊ ስክሪን ዴስክቶፖች።

  1. <div class = "ረድፍ" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

እዚህ ላይ እንደሚታየው መሰረታዊ አቀማመጥ በሁለት "ዓምዶች" ሊፈጠር ይችላል, እያንዳንዱ እያንዳንዳቸው እንደ የፍርግርግ ስርዓታችን አካል ከገለጽናቸው 12 የመሠረት ዓምዶች መካከል ብዛት ይይዛል.


አምዶችን በማካካስ ላይ

4
4 ማካካሻ 4
3 ማካካሻ 3
3 ማካካሻ 3
8 ማካካሻ 4 
  1. <div class = "ረድፍ" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

መክተቻ አምዶች

በ Bootstrap ውስጥ ባለው የማይንቀሳቀስ (ፈሳሽ ያልሆነ) ፍርግርግ ስርዓት፣ መክተቻ ቀላል ነው። ይዘትዎን ለመክተት፣ አሁን ባለው አምድ ውስጥ አዲስ እና የአምዶች .rowስብስብ ያክሉ።.span*.span*

ለምሳሌ

የጎጆ ረድፎች የአምዶች ስብስብ ማካተት አለባቸው ይህም የወላጅ ዓምዶች ብዛት ይጨምራል። ለምሳሌ፣ ሁለት የተዘጉ .span3ዓምዶች በ ውስጥ መቀመጥ አለባቸው .span6።

የአምድ 1 ደረጃ
ደረጃ 2
ደረጃ 2 
  1. <div class = "ረድፍ" > 
  2.   <div class = "span12" > 
  3.     የአምድ 1 ደረጃ
  4.     <div class = "ረድፍ" > 
  5.       <div class = "span6" > ደረጃ 2 </div> 
  6.       <div class = "span6" > ደረጃ 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

የፈሳሽ ፍርግርግ ስርዓት 12 ምላሽ ሰጪ፣ በመቶ ላይ የተመሰረቱ አምዶች

ፈሳሽ አምዶች

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

በመቶዎች እንጂ ፒክስሎች አይደሉም

የፈሳሽ ፍርግርግ ስርዓት ከቋሚ ፒክሰሎች ይልቅ ለዓምድ ስፋቶች በመቶዎች ይጠቀማል። እንዲሁም ለቁልፍ ስክሪን ጥራቶች እና መሳሪያዎች ተገቢውን መጠን በማረጋገጥ ልክ እንደ ቋሚ ፍርግርግ ስርዓታችን ተመሳሳይ ምላሽ ሰጪ ልዩነቶች አሉት።

ፈሳሽ ረድፎች

.rowወደ በመቀየር በቀላሉ ማንኛውንም ረድፍ ፈሳሽ ያድርጉ .row-fluid። ዓምዶቹ ልክ እንደነበሩ ይቆያሉ፣ ይህም በቋሚ እና በፈሳሽ አቀማመጦች መካከል ለመገልበጥ እጅግ በጣም ቀላል ያደርገዋል።

ምልክት ማድረጊያ

  1. <div class = "ረድፍ-ፈሳሽ" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ፈሳሽ ጎጆ

በፈሳሽ ፍርግርግ መክተት ትንሽ የተለየ ነው፡ የተሸከሙት የአምዶች ብዛት ከወላጅ ጋር መመሳሰል አያስፈልጋቸውም። በምትኩ፣ እያንዳንዱ ረድፍ የወላጅ አምድ 100% ስለሚወስድ የእርስዎ አምዶች በእያንዳንዱ ደረጃ ዳግም ይጀመራሉ።

ፈሳሽ 12
ፈሳሽ 6
ፈሳሽ 6 
  1. <div class = "ረድፍ-ፈሳሽ" > 
  2.   <div class = "span12" > 
  3.     የአምድ 1 ደረጃ
  4.     <div class = "ረድፍ-ፈሳሽ" > 
  5.       <div class = "span6" > ደረጃ 2 </div> 
  6.       <div class = "span6" > ደረጃ 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

ፍርግርግ ማበጀት

ተለዋዋጭ ነባሪ እሴት መግለጫ
@gridColumns 12 የአምዶች ብዛት
@gridColumnWidth 60 ፒክስል የእያንዳንዱ አምድ ስፋት
@gridGutterWidth 20 ፒክስል በአምዶች መካከል አሉታዊ ቦታ

በLESS ውስጥ ያሉ ተለዋዋጮች

በ Bootstrap ውስጥ የተገነቡት ከላይ በሰነድ የተቀመጠውን ነባሪ 940px ግሪድ ሲስተም ለማበጀት ጥቂት ተለዋዋጮች ናቸው። ሁሉም የፍርግርግ ተለዋዋጮች በተለዋዋጮች ውስጥ ይቀመጣሉ።

እንዴት ማበጀት እንደሚቻል

ፍርግርግ ማስተካከል ማለት ሶስቱን ተለዋዋጮች መለወጥ @grid*እና ቡትስትራፕን እንደገና ማጠናቀር ማለት ነው። የፍርግርግ ተለዋዋጮችን በተለዋዋጭ ይለውጡ። ያነሰ እና እንደገና ለመሰብሰብ ከተመዘገቡት አራት መንገዶች አንዱን ይጠቀሙ ። ተጨማሪ አምዶችን እያከሉ ከሆነ፣ በgrid.less ውስጥ ላሉ CSS ማከልዎን ያረጋግጡ።

ምላሽ ሰጪ ሆኖ መቆየት

የፍርግርግ ማበጀት የሚሠራው በነባሪ ደረጃ፣ በ940 ፒክስል ፍርግርግ ነው። የBootstrapን ምላሽ ሰጪ ገጽታዎች ለመጠበቅ፣ ግሪዶቹን በምላሽ ምላሽ ማበጀት ይኖርብዎታል።

አቀማመጦች ድረ-ገጾችን ለመፍጠር መሰረታዊ አብነቶች

ቋሚ አቀማመጥ

ነባሪው እና ቀላል 940px-ሰፊ፣ ያማከለ አቀማመጥ በነጠላ የቀረበ ለማንኛውም ድህረ ገጽ ወይም ገጽ <div class="container">።

  1. <ሰውነት>
  2.   <div class = "መያዣ" > 
  3.     ...
  4.   </div>
  5. </ body>

ፈሳሽ አቀማመጥ

<div class="container-fluid">ተጣጣፊ የገጽ መዋቅር፣ ደቂቃ- እና ከፍተኛ-ስፋት፣ እና የግራ-እጅ የጎን አሞሌ ይሰጣል። ለመተግበሪያዎች እና ሰነዶች ምርጥ ነው።

  1. <div class = "container-fluid" > 
  2.   <div class = "ረድፍ-ፈሳሽ" > 
  3.     <div class = "span2" > 
  4.       <!--የጎን አሞሌ ይዘት-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--የሰውነት ይዘት-->
  8.     </div>
  9.   </div>
  10. </div>

ምላሽ ሰጪ ዲዛይን ለተለያዩ መሳሪያዎች እና ጥራቶች የሚዲያ ጥያቄዎች

ምላሽ ሰጪ መሳሪያዎች

ምን ያደርጋሉ

የሚዲያ መጠይቆች በብዙ ሁኔታዎች ላይ ተመስርተው ብጁ CSSን ይፈቅዳሉ - ሬሾዎች ፣ ስፋቶች ፣ የማሳያ ዓይነት ፣ ወዘተ - ግን ብዙውን ጊዜ ዙሪያ min-widthእና max-width.

  • በእኛ ፍርግርግ ውስጥ የአምዱን ስፋት ያስተካክሉ
  • አስፈላጊ በሆነበት ቦታ ላይ ከመንሳፈፍ ይልቅ ንጥረ ነገሮችን ቁልል
  • ለመሣሪያዎች ይበልጥ ተገቢ እንዲሆን የርዕሶችን እና የጽሑፍ መጠንን ቀይር

የሚዲያ ጥያቄዎችን በሃላፊነት ተጠቀም እና ለሞባይል ታዳሚዎችህ ጅምር ብቻ። ለትላልቅ ፕሮጀክቶች፣ የሚዲያ መጠይቆችን ሳይሆን የተወሰኑ የኮድ መሰረትዎችን አስቡባቸው።

የሚደገፉ መሳሪያዎች

Bootstrap ፕሮጀክቶችዎን በተለያዩ መሳሪያዎች እና የስክሪን ጥራቶች ላይ ይበልጥ ተገቢ እንዲሆኑ ለማገዝ በአንድ ፋይል ውስጥ ያሉ ጥቂት የሚዲያ መጠይቆችን ይደግፋል። የተካተተውን እነሆ፡-

መለያ የአቀማመጥ ስፋት የአምድ ስፋት የጎርፍ ስፋት
ስማርትፎኖች 480 ፒክስል እና ከዚያ በታች ፈሳሽ አምዶች፣ ምንም ቋሚ ስፋቶች የሉም
ዘመናዊ ስልኮች ወደ ታብሌቶች 767 ፒክስል እና ከዚያ በታች ፈሳሽ አምዶች፣ ምንም ቋሚ ስፋቶች የሉም
የቁም ታብሌቶች 768 ፒክስል እና ከዚያ በላይ 42 ፒክስል 20 ፒክስል
ነባሪ 980 ፒክስል እና በላይ 60 ፒክስል 20 ፒክስል
ትልቅ ማሳያ 1200 ፒክስል እና በላይ 70 ፒክስል 30 ፒክስል

ሜታ መለያ ያስፈልገዋል

መሣሪያዎች ምላሽ ሰጪ ገጾችን በትክክል ማሣየታቸውን ለማረጋገጥ የእይታ ፖርት ሜታ መለያውን ያካትቱ።

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

የሚዲያ ጥያቄዎችን በመጠቀም

Bootstrap እነዚህን የሚዲያ ጥያቄዎች በራስ ሰር አያካትትም ነገር ግን እነሱን መረዳት እና ማከል በጣም ቀላል እና አነስተኛ ማዋቀርን ይጠይቃል። የBootstrapን ምላሽ ሰጪ ባህሪያት ለማካተት ጥቂት አማራጮች አሉዎት፡-

  1. የተጠናቀረውን ምላሽ ሰጪ ስሪት፣ bootstrap-responsive.css ይጠቀሙ
  2. @import "responsive.less" ያክሉ እና Bootstrapን እንደገና ያጠናቅቁ
  3. ምላሽ ሰጪን እንደ የተለየ ፋይል ያሻሽሉ እና እንደገና ያጠናቅቁ

ለምን ዝም ብለህ አታካተትም? እውነቱን ለመናገር, ሁሉም ነገር ምላሽ ሰጪ መሆን የለበትም. ገንቢዎች ይህን ባህሪ እንዲያስወግዱት ከማበረታታት ይልቅ እሱን ማንቃት የተሻለ እንደሆነ እናስባለን።

  1.   // የመሬት ገጽታ ስልኮች እና ታች
  2.   @ሚዲያ ( ከፍተኛ - ስፋት : 480 ፒክስል ) { ... }     
  3.  
  4.   // የመሬት ገጽታ ስልክ ወደ የቁም ታብሌት
  5.   @ሚዲያ ( ከፍተኛ - ስፋት : 767 ፒክስል ) { ... }     
  6.  
  7.   // የቁም ጡባዊ ወደ የመሬት ገጽታ እና ዴስክቶፕ
  8.   @ሚዲያ ( ደቂቃ - ስፋት : 768 ፒክስል ) እና ( ከፍተኛ - ስፋት : 979 ፒክስል ) { ... }        
  9.  
  10.   // ትልቅ ዴስክቶፕ
  11.   @ሚዲያ ( ደቂቃ - ስፋት : 1200 ፒክስል ) { ... }

ምላሽ ሰጪ የመገልገያ ክፍሎች

ምንድን ናቸው

ለፈጣን የሞባይል ተስማሚ ልማት እነዚህን መሰረታዊ የመገልገያ ክፍሎች በመሳሪያ ለማሳየት እና ለመደበቅ ይጠቀሙ።

መቼ መጠቀም

በተወሰነ መሰረት ተጠቀም እና ሙሉ ለሙሉ የተለያዩ የአንድ ጣቢያ ስሪቶችን ከመፍጠር ተቆጠብ። ይልቁንስ የእያንዳንዱን መሳሪያ አቀራረብ ለማሟላት ይጠቀሙባቸው።

ለምሳሌ፣ <select>በተንቀሳቃሽ ስልክ አቀማመጦች ላይ የናቭ ኤለመንት ሊያሳዩ ይችላሉ፣ ነገር ግን በጡባዊዎች ወይም በዴስክቶፖች ላይ አይደለም።

የድጋፍ ክፍሎች

እዚህ የሚታየው እኛ የምንደግፋቸው የመማሪያ ክፍሎች ሠንጠረዥ እና በተሰጠው የሚዲያ መጠይቅ አቀማመጥ (በመሳሪያ የተለጠፈ) ላይ ያላቸው ተጽእኖ ነው። ውስጥ ሊገኙ ይችላሉ responsive.less.

ክፍል ስልኮች480 ፒክስል እና ከዚያ በታች ታብሌቶች767 ፒክስል እና ከዚያ በታች ዴስክቶፖች768 ፒክስል እና ከዚያ በላይ
.visible-phone የሚታይ
.visible-tablet የሚታይ
.visible-desktop የሚታይ
.hidden-phone የሚታይ የሚታይ
.hidden-tablet የሚታይ የሚታይ
.hidden-desktop የሚታይ የሚታይ

የሙከራ መያዣ

ከላይ ያሉትን ክፍሎች ለመሞከር የአሳሽዎን መጠን ይለውጡ ወይም በተለያዩ መሳሪያዎች ላይ ይጫኑ።

የሚታየው በ...

አረንጓዴ ምልክት ማድረጊያ ክፍል በአሁኑ የእይታ እይታዎ ላይ እንደሚታይ ያመለክታሉ።

  • ስልክ✔ ስልክ
  • ጡባዊ✔ ታብሌት
  • ዴስክቶፕ✔ ዴስክቶፕ

የተደበቀ በ...

እዚህ፣ አረንጓዴ ምልክቶች እንደሚያመለክቱት ክፍል አሁን ባለው እይታዎ ውስጥ ተደብቋል።

  • ስልክ✔ ስልክ
  • ጡባዊ✔ ታብሌት
  • ዴስክቶፕ✔ ዴስክቶፕ