ስካፎልዲንግ

HTML5 ሰነድ ያስፈልገዋል

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</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 የእይታ ወደቦች በታች፣ ዓምዶቹ ፈሳሽ ይሆናሉ እና በአቀባዊ ይደረደራሉ።

መሰረታዊ ፍርግርግ HTML

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

<div class = "ረድፍ" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

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

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

3 ማካካሻ 2

3 ማካካሻ 1

3 ማካካሻ 2

6 ማካካሻ 3

<div class = "ረድፍ" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

መክተቻ አምዶች

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

ደረጃ 1 አምድ

ደረጃ 2

<div class = "ረድፍ" > 
  <div class = "span9" > 
    ደረጃ 1 አምድ
    <div class = "ረድፍ" > 
      <div class = "span6" > ደረጃ 2 </div> 
      <div class = "span3" > ደረጃ 2 </div> 
    </div>
  </div>
</div>

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

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

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

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

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

ፈሳሽ ማካካሻ

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

4 ማካካሻ 4

3 ማካካሻ 3

6 ማካካሻ 6

<div class = "ረድፍ-ፈሳሽ" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

ፈሳሽ ጎጆ

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

ፈሳሽ 12

ፈሳሽ 6

<div class = "ረድፍ-ፈሳሽ" > 
  <div class = "span12" > 
    ፈሳሽ 12
    <div class = "ረድፍ-ፈሳሽ" > 
      <div class = "span6" > 
        ፈሳሽ 6
        <div class = "ረድፍ-ፈሳሽ" > 
          <div class = "span6" > ፈሳሽ 6 </div> 
          <div class = "span6" > ፈሳሽ 6 </div> 
        </div>
      </div>
      <div class = "span6" > ፈሳሽ 6 </div> 
    </div>
  </div>
</div>

ቋሚ አቀማመጥ

የጋራ ቋሚ ስፋት (እና እንደ አማራጭ ምላሽ ሰጪ) <div class="container">ከሚፈለገው ጋር ብቻ ያቀርባል።

<ሰውነት>
  <div class = "መያዣ" > 
    ...
  </div>
</ body>

ፈሳሽ አቀማመጥ

ፈሳሽ ባለ ሁለት-አምድ ገጽ ይፍጠሩ — <div class="container-fluid">ለመተግበሪያዎች እና ሰነዶች ምርጥ።

<div class = "container-fluid" > 
  <div class = "ረድፍ-ፈሳሽ" > 
    <div class = "span2" > 
      <!--የጎን አሞሌ ይዘት-->
    </div>
    <div class = "span10" > 
      <!--የሰውነት ይዘት-->
    </div>
  </div>
</div>

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

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

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<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 ፒክስል እና ከዚያ በታች	ፈሳሽ አምዶች፣ ምንም ቋሚ ስፋቶች የሉም

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

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

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

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

መቼ መጠቀም

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

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

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

የሚታየው በ...

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

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

የተደበቀ በ...

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

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

ዓለም አቀፍ ቅንብሮች