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

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

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

ኣብነት ኣካል ጽሑፍ

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

መሪሕነት ኣካል ቅዳሕ

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

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

ምጉላሕ ብምጥቃም

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

መተሓሳሰቢ<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. ምሉእ ቁጽሪ posuere erat a ante venenatis. </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.

ማሌሱዋዳ ፖርታ

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

ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ

ፉስ ዳፒቡስ፡ ቴሉስ ኣክ ከርሱስ ኮሞዶ፡ ቶርቶር ማውሪስ ኮንዲመንቱም ኒብህ፡ ኡት ፈርመንቱም ማሳ ጁስቶ ኮፍ ኣሜት ሪሱስ።

---

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

ኣብ መስመር

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

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

መሰረታዊ ብሎክ

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

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

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

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

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

ጉግል ፕሪቲፋይ

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

<p> ኣብዚ ንኣብነት ጽሑፍ... </p>

<pre class = "ጽብቕቲ ሕትመት።" 
     መስመር መስመር" >
  <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, ከምኡ ውን ትጽበዮ ምረጽ ቅዲታት የጠቓልል። ግን ብርክት ዝበሉ ብሕታዊ ባእታታት ከም ዝተወሰኹን ቅድሚኡ ዝተሰቕሉን እታዎታትን ንዝርዝር ሳጹናት ምልክት ዝድግፍን እውን ሒዙ ይመጽእ እዩ።

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

መሰረታዊ ቅርጺ

ብልሕን ቀሊልን ነባሪ ብዘይ ተወሳኺ ምልክት ምግባር።

ስም ምልክት

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

ርኣዩኒ ኣእትው

<ቅጥዒ ክፍሊ = "ጽቡቕ" > 
  <label> ስም ስያመ </label>
  <input type = "text" class = "span3" placeholder = " ገለ ጽሓፍ..." >   
  <span class = "help-block" > ኣብዚ ኣብነት ናይ ብሎክ-ደረጃ ሓገዝ ጽሑፍ። </span> ዝብል ጽሑፍ ኣሎ። 
  <label class = "ሳጹን ምልክት" > 
    <input type = "checkbox" > ንዓይ ርኣዩኒ። 
  </label> ዝብል ጽሑፍ ኣሎ።
  <button type = "submit" class = "btn" > ኣቕርብ </መጠወቒ>  
</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> ዝብል ጽሑፍ ኣሎ።

ኣብ የማን ኩሎም እቶም እንድግፎም ነባሪ ናይ ቅጥዒ ቁጽጽር ተገሊጾም ኣለዉ። ዝርዝር ጥይት ኣብዚ ኣሎ፤

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

ጽሑፍ ምእታው

ብዘይካ ነጻ ቅርጺ ጽሑፍ፡ ዝኾነ 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 = "ምእታው01" > ምእታው ጽሑፍ </label>  
      <div class = "ዝቆጻጸር" > 
        < ዓይነት ምእታው = "ጽሑፍ" ክፍሊ = "ምእታው-xlarge" id = "ምእታው 01" >   
        <p class = "help-block" > ዝድግፍ ናይ ሓገዝ ጽሑፍ </p> 
      </div> ዝብል ጽሑፍ ኣሎ።
    </div> ዝብል ጽሑፍ ኣሎ።
  </fieldset> ዝብል ጽሑፍ ኣሎ።
</form> ዝብል ጽሑፍ ኣሎ።

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

---

ቅጥዒ ምጽዳቕ

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

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

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

ዘይእረም እታዎት።

ገለ ኣብዚ ዋጋ ይህቡ

ስንኩል ምእታው

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

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

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

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

ምእታው ምስ ጌጋ

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

እታዎት ምስ ዓወት

ዉውሁው!

ብዓወት ምረጹ

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

ለውጢ ምዕቃብ ሰርዝ

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

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

---

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

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

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

---

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

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

---

ናይ ሓገዝ ጽሑፍ ቅጥዒ

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

ዓቐናት ሽቦ ቅጥዒ

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

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

ተለዋዋጢ ዓቐናት

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

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

@

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

ተወሰኸ ጽሑፍ

.00 ዝብል እዩ።

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

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

$ .00 ዝብል እዩ።

ብመጠወቒ ምውሳኽ

ኪድ!

ክልተ መጠወቒ ዘለዎ ምትእስሳር

ምድላይ ኣማራጺታት

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

1. 2. 3.

ሳጹናት ምልክት

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

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

ናይ ሬድዮ መጠወቒታት

ሓደ ኣማራጺ እዚን እቲን እዩ-ንምንታይ ብሉጽ ምዃኑ ርግጸኛ ኩን። ኣማራጺ ክልተ ካልእ ክኸውን ይኽእል እዩ ምምራጽ ድማ ኣማራጺ ሓደ ካብ ምምራጽ ይእለ

ለውጢ ምዕቃብ ሰርዝ

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

ከም ውዕል፡ መጠወቒታት ንተግባራት ጥራይ ክውዕሉ እንከለዉ፡ ሃይፐርሊንክታት ድማ ንነገራት ክውዕሉ እዮም። ንኣብነት "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-ዓንኬል
• ምልክት-እገዳ-ዓንኬል
• ምልክት-ፍላጻ-ጸጋም
• ምልክት-ፍላጻ-የማን
• ምልክት-ፍላጻ-ንላዕሊ
• ምልክት-ፍላጻ-ንታሕቲ
• ምልክት-ምክፋል-ኣልት
• ምልክት-ዓቐን ምቕያር-ምሉእ እዩ።
• ምልክት-ዓቐን ምቕያር-ንእሽቶ
• ምልክት-ተወሳኺ
• ምልክት-ምጉዳል
• ምልክት-ኮኾብ
• ምልክት-ኣድናቖት-ምልክት
• ምልክት-ህያብ
• ምልክት-ቆጽሊ
• ምልክት-ሓዊ
• ምልክት-ዓይኒ-ክፉት እዩ።

• ምልክት-ዓይኒ-ምዕጻው
• ምልክት-መጠንቀቕታ-ምልክት
• ምልክት-ነፋሪት።
• ምልክት-ዓውደ-ኣዋርሕ
• ምልክት-ብሃንደበት
• ምልክት-ርእይቶ
• ምልክት-ማግኔት።
• ምልክት-ሸቭሮን-ኣፕ
• ምልክት-ሸቭሮን-ንታሕቲ
• ምልክት-ሪትዊት ምግባር
• ምልክት-ዕዳጋ-ዓረብያ
• ምልክት-ኣቃፊራ-ዕጾ
• ምልክት-ኣቃፊራ-ክፉት እዩ።
• ምልክት-ዓቐን ምቕያር-ቀጥታዊ
• ምልክት-ዓቐን ምቕያር-ኣግማድ
• ምልክት-hdd ዝብል ጽሑፍ ኣሎ።
• ምልክት-ቡልሆርን ዝብል እዩ።
• ምልክት-ደወል
• ምልክት-ምስክር ወረቐት
• ምልክት-ኣጻብዕቲ ኢድ ንላዕሊ
• ምልክት-ኣጻብዕቲ ኢድ-ንታሕቲ
• ምልክት-ኢድ-የማን
• ምልክት-ኢድ-ጸጋም
• ምልክት-ኢድ-ንላዕሊ
• ምልክት-ኢድ-ንታሕቲ
• ምልክት-ዓንኬል-ፍላጻ-የማን
• ምልክት-ዓንኬል-ፍላጻ-ጸጋም
• ምልክት-ዓንኬል-ፍላጻ-ንላዕሊ
• ምልክት-ዓንኬል-ፍላጻ-ንታሕቲ
• ምልክት-ግሎብ
• ምልክት-መፍትሕ
• ምልክት-ዕማማት
• ምልክት-መጽረዪ
• ምልክት-ቦርሳ
• ምልክት-ምሉእ ስክሪን

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

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

ኩሎም ናይ ምልክታት ክፍልታት .icon-ብግቡእ ናይ ኣስማት ርሕቀትን ስፍሓትን ቅድመ-ጥብቆ ይግበረሎም፣ ልክዕ ከምቶም ካልኦት ባእታታትና። እዚ ድማ ምስ ካልኦት መሳርሒታት ከይጋጮ ክሕግዝ እዩ።

ግሊፊኮንስ ኣብዚ ኣብ ዶክስ ሊንክን ክሬዲትን ክሳብ ዝሃብና ኣብ ክፉት ምንጪ መሳርሒታትና ዝተቐመጡ ሃፍሊንግስ ክንጥቀም ፈቒዱልና ኣሎ። በጃኹም ኣብ ፕሮጀክትታትኩም እውን ከምኡ ምግባር ኣብ ግምት ኣእትውዎ።

ከመይ ጌርና ንጥቀመሉ

<i>ቡትስትራፕ ንኹሎም ምልክታት መለለዪ ይጥቀም ፣ ግን ዝኾነ ናይ ጉዳይ ክፍሊ የብሎምን-ዝተኻፈለ ቅድመ-ጥብቆ ጥራይ። ንኽትጥቀመሉ፡ ነዚ ዝስዕብ ኮድ ዳርጋ ኣብ ዝኾነ ቦታ ኣቐምጦ፤

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

ንዝተገልበጡ (ጻዕዳ) ምልክታት ዝኸውን ቅዲታት እውን ኣለዉ፣ ምስ ሓደ ተወሳኺ ክፍሊ ድሉዋት ዝኾኑ፤

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

ንኣርኣያታትካ ክትመርጾም እትኽእል 140 ክፍልታት ኣለዉ። በቃ <i>ትኽክለኛ ክፍልታት ዘለዎ መለለዪ ወስኹ እሞ ተዳልዩካ። ምሉእ ዝርዝር ኣብ sprites.less ወይ ልክዕ ኣብዚ ኣብዚ ሰነድ ክትረኽብዎ ትኽእሉ ኢኹም።

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

ኬዝ ተጠቐም

ምልክታት ብሉጻት እዮም፡ ግን ሓደ ሰብ ኣበይ ምተጠቐመሎም? ገለ ሓሳባት እነሆ፤

• ከም ስእላዊ ንጐድናዊ መስመር ምድህሳስካ
• ንጽሩይ ምልክት ዝመርሖ ምድህሳስ
• ትርጉም ናይ ሓደ ተግባር ንምትሕልላፍ ዝሕግዙ መጠወቒታት
• ምስ መላግቦታት ኣብ መዕለቢ ሓደ ተጠቃሚ ዓውደ-ጽሑፍ ንምክፋል

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

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

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

ናይ ኢመይል ኣድራሻ