ቡት ማሰሪያ

ስካፎልዲንግ

Bootstrap የተገነባው ምላሽ በሚሰጡ ባለ 12-አምድ ፍርግርግ፣ አቀማመጦች እና ክፍሎች ላይ ነው።

ዓለም አቀፍ ቅንብሮች

HTML5 ሰነድ ያስፈልገዋል

Bootstrap የ HTML5 ዶክታይፕን መጠቀም የሚያስፈልጋቸው የተወሰኑ የኤችቲኤምኤል አባላትን እና የ CSS ንብረቶችን ይጠቀማል። በሁሉም ፕሮጀክቶችዎ መጀመሪያ ላይ ያካትቱት።

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

ትየባ እና አገናኞች

ቡትስትራፕ መሰረታዊ አለምአቀፋዊ ማሳያን፣ የፊደል አጻጻፍ እና የአገናኝ ስልቶችን ያዘጋጃል። በተለይም እኛ፡-

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

እነዚህ ቅጦች በስካፎልዲንግ ውስጥ ሊገኙ ይችላሉ .less .

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

በ Bootstrap 2፣ የድሮው ዳግም ማስጀመሪያ እገዳ ለ Normalize.css ፣ በኒኮላስ ጋልገር እና ጆናታን ኒል ፕሮጀክት እንዲሁም HTML5 Boilerplate ን የሚደግፍ ወድቋል ። በዳግም ማስጀመሪያችን ውስጥ ብዙ Normalize ን እየተጠቀምን ሳለ ለBootstrap አንዳንድ ክፍሎችን አስወግደናል።

ነባሪ የፍርግርግ ስርዓት

የቀጥታ ፍርግርግ ምሳሌ

ነባሪው የቡትስትራፕ ፍርግርግ ስርዓት 12 አምዶችን ይጠቀማል፣ ይህም ምላሽ ሰጪ ባህሪያት ሳይነቁ 940px ሰፊ መያዣን ይፈጥራል ። ምላሽ ሰጪው የሲኤስኤስ ፋይል ሲጨመር፣ ፍርግርግ እንደ እርስዎ እይታ 724 ፒክስል እና 1170 ፒክስል ስፋት ይስማማል። ከ767px የእይታ ወደቦች በታች፣ ዓምዶቹ ፈሳሽ ይሆናሉ እና በአቀባዊ ይደረደራሉ።

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

መሰረታዊ ፍርግርግ HTML

ለቀላል ሁለት አምድ አቀማመጥ፣ a ይፍጠሩ እና ተገቢውን የአምዶች .rowብዛት ይጨምሩ ። .span*ይህ ባለ 12-አምድ ፍርግርግ እንደመሆኑ እያንዳንዳቸው .span*የእነዚያን 12 ዓምዶች ብዛት ይሸፍናሉ እና ሁልጊዜም ለእያንዳንዱ ረድፍ እስከ 12 (ወይም በወላጅ ውስጥ ያሉ የአምዶች ብዛት) መደመር አለባቸው።

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

ይህንን ምሳሌ ከተመለከትን ፣ ለ 12 አጠቃላይ አምዶች .span4እና .span8የተሟላ ረድፍ አደረግን ።

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

.offset*ክፍሎችን በመጠቀም ዓምዶችን ወደ ቀኝ ያንቀሳቅሱ ። እያንዳንዱ ክፍል የአንድ አምድ የግራ ህዳግ በጠቅላላ አምድ ይጨምራል። ለምሳሌ፣ ከአራት አምዶች በላይ .offset4ይንቀሳቀሳል ።.span4

4
3 ማካካሻ 2
3 ማካካሻ 1
3 ማካካሻ 2
6 ማካካሻ 3 
  1. <div class = "ረድፍ" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

መክተቻ አምዶች

ይዘትዎን ከነባሪው ፍርግርግ ጋር ለመክተት አሁን ባለው አምድ ውስጥ አዲስ እና የአምዶች .rowስብስብ ያክሉ። የጎጆ ረድፎች የወላጁን ዓምዶች ብዛት የሚጨምሩ የአምዶች ስብስብ ማካተት አለባቸው።.span*.span*

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

ፈሳሽ ፍርግርግ ስርዓት

የቀጥታ ፈሳሽ ፍርግርግ ምሳሌ

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

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

መሠረታዊ ፈሳሽ ፍርግርግ HTML

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

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

ፈሳሽ ማካካሻ

ልክ እንደ ቋሚ ፍርግርግ ስርዓት ማካካሻ በተመሳሳይ መንገድ ይሰራል .offset*፡ በዛ ብዙ አምዶች ለማካካስ ወደ ማንኛውም አምድ ያክሉ።

4
4 ማካካሻ 4
3 ማካካሻ 3
3 ማካካሻ 3
6 ማካካሻ 6 
  1. <div class = "ረድፍ-ፈሳሽ" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

ፈሳሽ ጎጆ

የፈሳሽ ፍርግርግ ጎጆዎችን በተለየ መንገድ ይጠቀማሉ፡ እያንዳንዱ የጎጆው የአምዶች ደረጃ እስከ 12 አምዶች መጨመር አለበት። ይህ የሆነበት ምክንያት የፈሳሽ ፍርግርግ ስፋቶችን ለማዘጋጀት ፒክስሎችን ሳይሆን መቶኛዎችን ስለሚጠቀም ነው።

ፈሳሽ 12
ፈሳሽ 6
ፈሳሽ 6
ፈሳሽ 6
ፈሳሽ 6 
  1. <div class = "ረድፍ-ፈሳሽ" > 
  2.   <div class = "span12" > 
  3.     ፈሳሽ 12
  4.     <div class = "ረድፍ-ፈሳሽ" > 
  5.       <div class = "span6" > 
  6.         ፈሳሽ 6
  7.         <div class = "ረድፍ-ፈሳሽ" > 
  8.           <div class = "span6" > ፈሳሽ 6 </div> 
  9.           <div class = "span6" > ፈሳሽ 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > ፈሳሽ 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

አቀማመጦች

ቋሚ አቀማመጥ

የጋራ ቋሚ ስፋት (እና እንደ አማራጭ ምላሽ ሰጪ) <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>

ምላሽ ሰጪ ንድፍ

ምላሽ ሰጪ ባህሪያትን ማንቃት

<head>ተገቢውን ሜታ መለያ እና ተጨማሪ የቅጥ ሉህ በሰነድዎ ውስጥ በማካተት ምላሽ ሰጪ CSSን ያብሩ ። ቡትስትራፕን ከአብጁ ገጽ ላይ ካጠናቀሩት፣ ሜታ መለያውን ብቻ ማካተት ያስፈልግዎታል።

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

ቀና በል!ሁሉም ነገር ምላሽ ሰጪ መሆን ስለሚያስፈልገው ቡትስትራፕ በነባሪነት ምላሽ ሰጪ ባህሪያትን አያካትትም። ገንቢዎች ይህን ባህሪ እንዲያስወግዱ ከማበረታታት ይልቅ፣ እንደ አስፈላጊነቱ እሱን ማንቃት የተሻለ እንደሆነ እናስባለን።

ስለ ምላሽ ሰጪ Bootstrap

ምላሽ ሰጪ መሳሪያዎች

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

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

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

የሚደገፉ መሳሪያዎች

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

መለያ የአቀማመጥ ስፋት የአምድ ስፋት የጎርፍ ስፋት
ትልቅ ማሳያ 1200 ፒክስል እና በላይ 70 ፒክስል 30 ፒክስል
ነባሪ 980 ፒክስል እና በላይ 60 ፒክስል 20 ፒክስል
የቁም ታብሌቶች 768 ፒክስል እና ከዚያ በላይ 42 ፒክስል 20 ፒክስል
ስልኮች ወደ ታብሌቶች 767 ፒክስል እና ከዚያ በታች ፈሳሽ አምዶች፣ ምንም ቋሚ ስፋቶች የሉም
ስልኮች 480 ፒክስል እና ከዚያ በታች ፈሳሽ አምዶች፣ ምንም ቋሚ ስፋቶች የሉም 
  1. /* ትልቅ ዴስክቶፕ */
  2. @ሚዲያ ( ደቂቃ - ስፋት : 1200 ፒክስል ) { ... }     
  3.  
  4. /* የቁም ጡባዊ ወደ የመሬት አቀማመጥ እና ዴስክቶፕ */
  5. @ሚዲያ ( ደቂቃ - ስፋት : 768 ፒክስል ) እና ( ከፍተኛ - ስፋት : 979 ፒክስል ) { ... }        
  6.  
  7. /* የመሬት ገጽታ ስልክ ወደ የቁም ታብሌት */
  8. @ሚዲያ ( ከፍተኛ - ስፋት : 767 ፒክስል ) { ... }     
  9.  
  10. /* የመሬት ገጽታ ስልኮች እና ታች */
  11. @ሚዲያ ( ከፍተኛ - ስፋት : 480 ፒክስል ) { ... }

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

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

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

መቼ መጠቀም

በተወሰነ መሰረት ተጠቀም እና ሙሉ ለሙሉ የተለያዩ የአንድ ጣቢያ ስሪቶችን ከመፍጠር ተቆጠብ። ይልቁንስ የእያንዳንዱን መሳሪያ አቀራረብ ለማሟላት ይጠቀሙባቸው። ምላሽ ሰጪ መገልገያዎች ከጠረጴዛዎች ጋር ጥቅም ላይ መዋል የለባቸውም, እና እንደዚሁም አይደገፉም.

ምላሽ ሰጪ መገልገያዎች የሙከራ መያዣ

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

የሚታየው በ...

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

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

የተደበቀ በ...

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

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