ኣርእስታት

ኩሎም ኣርእስታት ኤችቲኤምኤል፣ <h1>ብመንገዲ <h6>ኣለዉ።

h1. ርእሲ 1

h2. ርእሲ 2

h3. ርእሲ 3

h4. ርእሲ 4

h5. ርእሲ 5

h6. ርእሲ 6

ኣካል ቅዳሕ

ናይ Bootstrap ዓለማዊ ነባሪ font-size14px , ምስ a line-heightof 20px . <body>እዚ ኣብቲን ኩለን ሕጡበ-ጽሑፋትን ይትግበር ። ብተወሳኺ <p>፡ (ሕጡበ-ጽሑፋት) ፍርቂ መስመር-ቁመት (ብነባሪ 10px) ዝኾነ ታሕተዋይ ወሰን ይረኽቡ።

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

Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ. ዶነክ ኡላምኮርፐር ኑላ ኖን ሜቱስ ኦክተር ፍሪንጊላ። ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ፡ ኒሲ ኤራት ፖርቲቶር ሊጉላ፡ ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት። ዶነክ ኡላምኮርፐር ኑላ ኖን ሜቱስ ኦክተር ፍሪንጊላ።

ማሴናስ ሴድ ዲያም ኤጌት ሪሱስ ቫሪዩስ ብላንዲት ኮፍ ኣሜት ዘይ ማግና. Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus. ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ፡ ኒሲ ኤራት ፖርቲቶር ሊጉላ፡ ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት።

<p> ... </p> ዝብል ጽሑፍ ኣሎ።

መሪሕነት ኣካል ቅዳሕ

ብምውሳኽ ንሓደ ሕጡበ ጽሑፍ ፍሉይ ግበሮ .lead.

ቪቫሙስ ሳጂቲስ ላከስ ቬል ኣውጉ ላኦሪት ሩትሩም ፋውሲበስ ዶሎር ኦክተር። ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ.

<p class = "መሪሕነት" > ... </p>

ብውሑድ ዝተሃንጸ

እቲ ናይ ታይፕግራፊክ ስኬል ኣብ ክልተ LESS ተለዋዋጢ ኣብ ተለዋዋጢ ረቛሒታት ዝተመርኮሰ እዩ።less : @baseFontSizeand @baseLineHeight. እቲ ቀዳማይ ኣብ ምሉእ ዝጥቀመሉ መሰረታዊ ቅርጺ-ዓቐን ኮይኑ እቲ ካልኣይ ድማ መሰረታዊ መስመር-ቁመት እዩ። ነቶም ተለዋዋጢ ረቛሒታትን ገለ ቀለልቲ ሒሳብን ተጠቒምና ናይ ኩሉ ዓይነትናን ካልእን ወሰን፡ ፓዲንግን መስመር-ቁመትን ንፈጥር። ንዓኣቶም ብዝጥዕመካ ኣመዓራርዮም ቡትስትራፕ ድማ ይመዓራረዮም።

ኣትኩሮ ምሃብ

ናይ HTML ነባሪ ናይ ምጉላሕ መለለዪታት ምስ ቀለልቲ ቅዲታት ተጠቐም።

`<small>`

ንውሽጢ መስመር ወይ ንብሎኮታት ጽሑፍ ንምጉላሕ ፡ ነታ ንእሽቶ መለለዪ ተጠቐም።

እዚ መስመር ጽሑፍ እዚ ከም ረቂቕ ኣጸሓሕፋ ንኽሕሰብ ተባሂሉ እዩ።

<p> <small> እዚ መስመር ጽሑፍ ከም ረቂቕ ኣጸሓሕፋ ክሕሰብ ተባሂሉ እዩ። </small> </p> ዝብል ጽሑፍ ኣሎ።

ድሙቅ

ንሓደ ቁንጣሮ ጽሑፍ ብዝኸበደ ቅርጺ-ክብደት ንምጉላሕ።

እዚ ዝስዕብ ቁንጣሮ ጽሑፍ ከም ድሙቕ ጽሑፍ ይቐርብ ።

<strong> ከም ድሙቕ ጽሑፍ ተቐሪጹ </strong>

ሰያፍ ፊደላት

ንሓደ ቁንጣሮ ጽሑፍ ብሰያፍ ንምጉላሕ።

እዚ ዝስዕብ ቁንጣሮ ጽሑፍ ከም ሰያፍ ጽሑፍ ተተርጒሙ ኣሎ ።

<em> ከም ሰያፍ ጽሑፍ ተተርጒሙ </em>

ርእሲ ንላዕሊ!ክትጥቀሙን ብHTML5 <b>ን ናጻ ትኾኑ ። ተወሳኺ ኣገዳስነት ከየመሓላልፍ ቃላት ወይ ሓረጋት ንምጉላሕ ዝዓለመ ክኸውን ከሎ መብዛሕትኡ ንድምጺ፡ ቴክኒካዊ ቃላት ወዘተ ዝኸውን እዩ።<i><b><i>

ናይ ኣሰላልፋ ክፍልታት

ጽሑፍ ብቐሊሉ ናብ ኣካላት ምስ ናይ ጽሑፍ ኣሰላልፋ ክፍልታት ዳግማይ ኣመዓራርዮ።

ንጸጋም ዝተሰለፈ ጽሑፍ።

ኣብ ማእከል ዝተሰለፈ ጽሑፍ።

ብየማን ዝተሰለፈ ጽሑፍ።

<p class = "text-left" > ንጸጋም ዝተሰለፈ ጽሑፍ። </p> ዝብል ጽሑፍ ኣሎ። 
<p class = "text-center" > ማእከል ዝተሰለፈ ጽሑፍ። </p> ዝብል ጽሑፍ ኣሎ። 
<p class = "text-right" > ብየማን ዝተሰለፈ ጽሑፍ። </p> ዝብል ጽሑፍ ኣሎ።

ናይ ምጉላሕ ክፍልታት

ትርጉም ብሕብሪ ምስ ብኣጻብዕ ዝቑጸሩ ናይ ምጉላሕ ዩቲሊቲ ክፍልታት ምትሕልላፍ።

ፉስ ዳፒቡስ፡ ቴሉስ ኣክ ከርሱስ ኮሞዶ፡ ቶርቶር ማውሪስ ኒብህ።

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

ዶነክ ኡላምኮርፐር ኑላ ኖን ሜቱስ ኦክተር ፍሪንጊላ።

ኤንያን ዩ ልዮ ኳም። ፔለንተስክ ኦርናረ ሴም ላሲንያ ኳም ቬነናቲስ.

ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ፡ ኒሲ ኤራት ፖርቲቶር ሊጉላ።

<p class = "muted" > ፉስ ዳፒቡስ፡ ቴሉስ ኤሲ ከርሱስ ኮሞዶ፡ ቶርቶር ማውሪስ ኒብህ። </p> ዝብል ጽሑፍ ኣሎ። 
<p class = "ጽሑፍ-መጠንቀቕታ" > ኢትያም ፖርታ ሴም ማሌሱዋዳ ማግና ሞሊስ ዩስሞድ። </p> ዝብል ጽሑፍ ኣሎ። 
<p class = "ጽሑፍ-ጌጋ" > ዶነክ ኡላምኮርፐር ኑላ ዘይ ሜቱስ ኣውክተር ፍሪንጊላ። </p> ዝብል ጽሑፍ ኣሎ። 
<p class = "ጽሑፍ-ሓበሬታ" > ኤን ኤው ሊዮ ኳም. ፔለንተስክ ኦርናረ ሴም ላሲንያ ኳም ቬነናቲስ. </p> ዝብል ጽሑፍ ኣሎ። 
<p class = "ጽሑፍ-ዓወት" > ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ፡ ኒሲ ኤራት ፖርቲቶር ሊጉላ። </p> ዝብል ጽሑፍ ኣሎ።

ኣሕጽሮተ ቃላት

ቅዲ ዘለዎ ኣተገባብራ ናይ HTML <abbr>ባእታ ንኣሕጽሮተ ቃላትን ኣሕጽሮተ ቃላትን ነቲ ዝተሰፍሐ ስሪት ኣብ ሆቨር ንምርኣይ። ባህሪ ዘለዎም ኣሕጽሮተ ቃላት titleፍኹስ ዝበለ ነጥቢ ዘለዎ ታሕተዋይ ዶብን ኣብ ምሕንባስ ናይ ሓገዝ መመልከቲን ኣለዎም፣ ኣብ ምዝዋር ተወሳኺ ዓውደ-ጽሑፍ ይህብ።

`<abbr>`

ንዝተሰፍሐ ጽሑፍ ኣብ ነዊሕ ምዝዋር ናይ ሓደ ኣሕጽሮተ ቃል፡ ነቲ titleባህሪ ኣካትት።

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

<abbr title = "ባህሪ" > attr </abbr> ዝብል ጽሑፍ ኣሎ።

`<abbr class="initialism">`

.initialismቁሩብ ዝነኣሰ font-size ንምርካብ ኣብ ኣሕጽሮተ ቃል ወስኸሉ ።

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

<abbr title = "ሃይፐርቴክስት ምልክት ቋንቋ" class = "መጀመርታ" > HTML </abbr>

ኣድራሻታት

ንዝቐረበ ኣቦሓጎ ወይ ንመላእ ኣካል ስራሕ ርክብ ሓበሬታ ምቕራብ።

`<address>`

ንኹሎም መስመራት ብ <br>.

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

ምሉእ ስም
[email protected]

<ኣድራሻ>
  <strong> ትዊተር፣ ኢንክ </strong><br>
  795 ፎልሶም ኣቨ፡ ሱት 600 <br>
  ሳንፍራንሲስኮ፡ ሲኤ 94107 <br>
  <abbr title = "ስልኪ" > ገጽ፡ < / abbr> (123) 456-7890 
</ኣድራሻ>
 
<ኣድራሻ>
  <strong> ምሉእ ስም </strong><br>
  <a href = "mailto:#" > ቀዳማይ.ናይ መወዳእታ@ኣብነት.ኮም </a> 
</ኣድራሻ>

ብሎክኮትስ

ኣብ ውሽጢ ሰነድካ ካብ ካልእ ምንጪ ንዝተረኽበ ብሎኮታት ትሕዝቶ ንምጥቃስ።

ነባሪ ብሎክኮት።

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

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

<ብሎክquote> ዝብል ጽሑፍ ኣሎ።
  <p> ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante. </p> ዝብል ጽሑፍ ኣሎ።
</blockquote> ዝብል ጽሑፍ ኣሎ።

ናይ ብሎክኮት ኣማራጺታት

ቅዲን ትሕዝቶን ንቐሊል ፍልልያት ኣብ መደበኛ ብሎክኮት ይቕየር።

ምንጪ ምጽዋዕ

<small>ምንጪ ንምልላይ ዝሕግዝ መለለዪ ምልክት ምውሳኽ ። ስም ናይቲ ምንጪ ስራሕ ኣብ <cite>.

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante.
ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ

<ብሎክquote> ዝብል ጽሑፍ ኣሎ።
  <p> ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante. </p> ዝብል ጽሑፍ ኣሎ።
  <small> ሓደ ፍሉጥ ሰብ <cite title = "ፍልፍል ኣርእስቲ" > ምንጪ ኣርእስቲ </cite></small> 
</blockquote> ዝብል ጽሑፍ ኣሎ።

ተለዋዋጢ ምልክታት

.pull-rightንዝተንሳፈፈን ብየማን ዝተሰለፈን ብሎክኮት ተጠቐም ።

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante.
ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ

<blockquote class = "ስሓብ-የማን" > 
  ...
</blockquote> ዝብል ጽሑፍ ኣሎ።

ዝርዝራት

ዘይተኣዘዘ

እቲ ቅደም ተኸተል ብግልጺ ኣገዳስነት ዘይብሉ ዝርዝር ነገራት።

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

<ul> ዝብል ጽሑፍ ኣሎ።
  <li> ... </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

ተኣዚዙ

እቲ ስርዓት ብግልጺ ኣገዳሲ ዝኾነሉ ዝርዝር ነገራት ።

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

<ol> ዝብል ጽሑፍ ኣሎ።
  <li> ... </li> ዝብል ጽሑፍ ኣሎ።
</ol> ዝብል ጽሑፍ ኣሎ።

ቅዲ ዘይብሉ

list-styleኣብ ዝርዝር ነገራት ዘሎ ነባሪን ጸጋማይን መሸፈኒ ኣውጽእ (ቅጽበታዊ ህጻናት ጥራይ)።

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

<ul class = "ዘይተቐየረ" > 
  <li> ... </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

ኣብ መስመር

ኩሎም ናይ ዝርዝር ነገራት ኣብ ሓደ መስመር inline-blockምስን ገለ ብርሃን መሸፈኒን ኣቐምጦም።

ሎረም ኢፕሱም
ፋሰለስ ኢያኩሊስ ዝበሃል እዩ።
ኑላ ቮሉትፓት።

<ul class = "ኣብ መስመር" > 
  <li> ... </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

መግለፂ

ዝርዝር ቃላት ምስ ተዛመድቲ መግለጺታቶም።

መግለጺ ዝርዝር: ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።
ዩይስሞድ: ቬስቲቡሉም ኢድ ሊጉላ ፖርታ ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት.; Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus.
ማሌሱዋዳ ፖርታ: ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ።

<dl> ዝብል ጽሑፍ ኣሎ።
  <dt> ... </dt> ዝብል ጽሑፍ ኣሎ።
  <dd> ... </dd> ዝብል ጽሑፍ ኣሎ።
</dl> ዝብል ጽሑፍ ኣሎ።

ልኡል መግለጺ

ቃላትን መግለጺታትን ኣብ <dl>መስርዕ ጎኒ ንጎኒ ምግባር።

መግለጺ ዝርዝር: ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።
ዩይስሞድ: ቬስቲቡሉም ኢድ ሊጉላ ፖርታ ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት.; Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus.
ማሌሱዋዳ ፖርታ: ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ።
ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ: ፉስ ዳፒቡስ፡ ቴሉስ ኣክ ከርሱስ ኮሞዶ፡ ቶርቶር ማውሪስ ኮንዲመንቱም ኒብህ፡ ኡት ፈርመንቱም ማሳ ጁስቶ ኮፍ ኣሜት ሪሱስ።

<dl class = "dl-ኣግማድ" > 
  <dt> ... </dt> ዝብል ጽሑፍ ኣሎ።
  <dd> ... </dd> ዝብል ጽሑፍ ኣሎ።
</dl> ዝብል ጽሑፍ ኣሎ።

ርእሲ ንላዕሊ!ዝርዝር መግለጺታት ልኡል ኣብ ጸጋማይ ዓምዲ ምትዕርራይ ንኽኣትዉ ኣዝዮም ነዊሕ ዝኾኑ ቃላት ክቖርጹ እዮም text-overflow። ኣብ ዝጸበቡ ቪውፖርትታት፡ ናብቲ ነባሪ ዝተደራረበ ኣቀማምጣ ክቕየሩ እዮም።

ኣብ መስመር

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

ንኣብነት <section>ከም ውሽጢ መስመር ክጥቕለል ይግባእ።

ንኣብነት < ኮድ > & lt ; section & gt ;</ code > ከም ውሽጢ መስመር ክጥቕለል ይግባእ ።

መሰረታዊ ብሎክ

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

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

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

ርእሲ ንላዕሊ!<pre>ኣብ ውሽጢ መለለዪታት ብዝተኻእለ መጠን ናብ ጸጋም ዝቐረበ ኮድ ምሓዝካ ኣረጋግጽ ፤ ንኹሎም ትቦታት ከቕርቦም እዩ።

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

ነባሪ ቅዲታት

ንመሰረታዊ ቅዲ-ቀሊል መሸፈኒን ኣግማድ መከፋፈልቲ ጥራይን-መሰረት ክፍሊ .tableኣብ ዝኾነ <table>.

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

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

ኣማራጺ ክፍልታት

ዝኾነ ካብዞም ዝስዕቡ ክፍልታት ኣብቲ .tableመሰረታዊ ክፍሊ ምውሳኽ።

`.table-striped`

ኣብ ውሽጢ <tbody>ብመንገዲ :nth-childCSS መምረጺ (ኣብ IE7-8 ኣይርከብን) ንዝኾነ መስርዕ ሰደቓ ዜብራ-ስትሪፒንግ ይውስኽ።

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

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

`.table-bordered`

ኣብቲ ጠረጴዛ ዶባትን ክቡባት ኩርናዓትን ወስኹሉ።

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

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

`.table-hover`

ኣብ መስመራት ሰደቓ ኣብ ውሽጢ ሓደ <tbody>.

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

<table class = "ሰንጠረዥ ሰንጠረዥ-ምሕንፋጽ" > 
  ...
</table> ዝብል ጽሑፍ ኣሎ።

`.table-condensed`

ንዋህዮ መሸፈኒ ኣብ ክልተ ብምቑራጽ ጠረጴዛታት ዝያዳ ጽዑቓት ይገብሮም።

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

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

ኣማራጺ መስርዕ ክፍልታት

ንመስርዕ ሰደቓ ሕብሪ ንምሃብ ዓውደ-ጽሑፋዊ ክፍልታት ተጠቐም።

ክፍሊ	መግለፂ
`.success`	ዕዉት ወይ ኣወንታዊ ስጉምቲ ከም ዝወሰደ የመልክት።
`.error`	ሓደገኛ ወይ ኣሉታዊ ክኸውን ዝኽእል ስጉምቲ የመልክት።
`.warning`	ቆላሕታ ከድልዮ ዝኽእል መጠንቀቕታ የመልክት።
`.info`	ከም ኣማራጺ ናይቶም ነባሪ ቅዲታት ይጥቀም።

#	ፍርያት	ክፍሊት ተወሰደ	ኩነታት
1.	ቲቢ - ወርሓዊ	01/04/2012 ዓ.ም	ጸዲቑ
2.	ቲቢ - ወርሓዊ	02/04/2012 ዓ.ም	ወሪዱ
3.	ቲቢ - ወርሓዊ	03/04/2012 ዓ.ም	ኣብ ከይዲ
4.	ቲቢ - ወርሓዊ	04/04/2012 ዓ.ም	ንምርግጋጽ ደውሉ።

...
  < tr class = "ዓወት" > ዝብል ጽሑፍ ኣሎ።
    <td> 1 < /td> ዝብል ጽሑፍ ኣሎ ።
    <td>ቲቢ - ወርሓዊ</ td >
    <td> 01 / 04 / 2012 ዓ /ም < /td>
    <td>ጸዲቑ</ td >
  </ tr > ዝብል ጽሑፍ ኣሎ።
...

ዝድገፍ ናይ ሰደቓ ምልክት ምግባር

ዝርዝር ናይ ዝድገፉ ናይ ሰደቓ HTML ባእታታትን ብኸመይ ክጥቀሙ ከምዘለዎምን።

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

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

ነባሪ ቅዲታት

ውልቃዊ ቅጥዒ ቁጽጽር ቅዲ ይቕበሉ፣ ግን ብዘይ ዝኾነ ዘድሊ መሰረታዊ ክፍሊ ኣብቲ <form>ወይ ዓቢ ለውጢ ኣብ ምልክት። ውጽኢቱ ድማ ኣብ ልዕሊ ቁጽጽር ቅጥዒ ዝተደራረቡን ብጸጋም ዝተሰለፉን ስያመታት ይኸውን።

<ቅርጺ>
  <ናይ ሜዳ ስብስብ>
    <ኣፈ ታሪኽ> ኣፈ ታሪኽ </legend>
    <label> ስም ስያመ </label>
    <input type = "text" placeholder = "ገለ ጽሓፍ..." >  
    <span class = "help-block" > ኣብዚ ኣብነት ናይ ብሎክ-ደረጃ ሓገዝ ጽሑፍ። </span> ዝብል ጽሑፍ ኣሎ። 
    <label class = "ሳጹን ምልክት" > 
      <input type = "checkbox" > ንዓይ ርኣዩኒ። 
    </label> ዝብል ጽሑፍ ኣሎ።
    <button type = "submit" class = "btn" > ኣቕርብ </መጠወቒ>  
  </fieldset> ዝብል ጽሑፍ ኣሎ።
</form> ዝብል ጽሑፍ ኣሎ።

ኣማራጺ ኣቀማምጣታት

ምስ ቡትስትራፕ ዝተኻተቱ ሰለስተ ኣማራጺ ቅጥዒ ኣቀማምጣ ንልሙዳት ኣጠቓቕማ ጉዳያት ኣለዉ።

ቅጥዒ ምድላይ

.form-searchኣብቲ ቅጥዕን .search-queryናብቲ <input>ንተወሳኺ ክቡብ ጽሑፍ ምእታውን ወስኸሉ ።

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

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

.form-inlineንጸጋም ዝተሰለፉ ስያመታትን ንናይ ውሽጢ መስመር-ብሎክ ቁጽጽርን ንውሱን ኣቀማምጣ ወስኹ ።

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

ልኡል ቅርጺ

ስያመታት ብየማን ኣሰሊፍካ ናብ ጸጋም ኣንሳፊፍካ ኣብ ሓደ መስመር ምስ መቆጻጸሪታት ከም ዝረኣዩ ምግባር። ካብ ነባሪ ቅጥዒ ዝበዝሐ ናይ ምልክት ለውጢ ይሓትት፤

.form-horizontalኣብቲ ቅጥዒ ወስኹ
ስያመታትን ቁጽጽርን ኣብ ጠቕልል.control-group
.control-labelኣብቲ ምልክት ምውሳኽ
ዝኾነ ተዛማዲ ቁጽጽር .controlsንግቡእ ኣሰላልፋ ኣብ ውሽጢ ጠቕልሎ

<form class = "ቅርጺ-ኣግማድ" > 
  <div class = "ቁጽጽር-ጉጅለ" > 
    <label class = "control-label" for = "ምእታውኢመይል" > ኢመይል </label>  
    <div class = "ዝቆጻጸር" > 
      < ዓይነት ምእታው = "ጽሑፍ" id = "ምእታውኢመይል" ቦታ = "ኢመይል" >   
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class = "ቁጽጽር-ጉጅለ" > 
    <label class = "control-label" for = "ምእታውመሕለፊ ቃል" > ምልክት ቃል </label>  
    <div class = "ዝቆጻጸር" > 
      <input type = "password" id = "inputPassword" ቦታ = "መሕለፊ ቃል" >   
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class = "ቁጽጽር-ጉጅለ" > 
    <div class = "ዝቆጻጸር" > 
      <label class = "ሳጹን ምልክት" > 
        <input type = "checkbox" > ዘክርኒ። 
      </label> ዝብል ጽሑፍ ኣሎ።
      <button type = "submit" class = "btn" > ምእታው </መጠወቒ>  
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</form> ዝብል ጽሑፍ ኣሎ።

ዝድገፍ ናይ ቅጥዒ ቁጽጽር

ኣብነታት ናይ መደበኛ ቅጥዒ ቁጽጽር ኣብ ኣብነት ቅጥዒ ኣቀማምጣ ዝድገፉ።

እታዎታት

ዝበዝሑ ልሙዳት ምቁጽጻር ቅጥዒ፣ ኣብ ጽሑፍ ዝተመርኮሱ ናይ ምእታው ዓውድታት። ንኹሎም ዓይነታት HTML5 ዝኸውን ደገፍ የጠቓልል: ጽሑፍ: ምልክት ቃል: ዕለት ሰዓት: ዕለት-ከባብያዊ: ዕለት: ወርሒ: ሰዓት: ሰሙን: ቁጽሪ: ኢመይል: url: ምድላይ: ቴለ: ከምኡውን ሕብር።

typeኣብ ኩሉ ግዜ ዝተወሰነ ምጥቃም የድሊ ።

<input type = "text" placeholder = "ጽሑፍ ምእታው" >

Textarea ዝብል ጽሑፍ ኣሎ።

ንብዙሓት መስመራት ጽሑፍ ዝድግፍ ምቁጽጻር ቅጥዒ። rowsከም ኣድላይነቱ ባህሪ ምቕያር ።

<textarea መስመራት = "3" ></textarea> ዝብል ጽሑፍ ኣሎ።

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

ሳጹናት ምልክት ኣብ ሓደ ዝርዝር ሓደ ወይ ሓያሎ ኣማራጺታት ንምምራጽ ክኸውን ከሎ ሬድዮታት ድማ ካብ ብዙሓት ሓደ ኣማራጺ ንምምራጽ ዝሕግዙ እዮም።

ነባሪ (ተደራሪቡ) .

<label class = "ሳጹን ምልክት" > 
  < ዓይነት ምእታው = "ሳንዱቕ ምልክት" ዋጋ = "" >  
  ሓደ ኣማራጺ እዚን እቲን እዩ-ንምንታይ ብሉጽ ምዃኑ ርግጸኛ ኩን።
</label> ዝብል ጽሑፍ ኣሎ።
 
<label class = "ሬድዮ" > ዝብል ጽሑፍ ኣሎ። 
  < ዓይነት ምእታው = "ሬድዮ" ስም = "ኣማራጺታትሬድዮታት" id = "ኣማራጺታትሬድዮታት1" ዋጋ = "ኣማራጺ1" ተፈቲሹ >     
  ሓደ ኣማራጺ እዚን እቲን እዩ-ንምንታይ ብሉጽ ምዃኑ ርግጸኛ ኩን።
</label> ዝብል ጽሑፍ ኣሎ።
<label class = "ሬድዮ" > ዝብል ጽሑፍ ኣሎ። 
  < ዓይነት ምእታው = "ሬድዮ" ስም = "ኣማራጺታትሬድዮታት" id = "ኣማራጺታትሬድዮታት2" ዋጋ = "ኣማራጺ2" >    
  ኣማራጺ ክልተ ካልእ ክኸውን ይኽእል እዩ ምምራጽ ድማ ኣማራጺ ሓደ ካብ ምምራጽ ይእለ
</label> ዝብል ጽሑፍ ኣሎ።

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

.inlineነቲ ክፍሊ ናብ ተኸታታሊ ሳጹናት ምልክት ወይ ሬድዮታት ወስኸሉ ንመቆጻጸሪታት ኣብ ሓደ መስመር ይረኣዩ።

<label class = "ሳጹን ምልክት ኣብ ውሽጢ መስመር" > 
  < ዓይነት ምእታው = "ሳንዱቕ ምልክት" id = "ኣብ መስመር ሳጹን ምፍታሽ1" ዋጋ = "ኣማራጺ1" > 1   
</label> ዝብል ጽሑፍ ኣሎ።
<label class = "ሳጹን ምልክት ኣብ ውሽጢ መስመር" > 
  < ዓይነት ምእታው = "ሳንዱቕ ምልክት" id = "ኣብ መስመር ሳጹን ምፍታሽ2" ዋጋ = "ኣማራጺ2" > 2   
</label> ዝብል ጽሑፍ ኣሎ።
<label class = "ሳጹን ምልክት ኣብ ውሽጢ መስመር" > 
  < ዓይነት ምእታው = "ሳንዱቕ ምልክት" id = "ኣብ መስመር ሳጹን ምፍታሽ3" ዋጋ = "ኣማራጺ3" > 3   
</label> ዝብል ጽሑፍ ኣሎ።

ይመርጽ

ነቲ ነባሪ ኣማራጺ ተጠቐም ወይ a ግለጽ multiple="multiple"ብዙሓት ኣማራጺታት ብሓንሳብ ንምርኣይ።

<ምረጽ>
  <ኣማራጺ> 1 </ኣማራጺ>
  <ኣማራጺ> 2 </ኣማራጺ>
  <ኣማራጺ> 3 </ኣማራጺ>
  <ኣማራጺ> 4 </ኣማራጺ>
  <ኣማራጺ> 5 </ኣማራጺ>
</select> ዝብል ምዃኑ ይፍለጥ
 
< ብዙሕ ምረጽ = "ብዙሕ" > 
  <ኣማራጺ> 1 </ኣማራጺ>
  <ኣማራጺ> 2 </ኣማራጺ>
  <ኣማራጺ> 3 </ኣማራጺ>
  <ኣማራጺ> 4 </ኣማራጺ>
  <ኣማራጺ> 5 </ኣማራጺ>
</select> ዝብል ምዃኑ ይፍለጥ

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

ኣብ ልዕሊ እቶም ዘለዉ ናይ መርበብ ሓበሬታ ቁጽጽር ብምውሳኽ፡ ቡትስትራፕ ካልኦት ጠቐምቲ ናይ ቅጥዒ ኣካላት የጠቓልል።

ቅድሚኡ ዝተቐመጡን ዝተወሰኹን እታዎታት

ቅድሚ ወይ ድሕሪ ዝኾነ ጽሑፍ መሰረት ዝገበረ ምእታው ጽሑፍ ወይ መጠወቒታት ምውሳኽ። selectኣብዚ ባእታታት ከምዘይድገፉ ኣስተውዕል ።

ነባሪ ኣማራጺታት

ንሓደ ምእታው ጽሑፍ ንምቕዳም ወይ ንምውሳኽ ንሓደ ካብ ክልተ ክፍልታት ብሓደ .add-onጠቕልሎ ።input

<div class = "ምእታው-ቅድመ-ምድላው" > 
  <span class = "ተወሰኽቲ" > @ </span> 
  <input class = "span2" id = "prependedInput" ዓይነት = "ጽሑፍ" ቦታ = "ስም ተጠቃሚ" >    
</div> ዝብል ጽሑፍ ኣሎ።
<div class = "ምእታው-ምውሳኽ" > 
  <ምእታው ክፍሊ = "span2" id = "ተወሰኸምእታው" ዓይነት = "ጽሑፍ" >   
  <span class = "ተወሰኽቲ" > .00 </span> 
</div> ዝብል ጽሑፍ ኣሎ።

ተደሚሩ።

ንኽልቲኡ ክፍልታትን ክልተ ኣጋጣሚታት .add-onናይን ተጠቐም ንሓደ እታው ቅድመ-ምድላውን ምውሳኽን።

<div class = "ምእታው-ቅድሚ ምእታው ምእታው-ምውሳኽ" > 
  <span class = "ተወሰኽቲ" > $ </span> 
  <input class = "span2" id = "ተወሰኸPrependedInput " ዓይነት = "ጽሑፍ" >   
  <span class = "ተወሰኽቲ" > .00 </span> 
</div> ዝብል ጽሑፍ ኣሎ።

ኣብ ክንዲ ጽሑፍ መጠወቒታት

ኣብ ክንዲ a <span>ምስ ጽሑፍ፡ a ተጠቒምካ .btnንሓደ ምእታው መጠወቒ (ወይ ክልተ) ከተተሓሕዞ።

<div class = "ምእታው-ምውሳኽ" > 
  <input class = "span2" id = "ተወሰኸInputButton " ዓይነት = "ጽሑፍ" >   
  <መጠወቒ ክፍሊ = "btn" ዓይነት = "መጠወቒ" > ኪድ! </መጠወቒ>  
</div> ዝብል ጽሑፍ ኣሎ።

<div class = "ምእታው-ምውሳኽ" > 
  <input class = "span2" id = "ተወሰኸ ናይ ምእታው መጠወቒታት " ዓይነት = "ጽሑፍ" >   
  <button class = "btn" ዓይነት = "መጠወቒ" > ድለ </button>  
  <መጠወቒ ክፍሊ = "btn" ዓይነት = "መጠወቒ" > ኣማራጺታት </መጠወቒ>  
</div> ዝብል ጽሑፍ ኣሎ።

መጠወቒ ንቑልቁል ዝወርድ

<div class = "ምእታው-ምውሳኽ" > 
  <input class = "span2" id = "ተወሰኸDropdownButton " ዓይነት = "ጽሑፍ" >   
  <div ክፍሊ = "btn-ጉጅለ" > 
    <button class = "btn ንቑልቁል ዝወርድ-ምቕያር" data-toggle = "ንቑልቁል ዝወርድ" >  
      ተግባር
      <span class = "ካሬት" </span> ዝብል ጽሑፍ ኣሎ። 
    </መጠወቒ>
    <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
      ...
    </ul> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

<div class = "ምእታው-ቅድመ-ምድላው" > 
  <div ክፍሊ = "btn-ጉጅለ" > 
    <button class = "btn ንቑልቁል ዝወርድ-ምቕያር" data-toggle = "ንቑልቁል ዝወርድ" >  
      ተግባር
      <span class = "ካሬት" </span> ዝብል ጽሑፍ ኣሎ። 
    </መጠወቒ>
    <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
      ...
    </ul> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
  <input class = "span2" id = "prependedDropdownButton" ዓይነት = "ጽሑፍ" >   
</div> ዝብል ጽሑፍ ኣሎ።

<div class = "ምእታው-ቅድሚ ምእታው ምእታው-ምውሳኽ" > 
  <div ክፍሊ = "btn-ጉጅለ" > 
    <button class = "btn ንቑልቁል ዝወርድ-ምቕያር" data-toggle = "ንቑልቁል ዝወርድ" >  
      ተግባር
      <span class = "ካሬት" </span> ዝብል ጽሑፍ ኣሎ። 
    </መጠወቒ>
    <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
      ...
    </ul> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
  <ምእታው ክፍሊ = "span2" id = "ተወሰኸPrependedDropdownButton " ዓይነት = "ጽሑፍ" >   
  <div ክፍሊ = "btn-ጉጅለ" > 
    <button class = "btn ንቑልቁል ዝወርድ-ምቕያር" data-toggle = "ንቑልቁል ዝወርድ" >  
      ተግባር
      <span class = "ካሬት" </span> ዝብል ጽሑፍ ኣሎ። 
    </መጠወቒ>
    <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
      ...
    </ul> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ዝተኸፋፈሉ ንቑልቁል ዝወርድ ጉጅለታት

<ቅርጺ>
  <div class = "ምእታው-ቅድመ-ምድላው" > 
    <div class = "btn-ጉጅለ" > ... </div> ዝብል ጽሑፍ ኣሎ። 
    < ዓይነት ምእታው = "ጽሑፍ" > 
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class = "ምእታው-ምውሳኽ" > 
    < ዓይነት ምእታው = "ጽሑፍ" > 
    <div class = "btn-ጉጅለ" > ... </div> ዝብል ጽሑፍ ኣሎ። 
  </div> ዝብል ጽሑፍ ኣሎ።
</form> ዝብል ጽሑፍ ኣሎ።

ቅጥዒ ምድላይ

<form class = "ቅጥዒ-ምድላይ" > 
  <div class = "ምእታው-ምውሳኽ" > 
    < ዓይነት ምእታው = "ጽሑፍ" ክፍሊ = "span2 ምድላይ-ሕቶ" >  
    <button type = "submit" class = "btn" > ምድላይ </መጠወቒ>  
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class = "ምእታው-ቅድመ-ምድላው" > 
    <button type = "submit" class = "btn" > ምድላይ </መጠወቒ>  
    < ዓይነት ምእታው = "ጽሑፍ" ክፍሊ = "span2 ምድላይ-ሕቶ" >  
  </div> ዝብል ጽሑፍ ኣሎ።
</form> ዝብል ጽሑፍ ኣሎ።

ምቁጽጻር ዓቐን ምግባር

ኣንጻራዊ ዓቐን ክፍልታት ተጠቐም ከም .input-largeወይ ድማ እታዎታትካ ምስ ዓቐናት ዓምዲ ሽቦ ክፍልታት ብምጥቃም ምትእስሳር .span*።

ደረጃ ብሎክ እታዎታት

<input>ዝኾነ ወይ <textarea>ባእታ ከም ብሎክ ደረጃ ባእታ ክመላለስ ግበሮ ።

<input class = "ምእታው-ብሎክ-ደረጃ" ዓይነት = "ጽሑፍ" ቦታ = " .ምእታው -ብሎክ-ደረጃ" >

ኣንጻራዊ ዓቐን ምግባር

<ምእታው ክፍሊ = "ምእታው-ሚኒ" ዓይነት = "ጽሑፍ" ቦታ = " .ምእታው -ሚኒ" >   
<input class = "እታው-ንእሽቶ" ዓይነት = "ጽሑፍ" ቦታ = " .እታው -ንእሽቶ" >   
<ምእታው ክፍሊ = "ምእታው-ማእከላይ" ዓይነት = "ጽሑፍ" ቦታ = " .ምእታው -ማእከላይ" >   
<input class = "input-large" ዓይነት = "ጽሑፍ" ቦታ = ".input-large" >   
<input class = "input-xlarge" ዓይነት = "ጽሑፍ" ቦታ = ".input-xlarge" >   
<input class = "input-xxlarge" ዓይነት = "ጽሑፍ" ቦታ = ".input-xxlarge" >

ርእሲ ንላዕሊ!ኣብ ዝመጽእ ስሪት፡ ኣጠቓቕማ ናይዞም ኣንጻራዊ ምእታው ክፍልታት ምስ ዓቐን መጠወቒታትና ንኽሰማማዕ ክንቅይሮ ኢና። ንኣብነት .input-largeናይ ሓደ ምእታው ፓዲንግን font-sizeን ክውስኽ እዩ።

ሽቦ ምዕባይ

ንሓደ ዓይነት ዓቐናት ናይ ሽቦ ዓምድታት ዝሰማምዑ እታዎታት .span1to ተጠቐም ።.span12

<input class = "span1" ዓይነት = "ጽሑፍ" ቦታ = ".span1" >   
<ምእታው ክፍሊ = "span2" ዓይነት = "ጽሑፍ" ቦታ = ".span2" >   
<ምእታው ክፍሊ = "span3" ዓይነት = "ጽሑፍ" ቦታ = ".span3" >   
< ክላስ ምረጽ = "span1" > 
  ...
</select> ዝብል ምዃኑ ይፍለጥ
< ክላስ ምረጽ = "span2" > 
  ...
</select> ዝብል ምዃኑ ይፍለጥ
< ክላስ ምረጽ = "span3" > 
  ...
</select> ዝብል ምዃኑ ይፍለጥ

ንብዙሓት ሽቦ እታዎታት ኣብ ሓደ መስመር ፡ ንግቡእ ርሕቀት ነቲ ናይ መቐየሪ ክፍሊ ተጠቐም.controls-row ። ጻዕዳ-ቦታ ንምፍራስ ነቶም እታዎታት የንሳፍፍ፣ ግቡእ ወሰን የቐምጥ፣ ነቲ ተንሳፋፊ ድማ የጽርዮ።

<div class = "ዝቆጻጸር" > 
  <ምእታው ክፍሊ = "span5" ዓይነት = "ጽሑፍ" ቦታ = ".span5" >   
</div> ዝብል ጽሑፍ ኣሎ።
<div class = "መቆጻጸሪታት-መስመር ይቆጻጸር" > 
  <ምእታው ክፍሊ = "span4" ዓይነት = "ጽሑፍ" ቦታ = ".span4" >   
  <input class = "span1" ዓይነት = "ጽሑፍ" ቦታ = ".span1" >   
</div> ዝብል ጽሑፍ ኣሎ።
...

ዘይእረሙ እታዎታት

ዳታ ብጭቡጥ ቅጥዒ ምልክት ከይተጠቐምካ ክእረም ዘይክእል ቅጥዒ ምቕራብ።

<span class = "input-xlarge uneditable-input" > ገለ ዋጋ ኣብዚ </span>

ተግባራት ምፍጣር

ንሓደ ቅጥዒ ብጉጅለ ተግባራት (መጠወቒታት) ምዝዛም። ኣብ ውሽጢ a ምስ ዝቕመጡ .form-actions፡ እቶም መጠወቒታት ብኣውቶማቲክ ጠውዮም ምስቲ ናይ ቅጥዒ መቆጻጸሪታት ክስለፉ እዮም።

<div class = "ቅርጺ-ተግባራት" > 
  <button type = "submit" class = "btn btn-primary" > ለውጢ ምዕቃብ </button>  
  < ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn" > ስረዝ </መጠወቒ>  
</div> ዝብል ጽሑፍ ኣሎ።

ናይ ሓገዝ ጽሑፍ

ኣብ ዙርያ ቁጽጽር ቅጥዒ ንዝረአ ናይ ሓገዝ ጽሑፍ ናይ ውሽጢ መስመርን ብሎክን ደረጃ ደገፍ።

ኣብ መስመር ሓገዝ

<input type = "text" ><span class = "ሓገዝ-ኣብ መስመር" > ኣብ መስመር ሓገዝ ጽሑፍ </span>

ሓገዝ ምዕጋት።

<input type = "text" ><span class = "help-block" > ናብ ሓድሽ መስመር ዝሰብርን ኪኖ ሓደ መስመር ክዝርጋሕ ዝኽእልን ዝነውሐ ብሎክ ናይ ሓገዝ ጽሑፍ። </span> ዝብል ጽሑፍ ኣሎ።

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

ኣብ ቁጽጽር ቅጥዕን ስያመታትን መሰረታዊ ናይ ግብረ መልሲ ኩነታት ዘለዎም ተጠቀምቲ ወይ በጻሕቲ ግብረ መልሲ ምሃብ።

ትኹረት ምእታው

outlineኣብ ገለ ቅጥዒ ቁጽጽር ዝርከቡ ነባሪ ቅዲታት ነወግዶም እሞ box-shadowኣብ ክንድኡ ን :focus.

<input class = "input-xlarge" id = "focusedInput" type = "ጽሑፍ" ዋጋ = "እዚ ትኹረት ዝገበረ እዩ..." >

ዘይሕጋዊ እታዎታት

ቅዲ እታዎታት ብመንገዲ ነባሪ ናይ መርበብ ሓበሬታ ተግባር ምስ :invalid. a ግለጽ ፣ እቲ ዓውዲ ኣማራጺ እንተዘይኮይኑ typeነቲ ባህሪ ወስኸሉ ፣ ከምኡውን (ኣድላዪ እንተኾይኑ) a ግለጽ ።requiredpattern

እዚ ኣብ ስሪት ኢንተርነት ኤክስፕሎረር 7-9 ብሰንኪ ሕጽረት ደገፍ ንCSS pseudo selectors ኣይርከብን እዩ።

<input class = "span3" ዓይነት = "ኢመይል" የድሊ >

ስንኩላን እታዎታት

disabledተጠቃሚ ምእታው ንምክልኻልን ቁሩብ ዝተፈለየ መልክዕ ንምብጋስን ኣብ ሓደ እታው ዘሎ ባህሪ ወስኽ ።

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "ኣብዚ ምእታው ተሰናኺሉ..." ተሰናኺሉ >

ናይ ምጽዳቕ ኩነታት

ቡትስትራፕ ንጌጋ፣ መጠንቀቕታ፣ ሓበሬታን መልእኽትታት ዓወትን ናይ ምጽዳቕ ቅዲታት የጠቓልል። ንኽትጥቀመሉ፡ ነቲ ዝግባእ ክፍሊ ኣብቲ ከባቢኻ ወስኸሉ .control-group.

<div class = "መጠንቀቕታ ቁጽጽር-ጉጅለ" > 
  <label class = "control-label" for = "inputWarning" > ምእታው ምስ መጠንቀቕታ </label>  
  <div class = "ዝቆጻጸር" > 
    < ዓይነት ምእታው = "ጽሑፍ" id = "መጠንቀቕታ ምእታው" >  
    <span class = "help-inline" > ገለ ነገር ተጋግዩ ክኸውን ይኽእል </span> 
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።
 
<div class = "ናይ ቁጽጽር-ጉጅለ ጌጋ" > 
  <label class = "control-label" for = "inputError" > ምእታው ምስ ጌጋ </label>  
  <div class = "ዝቆጻጸር" > 
    < ዓይነት ምእታው = "ጽሑፍ" id = "ጌጋ ምእታው" >  
    <span class = "help-inline" > በጃኻ ነቲ ጌጋ ኣርምዎ </span> 
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።
 
<div class = "ናይ ቁጽጽር-ጉጅለ ሓበሬታ" > 
  <label class = "control-label" for = "inputInfo" > ምእታው ምስ ሓበሬታ </label>  
  <div class = "ዝቆጻጸር" > 
    < ዓይነት ምእታው = "ጽሑፍ" id = "ሓበሬታ ምእታው" >  
    <span class = "help-inline" > ስም ተጠቃሚ ድሮ ተወሰደ </span> 
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።
 
<div class = "ዓወት ቁጽጽር-ጉጅለ" > 
  <label class = "control-label" for = "inputSuccess" > ብዓወት ምእታው </label>  
  <div class = "ዝቆጻጸር" > 
    < ዓይነት ምእታው = "ጽሑፍ" id = "ዓወት ምእታው" >  
    <span class = "ሓገዝ-ኣብ መስመር" > ዉሁ! </span> ዝብል ጽሑፍ ኣሎ። 
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ነባሪ መጠወቒታት

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

መጠወቒ	class="" ዝብል ጽሑፍ ኣሎ።	መግለፂ
	`btn`	ስታንዳርድ ግራጭ መጠወቒ ምስ ምዕባለ
	`btn btn-primary`	ተወሳኺ ስእላዊ ክብደት ይህብን ኣብ ስብስብ መጠወቒታት ነቲ ቀዳማይ ተግባር የለልዮን
	`btn btn-info`	ከም ኣማራጺ ናይቶም ነባሪ ቅዲታት ይጥቀም
	`btn btn-success`	ዕዉት ወይ ኣወንታዊ ስጉምቲ ከም ዝወሰደ የመልክት።
	`btn btn-warning`	ምስዚ ስጉምቲ ጥንቃቐ ክግበር ከምዘለዎ የመልክት።
	`btn btn-danger`	ሓደገኛ ወይ ኣሉታዊ ክኸውን ዝኽእል ስጉምቲ የመልክት።
	`btn btn-inverse`	ጸሊም ግራጭ መጠወቒ ተለዋዋጢ፣ ምስ ትርጉማዊ ተግባር ወይ ኣጠቓቕማ ኣይተኣስረን።
	`btn btn-link`	ንሓደ መጠወቒ ባህሪ መጠወቒ እናዓቀብካ መላግቦ ከም ዝመስል ብምግባር ኣጉልቦ

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

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

ዓቐናት መጠወቒታት

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

<p> ዝብል ጽሑፍ ኣሎ።
  <button class = "btn btn-ዓቢ btn-ቀዳማይ" ዓይነት = "መጠወቒ" > ዓቢ መጠወቒ </button>  
  <button class = "btn btn-large" ዓይነት = "መጠወቒ" > ዓቢ መጠወቒ </button>  
</p> ዝብል ጽሑፍ ኣሎ።
<p> ዝብል ጽሑፍ ኣሎ።
  <button class = "btn btn-primary" ዓይነት = "መጠወቒ" > ነባሪ መጠወቒ </button>  
  <button class = "btn" type = "button" > ነባሪ መጠወቒ </button>  
</p> ዝብል ጽሑፍ ኣሎ።
<p> ዝብል ጽሑፍ ኣሎ።
  <button class = "btn btn-ንእሽቶ btn-ቀዳማይ" ዓይነት = "መጠወቒ" > ንእሽቶ መጠወቒ </button>  
  <button class = "btn btn-small" ዓይነት = "መጠወቒ" > ንእሽቶ መጠወቒ </button>  
</p> ዝብል ጽሑፍ ኣሎ።
<p> ዝብል ጽሑፍ ኣሎ።
  <button class = "btn btn-mini btn-primary" ዓይነት = "መጠወቒ" > ንእሽቶ መጠወቒ </button>  
  <መጠወቒ ክፍሊ = "btn btn-mini" ዓይነት = "መጠወቒ" > ንእሽቶ መጠወቒ </መጠወቒ>  
</p> ዝብል ጽሑፍ ኣሎ።

ብሎክ ደረጃ መጠወቒታት ፍጠር-እቶም ምሉእ ስፍሓት ናይ ሓደ ወላዲ ዝሽፍኑ- ብምውሳኽ .btn-block.

<button class = "btn btn-large btn-block btn-primary" ዓይነት = "መጠወቒ" > ደረጃ ምዕጋት መጠወቒ </button>  
<button class = "btn btn-large btn-block" ዓይነት = "መጠወቒ" > ደረጃ ምዕጋት መጠወቒ </button>

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

መጠወቒታት 50% ንድሕሪት ብምድህሳስ ዘይጥውቑ ከም ዝመስሉ ግበሮም።

መልህቕ ባእታ

.disabledነቲ ክፍሊ ናብ <a>መጠወቒታት ምውሳኽ ።

መባእታዊ ሊንክ ሊንክ

<a href = "#" class = "btn btn-ዓቢ btn-መባእታዊ ተሰናኺሉ" > ቀዳማይ መላግቦ </a>  
<a href = "#" class = "btn btn-ዓቢ ተሰናኺሉ" > መላግቦ </a>

ርእሲ ንላዕሊ!.disabledኣብዚ ከም ዩቲሊቲ ክላስ ንጥቀመሉ ፣ ምስቲ ናይ ሓባር .activeክፍሊ ዝመሳሰል፣ ስለዚ ዝኾነ ቅድመ-ጥብቆ ኣየድልን። ከምኡ እውን እዚ ክፍሊ ንስነ-ፅባቐ ጥራሕ እዩ፤ ኣብዚ ንዘለዉ መላግቦታት ንምዕጻው ብሕታዊ ጃቫስክሪፕት ክትጥቀም ኣለካ።

ናይ መጠወቒ ባእታ

disabledነቲ ባህሪ ኣብ <button>መጠወቒታት ምውሳኽ ።

<button type = "button" class = "btn btn-large btn-primary ተሰናኺሉ" disabled = "ተሰናኺሉ" > ቀዳማይ መጠወቒ </button>   
<መጠወቒ ዓይነት = "መጠወቒ" ክፍሊ = "btn btn-large" ተሰናኺሉ > መጠወቒ </መጠወቒ>

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

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

<a class = "btn" href = "" > መላግቦ </a>  
<መጠወቒ ክፍሊ = "btn" ዓይነት = "ኣቕርብ" > መጠወቒ </መጠወቒ>  
<ምእታው ክፍሊ = "btn" ዓይነት = "መጠወቒ" ዋጋ = "ምእታው" >   
<input class = "btn" ዓይነት = "ኣቕርብ" ዋጋ = "ኣቕርብ" >

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

<img>ኣብ ዝኾነ ፕሮጀክት ብቐሊሉ ምስልታት ቅዲ ንምግባር ክፍልታት ናብ ሓደ ባእታ ምውሳኽ ።

<img src = "..." ክፍሊ = "img-ዝተኸበበ" >  
<img src = "..." ክፍሊ = "img-ዓንኬል" >  
<img src = "..." ክፍሊ = "img-ፖላሮይድ" >

ርእሲ ንላዕሊ! .img-roundedከምኡ’ውን ብሰንኪ ሕጽረት ደገፍ .img-circleኣብ IE7-8 ኣይሰርሑን እዮም ።border-radius

ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት

140 ምልክታት ብመልክዕ ስፕራይት፣ ብጸሊም ግራጭ (ነባሪ)ን ጻዕዳን ይርከቡ፣ ብ Glyphicons ዝተዳለዉ ።

ምልክት-ብርጭቆ
ምልክት-ሙዚቃ
ምልክት-ምድላይ
ምልክት-ፖስታ
ምልክት-ልቢ
ምልክት-ኮኾብ
ምልክት-ኮኾብ-ባዶ
ምልክት-ተጠቃሚ
ምልክት-ፊልም
ምልክት-መበል-ዓቢ
ምልክት-መ
ምልክት-ዝ-ዝርዝር
ምልክት-ok
ምልክት-ምእላይ
ምልክት-ምዕባይ
ምልክት-ምዕባይ-ምውራድ
ምልክት-ምጥፋእ ዝብል እዩ።
ምልክት-ምልክት
ምልክት-ኮግ
ምልክት-ጓሓፍ
ምልክት-ገዛ
ምልክት-ፋይል
ምልክት-ግዜ
ምልክት-መንገዲ
ምልክት-ምውራድ-alt
ምልክት-ምውራድ
ምልክት-ምጽዓን።
ምልክት-ኢንቦክስ
ምልክት-ጸወታ-ዓንኬል
ምልክት-ምድጋም
ምልክት-ምሕዳስ ምግባር
ምልክት-ዝርዝር-alt
ምልክት-መዕጸዊ
ምልክት-ባንዴራ
ምልክት-እዝኒ ስልኪ
ምልክት-ድምጺ-ምጥፋእ እዩ።
ምልክት-ድምጺ-ንታሕቲ
ምልክት-ድምጺ-ምዕባይ
ምልክት-qrcode ዝብል ጽሑፍ ኣሎ።
ምልክት-ባርኮድ
ምልክት-ታግ
ምልክት-ታግታት
ምልክት-መጽሓፍ
ምልክት-ዕልባ
ምልክት-ሕትመት
ምልክት-ካሜራ
ምልክት-ቅርጺ ጽሑፍ
ምልክት-ድሙቕ
ምልክት-ሰያፍ
ምልክት-ጽሑፍ-ቁመት
ምልክት-ጽሑፍ-ስፍሓት
ምልክት-ኣሰላልፋ-ጸጋም
ምልክት-ኣሰላልፋ-ማእከል
ምልክት-ኣሰላልፋ-የማን
ምልክት-ኣሰላልፋ-ምምኽናይ
ምልክት-ዝርዝር
ምልክት-ኢንደንት-ጸጋም
ምልክት-ኢንደንት-የማን
ምልክት-ገጽ-ግዜ-ቪድዮ
ምልክት-ስእሊ
ምልክት-እርሳስ
ምልክት-ካርታ-ምልክት
ምልክት-ምትዕርራይ
ምልክት-ቅብኣት
ምልክት-ኣርትዖት።
ምልክት-ምክፋል ምግባር
ምልክት-ምፍታሽ
ምልክት-ምንቅስቓስ
ምልክት-ስጉምቲ-ንድሕሪት
ምልክት-ቅልጡፍ-ድሕሪት
ምልክት-ድሕሪት
ምልክት-ጸወታ
ምልክት-ዕረፍቲ
ምልክት-ደው ምባል
ምልክት-ንቕድሚት።
ምልክት-ቅልጡፍ-ንቕድሚት።
ምልክት-ስጉምቲ-ንቕድሚት።
ምልክት-ምውጻእ እዩ።
ምልክት-ሸቭሮን-ጸጋም
ምልክት-ሸቭሮን-የማን
ምልክት-ተወሳኺ ምልክት
ምልክት-ምጉዳል-ምልክት
ምልክት-ምእላይ-ምልክት
ምልክት-ok-ምልክት
ምልክት-ሕቶ-ምልክት
ምልክት-ሓበሬታ-ምልክት
ምልክት-ስክሪን ስእሊ
ምልክት-ምእላይ-ዓንኬል
ምልክት-ok-ዓንኬል
ምልክት-እገዳ-ዓንኬል
ምልክት-ፍላጻ-ጸጋም
ምልክት-ፍላጻ-የማን
ምልክት-ፍላጻ-ንላዕሊ
ምልክት-ፍላጻ-ንታሕቲ
ምልክት-ምክፋል-ኣልት
ምልክት-ዓቐን ምቕያር-ምሉእ እዩ።
ምልክት-ዓቐን ምቕያር-ንእሽቶ
ምልክት-ተወሳኺ
ምልክት-ምጉዳል
ምልክት-ኮኾብ
ምልክት-ኣድናቖት-ምልክት
ምልክት-ህያብ
ምልክት-ቆጽሊ
ምልክት-ሓዊ
ምልክት-ዓይኒ-ክፉት እዩ።
ምልክት-ዓይኒ-ምዕጻው
ምልክት-መጠንቀቕታ-ምልክት
ምልክት-ነፋሪት።
ምልክት-ዓውደ-ኣዋርሕ
ምልክት-ብሃንደበት
ምልክት-ርእይቶ
ምልክት-ማግኔት።
ምልክት-ሸቭሮን-ኣፕ
ምልክት-ሸቭሮን-ንታሕቲ
ምልክት-ሪትዊት ምግባር
ምልክት-ዕዳጋ-ዓረብያ
ምልክት-ኣቃፊራ-ዕጾ
ምልክት-ኣቃፊራ-ክፉት እዩ።
ምልክት-ዓቐን ምቕያር-ቀጥታዊ
ምልክት-ዓቐን ምቕያር-ኣግማድ
ምልክት-hdd ዝብል ጽሑፍ ኣሎ።
ምልክት-ቡልሆርን ዝብል እዩ።
ምልክት-ደወል
ምልክት-ምስክር ወረቐት
ምልክት-ኣጻብዕቲ ኢድ ንላዕሊ
ምልክት-ኣጻብዕቲ ኢድ-ንታሕቲ
ምልክት-ኢድ-የማን
ምልክት-ኢድ-ጸጋም
ምልክት-ኢድ-ንላዕሊ
ምልክት-ኢድ-ንታሕቲ
ምልክት-ዓንኬል-ፍላጻ-የማን
ምልክት-ዓንኬል-ፍላጻ-ጸጋም
ምልክት-ዓንኬል-ፍላጻ-ንላዕሊ
ምልክት-ዓንኬል-ፍላጻ-ንታሕቲ
ምልክት-ግሎብ
ምልክት-መፍትሕ
ምልክት-ዕማማት
ምልክት-መጽረዪ
ምልክት-ቦርሳ
ምልክት-ምሉእ ስክሪን

ግሊፊኮንስ ምምስሳል (Glyphicons)

ግሊፊኮንስ ሃፍሊንግስ ንቡር ብነጻ ኣይርከብን እዩ፡ እንተኾነ ግን ኣብ መንጎ ቡትስትራፕን ፈጠርቲ ግሊፊኮንስን ዝተገብረ ምድላው ግን ከም ኣዳለውቲ ንዓኻ ብዘይ ዝኾነ ወጻኢታት ከም ዝከኣል ገይሩልካ ኣሎ። ከም ምስጋና ድማ፡ ኣብ ዝኾነ እዋን ግብራዊ ዝኾነሉ እዋን ፡ ናብ ግሊፊኮንስ ዝምለስ ኣማራጺ ሊንክ ከተእትዉ ንሓትት።

ከመይ ጌርና ንጥቀመሉ

ኩሎም ምልክታት <i>ፍሉይ ክፍሊ ዘለዎ መለለዪ የድልዮም፣ ቅድመ-ጥብቆ ብ icon-. ንኽትጥቀመሉ፡ ነዚ ዝስዕብ ኮድ ዳርጋ ኣብ ዝኾነ ቦታ ኣቐምጦ፤

<i class = "ምልክት-ምድላይ" </i>

ንዝተገልበጡ (ጻዕዳ) ምልክታት ዝኸውን ቅዲታት እውን ኣለዉ፣ ምስ ሓደ ተወሳኺ ክፍሊ ድሉዋት ዝኾኑ። ብፍላይ ነዚ ክፍሊ ኣብ hoverን active statesን ን navን dropdownን ሊንክታት ከነተግብሮ ኢና።

<i class = "ምልክት-ምድላይ ምልክት-ጻዕዳ" ></i>

ርእሲ ንላዕሊ!<i>ኣብ ጎኒ ሕብረ ቃላት ጽሑፍ ክትጥቀም ከለኻ፡ ከምቲ ኣብ መጠወቒታት ወይ nav መላግቦታት ፡ ንግቡእ ርሕቀት ድሕሪ እቲ መለለዪ ቦታ ምግዳፍካ ኣረጋግጽ ።

ምልክት ኣብነታት

ኣብ መጠወቒታት፣ ንመሳርሒታት ዝኸውን ጉጅለታት መጠወቒታት፣ ምድህሳስ፣ ወይ ቅድሚኡ ዝተሰነየ ቅጥዒ ምእታው ተጠቐመሎም።

መጠወቒታት

ኣብ ሓደ ናይ መጠወቒ መሳርሒ ባር ናይ መጠወቒ ጉጅለ

<div class = "btn-መሳርሒ ባር" > 
  <div ክፍሊ = "btn-ጉጅለ" > 
    <a class = "btn" href = "#" ><i class = "ምልክት-ኣሰላልፋ-ጸጋም" ></i></a>   
    <a class = "btn" href = "#" ><i class = "ምልክት-ኣሰላልፋ-ማእከል" ></i></a>   
    <a class = "btn" href = "#" ><i class = "ምልክት-ኣሰላልፋ-የማን" ></i></a>   
    <a class = "btn" href = "#" ><i class = "ምልክት-ኣሰላልፋ-ምምኽናይ" ></i></a>   
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ኣብ ሓደ ናይ መጠወቒ ጉጅለ ንቑልቁል ዝወርድ

ተጠቃሚ

<div ክፍሊ = "btn-ጉጅለ" > 
  <a class = "btn btn-primary" href = "#" ><i class = "ምልክት-ተጠቃሚ ምልክት-ጻዕዳ" ></i> ተጠቃሚ </a>   
  <a class = "btn btn-መባእታዊ ንቑልቁል-ምቕያር" data-toggle = "ቁልቁል ዝወርድ" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
    <li><a href = "#" ><i class = "ምልክት-እርሳስ" </i> ኣርትዕ </a></li>  
    <li><a href = "#" ><i class = "ምልክት-ጓሓፍ" </i> ምድምሳስ </a></li>  
    <li><a href = "#" ><i class = "ዓንኬል-ምእጋድ-ምልክት" ></i> እገዳ </a></li>  
    <li class = "መከፋፈልቲ" </li> 
    <li><a href = "#" ><i class = "i" </i> ኣድሚን </a></li> ምግባር  
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ዓቐናት መጠወቒታት

ኮኾብ ኮኾብ ኮኾብ

<a class = "btn btn-large" href = "#" ><i class = "ምልክት-ኮኾብ" ></i> ኮኾብ </a>   
<a class = "btn btn-small" href = "#" ><i class = "ምልክት-ኮኾብ" ></i> ኮኾብ </a>   
<a class = "btn btn-mini" href = "#" ><i class = "ምልክት-ኮኾብ" ></i> ኮኾብ </a>

ናቪጌሽን

<ul class = "nav nav-ዝርዝር" > 
  <li class = "ንጡፍ" ><a href = "#" ><i class = "ምልክት-ገዛ ምልክት-ጻዕዳ" </i> ገዛ </a></li>   
  <li><a href = "#" ><i class = "መጽሓፍ-ምልክት" </i> ቤተ-መጻሕፍቲ </a></li>  
  <li><a href = "#" ><i class = "ምልክት-እርሳስ" </i> መተግበሪታት </a></li>  
  <li><a href = "#" ><i ክፍሊ = "ኣነ" </i> ዝተፈላለየ </a></li>  
</ul> ዝብል ጽሑፍ ኣሎ።

ናይ ቅጥዒ ዓውድታት

<div class = "ቁጽጽር-ጉጅለ" > 
  <label class = "control-label" for = "inputIcon" > ኣድራሻ ኢመይል </label>  
  <div class = "ዝቆጻጸር" > 
    <div class = "ምእታው-ቅድመ-ምድላው" > 
      <span class = "ተወሰኽቲ" ><i class = "ምልክት-ፖስታ" ></i></span>  
      <ምእታው ክፍሊ = "span2" id = "ምእታው Icon" ዓይነት = "ጽሑፍ" >   
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ታይፖግራፊ

ኣርእስታት

h1. ርእሲ 1

h2. ርእሲ 2

h3. ርእሲ 3

h4. ርእሲ 4

h5. ርእሲ 5

h6. ርእሲ 6

ኣካል ቅዳሕ

መሪሕነት ኣካል ቅዳሕ

ብውሑድ ዝተሃንጸ

ኣትኩሮ ምሃብ

<small>

ድሙቅ

ሰያፍ ፊደላት

ናይ ኣሰላልፋ ክፍልታት

ናይ ምጉላሕ ክፍልታት

ኣሕጽሮተ ቃላት

<abbr>

<abbr class="initialism">

ኣድራሻታት

<address>

ብሎክኮትስ

ነባሪ ብሎክኮት።

ናይ ብሎክኮት ኣማራጺታት

ምንጪ ምጽዋዕ

ተለዋዋጢ ምልክታት

ዝርዝራት

ዘይተኣዘዘ

ተኣዚዙ

ቅዲ ዘይብሉ

ኣብ መስመር

መግለፂ

ልኡል መግለጺ

ኮድ

ኣብ መስመር

መሰረታዊ ብሎክ

ሰደቓታት

ነባሪ ቅዲታት

ኣማራጺ ክፍልታት

.table-striped

.table-bordered

.table-hover

.table-condensed

ኣማራጺ መስርዕ ክፍልታት

ዝድገፍ ናይ ሰደቓ ምልክት ምግባር

ቅጥዕታት

ነባሪ ቅዲታት

ኣማራጺ ኣቀማምጣታት

ቅጥዒ ምድላይ

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

ልኡል ቅርጺ

ዝድገፍ ናይ ቅጥዒ ቁጽጽር

እታዎታት

Textarea ዝብል ጽሑፍ ኣሎ።

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

ነባሪ (ተደራሪቡ) .

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

ይመርጽ

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

ቅድሚኡ ዝተቐመጡን ዝተወሰኹን እታዎታት

ነባሪ ኣማራጺታት

ተደሚሩ።

ኣብ ክንዲ ጽሑፍ መጠወቒታት

መጠወቒ ንቑልቁል ዝወርድ

ዝተኸፋፈሉ ንቑልቁል ዝወርድ ጉጅለታት

ቅጥዒ ምድላይ

ምቁጽጻር ዓቐን ምግባር

ደረጃ ብሎክ እታዎታት

ኣንጻራዊ ዓቐን ምግባር

ሽቦ ምዕባይ

ዘይእረሙ እታዎታት

ተግባራት ምፍጣር

ናይ ሓገዝ ጽሑፍ

ኣብ መስመር ሓገዝ

ሓገዝ ምዕጋት።

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

ትኹረት ምእታው

ዘይሕጋዊ እታዎታት

ስንኩላን እታዎታት

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`