አጠቃላይ እይታ

ለተሻለ፣ ፈጣን እና ጠንካራ የድር ልማት አቀራረባችንን ጨምሮ የቡትስትራፕ መሠረተ ልማት ቁልፍ ቁራጮች ላይ ዝቅተኛ ዝቅታ ያግኙ።

HTML5 ሰነድ

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

<!doctype html>
<html lang="en">
  ...
</html>

መጀመሪያ ሞባይል

በBootstrap 2፣ ለማዕቀፉ ቁልፍ ገጽታዎች አማራጭ የሞባይል ተስማሚ ቅጦችን ጨምረናል። በBootstrap 3፣ ከመጀመሪያው ጀምሮ ለሞባይል ተስማሚ እንዲሆን ፕሮጀክቱን ደግመን ጽፈነዋል። በአማራጭ የሞባይል ስታይል ላይ ከመጨመር ይልቅ በቀጥታ ወደ ዋናው ይጋገራሉ። በእርግጥ ቡትስትራፕ መጀመሪያ ሞባይል ነው ። የሞባይል የመጀመሪያ ቅጦች በተለየ ፋይሎች ውስጥ ሳይሆን በመላው ቤተ-መጽሐፍት ውስጥ ይገኛሉ።

ትክክለኛውን አተረጓጎም ለማረጋገጥ እና ማጉላትን ይንኩ፣ የመመልከቻ ዲበ መለያን ወደ እርስዎ ያክሉ <head>።

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

user-scalable=noወደ መመልከቻ ሜታ መለያ በማከል በሞባይል መሳሪያዎች ላይ የማጉላት ችሎታዎችን ማሰናከል ይችላሉ ። ይህ ማጉላትን ያሰናክላል፣ ይህም ማለት ተጠቃሚዎች ማሸብለል የሚችሉት ብቻ ነው፣ እና ጣቢያዎ እንደ ቤተኛ መተግበሪያ እንዲሰማው ያደርጋል። በአጠቃላይ፣ ይህንን በእያንዳንዱ ጣቢያ ላይ አንመክረውም፣ ስለዚህ ጥንቃቄ ያድርጉ!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

  • background-color: #fff;ላይ ያቀናብሩbody
  • @font-family-base, @font-size-base, እና @line-height-baseባህሪያትን እንደ የትየባ መሰረታችን ይጠቀሙ
  • የአለም አቀፉን የአገናኝ ቀለም ያዘጋጁ @link-colorእና የአገናኝ መስመሮቹን በ ላይ ብቻ ይተግብሩ:hover

እነዚህ ቅጦች በ ውስጥ ሊገኙ ይችላሉ scaffolding.less.

መደበኛ አድርግ.css

ለተሻሻለ አሳሽ አተረጓጎም Normalize.css ን እንጠቀማለን ፣ በኒኮላስ ጋላገር እና በጆናታን ኒል ፕሮጀክት ።

ኮንቴይነሮች

Bootstrap የጣቢያ ይዘቶችን ለመጠቅለል እና የፍርግርግ ስርዓታችንን ለማኖር የያዘ ኤለመንት ይፈልጋል። በፕሮጀክቶችዎ ውስጥ ለመጠቀም ከሁለት ኮንቴይነሮች ውስጥ አንዱን መምረጥ ይችላሉ። በምክንያት እና በሌሎችም ምክንያት paddingየትኛውም ኮንቴይነር ጎጆ እንደማይገኝ ልብ ይበሉ።

.containerምላሽ ለሚሰጥ ቋሚ ስፋት መያዣ ይጠቀሙ .

<div class="container">
  ...
</div>

.container-fluidየእይታ እይታዎን አጠቃላይ ስፋት የሚሸፍን ለሙሉ ስፋት መያዣ ይጠቀሙ ።

<div class="container-fluid">
  ...
</div>

የፍርግርግ ስርዓት

ቡትስትራፕ መሳሪያው ወይም የመመልከቻው መጠን ሲጨምር እስከ 12 አምዶች ድረስ የሚለካው ምላሽ ሰጪ፣ የሞባይል የመጀመሪያ ፈሳሽ ፍርግርግ ስርዓትን ያካትታል። ለቀላል የአቀማመጥ አማራጮች አስቀድሞ የተገለጹ ክፍሎችን ፣ እንዲሁም ተጨማሪ የትርጉም አቀማመጦችን ለመፍጠር ኃይለኛ ድብልቆችን ያካትታል ።

መግቢያ

የፍርግርግ ስርዓቶች የእርስዎን ይዘት በሚያስቀምጡ ተከታታይ ረድፎች እና አምዶች የገጽ አቀማመጦችን ለመፍጠር ያገለግላሉ። የ Bootstrap ፍርግርግ ስርዓት እንዴት እንደሚሰራ እነሆ፡-

  • ለትክክለኛው አሰላለፍ እና ንጣፍ ረድፎች በ .container(ቋሚ-ስፋት) ወይም (ሙሉ ስፋት) ውስጥ መቀመጥ አለባቸው ።.container-fluid
  • የአምዶች አግድም ቡድኖችን ለመፍጠር ረድፎችን ተጠቀም።
  • ይዘቱ በአምዶች ውስጥ መቀመጥ አለበት፣ እና አምዶች ብቻ የረድፎች ልጆች ሊሆኑ ይችላሉ።
  • አስቀድሞ የተገለጹ የፍርግርግ ክፍሎችን ይወዳሉ .rowእና .col-xs-4በፍጥነት የፍርግርግ አቀማመጦችን ለመስራት ይገኛሉ። ያነሱ ድብልቅ ነገሮች ለበለጠ የትርጉም አቀማመጦችም ጥቅም ላይ ሊውሉ ይችላሉ።
  • አምዶች ጉድጓዶችን ይፈጥራሉ (በአምድ ይዘት መካከል ክፍተቶች) በ padding. .rowያ ንጣፍ በመጀመሪያው እና በመጨረሻው አምድ በ s ላይ ባለው አሉታዊ ህዳግ በመደዳ ተስተካክሏል ።
  • ከዚህ በታች ያሉት ምሳሌዎች ለምን እንደወጡ አሉታዊው ህዳግ ነው። በፍርግርግ አምዶች ውስጥ ያለው ይዘት ፍርግርግ ካልሆኑ ይዘቶች ጋር እንዲሰለፍ ነው።
  • የፍርግርግ ዓምዶች የሚፈጠሩት ለመዘርጋት የሚፈልጉትን አሥራ ሁለት የሚገኙ አምዶችን በመግለጽ ነው። ለምሳሌ, ሶስት እኩል ዓምዶች ሶስት ይጠቀማሉ .col-xs-4.
  • በአንድ ረድፍ ውስጥ ከ12 በላይ ዓምዶች ከተቀመጡ፣ እያንዳንዱ ተጨማሪ ዓምዶች ቡድን እንደ አንድ ክፍል፣ ወደ አዲስ መስመር ይጠቀለላል።
  • የፍርግርግ መደቦች ስክሪን ስፋት ባላቸው መሳሪያዎች ላይ የሚተገበረው ከተሰባሪው ነጥብ መጠኖች በላይ ወይም እኩል ነው፣ እና በትንሽ መሳሪያዎች ላይ ያነጣጠሩ የፍርግርግ ክፍሎችን ይሽራል። ስለዚህ፣ ለምሳሌ ማንኛውንም .col-md-*ክፍል ለአንድ ኤለመንት መተግበር በመካከለኛ መሳሪያዎች ላይ ያለውን የአጻጻፍ ስልት ብቻ ሳይሆን ክፍል ከሌለ በትልልቅ መሳሪያዎች ላይም ተጽእኖ ይኖረዋል .col-lg-*።

እነዚህን መርሆዎች ወደ ኮድዎ ለመተግበር ምሳሌዎችን ይመልከቱ።

የሚዲያ ጥያቄዎች

በፍርግርግ ስርዓታችን ውስጥ ቁልፍ መግቻ ነጥቦችን ለመፍጠር የሚከተሉትን የሚዲያ ጥያቄዎችን በትንሽ ፋይሎቻችን እንጠቀማለን።

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

max-widthCSS ን ወደ ጠባብ የመሳሪያዎች ስብስብ ለማካተት አልፎ አልፎ በእነዚህ የሚዲያ መጠይቆች ላይ እናሰፋለን።

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

የፍርግርግ አማራጮች

የ Bootstrap ፍርግርግ ስርዓት በብዙ መሳሪያዎች ላይ ምቹ በሆነ ጠረጴዛ ላይ እንዴት እንደሚሰራ ይመልከቱ።

ተጨማሪ ትናንሽ መሳሪያዎች ስልኮች (<768px) ትናንሽ መሣሪያዎች ጡባዊዎች (≥768 ፒክስል) መካከለኛ መሳሪያዎች ዴስክቶፖች (≥992 ፒክስል) ትላልቅ መሳሪያዎች ዴስክቶፖች (≥1200 ፒክስል)
የፍርግርግ ባህሪ በማንኛውም ጊዜ አግድም ለመጀመር ተሰብስቧል፣ ከእረፍት ነጥቦች በላይ አግድም።
የመያዣ ስፋት የለም (ራስ-ሰር) 750 ፒክስል 970 ፒክስል 1170 ፒክስል
የክፍል ቅድመ ቅጥያ .col-xs- .col-sm- .col-md- .col-lg-
# የአምዶች 12
የአምድ ስፋት መኪና ~ 62 ፒክስል ~ 81 ፒክስል ~97 ፒክስል
የጎርፍ ስፋት 30 ፒክስል (15 ፒክስል በእያንዳንዱ የአምድ ጎን)
የተደላደለ አዎ
ማካካሻዎች አዎ
የአምድ ማዘዝ አዎ

ምሳሌ፡- የተቆለለ-ወደ-አግድም።

ነጠላ .col-md-*የፍርግርግ ክፍሎችን በመጠቀም በዴስክቶፕ (መካከለኛ) መሳሪያዎች ላይ አግድም ከመሆንዎ በፊት በተንቀሳቃሽ መሳሪያዎች እና ታብሌቶች (ትርፍ ትንሽ እና ትንሽ ክልል) ላይ ተቆልሎ የሚጀምር መሰረታዊ የፍርግርግ ስርዓት መፍጠር ይችላሉ። የፍርግርግ ዓምዶችን በማንኛውም ውስጥ ያስቀምጡ .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6 
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

ምሳሌ፡ ፈሳሽ መያዣ

የውጪውን ጫፍ .containerወደ .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

ምሳሌ፡ ሞባይል እና ዴስክቶፕ

የእርስዎ ዓምዶች በትናንሽ መሣሪያዎች ውስጥ በቀላሉ እንዲቆለሉ አይፈልጉም? ወደ አምዶችዎ በማከል ተጨማሪውን ትንሽ እና መካከለኛ የመሳሪያ ፍርግርግ ክፍሎችን ይጠቀሙ .col-xs-* .col-md-*። ሁሉም እንዴት እንደሚሰራ የተሻለ ሀሳብ ለማግኘት ከታች ያለውን ምሳሌ ይመልከቱ።

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6 
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

ምሳሌ፡ ሞባይል፣ ታብሌት፣ ዴስክቶፕ

.col-sm-*ከጡባዊ ክፍሎች ጋር የበለጠ ተለዋዋጭ እና ኃይለኛ አቀማመጦችን በመፍጠር የቀደመውን ምሳሌ ይገንቡ ።

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4 
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

ምሳሌ፡- የአምድ መጠቅለያ

በአንድ ረድፍ ውስጥ ከ12 በላይ ዓምዶች ከተቀመጡ፣ እያንዳንዱ ተጨማሪ ዓምዶች ቡድን እንደ አንድ ክፍል፣ ወደ አዲስ መስመር ይጠቀለላል።

.col-xs-9
.col-xs-4
ከ9 + 4 = 13 > 12 ጀምሮ፣ ይህ ባለ 4-አምድ-ሰፊ ዲቪ እንደ አንድ ተከታታይ ክፍል በአዲስ መስመር ላይ ይጠቀለላል።
.col-xs-6
ተከታይ አምዶች በአዲሱ መስመር ይቀጥላሉ. 
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

ምላሽ ሰጪ አምድ ዳግም ያስጀምራል።

አራቱ የፍርግርግ እርከኖች በሚገኙበት ጊዜ፣ በተወሰኑ መግቻ ነጥቦች ላይ፣ አንዱ ከሌላው ስለሚበልጥ አምዶችዎ በትክክል የማይጸዱባቸው ጉዳዮችን ማጋጠምዎ አይቀርም። .clearfixያንን ለማስተካከል የኛን እና ምላሽ ሰጪ የፍጆታ ክፍሎችን ጥምር ይጠቀሙ ።

.col-xs-6 .col-sm-3
የእይታዎን መጠን ይቀይሩ ወይም ለምሳሌ በስልክዎ ላይ ይመልከቱት።
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3 
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

ምላሽ በሚሰጡ መግቻ ነጥቦች ላይ ከአምድ ማጽዳት በተጨማሪ ማካካሻዎችን፣ መግፋትን ወይም መጎተትን ዳግም ማስጀመር ሊኖርብዎ ይችላል ። ይህንን በተግባር በፍርግርግ ምሳሌ ውስጥ ይመልከቱ ።

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

ጉድጓዶችን ያስወግዱ

ጠርዞቹን ከረድፍ ያስወግዱ እና .row-no-guttersከክፍል ጋር ዓምዶች ናቸው።

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6 
<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

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

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

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3 
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

እንዲሁም ከታችኛው ፍርግርግ ደረጃዎች ማካካሻዎችን በክፍል መሻር ይችላሉ .col-*-offset-0።

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

መክተቻ አምዶች

ይዘትዎን ከነባሪው ፍርግርግ ጋር ለመክተት አሁን ባለው አምድ ውስጥ አዲስ እና የአምዶች .rowስብስብ ያክሉ። የጎጆ ረድፎች እስከ 12 ወይም ከዚያ በታች የሚጨምሩ የአምዶች ስብስብ ማካተት አለባቸው (ሁሉንም ያሉትን 12 አምዶች መጠቀም አያስፈልግም)።.col-sm-*.col-sm-*

ደረጃ 1: .col-sm-9
ደረጃ 2፡.col-xs-8 .col-sm-6
ደረጃ 2፡.col-xs-4 .col-sm-6 
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

የአምድ ማዘዝ

አብሮ የተሰሩ የፍርግርግ ዓምዶቻችንን ቅደም ተከተል በቀላሉ ከክፍሎች ጋር .col-md-push-*እና ቀይር።.col-md-pull-*

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9 
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

ያነሱ ድብልቅ እና ተለዋዋጮች

ለፈጣን አቀማመጦች ቀድሞ ከተገነቡት የፍርግርግ ክፍሎች በተጨማሪ ቡትስትራፕ የእራስዎን ቀላል፣ የትርጉም አቀማመጦችን በፍጥነት ለማመንጨት ያነሱ ተለዋዋጮችን እና ድብልቆችን ያካትታል።

ተለዋዋጮች

ተለዋዋጮች ተንሳፋፊ ዓምዶች የሚጀምሩበት የአምዶች ብዛት፣ የጉድጓድ ስፋት እና የሚዲያ መጠይቁን ይወስናሉ። ከላይ የተዘረዘሩትን አስቀድሞ የተገለጹትን የፍርግርግ ክፍሎችን እና እንዲሁም ከዚህ በታች ለተዘረዘሩት ብጁ ድብልቅ ነገሮች ለማምረት እነዚህን እንጠቀማለን።

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

ቅልቅል

ሚክሰኖች ከግሪድ ተለዋዋጮች ጋር በጥምረት ጥቅም ላይ የሚውሉት ለግል ፍርግርግ አምዶች የፍቺ CSS ነው።

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

የአጠቃቀም ምሳሌ

ተለዋዋጮቹን ወደ ራስህ ብጁ እሴቶች መቀየር ትችላለህ፣ ወይም ድብልቁን ከነባሪ እሴቶቻቸው ጋር ብቻ ተጠቀም። ባለ ሁለት አምድ አቀማመጥ በመካከላቸው ክፍተት ለመፍጠር ነባሪ ቅንብሮችን የመጠቀም ምሳሌ እዚህ አለ።

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

የፊደል አጻጻፍ

ርዕሶች

ሁሉም የኤችቲኤምኤል አርእስቶች፣ <h1>በ <h6>፣ ይገኛሉ። .h1በክፍል ውስጥ .h6እንዲሁ ይገኛሉ ፣ ምክንያቱም የርዕስ ቅርጸ-ቁምፊን ማዛመድ ሲፈልጉ ነገር ግን አሁንም ጽሑፍዎ በመስመር ውስጥ እንዲታይ ይፈልጋሉ።

h1. የቡት ማሰሪያ ርዕስ

 ሴሚቦልድ 36 ፒክስል

h2. የቡት ማሰሪያ ርዕስ

 ሴሚቦልድ 30 ፒክስል

h3. የቡት ማሰሪያ ርዕስ

 ሴሚቦልድ 24 ፒክስል

h4. የቡት ማሰሪያ ርዕስ

 ሴሚቦልድ 18 ፒክስል
h5. የቡት ማሰሪያ ርዕስ
 ሴሚቦልድ 14 ፒክስል
h6. የቡት ማሰሪያ ርዕስ
 ሴሚቦልድ 12 ፒክስል 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>ከአጠቃላይ መለያ ወይም ክፍል ጋር በማንኛውም ርዕስ ላይ ቀለል ያለ ሁለተኛ ጽሑፍ ይፍጠሩ .small።

h1. የቡት ስታራፕ ርዕስ ሁለተኛ ደረጃ ጽሑፍ

h2. የቡት ስታራፕ ርዕስ ሁለተኛ ደረጃ ጽሑፍ

h3. የቡት ስታራፕ ርዕስ ሁለተኛ ደረጃ ጽሑፍ

h4. የቡት ስታራፕ ርዕስ ሁለተኛ ደረጃ ጽሑፍ
h5. የቡት ስታራፕ ርዕስ ሁለተኛ ደረጃ ጽሑፍ
h6. የቡት ስታራፕ ርዕስ ሁለተኛ ደረጃ ጽሑፍ
 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

የሰውነት ቅጂ

የቡትስትራፕ አለምአቀፍ ነባሪ 14 ፒክስል font-sizeነው ፣ ከ 1.428 ጋር ። ይህ በጠቅላላው እና በሁሉም አንቀጾች ላይ ይተገበራል. በተጨማሪም፣ (አንቀጾች) የተሰላቸው የመስመር-ቁመታቸው ግማሽ የታችኛው ህዳግ ይቀበላሉ (በነባሪ 10 ፒክስል)።line-height<body><p>

ኑላም ኩይስ ሪስ ኢገት ኡርና ሞሊስ ኦርናሬ ቬል ኢዩ ሊዮ። Cum sociis natoque penatibus et magnis dis parturient montes፣ nascetur ridiculus mus። Nullam id dolor id nibh ultricies vehicula።

Cum sociis natoque penatibus et magnis dis parturient montes፣ nascetur ridiculus mus። Donec ullamcorper nulla non metus auctor fringilla። Duis mollis፣ est non commodo luctus፣ nisi erat porttitor ligula፣ eget lacinia odio sem nec elit። Donec ullamcorper nulla non metus auctor fringilla።

Maecenas sed diam eget risus varius blandit sit amet non magna። Donec id elit non mi porta gravida እና eget metus። Duis mollis፣ est non commodo luctus፣ nisi erat porttitor ligula፣ eget lacinia odio sem nec elit።

<p>...</p>

የእርሳስ አካል ቅጂ

በማከል አንድ አንቀጽ ጎልቶ እንዲታይ ያድርጉ .lead።

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor። Duis mollis፣ est non commodo luctus።

<p class="lead">...</p>

ባነሰ የተሰራ

የፊደል አጻጻፍ መለኪያው በሁለት አነስተኛ ተለዋዋጮች በተለዋዋጮች ላይ የተመሠረተ ነው። ያነሰ : @font-size-baseእና @line-height-base. የመጀመሪያው በጠቅላላው ጥቅም ላይ የዋለው የመሠረት ቅርጸ-ቁምፊ መጠን ሲሆን ሁለተኛው ደግሞ የመሠረት መስመር ቁመት ነው. የኛን አይነት እና ሌሎችንም ህዳጎችን፣ ንጣፍን እና የመስመር ከፍታዎችን ለመፍጠር እነዚያን ተለዋዋጮች እና አንዳንድ ቀላል ሂሳብን እንጠቀማለን። አብጅዋቸው እና ቡትስትራፕ ያስተካክላል።

የውስጠ-መስመር ጽሑፍ ክፍሎች

ምልክት የተደረገበት ጽሑፍ

በሌላ አውድ ውስጥ ካለው ተዛማጅነት የተነሳ የጽሑፍ አሂድን ለማድመቅ <mark>መለያውን ይጠቀሙ።

ለማርክ ማርክ መጠቀም ይችላሉ።ማድመቅጽሑፍ.

You can use the mark tag to <mark>highlight</mark> text.

የተሰረዘ ጽሑፍ

የተሰረዙ ፅሁፎችን ለማመልከት <del>መለያውን ይጠቀሙ።

ይህ የጽሑፍ መስመር እንደ የተሰረዘ ጽሑፍ እንዲታይ ነው።

<del>This line of text is meant to be treated as deleted text.</del>

የማጣራት ጽሑፍ

ከአሁን በኋላ ተዛማጅነት የሌላቸው የጽሑፍ ብሎኮችን ለማመልከት <s>መለያውን ይጠቀሙ።

ይህ የጽሑፍ መስመር ከአሁን በኋላ ትክክል እንዳልሆነ እንዲታይ ነው።

<s>This line of text is meant to be treated as no longer accurate.</s>

የገባው ጽሑፍ

በሰነዱ ላይ ተጨማሪዎችን ለማመልከት <ins>መለያውን ይጠቀሙ።

ይህ የጽሑፍ መስመር ለሰነዱ ተጨማሪ ሆኖ እንዲታይ ነው።

<ins>This line of text is meant to be treated as an addition to the document.</ins>

የተሰመረበት ጽሑፍ

ጽሑፍን ለማስመር <u>መለያውን ይጠቀሙ።

ይህ የጽሑፍ መስመር እንደተሰመረ ይሆናል።

<u>This line of text will render as underlined</u>

የኤችቲኤምኤል ነባሪ አጽንዖት መለያዎችን ከቀላል ቅጦች ጋር ይጠቀሙ።

ትንሽ ጽሑፍ

የውስጠ-መስመርን ወይም የጽሑፍ ብሎኮችን አጽንዖት ለመስጠት፣ <small>ጽሑፍን በወላጅ መጠን 85% ለማዘጋጀት መለያውን ይጠቀሙ። font-sizeርዕስ ክፍሎች ለተሸፈኑ ንጥረ ነገሮች የራሳቸውን ይቀበላሉ <small>።

እንደ አማራጭ .smallከማንኛውም ቦታ ጋር የውስጠ-መስመር አባል መጠቀም ይችላሉ <small>።

ይህ የጽሑፍ መስመር እንደ ጥሩ ህትመት እንዲታይ ነው።

<small>This line of text is meant to be treated as fine print.</small>

ደፋር

ከከባድ ቅርጸ-ቁምፊ ክብደት ጋር ቅንጣቢ ጽሑፍን ለማጉላት።

የሚከተለው የጽሑፍ ቅንጣቢ እንደ ደማቅ ጽሑፍ ቀርቧል ።

<strong>rendered as bold text</strong>

ሰያፍ

የጽሑፍ ቅንጣቢን በሰያፍ ቃላት ለማጉላት።

የሚከተለው የጽሑፍ ቅንጣቢ እንደ ሰያፍ ጽሁፍ ቀርቧል ።

<em>rendered as italicized text</em>

ተለዋጭ አካላት

ለመጠቀም ነፃነት ይሰማህ <b>እና <i>HTML5 ውስጥ። <b>ተጨማሪ አስፈላጊነትን ሳያስተላልፍ ቃላትን ወይም ሀረጎችን ለማጉላት ሲሆን <i>በአብዛኛው ለድምጽ, ቴክኒካዊ ቃላት, ወዘተ.

አሰላለፍ ክፍሎች

በቀላሉ ከጽሑፍ አሰላለፍ ክፍሎች ጋር ጽሁፍን ወደ ክፍሎች ያስተካክሉ።

በግራ የተሰለፈ ጽሑፍ።

ወደ መሃል የተሰለፈ ጽሑፍ።

በቀኝ የተሰለፈ ጽሑፍ።

የተረጋገጠ ጽሑፍ።

ምንም ጥቅል ጽሑፍ የለም።

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

የትራንስፎርሜሽን ክፍሎች

የጽሑፍ ካፒታላይዜሽን ክፍሎች ጋር ክፍሎች ውስጥ ጽሑፍ ቀይር.

ዝቅተኛ ጽሑፍ።

ከፍ ያለ ጽሑፍ።

በካፒታል የተደረገ ጽሑፍ።

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

ምህጻረ ቃል

<abbr>የተዘረጋውን እትም በማንዣበብ ላይ ለማሳየት ለ ምህፃረ ቃል እና ምህፃረ ቃላት የኤችቲኤምኤል ኤለመንት በቅጡ መተግበር ። ባህሪ ያላቸው አህጽሮተ ቃላት በማንዣበብ titleላይ እና ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች ተጨማሪ አውድ በማቅረብ ቀላል ነጥብ ያለው የታችኛው ድንበር እና በማንዣበብ ላይ አጋዥ ጠቋሚ አላቸው።

መሰረታዊ ምህጻረ ቃል

ባህሪ የሚለው ቃል ምህጻረ ቃል attr ነው።

<abbr title="attribute">attr</abbr>

ጅምርነት

.initialismበትንሹ ለትንሽ የቅርጸ-ቁምፊ መጠን ወደ ምህጻረ ቃል ያክሉ ።

ኤችቲኤምኤል ከተቆረጠ ዳቦ በኋላ በጣም ጥሩው ነገር ነው።

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

አድራሻዎች

ለቅርብ ቅድመ አያት ወይም ለጠቅላላው የሥራ አካል የእውቂያ መረጃ ያቅርቡ። ሁሉንም መስመሮች በ በማጠናቀቅ ቅርጸትን ጠብቅ <br>።

ትዊተር ፣ ኢንክ .
_

ሙሉ ስም
[email protected] 
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

የብሎክ ጥቅሶች

በሰነድዎ ውስጥ ከሌላ ምንጭ የይዘት ብሎኮችን ለመጥቀስ።

ነባሪ blockquote

እንደ ጥቅስ <blockquote>በማንኛውም HTML ዙሪያ ይጠቅልሉ ። ለቀጥታ ጥቅሶች፣ አንድ እንመክራለን <p>።

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat a ante።

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote አማራጮች

ዘይቤ እና ይዘት በመደበኛው ላይ ለቀላል ልዩነቶች ይቀየራሉ <blockquote>።

ምንጭ መሰየም

<footer>ምንጩን ለመለየት ያክሉ ። የምንጭ ሥራውን ስም በ ውስጥ ጠቅልለው <cite>።

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat a ante።

በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው 
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

አማራጭ ማሳያዎች

.blockquote-reverseበትክክለኛው የሰለጠነ ይዘት ለ blockquote ያክሉ ።

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat a ante።

በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው 
<blockquote class="blockquote-reverse">
  ...
</blockquote>

ዝርዝሮች

ያልታዘዘ

ትዕዛዙ በግልጽ የማይታይባቸው የንጥሎች ዝርዝር ።

  • Lorem ipsum dolor ሲት አሜት
  • Consectetur adipiscing elit
  • ኢንቲጀር molestie lorem at massa
  • ፋሲሊሲስ በፕሪቲየም ኒስላ አሊኬት
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor ሴም
    • Ac tristique libero volutpat በ
  • Faucibus porta lacus fringilla vel
  • አኔን ሲት አሜት ኤራት ኑንክ
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

ታዝዟል።

ትዕዛዙ በግልጽ የሚታይባቸው የንጥሎች ዝርዝር ።

  1. Lorem ipsum dolor ሲት አሜት
  2. Consectetur adipiscing elit
  3. ኢንቲጀር molestie lorem at massa
  4. ፋሲሊሲስ በፕሪቲየም ኒስላ አሊኬት
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. አኔን ሲት አሜት ኤራት ኑንክ
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

ቅጥ አልባ

list-styleበዝርዝር ንጥሎች (ወዲያውኑ ልጆች ብቻ) ነባሪውን እና የግራ ህዳግን ያስወግዱ ። ይህ በቅርብ ህፃናት ዝርዝር እቃዎች ላይ ብቻ ነው የሚሰራው ይህም ማለት ለማንኛውም የጎጆ ዝርዝሮች ክፍሉን መጨመር ያስፈልግዎታል.

  • Lorem ipsum dolor ሲት አሜት
  • Consectetur adipiscing elit
  • ኢንቲጀር molestie lorem at massa
  • ፋሲሊሲስ በፕሪቲየም ኒስላ አሊኬት
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor ሴም
    • Ac tristique libero volutpat በ
  • Faucibus porta lacus fringilla vel
  • አኔን ሲት አሜት ኤራት ኑንክ
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

በአግባቡ

ሁሉንም የዝርዝሮች እቃዎች በአንድ መስመር display: inline-block;እና አንዳንድ የብርሃን ንጣፍ ያስቀምጡ።

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

መግለጫ

ከነሱ ተያያዥ መግለጫዎች ጋር የቃላት ዝርዝር።

መግለጫ ዝርዝሮች
የመግለጫ ዝርዝር ቃላትን ለመወሰን ፍጹም ነው።
ኢዩስሞድ
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida እና eget metus።
ማሌሱዳ ፖርታ
Etiam porta sem malesuada magna mollis euismod. 
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

አግድም መግለጫ

ቃላቶችን እና መግለጫዎችን <dl>በመስመር ጎን ለጎን ያድርጉ። እንደ ነባሪ s ተቆልሎ ይጀምራል <dl>፣ ግን ናቭባር ሲሰፋ እነዚህም እንዲሁ ያድርጉ።

መግለጫ ዝርዝሮች
የመግለጫ ዝርዝር ቃላትን ለመወሰን ፍጹም ነው።
ኢዩስሞድ
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida እና eget metus።
ማሌሱዳ ፖርታ
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus፣ tellus ac cursus commodo፣ tortor mauris condimentum nibh፣ ut fermentum massa justo sit amet risus። 
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

በራስ-ሰር መቁረጥ

አግድም መግለጫ ዝርዝሮች ከግራ ዓምድ ጋር ለማስማማት በጣም ረጅም የሆኑትን ቃላት ይቆርጣሉ text-overflow። በጠባብ የእይታ ቦታዎች፣ ወደ ነባሪው የተቆለለ አቀማመጥ ይለወጣሉ።

ኮድ

በአግባቡ

የውስጠ-መስመር ኮድ ቅንጥቦችን በ <code>.

ለምሳሌ <section>በውስጥ መስመር መጠቅለል አለበት። 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

የተጠቃሚ ግቤት

<kbd>በተለምዶ በቁልፍ ሰሌዳ የገባውን ግቤት ለማመልከት ይጠቀሙ ።

ማውጫዎችን ለመቀየር የማውጫውን cdስም ይተይቡ።
ቅንብሮችን ለማርትዕ ተጫን ctrl + , 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

መሰረታዊ እገዳ

<pre>ለብዙ የኮድ መስመሮች ተጠቀም ። ለትክክለኛው ስራ በኮዱ ውስጥ ካሉ ማናቸውንም የማዕዘን ቅንፎች ማምለጥዎን ያረጋግጡ።

<p>የጽሑፍ ናሙና እዚህ...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

.pre-scrollableከፍተኛው 350 ፒክስል የሚያስቀምጥ እና የy-ዘንግ ማሸብለያ አሞሌን የሚያቀርበውን ክፍል እንደ አማራጭ ማከል ይችላሉ ።

ተለዋዋጮች

ተለዋዋጮችን ለማመልከት <var>መለያውን ይጠቀሙ።

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

የናሙና ውፅዓት

ከፕሮግራሙ የናሙና ውፅዓት ብሎኮችን ለማመልከት <samp>መለያውን ይጠቀሙ።

ይህ ጽሑፍ ከኮምፒዩተር ፕሮግራም እንደ ናሙና መውጣት ነው.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

ጠረጴዛዎች

መሰረታዊ ምሳሌ

ለመሠረታዊ ዘይቤ - ቀላል ንጣፍ እና አግድም መከፋፈያዎች ብቻ - የመሠረት ክፍሉን .tableለማንኛውም ይጨምሩ <table>። በጣም ተደጋጋሚ ሊመስል ይችላል፣ ነገር ግን እንደ የቀን መቁጠሪያ እና የቀን መራጮች ላሉ ሌሎች ተሰኪዎች የሰንጠረዦችን በስፋት ጥቅም ላይ በማዋል፣ ብጁ የጠረጴዛ ስልቶቻችንን ለይተን መርጠናል።

አማራጭ የሰንጠረዥ መግለጫ።
# የመጀመሪያ ስም ያባት ስም የተጠቃሚ ስም
1 ምልክት ያድርጉ ኦቶ @mdo
2 ያዕቆብ እሾህ @ ስብ
3 ላሪ ወፉ @twitter 
<table class="table">
  ...
</table>

የተጣሩ ረድፎች

.table-stripedበ ውስጥ ባለው ማንኛውም የጠረጴዛ ረድፍ ላይ የሜዳ አህያ-ዝርፊያን ለመጨመር ይጠቀሙ <tbody>።

የአሳሽ ተሻጋሪ ተኳኋኝነት

የተራቆቱ ጠረጴዛዎች በ :nth-childCSS መራጭ በኩል ተቀምጠዋል፣ ይህም በ Internet Explorer 8 ውስጥ አይገኝም።

# የመጀመሪያ ስም ያባት ስም የተጠቃሚ ስም
1 ምልክት ያድርጉ ኦቶ @mdo
2 ያዕቆብ እሾህ @ ስብ
3 ላሪ ወፉ @twitter 
<table class="table table-striped">
  ...
</table>

የድንበር ጠረጴዛ

.table-borderedበጠረጴዛው እና በሴሎች በሁሉም ጎኖች ላይ ለድንበሮች ይጨምሩ .

# የመጀመሪያ ስም ያባት ስም የተጠቃሚ ስም
1 ምልክት ያድርጉ ኦቶ @mdo
2 ያዕቆብ እሾህ @ ስብ
3 ላሪ ወፉ @twitter 
<table class="table table-bordered">
  ...
</table>

ረድፎችን አንዣብቡ

.table-hoverበ ውስጥ በጠረጴዛ ረድፎች ላይ የማንዣበብ ሁኔታን ለማንቃት ያክሉ <tbody>።

# የመጀመሪያ ስም ያባት ስም የተጠቃሚ ስም
1 ምልክት ያድርጉ ኦቶ @mdo
2 ያዕቆብ እሾህ @ ስብ
3 ላሪ ወፉ @twitter 
<table class="table table-hover">
  ...
</table>

የታመቀ ጠረጴዛ

.table-condensedየሕዋስ ንጣፍን በግማሽ በመቁረጥ ጠረጴዛዎች የበለጠ የታመቁ እንዲሆኑ ይጨምሩ ።

# የመጀመሪያ ስም ያባት ስም የተጠቃሚ ስም
1 ምልክት ያድርጉ ኦቶ @mdo
2 ያዕቆብ እሾህ @ ስብ
3 ላሪ ወፍ @twitter 
<table class="table table-condensed">
  ...
</table>

አውዳዊ ክፍሎች

የሰንጠረዥ ረድፎችን ወይም ነጠላ ሴሎችን ለማቅለም አውድ ክፍሎችን ተጠቀም።

ክፍል መግለጫ
.active የማንዣበብ ቀለሙን በተወሰነ ረድፍ ወይም ሕዋስ ላይ ይተገበራል።
.success የተሳካ ወይም አዎንታዊ እርምጃን ያመለክታል
.info ገለልተኛ መረጃ ሰጪ ለውጥን ወይም ድርጊትን ያመለክታል
.warning ትኩረት ሊፈልግ የሚችል ማስጠንቀቂያ ያሳያል
.danger አደገኛ ወይም እምቅ አሉታዊ እርምጃን ያመለክታል
# የአምድ ርዕስ የአምድ ርዕስ የአምድ ርዕስ
1 የአምድ ይዘት የአምድ ይዘት የአምድ ይዘት
2 የአምድ ይዘት የአምድ ይዘት የአምድ ይዘት
3 የአምድ ይዘት የአምድ ይዘት የአምድ ይዘት
4 የአምድ ይዘት የአምድ ይዘት የአምድ ይዘት
5 የአምድ ይዘት የአምድ ይዘት የአምድ ይዘት
6 የአምድ ይዘት የአምድ ይዘት የአምድ ይዘት
7 የአምድ ይዘት የአምድ ይዘት የአምድ ይዘት
8 የአምድ ይዘት የአምድ ይዘት የአምድ ይዘት
9 የአምድ ይዘት የአምድ ይዘት የአምድ ይዘት 
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት

በሰንጠረዥ ረድፍ ላይ ወይም በግለሰብ ሕዋስ ላይ ትርጉም ለመጨመር ቀለም መጠቀም ም��ላዊ ማሳያን ብቻ ያቀርባል፣ ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች። በቀለም የተወከለው መረጃ ከይዘቱ እራሱ ግልፅ መሆኑን ያረጋግጡ (በሚመለከተው የሰንጠረዥ ረድፍ/ህዋስ ውስጥ ያለው የሚታየው ጽሑፍ) ወይም በአማራጭ መንገዶች መካተቱን ለምሳሌ .sr-onlyከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።

ምላሽ ሰጪ ጠረጴዛዎች

በትናንሽ መሳሪያዎች (ከ768 ፒክስል በታች) በአግድም እንዲያሸብልሉ ለማድረግ ማንኛውንም ወደ .tableውስጥ በመጠቅለል ምላሽ ሰጪ ጠረጴዛዎችን ይፍጠሩ ። .table-responsiveከ768 ፒክስል ስፋት በላይ በሆነ ማንኛውም ነገር ላይ ሲመለከቱ፣ በእነዚህ ሰንጠረዦች ላይ ምንም ልዩነት አይታይዎትም።

አቀባዊ መቆራረጥ/መቁረጥ

ምላሽ ሰጪ ሠንጠረዦች overflow-y: hiddenከሠንጠረዡ ግርጌ ወይም የላይኛው ጠርዝ በላይ የሚሄድ ማንኛውንም ይዘት የሚቆርጥ ይጠቀማሉ። በተለይም ይህ ተቆልቋይ ሜኑዎችን እና ሌሎች የሶስተኛ ወገን መግብሮችን ሊያጠፋ ይችላል።

ፋየርፎክስ እና የመስክ ስብስቦች

ፋየርፎክስ ምላሽ ሰጭ ሰንጠረዥን የሚረብሽ አንዳንድ የማይመች የመስክ ቅንብር አለው width። ይህ በቡትስትራፕ ውስጥ የማናቀርበው ፋየርፎክስ-ተኮር ጠለፋ ከሌለ ሊሻር አይችልም

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

ለበለጠ መረጃ፣ ይህንን የቁልል ፍሰት መልስ ያንብቡ ።

# የሠንጠረዥ ርዕስ የሠንጠረዥ ርዕስ የሠንጠረዥ ርዕስ የሠንጠረዥ ርዕስ የሠንጠረዥ ርዕስ የሠንጠረዥ ርዕስ
1 የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ
2 የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ
3 የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ
# የሠንጠረዥ ርዕስ የሠንጠረዥ ርዕስ የሠንጠረዥ ርዕስ የሠንጠረዥ ርዕስ የሠንጠረዥ ርዕስ የሠንጠረዥ ርዕስ
1 የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ
2 የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ
3 የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ የጠረጴዛ ሕዋስ 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ቅጾች

መሰረታዊ ምሳሌ

የግለሰብ ቅፅ መቆጣጠሪያዎች አንዳንድ ዓለም አቀፍ የቅጥ ስራዎችን በራስ-ሰር ይቀበላሉ። ሁሉም ጽሑፋዊ <input>፣ <textarea>እና <select>አባለ ነገሮች በነባሪነት .form-controlተቀናብረዋል ። ለተመቻቸ ክፍተት width: 100%;መለያዎችን እና መቆጣጠሪያዎችን ያዙሩ።.form-group

የአግድ-ደረጃ እገዛ ጽሑፍ ምሳሌ እዚህ።

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

የቅጽ ቡድኖችን ከግብዓት ቡድኖች ጋር አትቀላቅሉ።

የቅጽ ቡድኖችን በቀጥታ ከግብዓት ቡድኖች ጋር አትቀላቅሉ ። በምትኩ፣ የግቤት ቡድኑን በቅጽ ቡድኑ ውስጥ አስገባ።

የመስመር ውስጥ ቅጽ

በግራ የተሰለፉ እና የውስጠ-ብሎክ መቆጣጠሪያዎች .form-inlineወደ ቅጽዎ ያክሉ (ሀ መሆን የለበትም)። ይህ የሚመለከተው ቢያንስ 768 ፒክስል ስፋት ባላቸው የእይታ ቦታዎች ውስጥ ባሉ ቅጾች ላይ ብቻ ነው።<form>

ብጁ ስፋቶችን ሊፈልግ ይችላል።

ግብዓቶች እና ምርጫዎች width: 100%;በነባሪ በ Bootstrap ውስጥ ተተግብረዋል። width: auto;በውስጥ መስመር ቅጾች ውስጥ፣ ብዙ መቆጣጠሪያዎች በተመሳሳይ መስመር ላይ እንዲኖሩ ዳግም እናስጀምረዋለን ። በእርስዎ አቀማመጥ ላይ በመመስረት፣ ተጨማሪ ብጁ ስፋቶች ሊያስፈልጉ ይችላሉ።

ሁልጊዜ መለያዎችን ያክሉ

ለእያንዳንዱ ግቤት መለያ ካላካተቱ ስክሪን አንባቢዎች በእርስዎ ቅጾች ላይ ችግር አለባቸው። ለእነዚህ የውስጠ-መስመር ቅጾች፣ .sr-onlyክፍሉን በመጠቀም መለያዎቹን መደበቅ ይችላሉ። aria-labelእንደ , aria-labelledbyወይም titleአይነታ የመሳሰሉ ለረዳት ቴክኖሎጂዎች መለያን ለማቅረብ ተጨማሪ አማራጭ ዘዴዎች አሉ ። ከእነዚህ ውስጥ አንዳቸውም ከሌሉ ስክሪን አንባቢዎች ካሉ ባህሪውን ሊጠቀሙ ይችላሉ placeholderነገርግን placeholderሌሎች የመለያ ዘዴዎችን እንደ ምትክ መጠቀም አይመከርም።

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00 
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

አግድም ቅርጽ

.form-horizontalበቅጹ ላይ (ሀ መሆን የሌለበት ) መለያዎችን እና የቅጽ መቆጣጠሪያ ቡድኖችን በአግድም አቀማመጥ ለማጣጣም የBootstrapን አስቀድሞ የተገለጹ የፍርግርግ ክፍሎችን ይጠቀሙ <form>። ይህን ማድረግ እንደ ፍርግርግ ረድፎች ባህሪን ይለውጣል .form-group፣ ስለዚህ አያስፈልግም .row።

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

የሚደገፉ መቆጣጠሪያዎች

በምሳሌ ቅፅ አቀማመጥ የሚደገፉ መደበኛ የቅጽ መቆጣጠሪያዎች ምሳሌዎች።

ግብዓቶች

በጣም የተለመደው የቅጽ ቁጥጥር፣ ጽሑፍ ላይ የተመሠረተ የግቤት መስኮች። ለሁሉም የኤችቲኤምኤል 5 አይነቶች ድጋፍን ያካትታል text፡ , password, datetime, datetime-local, date, month, time, week, number, email, url, search, telእና color.

የማስታወቂያ አይነት ያስፈልጋል

ግብዓቶች በትክክል ከታወጁ ብቻ ሙሉ ለሙሉ ቅጥ ይሆናሉ type።

<input type="text" class="form-control" placeholder="Text input">

የግቤት ቡድኖች

<input>ከማንኛውም ጽሑፍ ላይ ከተመሰረተ በፊት እና/ወይም በኋላ የተቀናጀ ጽሁፍ ወይም አዝራሮችን ለመጨመር የግቤት ቡድን አካልን ተመልከት ።

ጽሑፍ አካባቢ

በርካታ የጽሑፍ መስመሮችን የሚደግፍ የቅጽ መቆጣጠሪያ። rowsእንደ አስፈላጊነቱ ባህሪን ይቀይሩ ።

<textarea class="form-control" rows="3"></textarea>

አመልካች ሳጥኖች እና ሬዲዮዎች

አመልካች ሳጥኖች በአንድ ዝርዝር ውስጥ አንድ ወይም ብዙ አማራጮችን ለመምረጥ ሲሆኑ ራዲዮዎች ከብዙዎች አንድ ምርጫን ለመምረጥ ናቸው.

የተሰናከሉ አመልካች ሳጥኖች እና ራዲዮዎች ይደገፋሉ ነገር ግን በወላጅ ማንዣበብ ላይ "ያልተፈቀደ" ጠቋሚን ለማቅረብ <label>ክፍሉን .disabledወደ ወላጅ .radio,,, .radio-inlineወይም ..checkbox.checkbox-inline

ነባሪ (የተቆለለ)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

የመስመር ውስጥ አመልካች ሳጥኖች እና ሬዲዮዎች

በተመሳሳይ መስመር ላይ ለሚታዩ መቆጣጠሪያዎች በተከታታይ አመልካች ሳጥኖች ወይም ራዲዮዎች ላይ ያሉትን .checkbox-inlineወይም ክፍሎችን ይጠቀሙ ።.radio-inline


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

አመልካች ሳጥኖች እና ሬዲዮዎች ያለ መለያ ጽሑፍ

በ ውስጥ ምንም ጽሑፍ ከሌለህ <label>፣ ግብአቱ በምትጠብቀው መንገድ ተቀምጧል። በአሁኑ ጊዜ በመስመር ውስጥ ባልሆኑ የአመልካች ሳጥኖች እና ሬዲዮዎች ላይ ብቻ ይሰራል። አሁንም ቢሆን ለረዳት ቴክኖሎጂዎች (ለምሳሌ፣ በመጠቀም aria-label) የሆነ ዓይነት መሰየሚያ ማቅረብዎን ያስታውሱ።

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

ይመርጣል

ብዙ ቤተኛ የተመረጡ ምናሌዎች ማለትም በSafari እና Chrome ውስጥ - በንብረቶች ሊሻሻሉ የማይችሉ ክብ ማዕዘኖች እንዳሏቸው ልብ ይበሉ border-radius።

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ባህሪው ላላቸው <select>መቆጣጠሪያዎች multiple፣ ብዙ አማራጮች በነባሪነት ይታያሉ።

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

የማይንቀሳቀስ ቁጥጥር

በቅጹ ውስጥ ከቅጽ መለያ አጠገብ ግልጽ የሆነ ጽሑፍ ማስቀመጥ ሲያስፈልግ፣ .form-control-staticክፍሉን በ ሀ<p> ይጠቀሙ ።

[email protected]

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

[email protected]

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

የትኩረት ሁኔታ

outlineበአንዳንድ የቅጽ መቆጣጠሪያዎች ላይ ነባሪ ቅጦችን እናስወግዳለን እና box-shadowበእሱ ቦታ ለ :focus.

ማሳያ:focus ሁኔታ

:focusከላይ ያለው የምሳሌ ግቤት ሁኔታን በ a ላይ ለማሳየት በሰነዶቻችን ውስጥ ብጁ ቅጦችን ይጠቀማል .form-control።

የአካል ጉዳተኛ ሁኔታ

disabledየተጠቃሚ መስተጋብርን ለመከላከል የቡሊያን ባህሪን በግቤት ላይ ያክሉ ። የተሰናከሉ ግብዓቶች ቀለለ ሆነው ይታያሉ እና not-allowedጠቋሚ ያክሉ።

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

የተሰናከሉ የመስክ ስብስቦች

በ ውስጥ ያሉትን ሁሉንም መቆጣጠሪያዎች ለማሰናከል ባህሪውን disabledወደ ሀ ያክሉ<fieldset><fieldset> ።

ስለ አገናኝ ተግባራት ማሳሰቢያ<a>

በነባሪ፣ አሳሾች ሁሉንም የውስጥ ቅፅ መቆጣጠሪያዎችን ( <input>፣ <select>እና <button>ኤለመንቶችን) <fieldset disabled>እንደ አካል ጉዳተኛ አድርገው ይቆጥሯቸዋል፣ ይህም ሁለቱንም የቁልፍ ሰሌዳ እና የመዳፊት መስተጋብር ይከላከላል። ነገር ግን፣ የእርስዎ ቅፅ <a ... class="btn btn-*">አባላትን የሚያካትት ከሆነ፣ እነዚህ የሚሰጣቸው የአጻጻፍ ስልት ብቻ ነው pointer-events: none። ስለ አዝራሮች የአካል ጉዳተኛ ሁኔታ (በተለይም በንዑስ ክፍል ለአንካሮች) ክፍል ላይ እንደተገለፀው ይህ የሲኤስኤስ ንብረት እስካሁን ደረጃውን ያልጠበቀ እና በኦፔራ 18 እና ከዚያ በታች ወይም በኢንተርኔት ኤክስፕሎረር 11 ሙሉ በሙሉ አይደገፍም እና አሸንፏል። የቁልፍ ሰሌዳ ተጠቃሚዎች እነዚህን አገናኞች ማተኮር ወይም ማንቃት እንዳይችሉ እንከለክላለን። ስለዚህ ለደህንነት ሲባል እንደዚህ ያሉትን ማገናኛዎች ለማሰናከል ብጁ ጃቫስክሪፕት ይጠቀሙ።

የአሳሽ ተሻጋሪ ተኳኋኝነት

disabledBootstrap እነዚህን ቅጦች በሁሉም አሳሾች ላይ ቢተገበርም፣ ኢንተርኔት ኤክስፕሎረር 11 እና ከዚያ በታች በ ሀ ላይ ያለውን ባህሪ ሙሉ በሙሉ አይደግፉም <fieldset>። በእነዚህ አሳሾች ውስጥ የመስክ ስብስቡን ለማሰናከል ብጁ ጃቫ ስክሪፕትን ይጠቀሙ።

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

ተነባቢ ብቻ ይግለጹ

readonlyየግቤት ዋጋ እንዳይቀየር ለመከላከል የቦሊያን አይነታውን በግቤት ላይ ያክሉ ። ተነባቢ-ብቻ ግብዓቶች ቀለለ ሆነው ይታያሉ (ልክ እንደ የተሰናከሉ ግብዓቶች)፣ ግን መደበኛ ጠቋሚውን ያቆዩት።

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

የእገዛ ጽሑፍ

ለቅጽ መቆጣጠሪያዎች የደረጃ እገዛ ጽሑፍን አግድ።

የእገዛ ጽሑፍን ከቅጽ መቆጣጠሪያዎች ጋር ማያያዝ

የእገዛ ጽሁፍ ባህሪውን ከመጠቀም ጋር ከሚዛመደው የቅጽ መቆጣጠሪያ ጋር በግልፅ መያያዝ አለበት aria-describedby። ይህ አጋዥ ቴክኖሎጂዎች - እንደ ስክሪን አንባቢዎች - ተጠቃሚው ትኩረቱን ሲያደርግ ወይም መቆጣጠሪያው ውስጥ ሲገባ ይህን የእገዛ ጽሑፍ እንደሚያሳውቁ ያረጋግጣል።

ወደ አዲስ መስመር የሚሰበር እና ከአንድ መስመር በላይ ሊራዘም የሚችል የእገዛ ጽሑፍ እገዳ። 
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

የማረጋገጫ ግዛቶች

ቡትስትራፕ በቅጽ ቁጥጥሮች ላይ ለስህተት፣ ማስጠንቀቂያ እና የስኬት ሁኔታዎች የማረጋገጫ ቅጦችን ያካትታል። ለመጠቀም፣ ለማከል .has-warning፣ .has-error, ወይም .has-successወደ ወላጅ አካል። ማንኛውም .control-label፣ .form-control፣ እና .help-blockበዚያ አካል ውስጥ የማረጋገጫ ቅጦችን ይቀበላሉ።

የማረጋገጫ ሁኔታን ለረዳት ቴክኖሎጂዎች እና ለቀለም ዓይነ ስውር ተጠቃሚዎች ማስተላለፍ

እነዚህን የማረጋገጫ ስልቶች በመጠቀም የቅጽ መቆጣጠሪያን ሁኔታ ለማሳየት ምስላዊ፣ ቀለምን መሰረት ያደረገ ማመላከቻ ብቻ ያቀርባል፣ ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች - እንደ ስክሪን አንባቢዎች - ወይም ለቀለም ዓይነ ስውር ተጠቃሚዎች አይተላለፍም።

ሌላ አማራጭ ማመላከቻም መሰጠቱን ያረጋግጡ። ለምሳሌ፣ በቅጽ መቆጣጠሪያው <label>ጽሑፍ ውስጥ ስለ ሁኔታ ፍንጭ ማካተት ይችላሉ (በሚከተለው ኮድ ምሳሌ እንደሚታየው) ጂሊፊኮን ያካትቱ (ክፍልን በመጠቀም ተገቢው አማራጭ ጽሑፍ .sr-only- የ Glyphicon ምሳሌዎችን ይመልከቱ ) ወይም ተጨማሪ እገዛ የጽሑፍ እገዳ. aria-invalid="true"በተለይ ለረዳት ቴክኖሎጂዎች፣ ልክ ያልሆኑ የቅጽ መቆጣጠሪያዎች እንዲሁ ባህሪ ሊሰጡ ይችላሉ ።

ወደ አዲስ መስመር የሚሰበር እና ከአንድ መስመር በላይ ሊራዘም የሚችል የእገዛ ጽሑፍ እገዳ። 
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

ከአማራጭ አዶዎች ጋር

እንዲሁም የአማራጭ ግብረመልስ አዶዎችን በማከል ማከል ይችላሉ።.has-feedbackእንዲሁም ከትክክለኛው አዶ

የግብረመልስ አዶዎች ከጽሑፍ <input class="form-control">አካላት ጋር ብቻ ይሰራሉ።

አዶዎች፣ መለያዎች እና የግቤት ቡድኖች

መለያ ለሌላቸው ግብዓቶች እና በቀኝ በኩል ተጨማሪ ላላቸው የግቤት ቡድኖች የግብረ መልስ አዶዎችን በእጅ ማስቀመጥ ያስፈልጋል። ለተደራሽነት ምክንያቶች ለሁሉም ግብዓቶች መለያዎችን እንዲያቀርቡ በጥብቅ ይበረታታሉ። መለያዎች እንዳይታዩ ለመከላከል ከፈለጉ .sr-onlyከክፍል ጋር ይደብቋቸው። ያለ መለያዎች ማድረግ ካለብዎት topየግብረመልስ አዶውን ዋጋ ያስተካክሉ። ለግቤት ቡድኖች rightእሴቱን ወደ ተገቢው የፒክሰል እሴት እንደ አድዶንዎ ስፋት ያስተካክሉት።

የአዶውን ትርጉም ለረዳት ቴክኖሎጂዎች ማስተላለፍ

እንደ ስክሪን አንባቢ ያሉ አጋዥ ቴክኖሎጂዎች የአዶን ትርጉም በትክክል ማስተላለፋቸውን ለማረጋገጥ ተጨማሪ የተደበቀ ጽሑፍ ከክፍል ጋር መካተት .sr-onlyእና ከመጠቀም ጋር በተገናኘ ከቅጽ ቁጥጥር ጋር መያያዝ አለበት aria-describedby። በአማራጭ፣ ትርጉሙን (ለምሳሌ፣ ለተወሰነ የጽሁፍ መግቢያ መስክ ማስጠንቀቂያ መኖሩ) በሌላ መልኩ መተላለፉን ያረጋግጡ፣ ለምሳሌ ከቅጽ <label>መቆጣጠሪያው ጋር የተያያዘውን ትክክለኛ ጽሑፍ መለወጥ።

ምንም እንኳን የሚከተሉት ምሳሌዎች የየራሳቸውን የቅጽ መቆጣጠሪያዎች የማረጋገጫ ሁኔታ <label>በጽሑፉ በራሱ ውስጥ ቢጠቅሱም, ከላይ ያለው ቴክኒክ ( .sr-onlyጽሑፍን በመጠቀም እና aria-describedby) ለምሳሌያዊ ዓላማዎች ተካቷል.

(ስኬት)
(ማስጠንቀቂያ)
(ስህተት)
@
(ስኬት) 
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

በአግድም እና በውስጥ መስመር ውስጥ ያሉ አማራጭ አዶዎች

(ስኬት)
@
(ስኬት) 
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>
(ስኬት)

@
(ስኬት) 
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

አማራጭ አዶዎች ከተደበቁ .sr-onlyመለያዎች ጋር

.sr-onlyየቅጽ መቆጣጠሪያን ለመደበቅ ክፍሉን ከተጠቀሙ <label>(ሌሎች የመለያ አማራጮችን ከመጠቀም ይልቅ ለምሳሌ aria-labelባህሪው)፣ ቡትስትራፕ አንዴ ከተጨመረ በኋላ የአዶውን አቀማመጥ በራስ-ሰር ያስተካክላል።

(ስኬት)
@
(ስኬት) 
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

የመቆጣጠሪያ መጠን

እንደ ክፍሎችን በመጠቀም ቁመቶችን ያዘጋጁ .input-lgእና እንደ ፍርግርግ አምድ ክፍሎችን በመጠቀም ስፋቶችን ያዘጋጁ .col-lg-*።

የቁመት መጠን

ከአዝራሮች መጠኖች ጋር የሚዛመዱ ረጅም ወይም አጠር ያሉ የቅጽ መቆጣጠሪያዎችን ይፍጠሩ።

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

አግድም ቅጽ የቡድን መጠኖች

በፍጥነት መለያዎችን መጠን እና መቆጣጠሪያዎችን .form-horizontalበመደመር .form-group-lgወይም ውስጥ ይፍጠሩ .form-group-sm።

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

የአምድ መጠን

የሚፈለጉትን ስፋቶች በቀላሉ ለማስፈጸም ግብዓቶችን በፍርግርግ አምዶች ወይም ማንኛውም ብጁ ወላጅ አባል ጠቅልል።

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

አዝራሮች

የአዝራር መለያዎች

የአዝራር ክፍሎችን በአንድ፣፣ <a>ወይም <button>ኤለመንት <input>ላይ ይጠቀሙ።

አገናኝ 
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

አውድ-ተኮር አጠቃቀም

<a>የአዝራር ክፍሎችን እና <button>ኤለመንቶችን መጠቀም ሲቻል ፣ ንጥረ ነገሮች ብቻ <button>በእኛ የባህር ኃይል እና ናቭባር ክፍሎች ውስጥ ይደገፋሉ።

እንደ አዝራሮች የሚሰሩ አገናኞች

ንጥረ ነገሮቹ እንደ አዝራሮች ለመስራት ጥቅም ላይ የሚውሉ ከሆነ <a>- የውስጠ-ገጽ ተግባርን የሚቀሰቅስ, አሁን ባለው ገጽ ውስጥ ወዳለ ሌላ ሰነድ ወይም ክፍል ከመሄድ ይልቅ - እንዲሁም ተገቢነት ሊሰጣቸው ይገባል role="button".

ተሻጋሪ አሳሽ ማሳየት

እንደ ምርጥ ተሞክሮ፣ የአሳሽ አቋራጭ መመሳሰልን ለማረጋገጥ በተቻለ መጠን ኤለመንቱን እንዲጠቀሙ በጣም እንመክራለን ።<button>

ከሌሎች ነገሮች በተጨማሪ በፋየርፎክስ <30line-height ላይ የ-based አዝራሮችን እንዳናዘጋጅ የሚከለክል ስህተት አለ <input>, ይህም በፋየርፎክስ ላይ ካሉ ሌሎች አዝራሮች ቁመት ጋር በትክክል እንዳይዛመድ ያደርገዋል.

አማራጮች

የቅጥ የተሰራ ቁልፍ በፍጥነት ለመፍጠር ማንኛውንም ያሉትን የአዝራር ክፍሎችን ይጠቀሙ።

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት

በአዝራሩ ላይ ትርጉም ለመጨመር ቀለም መጠቀም ምስላዊ ማመላከቻን ብቻ ያቀርባል፣ ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች። በቀለም የተወከለው መረጃ ከይዘቱ (ከሚታየው የአዝራሩ ጽሑፍ) ግልጽ መሆኑን ወይም በአማራጭ ዘዴዎች መካተቱን ያረጋግጡ፣ ለምሳሌ .sr-onlyከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።

መጠኖች

ትልልቅ ወይም ትንሽ አዝራሮች ይፈልጋሉ? አክል .btn-lg፣፣ .btn-smወይም .btn-xsለተጨማሪ መጠኖች።

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

የማገጃ ደረጃ አዝራሮችን ይፍጠሩ - የወላጆችን ሙሉ ስፋት የሚሸፍኑ - በማከል .btn-block።

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

ንቁ ሁኔታ

ገባሪ ሲሆኑ አዝራሮች ተጭነው ይታያሉ (ከጨለማው ዳራ፣ ከጠቆረ ድንበር እና ከውስጥም ጥላ ጋር)። <button>ለኤለመንቶች ይህ የሚደረገው በ በኩል ነው :active. ለኤለመንቶች፣ በ <a>ጋር ተከናውኗል .active። .activeነገር ግን፣ በ s ላይ መጠቀም ይችላሉ <button>(እና ባህሪውን ያካትቱ aria-pressed="true") የነቃ ሁኔታን በፕሮግራም መድገም ካለብዎት።

የአዝራር አባል

እንደ የውሸት ክፍል መጨመር አያስፈልግም :active, ነገር ግን ተመሳሳይ ገጽታን ማስገደድ ከፈለጉ, ይቀጥሉ እና ይጨምሩ .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

መልህቅ ኤለመንት

.activeክፍሉን ወደ <a>አዝራሮች ያክሉ ።

ዋና አገናኝ አገናኝ 

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

የአካል ጉዳተኛ ሁኔታ

አዝራሮችን መልሰው በማደብዘዝ ያልተጫኑ እንዲመስሉ ያድርጉ opacity።

የአዝራር አባል

disabledባህሪውን ወደ <button>አዝራሮች ያክሉ ።

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

የአሳሽ ተሻጋሪ ተኳኋኝነት

disabledባህሪውን ወደ ሀ ካከሉ <button>፣ ኢንተርኔት ኤክስፕሎረር 9 እና ከዚያ በታች ልናስተካክለው የማንችለው ጸያፍ የፅሁፍ ጥላ ጽሑፍ ግራጫ ያደርገዋል።

መልህቅ ኤለመንት

.disabledክፍሉን ወደ <a>አዝራሮች ያክሉ ።

ዋና አገናኝ አገናኝ 

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

.disabledእዚህ እንደ መገልገያ ክፍል እንጠቀማለን , ከተለመደው .activeክፍል ጋር ተመሳሳይ ነው, ስለዚህ ምንም ቅድመ ቅጥያ አያስፈልግም.

የአገናኝ ተግባራዊነት ማስጠንቀቂያ

ይህ ክፍል የኤስን pointer-events: noneአገናኝ ተግባር ለማሰናከል ይጠቅማል <a>፣ ነገር ግን የ CSS ንብረቱ ገና ደረጃውን ያልጠበቀ እና ሙሉ በሙሉ በኦፔራ 18 እና ከዚያ በታች ወይም በ Internet Explorer 11 ውስጥ አይደገፍም pointer-events: none። አሰሳ አልተነካም ማለት ነው፣ ይህም ማለት ማየት የተሳናቸው የቁልፍ ሰሌዳ ተጠቃሚዎች እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች አሁንም እነዚህን አገናኞች ማግበር ይችላሉ። ስለዚህ ለደህንነት ሲባል እንደዚህ ያሉትን ማገናኛዎች ለማሰናከል ብጁ ጃቫስክሪፕት ይጠቀሙ።

ምስሎች

ምላሽ ሰጪ ምስሎች

.img-responsiveበBootstrap 3 ውስጥ ያሉ ምስሎች ክፍሉን በመጨመር ምላሽ ሰጪ-ወዳጃዊ ሊደረጉ ይችላሉ ። ይህ ተፈጻሚ ይሆናል max-width: 100%;፣ height: auto;እና display: block;ምስሉ ከወላጅ አካል ጋር በጥሩ ሁኔታ እንዲመዘን።

.img-responsiveክፍሉን የሚጠቀሙ ምስሎችን መሃል ለማድረግ ፣ .center-blockበምትኩ ይጠቀሙ .text-center። ስለ አጠቃቀሙ ተጨማሪ ዝርዝሮችን ለማግኘት የረዳት ክፍሎችን ይመልከቱ።.center-block

SVG ምስሎች እና IE 8-10

በInternet Explorer 8-10፣ የSVG ምስሎች .img-responsiveያላቸው ተመጣጣኝ ያልሆነ መጠን አላቸው። ይህንን ለመጠገን, width: 100% \9;አስፈላጊ ከሆነ ይጨምሩ. በሌሎች የምስል ቅርጸቶች ላይ ውስብስቦች ስለሚያስከትል ቡትስትራፕ ይህን በራስ-ሰር አይተገበርም።

<img src="..." class="img-responsive" alt="Responsive image">

የምስል ቅርጾች

<img>በማንኛውም ፕሮጀክት ውስጥ ምስሎችን በቀላሉ ለመቅረጽ ክፍሎችን ወደ አንድ አካል ያክሉ ።

የአሳሽ ተሻጋሪ ተኳኋኝነት

ኢንተርኔት ኤክስፕሎረር 8 ለተጠጋጋ ማዕዘኖች ድጋፍ እንደሌለው አስታውስ።

የተጠጋጋ ማዕዘኖች ያሉት አጠቃላይ የካሬ ቦታ ያዥ ምስል በክበቡ ውስጥ ያለው ክፍል ስለተባለው ካሬ ብቻ የሚታይበት አጠቃላይ የካሬ ቦታ ያዥ ምስል በዙሪያው ነጭ ድንበር ያለው አጠቃላይ የካሬ ቦታ ያዥ ምስል በአሮጌ ፈጣን ካሜራ የተነሳውን ፎቶግራፍ እንዲመስል ያደርገዋል 
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

የረዳት ክፍሎች

አውዳዊ ቀለሞች

ትርጉምን በቀለም አስተላልፍ በጥቂት የአጽንዖት መገልገያ ክፍሎች። እነዚህ በአገናኞች ላይ ሊተገበሩ ይችላሉ እና ልክ እንደ ነባሪ የአገናኝ ስልቶቻችን በማንዣበብ ላይ ይጨልማሉ።

ፉስሴ ዳፒባስ፣ ቴልኡስ አክ ኩርሰስ ኮምሞዶ፣ ቶርተር ማውሪስ ኒብህ።

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis፣ est non commodo luctus፣ nisi erat porttitor ligula።

Maecenas sed diam eget risus varius blandit sit amet non magna።

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla።

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

ከልዩነት ጋር መስተጋብር

አንዳንድ ጊዜ አጽንዖት የሚሰጡ ክፍሎች በሌላ መራጭ ልዩነት ምክንያት ሊተገበሩ አይችሉም. በአብዛኛዎቹ ሁኔታዎች፣ በቂ መፍትሄ ጽሑፍዎን <span>ከክፍል ጋር መጠቅለል ነው።

ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት

ትርጉምን ለመጨመር ቀለምን መጠቀም ምስላዊ ማሳያን ብቻ ያቀርባል, ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች. በቀለም የተወከለው መረጃ ከይዘቱ እራሱ ግልፅ መሆኑን ያረጋግጡ (የአውድ ቀለሞች በፅሁፍ/ማርክፕ ላይ ያለውን ትርጉም ለማጠናከር ብቻ ጥቅም ላይ ይውላሉ) ወይም በአማራጭ መንገዶች መካተቱን ለምሳሌ .sr-onlyከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ .

አውዳዊ ዳራዎች

ከዐውደ-ጽሑፉ የቀለም ክፍሎች ጋር በሚመሳሰል መልኩ የአንድን ኤለመንት ዳራ ወደ ማንኛውም የአውድ ክፍል በቀላሉ ያዘጋጁ። መልህቅ ክፍሎች ልክ እንደ የጽሑፍ ክፍሎች በማንዣበብ ላይ ይጨልማሉ።

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis፣ est non commodo luctus፣ nisi erat porttitor ligula።

Maecenas sed diam eget risus varius blandit sit amet non magna።

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla።

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

ከልዩነት ጋር መስተጋብር

አንዳንድ ጊዜ የአውድ ዳራ ክፍሎች በሌላ መራጭ ልዩነት ምክንያት ሊተገበሩ አይችሉም። በአንዳንድ ሁኔታዎች፣ በቂ መፍትሄ የአንተን ንጥረ ነገር ይዘት <div>ከክፍል ጋር መጠቅለል ነው።

ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት

እንደ ዐውደ-ጽሑፋዊ ቀለሞች ፣ በቀለም የሚተላለፍ ማንኛውም ትርጉም እንዲሁ በአቀራረብ ብቻ ሳይሆን በቅርጸት መተላለፉን ያረጋግጡ።

አዶ ዝጋ

እንደ ሞዳሎች እና ማንቂያዎች ያሉ ይዘቶችን ለማሰናበት አጠቃላይ መዝጊያ አዶን ይጠቀሙ።

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

የተቆልቋይ ተግባርን እና አቅጣጫን ለማመልከት እንክብካቤዎችን ይጠቀሙ። ነባሪው እንክብካቤ በተቆልቋይ ምናሌዎች ውስጥ በራስ-ሰር እንደሚገለበጥ ልብ ይበሉ ።

<span class="caret"></span>

በፍጥነት ይንሳፈፋል

አንድ ኤለመንት ከክፍል ጋር ወደ ግራ ወይም ቀኝ ይንሳፈፉ። !importantየልዩነት ጉዳዮችን ለማስወገድ ተካትቷል። ክፍሎችን እንደ ድብልቅ መጠቀምም ይቻላል.

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

በ navbars ውስጥ ለመጠቀም አይደለም።

በ navbars ውስጥ ክፍሎችን ከመገልገያ ክፍሎች ጋር ለማጣጣም ይጠቀሙ .navbar-leftወይም .navbar-rightይልቁንስ። ለዝርዝሮች የ navbar ሰነዶችን ይመልከቱ።

የመሃል የይዘት እገዳዎች

display: blockበ በኩል አንድ ኤለመንት ወደ እና መሃል ያዘጋጁ margin። እንደ ድብልቅ እና ክፍል ይገኛል።

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

አጽዳ

ወደ ወላጅ ኤለመንትfloat በመጨመር በቀላሉ ያጽዱ ። በኒኮላስ ጋልገር እንደ ታዋቂው ማይክሮ ማጽጃን ይጠቀማል ። እንዲሁም እንደ ድብልቅ ጥቅም ላይ ሊውል ይችላል..clearfix 

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

ይዘትን ማሳየት እና መደበቅ

አንድ ኤለመንት እንዲታይ ወይም እንዲደበቅ ያስገድዱ ( የስክሪን አንባቢዎችን ጨምሮ ) በክፍል .showእና በአጠቃቀም ። .hiddenእነዚህ ክፍሎች የልዩነት !importantግጭቶችን ለማስወገድ ይጠቀማሉ፣ ልክ እንደ ፈጣን ተንሳፋፊዎች ። እነሱ የሚገኙት ለማገጃ ደረጃ መቀያየር ብቻ ነው። እንዲሁም እንደ ድብልቅ ጥቅም ላይ ሊውሉ ይችላሉ.

.hideይገኛል፣ ግን ሁልጊዜ ስክሪን አንባቢዎችን አይነካም እና ከ v3.0.1 ጀምሮ ተቋርጧል ። ተጠቀም .hiddenወይም .sr-onlyበምትኩ።

በተጨማሪም .invisibleየአንድን ኤለመንት ታይነት ለመቀያየር ብቻ ጥቅም ላይ ሊውል ይችላል፣ ይህ ማለት displayአልተሻሻለም እና ኤለመንቱ አሁንም የሰነዱን ፍሰት ሊጎዳ ይችላል።

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

የማያ ገጽ አንባቢ እና የቁልፍ ሰሌዳ አሰሳ ይዘት

ከማያ ገጽ አንባቢዎች በስተቀር አንድን ንጥረ ነገር ለሁሉም መሳሪያዎች ደብቅ .sr-only። ኤለመንቱ በሚያተኩርበት .sr-onlyጊዜ .sr-only-focusableእንደገና ለማሳየት (ለምሳሌ በቁልፍ ሰሌዳ-ብቻ ተጠቃሚ) ከ ጋር ያዋህዱ። የተደራሽነት ምርጥ ልምዶችን ለመከተል አስፈላጊ ነው . እንዲሁም እንደ ድብልቅ ጥቅም ላይ ሊውል ይችላል.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

ምስል መተካት

.text-hideየአንድን ንጥረ ነገር ጽሑፍ ይዘት ከበስተጀርባ ምስል ለመተካት ለማገዝ ክፍሉን ወይም ድብልቅን ይጠቀሙ ።

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  .text-hide();
}

ምላሽ ሰጪ መገልገያዎች

ለፈጣን የሞባይል ተስማሚ ልማት እነዚህን የመገልገያ ክፍሎች በሚዲያ መጠይቅ በመሣሪያ ለማሳየት እና ለመደበቅ ይጠቀሙ። ሲታተም ይዘትን ለመቀየር የመገልገያ ክፍሎችም ተካትተዋል።

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

የሚገኙ ክፍሎች

በእይታ መግቻ ነጥቦች ላይ ይዘትን ለመቀያየር ያሉትን ክፍሎች አንድ ወይም ጥምር ይጠቀሙ።

ተጨማሪ ትናንሽ መሳሪያዎች ስልኮች (<768px) ትናንሽ መሣሪያዎች ጡባዊዎች (≥768 ፒክስል) መካከለኛ መሳሪያዎች ዴስክቶፖች (≥992 ፒክስል) ትላልቅ መሳሪያዎች ዴስክቶፖች (≥1200 ፒክስል)
.visible-xs-* የሚታይ
.visible-sm-* የሚታይ
.visible-md-* የሚታይ
.visible-lg-* የሚታይ
.hidden-xs የሚታይ የሚታይ የሚታይ
.hidden-sm የሚታይ የሚታይ የሚታይ
.hidden-md የሚታይ የሚታይ የሚታይ
.hidden-lg የሚታይ የሚታይ የሚታይ

ከ v3.2.0 ጀምሮ፣ .visible-*-*የእያንዳንዱ መግቻ ነጥብ ክፍሎች በሦስት ልዩነቶች ይመጣሉ፣ አንድ ከታች ለተዘረዘረው ለእያንዳንዱ የCSS displayንብረት እሴት።

የቡድን ክፍሎች CSSdisplay
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

ስለዚህ፣ ለተጨማሪ ትናንሽ ( xs) ስክሪኖች ለምሳሌ፣ ያሉት .visible-*-*ክፍሎች፡- .visible-xs-block፣ .visible-xs-inlineእና .visible-xs-inline-block.

ክፍሎቹ .visible-xs፣፣፣ እና እንዲሁም አሉ፣ ግን .visible-smከ v3.2.0 ጀምሮ ተቋርጠዋል ። ለመቀያየር ተያያዥ አባሎች ከተጨማሪ ልዩ ጉዳዮች በስተቀር እነሱ በግምት እኩል ናቸው ።.visible-md.visible-lg.visible-*-block<table>

ክፍሎችን አትም

ከመደበኛ ምላሽ ሰጪ ክፍሎች ጋር ተመሳሳይ፣ ለህትመት ይዘት ለመቀየር እነዚህን ይጠቀሙ።

ክፍሎች አሳሽ አትም
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		የሚታይ
.hidden-print የሚታይ

ክፍሉ .visible-printእንዲሁ አለ ነገር ግን ከ v3.2.0 ጀምሮ ተቋርጧል ። ለተያያዙ ንጥረ ነገሮች .visible-print-blockተጨማሪ ልዩ ጉዳዮች ካልሆነ በስተቀር በግምት እኩል ነው ።<table>

የሙከራ ጉዳዮች

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

የሚታየው በ...

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

✔ በ x-ትንሽ ላይ የሚታይ
✔ በትንሽ ላይ ይታያል
መካከለኛ ✔ በመሃል ላይ ይታያል
✔ በትልቁ ላይ ይታያል
✔ በ x-ትንሽ እና ትንሽ ላይ ይታያል
✔ በመካከለኛ እና ትልቅ ላይ ይታያል
✔ በ x-ትንሽ እና መካከለኛ ላይ የሚታይ
✔ በትንሽ እና በትልቅ ላይ ይታያል
✔ በ x-ትንሽ እና ትልቅ ላይ ይታያል
✔ በትንሽ እና መካከለኛ ላይ ይታያል

የተደበቀ በ...

እዚህ፣ አረንጓዴ ምልክት ማድረጊያ ኤለመንቱ አሁን ባለው እይታዎ ውስጥ መደበቅን ያመለክታሉ ።

✔ በ x-ትንሽ ላይ ተደብቋል
✔ በትንሹ ተደብቋል
መካከለኛ ✔ በመሃል ላይ ተደብቋል
✔ በትልቁ ላይ ተደብቋል
✔ በ x-ትንሽ እና ትንሽ ላይ ተደብቋል
✔ መካከለኛ እና ትልቅ ላይ ተደብቋል
✔ በ x-ትንሽ እና መካከለኛ ተደብቋል
✔ በትናንሽ እና ትልቅ ላይ ተደብቋል
✔ በ x-ትንሽ እና ትልቅ ላይ ተደብቋል
✔ በጥቃቅን እና መካከለኛ ላይ ተደብቀዋል

ያነሰ በመጠቀም

Bootstrap's CSS የተገነባው ባነሰ ላይ ነው፣ ቅድመ ፕሮሰሰር እንደ ተለዋዋጮች፣ ድብልቅ ነገሮች እና CSS ን የማጠናቀር ተግባራት ያሉ። ምንጩን ለመጠቀም የሚፈልጉ ሁሉ ከሲኤስኤስ ፋይሎቻችን ይልቅ ያነሱ ፋይሎች በመላው ማዕቀፉ ውስጥ የምንጠቀማቸውን በርካታ ተለዋዋጮች እና ድብልቅዎችን መጠቀም ይችላሉ።

የፍርግርግ ተለዋዋጮች እና ድብልቆች በፍርግርግ ስርዓት ክፍል ውስጥ ተሸፍነዋል ።

Bootstrapን በማጠናቀር ላይ

Bootstrap ቢያንስ በሁለት መንገዶች መጠቀም ይቻላል፡ ከተጠናቀረ CSS ወይም ከምንጩ ያነሱ ፋይሎች። ያነሱ ፋይሎችን ለማጠናቀር፣ አስፈላጊዎቹን ትዕዛዞች ለማስኬድ የእድገት አካባቢዎን እንዴት እንደሚያዋቅሩ የመነሻ ክፍልን ይመልከቱ።

የሶስተኛ ወገን ማጠናከሪያ መሳሪያዎች ከBootstrap ጋር ሊሰሩ ይችላሉ፣ ነገር ግን በዋና ቡድናችን አይደገፉም።

ተለዋዋጮች

ተለዋዋጮች እንደ ቀለም፣ ክፍተት ወይም የቅርጸ-ቁምፊ ቁልል ያሉ በተለምዶ ጥቅም ላይ የዋሉ እሴቶችን ለማማከል እና ለመጋራት በአጠቃላይ በፕሮጀክቱ ውስጥ ጥቅም ላይ ይውላሉ። ለተሟላ ዝርዝር መረጃ፣ እባክዎን አብጁን ይመልከቱ ።

ቀለሞች

በቀላሉ ሁለት የቀለም መርሃግብሮችን ይጠቀሙ-ግራጫ እና ትርጉም. ግራጫ ቀለም ያላቸው ቀለሞች በብዛት ጥቅም ላይ ለሚውሉ ጥቁር ጥላዎች ፈጣን መዳረሻ ይሰጣሉ ፣ ትርጉሙ ደግሞ ትርጉም ላለው አውድ እሴቶች የተመደቡ የተለያዩ ቀለሞችን ያጠቃልላል።

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

ከእነዚህ የቀለም ተለዋዋጮች ውስጥ ማናቸውንም እንደነበሩ ይጠቀሙ ወይም ለፕሮጀክትዎ የበለጠ ትርጉም ላላቸው ተለዋዋጮች ይመድቧቸው።

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

ስካፎልዲንግ

የጣቢያዎን አጽም ቁልፍ አካላት በፍጥነት ለማበጀት ጥቂት ተለዋዋጮች።

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

በአንድ እሴት ብቻ አገናኞችዎን በቀላሉ በትክክለኛው ቀለም ያስምሩ።

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

@link-hover-colorትክክለኛውን የማንዣበብ ቀለም በራስ-ሰር ለመፍጠር ተግባሩ ተግባርን፣ ከትንሽ ሌላ ግሩም መሳሪያ እንደሚጠቀም ልብ ይበሉ ። darken, lighten, saturateእና መጠቀም ይችላሉ desaturate.

የፊደል አጻጻፍ

የእርስዎን የጽሕፈት መኪና፣ የጽሑፍ መጠን፣ መሪ እና ሌሎችንም በጥቂት ፈጣን ተለዋዋጮች በቀላሉ ያዘጋጁ። Bootstrap እነዚህን እንዲሁም ቀላል የትየባ ድብልቅዎችን ለማቅረብ ይጠቀማል።

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

አዶዎች

የአዶዎችዎን መገኛ እና የፋይል ስም ለማበጀት ሁለት ፈጣን ተለዋዋጮች።

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

አካላት

በBootstrap ውስጥ ያሉ አካላት የጋራ እሴቶችን ለማዘጋጀት አንዳንድ ነባሪ ተለዋዋጮችን ይጠቀማሉ። በብዛት ጥቅም ላይ የዋሉት እነኚሁና።

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

የሻጭ ድብልቆች

ሁሉንም ተዛማጅ የአቅራቢ ቅድመ ቅጥያዎችን በተቀናጀው CSS ውስጥ በማካተት ብዙ አሳሾችን ለመደገፍ የሚረዱ የአቅራቢዎች ድብልቅ ድብልቅ ነገሮች ናቸው።

ሣጥን-መጠን

የእርስዎን ክፍሎች ሳጥን ሞዴል ከአንድ ድብልቅ ጋር ዳግም ያስጀምሩት። ለዐውደ-ጽሑፉ፣ ይህን ጠቃሚ ጽሑፍ ከሞዚላ ይመልከቱ ።

ሚክሲን ከ v3.2.0 ጀምሮ ተቋርጧል ፣ ከራስ ፕሪፊክስ መግቢያ ጋር። የኋሊት-ተኳኋኝነትን ለመጠበቅ፣ Bootstrap እስከ Bootstrap v4 ድረስ ድብልቁን ከውስጥ መጠቀሙን ይቀጥላል።

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

የተጠጋጋ ማዕዘኖች

ዛሬ ሁሉም ዘመናዊ አሳሾች ቅድመ ቅጥያ የሌለውን border-radiusንብረት ይደግፋሉ። እንደዚያው፣ ምንም ድብልቅ የለም .border-radius()፣ ነገር ግን ቡትስትራፕ በአንድ ነገር በኩል ሁለት ማዕዘኖችን በፍጥነት ለመጠምዘዝ አቋራጮችን ያካትታል።

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

የሳጥን (ጣል) ጥላዎች

box-shadowየታለመላቸው ታዳሚዎች የቅርብ ጊዜዎቹን እና ምርጥ አሳሾችን እና መሳሪያዎችን የሚጠቀሙ ከሆነ ንብረቱን ብቻ መጠቀምዎን ያረጋግጡ ። ለአሮጌ አንድሮይድ (ቅድመ-v4) እና የአይኦኤስ መሳሪያዎች (ቅድመ-iOS ​​5) ድጋፍ ከፈለጉ አስፈላጊውን ቅድመ ቅጥያ ለማንሳት የተቋረጠውን-webkit ድብልቅ ይጠቀሙ ።

ቡትስትራፕ መደበኛውን ንብረት የማይደግፉ ጊዜ ያለፈባቸውን የመሣሪያ ስርዓቶች ስለማይደግፉ ሚክሲን ከ v3.1.0 ጀምሮ ተቋርጧል ። የኋሊት-ተኳኋኝነትን ለመጠበቅ፣ Bootstrap እስከ Bootstrap v4 ድረስ ድብልቁን ከውስጥ መጠቀሙን ይቀጥላል።

rgba()በተቻለ መጠን ከበስተጀርባዎች ጋር እንዲዋሃዱ ቀለሞችን በሳጥንዎ ጥላዎች ውስጥ መጠቀምዎን ያረጋግጡ ።

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

ሽግግሮች

ለተለዋዋጭነት ብዙ ድብልቅ። ሁሉንም የሽግግር መረጃ ከአንድ ጋር ያቀናብሩ ወይም እንደ አስፈላጊነቱ የተለየ መዘግየት እና ቆይታ ይግለጹ።

ድብልቆቹ ከ v3.2.0 ጀምሮ ተቋርጠዋል ፣ ከራስ ፕሪፊክስ መግቢያ ጋር። የኋሊት-ተኳኋኝነትን ለመጠበቅ፣ Bootstrap እስከ Bootstrap v4 ድረስ ድብልቆችን ከውስጥ መጠቀሙን ይቀጥላል።

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

ለውጦች

ማሽከርከር፣ መመዘን፣ መተርጎም (አንቀሳቅስ) ወይም ማንኛውንም ነገር አሽከርክር።

ድብልቆቹ ከ v3.2.0 ጀምሮ ተቋርጠዋል ፣ ከራስ ፕሪፊክስ መግቢያ ጋር። የኋሊት-ተኳኋኝነትን ለመጠበቅ፣ Bootstrap እስከ Bootstrap v4 ድረስ ድብልቆችን ከውስጥ መጠቀሙን ይቀጥላል።

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

እነማዎች

ሁሉንም የCSS3 እነማ ባህሪያትን በአንድ መግለጫ እና ሌሎች ድብልቆችን ለግል ንብረቶች ለመጠቀም አንድ ድብልቅ።

ድብልቆቹ ከ v3.2.0 ጀምሮ ተቋርጠዋል ፣ ከራስ ፕሪፊክስ መግቢያ ጋር። የኋሊት-ተኳኋኝነትን ለመጠበቅ፣ Bootstrap እስከ Bootstrap v4 ድረስ ድብልቆችን ከውስጥ መጠቀሙን ይቀጥላል።

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

ግልጽነት

ግልጽነት ለሁሉም አሳሾች ያዘጋጁ እና filterለ IE8 ውድቀት ያቅርቡ።

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

የቦታ ያዥ ጽሑፍ

በእያንዳንዱ መስክ ውስጥ የቅጽ መቆጣጠሪያዎችን አውድ ያቅርቡ።

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

አምዶች

በአንድ አካል ውስጥ አምዶችን በ CSS በኩል ይፍጠሩ።

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

ቀስቶች

ማናቸውንም ሁለት ቀለሞች በቀላሉ ወደ ዳራ ቅልመት ይለውጡ። የበለጠ የላቀ ያግኙ እና አቅጣጫ ያዘጋጁ፣ ሶስት ቀለሞችን ይጠቀሙ ወይም ራዲያል ቅልመት ይጠቀሙ። በነጠላ ድብልቅ የሚፈልጓቸውን ሁሉንም ቅድመ ቅጥያ አገባቦች ያገኛሉ።

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

እንዲሁም የመደበኛ ባለ ሁለት ቀለም አንግል መስመራዊ ቅልመትን መግለጽ ትችላለህ፡-

#gradient > .directional(#333; #000; 45deg);

የፀጉር አስተካካዮች ስልት ቅልመት ከፈለጉ፣ ያ ደግሞ ቀላል ነው። አንድ ነጠላ ቀለም ብቻ ይግለጹ እና ግልጽ የሆነ ነጭ ክር እንለብሳለን።

#gradient > .striped(#333; 45deg);

ወደ ላይ ከፍ ያድርጉ እና በምትኩ ሶስት ቀለሞችን ይጠቀሙ። የመጀመሪያውን ቀለም ፣ ሁለተኛውን ቀለም ፣ የሁለተኛውን ቀለም ማቆሚያ (የመቶኛ እሴት 25%) እና ሶስተኛውን ቀለም ከእነዚህ ድብልቆች ጋር ያዘጋጁ።

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

ቀና በል! የግራዲየንትን ማስወገድ ካስፈለገዎት filterያከሉትን ማንኛውንም IE-ተኮር ማስወገድዎን ያረጋግጡ። .reset-filter()ድብልቅውን ከጎን በኩል በመጠቀም ማድረግ ይችላሉ background-image: none;.

የመገልገያ ድብልቆች

የመገልገያ ድብልቆች አንድን የተወሰነ ግብ ወይም ተግባር ለማሳካት በሌላ መንገድ የማይገናኙ የሲኤስኤስ ባህሪያትን የሚያጣምሩ ድብልቅ ናቸው።

አጽዳ

ወደ ማንኛውም ኤለመንት ማከልን ይርሱ class="clearfix"እና በምትኩ .clearfix()ሚክሲን በተገቢው ቦታ ላይ ይጨምሩ። ከኒኮላስ ጋላገር የማይክሮ ማጽጃውን ይጠቀማል ።

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

አግድም መሃል

በወላጁ ውስጥ ያለውን ማንኛውንም አካል በፍጥነት ያኑሩ። ያስፈልጋል widthወይም max-widthማዋቀር።

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

የመጠን ረዳቶች

የነገሩን መጠን በቀላሉ ይግለጹ።

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

ሊቀየሩ የሚችሉ የጽሑፍ ቦታዎች

ለማንኛውም textarea ወይም ለሌላ ማንኛውም አካል የመጠን አማራጮችን በቀላሉ ያዋቅሩ። የመደበኛ አሳሽ ባህሪ ( both) ነባሪዎች።

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

ጽሑፍን መቆራረጥ

በቀላሉ ከአንድ ድብልቅ ጋር ጽሑፍን በellipsis ይቁረጡ። ኤለመንት መሆን blockወይም inline-blockደረጃ ያስፈልገዋል።

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

የሬቲና ምስሎች

ሁለት የምስል ዱካዎችን እና የ@1x ምስል ልኬቶችን ይግለጹ፣ እና Bootstrap @2x የሚዲያ መጠይቅን ያቀርባል። ለማገልገል ብዙ ምስሎች ካሉዎት፣ የሬቲና ምስልዎን CSS እራስዎ በአንድ የሚዲያ መጠይቅ ለመፃፍ ያስቡበት።

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Sass በመጠቀም

ቡትስትራፕ በጥቂቱ የተገነባ ቢሆንም፣ ኦፊሴላዊ የ Sass ወደብም አለው ። በተለየ የ GitHub ማከማቻ ውስጥ እናቆየዋለን እና ዝመናዎችን በመቀየሪያ ስክሪፕት እንይዛለን።

ምን ይካተታል።

የሳስ ወደብ የተለየ ሪፖ ስላለው እና ትንሽ ለየት ያለ ታዳሚ ስለሚያገለግል የፕሮጀክቱ ይዘት ከዋናው የቡትስትራፕ ፕሮጀክት በእጅጉ ይለያያል። ይህ የ Sass ወደብ በተቻለ መጠን ከብዙ Sass-based ስርዓቶች ጋር ተኳሃኝ መሆኑን ያረጋግጣል።

መንገድ መግለጫ
lib/ የ Ruby Gem ኮድ (Sass ውቅር፣ ባቡር እና ኮምፓስ ውህደቶች)
tasks/ የመቀየሪያ ስክሪፕቶች (ከላይ ወደ ላይ ትንሽ ወደ ሳስ ማዞር)
test/ የማጠናቀር ሙከራዎች
templates/ የኮምፓስ ጥቅል አንጸባራቂ
vendor/assets/ Sass፣ JavaScript እና font files
Rakefile እንደ መሰቅሰቂያ እና መለወጥ ያሉ የውስጥ ስራዎች

እነዚህን ፋይሎች በተግባር ለማየት የ Sass port GitHub ማከማቻ ጎብኝ ።

መጫን

Bootstrap for Sass እንዴት እንደሚጫኑ እና እንደሚጠቀሙበት መረጃ ለማግኘት የ GitHub ማከማቻ ንባብ ይመልከቱ ። በጣም የተዘመነው ምንጭ ነው እና ከባቡር ሀዲድ፣ ኮምፓስ እና መደበኛ የ Sass ፕሮጀክቶች ጋር ጥቅም ላይ የሚውል መረጃን ያካትታል።

ለ Sass ማስነሻ