ናይ ታይፕግራፊክ ስኬል

ምሉእ ናይ ታይፕግራፊክ ሽቦ ኣብ ክልተ Less variables ኣብ variables.less ፋይልና ዝተመርኮሰ እዩ: @baseFontSizeand @baseLineHeight. እቲ ቀዳማይ ኣብ ምሉእ ዝጥቀመሉ መሰረታዊ ቅርጺ-ዓቐን ኮይኑ እቲ ካልኣይ ድማ መሰረታዊ መስመር-ቁመት እዩ።

ነቶም ተለዋዋጢ ረቛሒታት፡ ገለ ሒሳብ ድማ ንጥቀመሎም፡ ናይ ኩሉ ዓይነትናን ካልእን ወሰን፡ ፓዲንግን መስመር-ቁመትን ንፈጥር።

ኣብነት ኣካል ጽሑፍ

ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

ቪቫሙስ ሳጂቲስ ላከስ ቬል ኣውጉ ላኦሪት ሩትሩም ፋውሲበስ ዶሎር ኦክተር። ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ፡ ኒሲ ኤራት ፖርቲቶር ሊጉላ፡ ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት። ዶነክ ሰድ ኦዲዮ ዱይ።

ምጉላሕ ብምጥቃም

ፉስ ዳፒቡስ ፣ ቴሉስ ኣክ ከርሱስ ኮሞዶ ፣ ቶርቶር ማውሪስ ኮንዲመንቱም ኒብህ ፣ ኡት ፈርመንቱም ማሳ ጁስቶ ኮፍ ኣሜት ሪሱስ። ማሴናስ ፋውሲበስ ሞሊስ ኢንተርዱም ዝበሃል እዩ። ኑላ ቪታ ኤሊት ሊበሮ፡ ፋሬትራ ኣውጉ።

መተሓሳሰቢ<b> ፡ ክትጥቀሙን ብHTML5 ን ናጻ ትኾኑ <i>፡ ግን ኣጠቓቕምኦም ቁሩብ ተቐይሩ ኣሎ። <b>ተወሳኺ ኣገዳስነት ከየመሓላልፍ ቃላት ወይ ሓረጋት ንምጉላሕ ዝዓለመ ክኸውን ከሎ <i>መብዛሕትኡ ንድምጺ፡ ቴክኒካዊ ቃላት ወዘተ ዝኸውን እዩ።

ኣብነት ኣድራሻታት

<address>እቲ መለለዪ ብኸመይ ክጥቀመሉ ከም ዝኽእል ክልተ ኣብነታት ኣብዚ ኣለዉ ፤

ትዊተር፡ ኢንክ
795 ፎልሶም ኣቨ፡ ሱት 600
ሳን ፍራንሲስኮ፡ ሲኤ 94107
ፒ ፡ (123) 456-7890

ምሉእ ስም
[email protected]

ኣብነት ኣሕጽሮተ ቃላት

ባህሪ ዘለዎም ኣሕጽሮተ ቃላት titleፍኹስ ዝበለ ነጥቢ ዘለዎ ታሕተዋይ ዶብን ኣብ ምዝዋር ዝሕግዝ ናይ ሓገዝ መመልከቲን ኣለዎም። እዚ ንተጠቀምቲ ገለ ነገር ኣብ ሆቨር ከም ዝረአ ተወሳኺ ምልክት ይህቦም።

initialismቁሩብ ዝነኣሰ ዓቐን ጽሑፍ ብምሃብ ንናይ ሕትመት ስኒት ንምዕባይ ነቲ ክፍሊ ኣብ ኣሕጽሮተ ቃል ወስኸሉ ።

HTML ድሕሪ ዝተቖርጸ ባኒ እቲ ዝበለጸ ነገር እዩ።

ኣሕጽሮተ ቃል ናይቲ ባህሪ ዝብል ቃል attr .

ብሎክኮት ንምሕዋስ <blockquote>፡ ዝኾነ ኤችቲኤምኤል ከም ጥቕሲ ጠቕልሎ። ትኽ ዝበለ ጥቕስታት ንሕና ንመክር <p>.

ምንጪኻ ንምጥቃስ ኣማራጺ ባእታ ኣካትት እሞ ንዕላማታት ቅዲ ቅድሚኡ <small>em dash ክትረክብ ኢኻ ።—

<ብሎክquote> ዝብል ጽሑፍ ኣሎ።
  <p>ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ ፖሱረ ኤራት ኣ ኣንተ ቬነናቲስ.</p>
  <ንእሽቶ>ሓደ ፍሉጥ</small>
</blockquote> ዝብል ጽሑፍ ኣሎ።

ነባሪ ብሎክኮትስ ከምዚ ዓይነት ቅዲ ኣለዎም፤

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante venenatis.

ኣብ ኣካል ስራሕ ፍሉጥ ሰብ

ብሎክኮትካ ናብ የማን ንምንሳፍ፡ ወስኸሉ class="pull-right":

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante venenatis.

ኣብ ኣካል ስራሕ ፍሉጥ ሰብ

ዘይተኣዘዘ

<ul>

• ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት።
• ኮንሰክተተር ኣዲፒሲንግ ኤሊት
• ምሉእ ቁጽሪ ሞለስቲ ሎረም ኣብ ማሳ
• ፋሲሊሲስ ኣብ ፕሪቲየም ኒስል ኣሊኬት
• ኑላ ቮሉትፓት ኣሊኳም ቬሊት።
  • ፋሰለስ ኢያኩሊስ ነከ ዝበሃል እዩ።
  • ፑሩስ ሶዳለስ ኡልትሪሲስ
  • ቬስቲቡሉም ላኦሪት ፖርቲቶር ሴም
  • ኣክ ትሪስቲክ ሊበሮ ቮሉትፓት ኣብ
• ፋውሲቡስ ፖርታ ላከስ ፍሪንጊላ ቬል
• ኤንየን ኮፍ ኣመት ኤራት ኑንክ
• ኤጌት ፖርቲቶር ሎረም

ቅዲ ዘይብሉ

<ul class="unstyled">

• ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት።
• ኮንሰክተተር ኣዲፒሲንግ ኤሊት
• ምሉእ ቁጽሪ ሞለስቲ ሎረም ኣብ ማሳ
• ፋሲሊሲስ ኣብ ፕሪቲየም ኒስል ኣሊኬት
• ኑላ ቮሉትፓት ኣሊኳም ቬሊት።
  • ፋሰለስ ኢያኩሊስ ነከ ዝበሃል እዩ።
  • ፑሩስ ሶዳለስ ኡልትሪሲስ
  • ቬስቲቡሉም ላኦሪት ፖርቲቶር ሴም
  • ኣክ ትሪስቲክ ሊበሮ ቮሉትፓት ኣብ
• ፋውሲቡስ ፖርታ ላከስ ፍሪንጊላ ቬል
• ኤንየን ኮፍ ኣመት ኤራት ኑንክ
• ኤጌት ፖርቲቶር ሎረም

ተኣዚዙ

<ol>

1. ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት።
2. ኮንሰክተተር ኣዲፒሲንግ ኤሊት
3. ምሉእ ቁጽሪ ሞለስቲ ሎረም ኣብ ማሳ
4. ፋሲሊሲስ ኣብ ፕሪቲየም ኒስል ኣሊኬት
5. ኑላ ቮሉትፓት ኣሊኳም ቬሊት።
6. ፋውሲቡስ ፖርታ ላከስ ፍሪንጊላ ቬል
7. ኤንየን ኮፍ ኣመት ኤራት ኑንክ
8. ኤጌት ፖርቲቶር ሎረም

መግለፂ

<dl>

መግለጺ ዝርዝር

ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።

ዩይስሞድ

ቬስቲቡሉም ኢድ ሊጉላ ፖርታ ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት.

Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus.

ማሌሱዋዳ ፖርታ

ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ።

ልኡል መግለጺ

<dl class="dl-horizontal">

መግለጺ ዝርዝር

ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።

ዩይስሞድ

ቬስቲቡሉም ኢድ ሊጉላ ፖርታ ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት.

Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus.

ማሌሱዋዳ ፖርታ

ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ።

ኣብ መስመር

ኣብ ውሽጢ መስመር ዝርከቡ ቁንጣሮ ኮድ ብ <code>.

ንኣብነት <code>ክፍሊ</code> ከም ውሽጢ መስመር ክጥቕለል ኣለዎ።

መሰረታዊ ብሎክ

<pre>ንብዙሓት መስመራት ኮድ ተጠቐም ። ንግቡእ ምቕራብ ኣብቲ ኮድ ካብ ዝኾነ ናይ ኩርናዕ ቅንጥብጣብ ምህዳምካ ኣረጋግጽ።

<p>ኣብዚ ናሙና ጽሑፍ...</p>

<ቅድሚ>
  <p>ኣብዚ ናሙና ጽሑፍ...</p>
</pre> ዝብል ጽሑፍ ኣሎ።

መተሓሳሰቢ<pre> ፡ ኣብ ውሽጢ መለለዪታት ኮድ ብዝተኻእለ መጠን ናብ ጸጋም ቀረባ ምቕማጥካ ኣረጋግጽ ፤ ንኹሎም ትቦታት ከቕርቦም እዩ።

ብኣማራጺ ነቲ ክፍሊ ክትውስኾ ትኽእል ኢኻ .pre-scrollableእዚ ድማ max-height 350px ዘቐምጥን y-axis scrollbar ዝህብን እዩ።

ጉግል ፕሪቲፋይ

ተመሳሳሊ <pre>ባእታ ወሲድካ ንዝተማዕበለ ምቕራብ ክልተ ኣማራጺ ክፍልታት ወስኸሉ።

<p>ኣብዚ ናሙና ጽሑፍ...</p>

<pre class="ጽብቕቲ ሕትመት
     linenums"> ዝብል ጽሑፍ ኣሎ።
  <p>ኣብዚ ናሙና ጽሑፍ...</p>
</pre> ዝብል ጽሑፍ ኣሎ።

google-code-prettify ኣውርድ እሞ ከመይ ጌርካ ከም እትጥቀመሉ readme ርአ።

ምልጣፍ	መግለፂ
<table>	ዳታ ብሰንጠረዥ ቅርጺ ንምርኣይ ዝሕግዝ መጠቕለሊ ባእታ
<thead>	መትሓዚ ባእታ ንመስመራት ርእሲ ሰደቓ ( <tr>) ንዓምድታት ሰደቓ ስያመ ንምግባር
<tbody>	መትሓዚ ባእታ ንመስመራት ሰደቓ ( <tr>) ኣብ ኣካል ናይቲ ሰደቓ
<tr>	ንሓደ ስብስብ ናይ ሰደቓ ዋህዮታት ( <td>ወይ <th>) ኣብ ሓደ መስርዕ ዝረአ መትሓዚ ባእታ
<td>	ነባሪ ዋህዮ ሰደቓ
<th>	ፍሉይ ዋህዮ ሰደቓ ንዓምዲ (ወይ መስርዕ፡ ከከም ስፍሓትን ኣቀማምጣን) ስያመታት ኣብ ውሽጢ ሀ ክጥቀም ኣለዎ።<thead>
<caption>	መግለጺ ወይ ጽማቕ ናይቲ ሰደቓ እንታይ ይሕዝ፣ ብፍላይ ንኣንበብቲ ስክሪን ጠቓሚ

<ሰንጠረዥ>
  <ርእሲ> ዝብል እዩ።
    <tr> ዝብል ጽሑፍ ኣሎ።
      <th></th> ዝብል ምዃኑ ይፍለጥ
      <th></th> ዝብል ምዃኑ ይፍለጥ
    </tr> ዝብል ምዃኑ ይፍለጥ
  </thead> ዝብል ጽሑፍ ኣሎ።
  <tbody> ዝብል ምዃኑ ይፍለጥ
    <tr> ዝብል ጽሑፍ ኣሎ።
      <td></td> ዝብል ምዃኑ ይፍለጥ
      <td></td> ዝብል ምዃኑ ይፍለጥ
    </tr> ዝብል ምዃኑ ይፍለጥ
  </tbody> ዝብል ጽሑፍ ኣሎ።
</table> ዝብል ጽሑፍ ኣሎ።

ሰንጠረዥ ብኣውቶማቲክ ብውሑዳት ዶባት ጥራይ ቅዲ ተገይሩሉ ተነባብነት ንምርግጋጽን ኣቃውማ ንምዕቃብን እዩ። ምስ 2.0 እቲ .tableክፍሊ የድሊ።

<ሰንጠረዥ ክፍሊ="ሰንጠረዥ">
  ...
</table> ዝብል ጽሑፍ ኣሎ።

#	ናይ መጀመርታ ሽም	ናይ መወዳእታ ሽም	ስም ተጠቃሚ
1.	ማርክ	ኦቶ	@mdo ዝብል ጽሑፍ ኣሎ።
2.	ያእቆብ	ቶርንተን ዝበሃል ትካል	@ረጒድ
3.	ላሪ	እታ ዑፍ	@twitter ዝብል ጽሑፍ ኣሎ።

ዜብራ-ስትሪፒንግ ብምውሳኽ ምስ ሰደቓታትካ ቁሩብ ፋንሲ ውሰድ- .table-stripedክላስ ጥራይ ወስኸሉ።

መተሓሳሰቢ ፡ ስሪት ዘለዎም ሰደቓታት :nth-childCSS መምረጺ ዝጥቀሙ ኮይኖም ኣብ IE7-IE8 ኣይርከብን እዩ።

<table class="ሰንጠረዥ ሰንጠረዥ-ስሪት ዘለዎ">
  ...
</table> ዝብል ጽሑፍ ኣሎ።

#	ናይ መጀመርታ ሽም	ናይ መወዳእታ ሽም	ስም ተጠቃሚ
1.	ማርክ	ኦቶ	@mdo ዝብል ጽሑፍ ኣሎ።
2.	ያእቆብ	ቶርንተን ዝበሃል ትካል	@ረጒድ
3.	ላሪ	እታ ዑፍ	@twitter ዝብል ጽሑፍ ኣሎ።

ኣብ ዙርያ ምሉእ ጠረጴዛ ዶባትን ንጽባቐ ዝኸውን ክቡብ ኩርናዓትን ምውሳኽ።

<table class="ሰንጠረዥ-ዝተወሰነ">
  ...
</table> ዝብል ጽሑፍ ኣሎ።

#	ናይ መጀመርታ ሽም	ናይ መወዳእታ ሽም	ስም ተጠቃሚ
1.	ማርክ	ኦቶ	@mdo ዝብል ጽሑፍ ኣሎ።
	ማርክ	ኦቶ	@getbootstrap ዝብል ጽሑፍ ኣሎ።
2.	ያእቆብ	ቶርንተን ዝበሃል ትካል	@ረጒድ
3.	ላሪ እታ ዑፍ		@twitter ዝብል ጽሑፍ ኣሎ።

.table-condensedንመሸፈኒ ዋህዮ ሰደቓ ኣብ ክልተ (ካብ 8px ክሳብ 4px) ንምቑራጽ ነቲ ክፍሊ ብምውሳኽ ሰደቓታትካ ዝያዳ ውህሉል ግበሮም።

<table class="ሰንጠረዥ ሰንጠረዥ-ተሓጺሩ">
  ...
</table> ዝብል ጽሑፍ ኣሎ።

#	ናይ መጀመርታ ሽም	ናይ መወዳእታ ሽም	ስም ተጠቃሚ
1.	ማርክ	ኦቶ	@mdo ዝብል ጽሑፍ ኣሎ።
2.	ያእቆብ	ቶርንተን ዝበሃል ትካል	@ረጒድ
3.	ላሪ እታ ዑፍ		@twitter ዝብል ጽሑፍ ኣሎ።

ዝኾነ ካብቶም ናይ ጠረጴዛ ክፍልታት ብምውህሃድ ዝኾነ ካብቶም ዘለዉ ክፍልታት ብምጥቃም ዝተፈላለየ መልክዕ ንምርካብ ናጻ ትኾኑ።

<table class="ሰንጠረዥ ሰንጠረዥ መስመር ዘለዎ ሰደቓ-ዝተወሰነ ሰደቓ-ተሓጺሩ">
  ...
</table> ዝብል ጽሑፍ ኣሎ።

	ምሉእ ስም
#	ናይ መጀመርታ ሽም	ናይ መወዳእታ ሽም	ስም ተጠቃሚ
1.	ማርክ	ኦቶ	@mdo ዝብል ጽሑፍ ኣሎ።
2.	ያእቆብ	ቶርንተን ዝበሃል ትካል	@ረጒድ
3.	ላሪ እታ ዑፍ		@twitter ዝብል ጽሑፍ ኣሎ።

ተዓጻጻፊ ኤችቲኤምኤልን ሲኤስኤስን።

እቲ ዝበለጸ ክፋል ብዛዕባ ቅጥዕታት ኣብ ቡትስትራፕ ኩሎም እታዎታትካን ቁጽጽራትካን ኣብ ማርካፕካ ብኸመይ ትሃንጾም ብዘየገድስ ጽቡቕ ትርኢት ምህላዎም እዩ። ዝኾነ ትርፊ ኤችቲኤምኤል ኣየድልን እዩ፡ ግን ነቶም ዝጠልብዎ ቅዲታት ነቕርብ።

ዝያዳ ዝተሓላለኹ ኣቀማምጣታት ንቐሊል ቅዲን ምትእስሳር ክስተትን ብሕጽር ዝበለን ዝዓቢን ክፍልታት ይመጹ፣ ስለዚ ኣብ ነፍሲ ወከፍ ስጉምቲ ትሽፈን።

ኣርባዕተ ኣቀማምጣታት ሓዊሱ

ቡትስትራፕ ንኣርባዕተ ዓይነት ቅጥዒ ኣቀማምጣ ደገፍ ሒዙ ይመጽእ፤

• ቀጥታዊ (ነባሪ) .
• ምድላይ
• ኣብ መስመር
• ንጋድም

ዝተፈላለዩ ዓይነታት ቅጥዒ ኣቀማምጣ ንማርካፕ ገለ ለውጢ የድልዮም፣ እንተኾነ ግን እቶም ቁጽጽር ንባዕሎም ሓደ ዓይነት ኮይኖም ይቕጽሉን ይመላለሱን።

ቁጽጽር ግዝኣታትን ካልእን

ናይ Bootstrap ቅጥዕታት ንኹሎም መሰረታዊ ቅጥዕታት ቁጽጽር ከም input, textarea, ከምኡ ውን ትጽበዮ ምረጽ ቅዲታት የጠቓልል። ግን ብርክት ዝበሉ ብሕታዊ ባእታታት ከም ዝተወሰኹን ቅድሚኡ ዝተሰቕሉን እታዎታትን ንዝርዝር ሳጹናት ምልክት ዝድግፍን እውን ሒዙ ይመጽእ እዩ።

ከም ጌጋ፣ መጠንቀቕታን ዓወትን ዝኣመሰሉ ግዝኣታት ንነፍሲ ​​ወከፍ ዓይነት ምቁጽጻር ቅጥዒ ተኻቲቶም ኣለዉ። ብተወሳኺ ንስንኩላን ቁጽጽር ዝኸውን ቅዲታት ተኻቲቱ ኣሎ።

መሰረታዊ ቅርጺ

ምስ v2.0 ንቅዲ ቅጥዕታት ዝቐለሉን ዝበሃሉን ነባሪ ነገራት ኣለዉና። ተወሳኺ ምልክት የለን፣ ቁጽጽር ቅጥዒ ጥራይ።

ስም ምልክት ተዛማዲ ናይ ሓገዝ ጽሑፍ!

ኣብነት ናይ ብሎክ-ደረጃ ሓገዝ ጽሑፍ ኣብዚ።

ርኣዩኒ ኣእትው

<ፎርም ክፍሊ="ጽቡቕ">
  <label>ስም ስያመ</label>
  <input type="text" class="span3" placeholder="ገለ ጽሓፍ...">
  <span class="help-inline">ተዛማዲ ናይ ሓገዝ ጽሑፍ!</span>
  <label class="ሳጹን ምልክት">
    <input type="checkbox"> ርኣዩኒ።
  </label> ዝብል ጽሑፍ ኣሎ።
  <button type="submit" class="btn">ኣቕርብ</button> ዝብል ጽሑፍ ኣሎ።
</form> ዝብል ጽሑፍ ኣሎ።

ቅጥዒ ምድላይ

ነባሪ ቅዲታት ዌብኪት ዘንጸባርቕ፣ .form-searchንተወሳኺ ክቡብ ናይ ምድላይ ዓውድታት ጥራይ ምውሳኽ።

ምድላይ

<form class="ጽቡቕ ቅጥዒ-ምድላይ">
  <input type="text" class="ምእታው-ማእከላይ ምድላይ-ሕቶ">
  <button type="submit" class="btn">ድለ</button> ዝብል ጽሑፍ ኣሎ።
</form> ዝብል ጽሑፍ ኣሎ።

ኣብ መስመር ዝርከብ ቅጥዒ

እታዎታት ንምጅማር ደረጃ ብሎክ እዮም። ንን .form-inline፣ .form-horizontalinline-block ንጥቀም።

ዘክረኒ ኣቲኻ ኣቲኻ

<form class="ጽቡቕ ቅጥዒ-ኣብ መስመር">
  <input type="text" class="እታው-ንእሽቶ" ቦታ="ኢመይል">
  <input type="መሕለፊ ቃል" class="ምእታው-ንእሽቶ" placeholder="መሕለፊ ቃል">
  <label class="ሳጹን ምልክት">
    <input type="checkbox"> ዘክርኒ።
  </label> ዝብል ጽሑፍ ኣሎ።
  <button type="submit" class="btn">እቶ</button> ዝብል ጽሑፍ ኣሎ።
</form> ዝብል ጽሑፍ ኣሎ።

ቡትስትራፕ ዝድግፍ ይቆጻጸር

ጽሑፍ ምእታው

ብዘይካ ነጻ ቅርጺ ጽሑፍ፡ ዝኾነ HTML5 ጽሑፍ መሰረት ዝገበረ ምእታው ከምኡ ይመስል።

ሳጹን ምልክት

ሓደ ኣማራጺ እዚን እቲን እዩ-ንምንታይ ብሉጽ ምዃኑ ርግጸኛ ኩን።

ዝርዝር ምረጽ

ዝኾነ ነገር 2. 3. 4. 5.

ማልቲኮን-ምምራጽ

1. 2. 3. 4. 5.

ፋይል ምእታው

Textarea ዝብል ጽሑፍ ኣሎ።

ለውጢ ምዕቃብ ሰርዝ

ኣብነት ምልክት ምግባር

ኣብ ላዕሊ ዘሎ ኣብነት ቅጥዒ ኣቀማምጣ ኣብ ግምት ብምእታው፡ ምስቲ ቀዳማይ ምእታውን ምቁጽጻርን ጉጅለ ዝተኣሳሰር ምልክት ኣብዚ ኣሎ። እቶም .control-group, .control-label, ከምኡ ውን .controlsክፍልታት ኩሎም ንቅዲ ዘድልዩ እዮም።

<form class="ቅርጺ-ኣግማድ">
  <ናይ ሜዳ ስብስብ>
    <legend>ጽሑፍ ኣፈ-ታሪኽ</legend>
    <div class="ጉጅለ-ቁጽጽር">
      <label class="control-label" for="input01">ጽሑፍ ምእታው</label>
      <div class="ዝቆጻጸርዎ">
        <ዓይነት ምእታው="ጽሑፍ" ክፍሊ="ምእታው-xlarge" id="ምእታው01">
        <p class="help-block">ናይ ሓገዝ ጽሑፍ ምድጋፍ</p>
      </div> ዝብል ጽሑፍ ኣሎ።
    </div> ዝብል ጽሑፍ ኣሎ።
  </fieldset> ዝብል ጽሑፍ ኣሎ።
</form> ዝብል ጽሑፍ ኣሎ።

እንታይ ተሓዊስዎ ኣሎ።

ኣብ ጸጋም ዝተርኣዩ ኩሎም እቶም እንድግፎም ነባሪ ናይ ቅጥዒ ቁጽጽር እዮም። ዝርዝር ጥይት ኣብዚ ኣሎ፤

• ናይ ጽሑፍ ምእታው (ጽሑፍ፡ ምልክት ቃል፡ ኢመይል ወዘተ)
• ሳጹን ምልክት ምግባር
• ሬድዮ
• ምረፅ
• ብዙሕ ምምራጽ
• ፋይል ምእታው
• textarea ዝብል ጽሑፍ ኣሎ።

---

ሓደስቲ ነባሪ ምስ v2.0

ክሳብ v1.4፡ ናይ Bootstrap ነባሪ ቅዲ ቅጥዒ፡ ነቲ ኣግማድ ኣቀማምጣ ይጥቀሙ ነይሮም። ብ Bootstrap 2 ንዝኾነ ቅጥዒ ዝያዳ በሊሕን ዝያዳ ስኬላብልን ነባሪ ንኽህልወና ነቲ ደረት ኣወጊድናዮ።

ቅጥዒ ቁጽጽር ግዝኣታት

ትኹረት ዝገበረ እታዎት።

ዘይእረም እታዎት።

ገለ ኣብዚ ዋጋ ይህቡ

ስንኩል ምእታው

ተሰናኺሉ ዝብል ሳጹን ምልክት

እዚ ዝተሰናኸለ ምልክት ሳጹን እዩ።

ምእታው ምስ መጠንቀቕታ

ገለ ነገር ተጋግዩ ክኸውን ይኽእል እዩ።

ምእታው ምስ ጌጋ

በጃኹም ነቲ ጌጋ ኣርምዎ።

እታዎት ምስ ዓወት

ዉውሁው!

ብዓወት ምረጽ

1. 2. 3. 4. 5. ዉውሁው!

ለውጢ ምዕቃብ ሰርዝ

ዳግማይ ዝተነድፈ ናይ መርበብ ሓበሬታ ኩነታት

ቡትስትራፕ ንብራውዘር ዝድገፉ ትኹረት ዝገበሩን disabledግዝኣታትን ቅዲታት ኣለዉዎ። ነቲ ነባሪ ዌብኪት ኣውጺእና outlineኣብ box-shadowክንድኡ ን :focus.

---

ቅጥዒ ምጽዳቕ

ብተወሳኺ ንጌጋታት፡ መጠንቀቕታታትን ዓወትን ዝኸውን ናይ ምጽዳቕ ቅዲታት የጠቓልል። ንምጥቃም፡ ነቲ ናይ ጌጋ ክፍሊ ኣብቲ ከባቢኡ ወስኸሉ .control-group።

<ናይ ሜዳ ስብስብ
  class="ናይ ቁጽጽር-ጉጅለ ጌጋ">
  ...
</fieldset> ዝብል ጽሑፍ ኣሎ።

ምዝርጋሕ ቅጥዒ ቁጽጽር

ዓቐናት ሽቦ ቅጥዒ

1. 2. 3. 4. 5. 1. 2. 3. 4. 5. 1. 2. 3. 4. 5.

.span*ንዓቐናት እታዎታት ካብ ስርዓት ሽቦ ተመሳሳሊ ክፍልታት ተጠቐም ።

ተለዋዋጢ ዓቐናት

ብተወሳኺ ናብቲ ሽቦ ዘይተመዝገቡ፣ ምስቲ ምላሽ ዝህቡ ቅዲታት CSS ዘይመጣጠኑ፣ ወይ ንዝተፈላለዩ ዓይነታት ቁጽጽር (ንኣብነት፣ inputኣንጻር select) ዝሕተቱ ስታቲካዊ ክፍልታት ክትጥቀም ትኽእል ኢኻ።

ቅድሚኡ ዝተጻሕፈ ጽሑፍ

@

ገለ ናይ ሓገዝ ጽሑፍ ኣብዚ ኣሎ።

ተወሰኸ ጽሑፍ

.00 ዝብል እዩ።

ተወሳኺ ናይ ሓገዝ ጽሑፍ ኣብዚ ኣሎ።

ምውሳኽን ቅድመ ምጽሓፍን።

$ .00 ዝብል እዩ።

ብመጠወቒ ምውሳኽ

ኪድ!

ኣብ መስመር ዝርከቡ ሳጹናት ምልክት

1. 2. 3.

ሳጹናት ምልክት

ሓደ ኣማራጺ እዚን እቲን እዩ-ንምንታይ ብሉጽ ምዃኑ ርግጸኛ ኩን። ኣማራጺ ክልተ እውን ምፍታሽን ኣብ ውጽኢት ቅጥዒ ምእታውን ይከኣል ኣማራጺ ሰለስተ-እወ ገሚትካዮ-ኣብ ውጽኢት ቅጥዒ እውን ክምርመርን ክካተትን ይኽእል እዩ።

መተሓሳሰቢ ፡ ስያመታት ንኹሎም ኣማራጺታት ንኣዝዩ ዝዓበየ ናይ ጠውቂ ቦታታትን ዝያዳ ኣብ ጥቕሚ ዝውዕል ቅጥዕን ይኸብብዎም።

ናይ ሬድዮ መጠወቒታት

ሓደ ኣማራጺ እዚን እቲን እዩ-ንምንታይ ብሉጽ ምዃኑ ርግጸኛ ኩን። ኣማራጺ ክልተ can ካልእ እዩ ምምራጽ ድማ ኣማራጺ ሓደ deselect ይገብሮ

ለውጢ ምዕቃብ ሰርዝ

እታዎታት ቅድመ-ምልክት & ምውሳኽ

ጉጅለታት እታዎታት-ምስ ዝተወሰኸ ወይ ቅድሚኡ ዝተሰቕለ ጽሑፍ-ንእታውታትካ ዝያዳ ዓውደ-ጽሑፍ ንምሃብ ቀሊል መገዲ ይህቡ። ዓበይቲ ኣብነታት ንኣስማት ተጠቀምቲ ትዊተር @ ምልክት ወይ ንፋይናንስ $ ይርከብዎም።

---

ሳጹናት ምልክትን ሬድዮታትን

ክሳብ v1.4፡ Bootstrap ንኽድምር ኣብ ዙርያ ሳጹናት ምልክትን ሬድዮታትን ተወሳኺ ምልክት ምግባር የድልዮ ነይሩ። ሕጂ <label class="checkbox">፡ ነቲ ን <input type="checkbox">.

ኣብ መስመር ዝርከቡ ሳጹናት ምልክትን ሬድዮታትን እውን ይድገፉ እዮም። በቃ .inlineኣብ ዝኾነ .checkboxወይ ወስኸሉ .radioእሞ ወዲእካዮ።

---

ኣብ መስመር ቅጥዕታት ምግባርን ምውሳኽ/ምቕዳም ምጽሓፍን።

ቅድመ-ምልክት ወይ ምውሳኽ እታዎታት ብውሽጢ መስመር ቅርጺ ንምጥቃም፡ ነቲን ኣብ ሓደ .add-onመስመር input፡ ብዘይ ነጥቢ ምቕማጥካ ኣረጋግጽ።

---

ናይ ሓገዝ ጽሑፍ ቅጥዒ

ንናይ ቅጥዒ እታዎታትካ ናይ ሓገዝ ጽሑፍ ንምውሳኽ ፡ ድሕሪ ናይ ምእታው ባእታ ኣብ መስመር ሓገዝ ጽሑፍ ምስ <span class="help-inline">ወይ ናይ ሓገዝ ጽሑፍ ብሎክ ምስ ኣካትት።<p class="help-block">

ንተግባራት ዝኸውን መጠወቒታት

ከም ውዕል፡ መጠወቒታት ንተግባራት ጥራይ ክውዕሉ እንከለዉ፡ ሃይፐርሊንክታት ድማ ንነገራት ክውዕሉ እዮም። ንኣብነት "Download" ዝብል መጠወቒ ክኸውን ከሎ "ናይ ቀረባ እዋን ንጥፈታት" ድማ ሊንክ ክኸውን ኣለዎ።

ቅዲታት መጠወቒ ኣብ ዝኾነ ነገር ምስቲ .btnክፍሊ ተግባራዊ ክግበር ይከኣል። <a>ይኹን እምበር፡ ብተለምዶ ነዚኦም ኣብ only and <button>elements ክትትግብሮም ክትደሊ ኢኻ ።

መስቀላዊ ምትእስሳር መርበብ ሓበሬታ

IE9 ኣብ ክቡብ ኩርናዓት ድሕረ ባይታ ምዕባለታት ኣይቆርጽን እዩ፣ ስለዚ ነወግዶ። ምስኡ ዝተኣሳሰር፡ IE9 ንዝተሰናኸሉ buttonባእታታት ብjanifies ይገብሮ፡ ጽሑፍ ብጽዩፍ ጽሑፍ-ጽላሎት ክንእርሞ ዘይንኽእል ግራጭ ይገብሮ።

ብዙሕ ዓቐን ዘለዎም

ዓበይቲ ወይ ዝነኣሱ መጠወቒታት ትፈትዉ? ንኽልተ ተወሳኺ ዓቐን .btn-large, .btn-small, ወይ ወስኹሉ ።.btn-mini

ቀዳማይ ስጉምቲ ተግባር

ቀዳማይ ስጉምቲ ተግባር

ቀዳማይ ስጉምቲ ተግባር

ስንክልና ዘለዎ ኩነታት

ንዝተሰናኸሉ መጠወቒታት፡ ነቲ .disabledክፍሊ ናብ መላግቦታትን ነቲ disabledባህሪ ንባእታታትን ወስኸሉ <button>።

መባእታዊ ሊንክ ሊንክ

መባእታዊ መጠወቒ መጠወቒ

ርእሲ ንላዕሊ! .disabledኣብዚ ከም ዩቲሊቲ ክላስ ንጥቀመሉ ፣ ምስቲ ናይ ሓባር .activeክፍሊ ዝመሳሰል፣ ስለዚ ዝኾነ ቅድመ-ጥብቆ ኣየድልን።

ሓደ ክፍሊ፣ ብዙሓት መለለዪታት

ነቲ .btnክፍሊ ኣብ <a>፣ <button>፣ ወይ <input>ባእታ ተጠቐመሉ።

ሊንክ መጠወቒ

<a class="btn" href="">መላግቦ</a>
<button class="btn" ዓይነት="ኣቕርብ">
  መጠወቒ
</መጠወቒ>
<input class="btn" ዓይነት="መጠወቒ"።
         ዋጋ="ኣእትዎት">
<input class="btn" ዓይነት="ኣቕርብ"።
         value="ኣቕርብ"> ዝብል እዩ።

ከም ዝበለጸ ልምዲ፡ ነቲ ባእታ ንዓኻ ዓውዲ ምትእስሳር ንምርግጋጽ ምትእስሳር መስቀላዊ-መርበብ ኣቀራርባ ከተመዓራርዮ ፈትን። ፡ እንተሃልዩካ ንመጠወቒኻ ዝኸውን inputተጠቐም <input type="submit">።

• ምልክት-ብርጭቆ
• ምልክት-ሙዚቃ
• ምልክት-ምድላይ
• ምልክት-ፖስታ
• ምልክት-ልቢ
• ምልክት-ኮኾብ
• ምልክት-ኮኾብ-ባዶ
• ምልክት-ተጠቃሚ
• ምልክት-ፊልም
• ምልክት-መበል-ዓቢ
• ምልክት-መ
• ምልክት-ዝ-ዝርዝር
• ምልክት-ok
• ምልክት-ምእላይ
• ምልክት-ምዕባይ
• ምልክት-ምዕባይ-ምውራድ
• ምልክት-ምጥፋእ ዝብል እዩ።
• ምልክት-ምልክት
• ምልክት-ኮግ
• ምልክት-ጓሓፍ
• ምልክት-ገዛ
• ምልክት-ፋይል
• ምልክት-ግዜ
• ምልክት-መንገዲ
• ምልክት-ምውራድ-alt
• ምልክት-ምውራድ
• ምልክት-ምጽዓን።
• ምልክት-ኢንቦክስ
• ምልክት-ጸወታ-ዓንኬል
• ምልክት-ምድጋም

• ምልክት-ምሕዳስ ምግባር
• ምልክት-ዝርዝር-alt
• ምልክት-መዕጸዊ
• ምልክት-ባንዴራ
• ምልክት-እዝኒ ስልኪ
• ምልክት-ድምጺ-ምጥፋእ እዩ።
• ምልክት-ድምጺ-ንታሕቲ
• ምልክት-ድምጺ-ምዕባይ
• ምልክት-qrcode ዝብል ጽሑፍ ኣሎ።
• ምልክት-ባርኮድ
• ምልክት-ታግ
• ምልክት-ታግታት
• ምልክት-መጽሓፍ
• ምልክት-ዕልባ
• ምልክት-ሕትመት
• ምልክት-ካሜራ
• ምልክት-ቅርጺ ጽሑፍ
• ምልክት-ድሙቕ
• ምልክት-ሰያፍ
• ምልክት-ጽሑፍ-ቁመት
• ምልክት-ጽሑፍ-ስፍሓት
• ምልክት-ኣሰላልፋ-ጸጋም
• ምልክት-ኣሰላልፋ-ማእከል
• ምልክት-ኣሰላልፋ-የማን
• ምልክት-ኣሰላልፋ-ምምኽናይ
• ምልክት-ዝርዝር
• ምልክት-ኢንደንት-ጸጋም
• ምልክት-ኢንደንት-የማን
• ምልክት-ገጽ-ግዜ-ቪድዮ
• ምልክት-ስእሊ

• ምልክት-እርሳስ
• ምልክት-ካርታ-ምልክት
• ምልክት-ምትዕርራይ
• ምልክት-ቅብኣት
• ምልክት-ኣርትዖት።
• ምልክት-ምክፋል ምግባር
• ምልክት-ምፍታሽ
• ምልክት-ምንቅስቓስ
• ምልክት-ስጉምቲ-ንድሕሪት
• ምልክት-ቅልጡፍ-ድሕሪት
• ምልክት-ድሕሪት
• ምልክት-ጸወታ
• ምልክት-ዕረፍቲ
• ምልክት-ደው ምባል
• ምልክት-ንቕድሚት።
• ምልክት-ቅልጡፍ-ንቕድሚት።
• ምልክት-ስጉምቲ-ንቕድሚት።
• ምልክት-ምውጻእ እዩ።
• ምልክት-ሸቭሮን-ጸጋም
• ምልክት-ሸቭሮን-የማን
• ምልክት-ተወሳኺ ምልክት
• ምልክት-ምጉዳል-ምልክት
• ምልክት-ምእላይ-ምልክት
• ምልክት-ok-ምልክት
• ምልክት-ሕቶ-ምልክት
• ምልክት-ሓበሬታ-ምልክት
• ምልክት-ስክሪን ስእሊ
• ምልክት-ምእላይ-ዓንኬል
• ምልክት-ok-ዓንኬል
• ምልክት-እገዳ-ዓንኬል

• ምልክት-ፍላጻ-ጸጋም
• ምልክት-ፍላጻ-የማን
• ምልክት-ፍላጻ-ንላዕሊ
• ምልክት-ፍላጻ-ንታሕቲ
• ምልክት-ምክፋል-ኣልት
• ምልክት-ዓቐን ምቕያር-ምሉእ እዩ።
• ምልክት-ዓቐን ምቕያር-ንእሽቶ
• ምልክት-ተወሳኺ
• ምልክት-ምጉዳል
• ምልክት-ኮኾብ
• ምልክት-ኣድናቖት-ምልክት
• ምልክት-ህያብ
• ምልክት-ቆጽሊ
• ምልክት-ሓዊ
• ምልክት-ዓይኒ-ክፉት እዩ።
• ምልክት-ዓይኒ-ምዕጻው
• ምልክት-መጠንቀቕታ-ምልክት
• ምልክት-ነፋሪት።
• ምልክት-ዓውደ-ኣዋርሕ
• ምልክት-ብሃንደበት
• ምልክት-ርእይቶ
• ምልክት-ማግኔት።
• ምልክት-ሸቭሮን-ኣፕ
• ምልክት-ሸቭሮን-ንታሕቲ
• ምልክት-ሪትዊት ምግባር
• ምልክት-ዕዳጋ-ዓረብያ
• ምልክት-ኣቃፊራ-ዕጾ
• ምልክት-ኣቃፊራ-ክፉት እዩ።
• ምልክት-ዓቐን ምቕያር-ቀጥታዊ
• ምልክት-ዓቐን ምቕያር-ኣግማድ

ከም ስፕራይት ዝተሃንጸ

ንነፍሲ ወከፍ ምልክት ተወሳኺ ሕቶ ኣብ ክንዲ እንገብሮ፡ ናብ ስፕራይት ኣጠቓሊልናዮም ኣለና-ኣብ ሓደ ፋይል ዝርከቡ ዕስለ ምስልታት፡ ነቶም ምስልታት ብ background-position. እዚ ኣብ ትዊተር ዶት ኮም እንጥቀመሉ ኣገባብ እዩ ጽቡቕ ድማ ሰሪሑልና ኣሎ።

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

<i class="icon-search icon-white"></i>

There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

• As visuals for your sidebar navigation
• For a purely icon-driven navigation
• For buttons to help convey the meaning of an action
• With links to share context on a user's destination

ብመሰረቱ ኣብ ዝኾነ ቦታ <i>መለለዪ ከተቐምጥ እትኽእል ቦታ ምልክት ከተቐምጥ ትኽእል ኢኻ።

ምሕዳስ ምውጻእ ገንዘብ ምድምሳስ

ርእይቶ ቅጥዕታት ተወሳኺ ሓበሬታ

ናይ ኢመይል ኣድራሻ