ርዕሶች

ሁሉም የኤችቲኤምኤል አርእስቶች <h1>ይገኛሉ <h6>።

h1. ርዕስ 1

h2. ርዕስ 2

h3. ርዕስ 3

h4. ርዕስ 4

h5. ርዕስ 5

h6. ርዕስ 6

የሰውነት ቅጂ

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

ባነሰ የተሰራ

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

አጽንዖት

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

`<small>`

የውስጠ-መስመር ወይም የጽሑፍ ብሎኮች ላይ አጽንዖት ለመስጠት፣ ትንሹን መለያ ይጠቀሙ።

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

<p> < ትንሽ > ይህ የጽሑፍ መስመር እንደ ጥሩ ህትመት እንዲታይ ነው። </small> </p>

ደፋር

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

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

<strong> እንደ ደማቅ ጽሑፍ ቀርቧል </strong>

ሰያፍ

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

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

<em> እንደ ሰያፍ ጽሁፍ ቀርቧል </em>

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

አሰላለፍ ክፍሎች

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

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

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

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

<p class = "text-left" > በግራ የተሰለፈ ጽሑፍ። </p> 
<p class = "text-center" > በመሃል የሰለጠነ ጽሑፍ። </p> 
<p class = "text-right" > በቀኝ የተሰለፈ ጽሑፍ። </p>

አጽንዖት ክፍሎች

ትርጉምን በቀለም አስተላልፍ በጥቂት የአጽንዖት መገልገያ ክፍሎች።

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla።

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class = "text-success" > Duis mollis፣ est non commodo luctus፣ nisi erat porttitor ligula። </p>

ምህጻረ ቃል

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

`<abbr>`

በምህፃረ ቃል ረጅም ማንዣበብ ላይ ለተዘረጋ ጽሑፍ፣ ባህሪውን ያካትቱ title።

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

<abbr title = "ባህሪ" > attr </abbr>

`<abbr class="initialism">`

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

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

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

አድራሻዎች

ለቅርብ ቅድመ አያት ወይም ለጠቅላላው የሥራ አካል የእውቂያ መረጃ ያቅርቡ።

`<address>`

ሁሉንም መስመሮች በ በማጠናቀቅ ቅርጸትን ጠብቅ <br>።

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

ሙሉ ስም
[email protected]

<አድራሻ>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  ሳን ፍራንሲስኮ፣ CA 94107 <br>
  <abbr ርዕስ = "ስልክ" > P: </abbr> (123) 456-7890 
</ address>
 
<አድራሻ>
  <strong> ሙሉ ስም </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. ኢንቲጀር posuere erat a ante። </p>
</blockquote>

Blockquote አማራጮች

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

ምንጭ መሰየም

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat a ante።
በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat a ante። </p>
  <small> አንድ ታዋቂ ሰው <cite title = "የምንጭ ርዕስ" > የምንጭ ርዕስ </cite></small> 
</blockquote>

አማራጭ ማሳያዎች

.pull-rightለተንሳፋፊ፣ ወደ ቀኝ የሰለጠነ የማገጃ ጥቅስ ይጠቀሙ ።

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat a ante።
በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው

<blockquote class = "pull-right" > 
  ...
</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>

ታዝዟል።

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

Lorem ipsum dolor ሲት አሜት
Consectetur adipiscing elit
ኢንቲጀር molestie lorem at massa
ፋሲሊሲስ በፕሪቲየም ኒስላ አሊኬት
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
አኔን ሲት አሜት ኤራት ኑንክ
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 = "ቅጥ አልባ" > 
  <li> ... </li>
</ul>

በአግባቡ

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "ውስጥ መስመር" > 
  <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>በመስመር ጎን ለጎን ያድርጉ።

መግለጫ ዝርዝሮች: የመግለጫ ዝርዝር ቃላትን ለመወሰን ፍጹም ነው።
ኢዩስሞድ: 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>በውስጥ መስመር መጠቅለል አለበት።

ለምሳሌ < code > & lt ; ክፍል & gt ;</ code > በውስጥ መስመር መጠቅለል አለበት ።

መሰረታዊ እገዳ

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

<p>የጽሑፍ ናሙና እዚህ...</p>

<ቅድመ>
  <p>ናሙና ጽሑፍ እዚህ...</p>
</pre>

ቀና በል!<pre>ኮዱን በተቻለ መጠን ወደ ግራ ቅርብ በሆነ መለያዎች ውስጥ ማስቀመጥዎን ያረጋግጡ ። ሁሉንም ትሮች ያቀርባል.

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

ነባሪ ቅጦች

ለመሠረታዊ ዘይቤ - ቀላል ንጣፍ እና አግድም መከፋፈያዎች ብቻ - የመሠረት ክፍሉን .tableለማንኛውም ይጨምሩ <table>።

#	የመጀመሪያ ስም	ያባት ስም	የተጠቃሚ ስም
1	ምልክት ያድርጉ	ኦቶ	@mdo
2	ያዕቆብ	እሾህ	@ ስብ
3	ላሪ	ወፉ	@twitter

<table class = "ጠረጴዛ" > 
  …
</ ሠንጠረዥ>

አማራጭ ክፍሎች

ከሚከተሉት ክፍሎች አንዱን ወደ .tableመሰረታዊ ክፍል ያክሉ።

`.table-striped`

<tbody>በሲኤስኤስ መራጭ ( በ :nth-childIE7-8 ውስጥ አይገኝም) ወደ ማንኛውም የጠረጴዛ ረድፍ የሜዳ አህያ መሰንጠቅን ይጨምራል።

#	የመጀመሪያ ስም	ያባት ስም	የተጠቃሚ ስም
1	ምልክት ያድርጉ	ኦቶ	@mdo
2	ያዕቆብ	እሾህ	@ ስብ
3	ላሪ	ወፉ	@twitter

<table class = "በጠረጴዛ የተሰነጠቀ" > 
  …
</ ሠንጠረዥ>

`.table-bordered`

በጠረጴዛው ላይ ድንበሮችን እና የተጠጋጋ ማዕዘኖችን አክል.

#	የመጀመሪያ ስም	ያባት ስም	የተጠቃሚ ስም
1	ምልክት ያድርጉ	ኦቶ	@mdo
1	ምልክት ያድርጉ	ኦቶ	@getbootstrap
2	ያዕቆብ	እሾህ	@ ስብ
3	ላሪ ወፍ		@twitter

<table class = "ጠረጴዛ ድንበር" > 
  …
</ ሠንጠረዥ>

`.table-hover`

በ ውስጥ በጠረጴዛ ረድፎች ላይ የማንዣበብ ሁኔታን አንቃ <tbody>።

#	የመጀመሪያ ስም	ያባት ስም	የተጠቃሚ ስም
1	ምልክት ያድርጉ	ኦቶ	@mdo
2	ያዕቆብ	እሾህ	@ ስብ
3	ላሪ ወፍ		@twitter

<table class = "ጠረጴዛ-ማንዣበብ" > 
  …
</ ሠንጠረዥ>

`.table-condensed`

የሕዋስ ንጣፍን በግማሽ በመቁረጥ ጠረጴዛዎችን የበለጠ የታመቀ ያደርገዋል።

#	የመጀመሪያ ስም	ያባት ስም	የተጠቃሚ ስም
1	ምልክት ያድርጉ	ኦቶ	@mdo
2	ያዕቆብ	እሾህ	@ ስብ
3	ላሪ ወፍ		@twitter

<table class = "ጠረጴዛ-የተጨመቀ" > 
  …
</ ሠንጠረዥ>

አማራጭ የረድፍ ክፍሎች

የጠረጴዛ ረድፎችን ለማቅለም አውድ ክፍሎችን ተጠቀም።

ክፍል	መግለጫ
`.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>`	ሠንጠረዡ ምን እንደሚይዝ መግለጫ ወይም ማጠቃለያ፣ በተለይም ለስክሪን አንባቢዎች ጠቃሚ

<ጠረጴዛ>
  <መግለጫ> ... </caption>
  <ርዕስ>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </ thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</ ሠንጠረዥ>

ነባሪ ቅጦች

የግለሰብ ቅፅ መቆጣጠሪያዎች የቅጥ አሰራርን ይቀበላሉ, ነገር ግን ምንም አስፈላጊ ያልሆነ የመሠረት ክፍል <form>በምልክት ማድረጊያ ላይ ወይም ትልቅ ለውጦች. በቅጽ መቆጣጠሪያዎች ላይ የተደረደሩ፣ በግራ የተሰለፉ መለያዎች ውጤቶች።

<ፎርም>
  <fieldset>
    አፈ ታሪክ </legend>
    <label> የመለያ ስም </label>
    <የግብአት አይነት = "ጽሑፍ" ቦታ ያዥ = "የሆነ ነገር ተይብ..." >  
    <span class = "help-block" > ምሳሌ የማገጃ-ደረጃ እገዛ ጽሑፍ እዚህ። </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > ፈትሹኝ። 
    </ label>
    <button type = "submit" class = "btn" > አስረክብ </button>  
  </fieldset>
</ form>

አማራጭ አቀማመጦች

ከ Bootstrap ጋር የተካተቱት ለጋራ አጠቃቀም ሶስት አማራጭ የቅጽ አቀማመጦች አሉ።

የፍለጋ ቅጽ

ለተጨማሪ የተጠጋጋ የጽሑፍ ግቤት ወደ .form-searchቅጹ እና .search-queryወደ ላይ ያክሉ ።<input>

<form class = "ቅጽ ፍለጋ" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > ፈልግ </button>  
</ form>

የመስመር ውስጥ ቅጽ

.form-inlineለታመቀ አቀማመጥ በግራ የተሰለፉ መሰየሚያዎች እና የውስጠ-ብሎክ መቆጣጠሪያዎችን ያክሉ ።

<form class = "form-inline" > 
  <input type = "text" class = "input-small" ቦታ ያዥ = "ኢሜል" >   
  <input type = "password" class = "input-small" ቦታ ያዥ = "የይለፍ ቃል" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > አስታውሰኝ:: 
  </ label>
  <button type = "submit" class = "btn" > ይግቡ </button>  
</ form>

አግድም ቅርጽ

መሰየሚያዎችን በቀኝ አሰልፍ እና በግራ በኩል በማንሳፈፍ ከመቆጣጠሪያዎች ጋር በተመሳሳይ መስመር ላይ እንዲታዩ ያድርጉ። ከነባሪው ቅጽ ብዙ ማርክ ለውጦችን ይፈልጋል፡

.form-horizontalወደ ቅጹ አክል
መለያዎችን እና መቆጣጠሪያዎችን ወደ ውስጥ ይዝጉ.control-group
.control-labelወደ መለያው ያክሉ
.controlsለትክክለኛው አሰላለፍ ማናቸውንም ተያያዥ መቆጣጠሪያዎችን ጠቅልለው

<form class = "ቅጽ-አግድም" > 
  <div class = "ቁጥጥር-ቡድን" > 
    <label class = "control-label" ለ = "inputEmail" > ኢሜይል </label>  
    <div class = "መቆጣጠሪያዎች" > 
      <input type = "text" id = "inputEmail" ቦታ ያዥ = "ኢሜል" >   
    </div>
  </div>
  <div class = "ቁጥጥር-ቡድን" > 
    <label class = "control-label" ለ = "inputPassword" > የይለፍ ቃል </label>  
    <div class = "መቆጣጠሪያዎች" > 
      <input type = "password" id = "inputPassword" ቦታ ያዥ = "የይለፍ ቃል" >   
    </div>
  </div>
  <div class = "ቁጥጥር-ቡድን" > 
    <div class = "መቆጣጠሪያዎች" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > አስታውሰኝ:: 
      </ label>
      <button type = "submit" class = "btn" > ይግቡ </button>  
    </div>
  </div>
</ form>

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

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

ግብዓቶች

በጣም የተለመደው የቅጽ ቁጥጥር፣ ጽሑፍ ላይ የተመሠረተ የግቤት መስኮች። ለሁሉም የኤችቲኤምኤል 5 አይነቶች ድጋፍን ያካትታል፡ ጽሑፍ፣ የይለፍ ቃል፣ የቀን ሰዓት፣ የቀን ጊዜ-አካባቢ፣ ቀን፣ ወር፣ ሰዓት፣ ሳምንት፣ ቁጥር፣ ኢሜል፣ ዩአርኤል፣ ፍለጋ፣ ቴል እና ቀለም።

typeየተገለጸውን በማንኛውም ጊዜ መጠቀምን ይጠይቃል ።

<የግብአት አይነት = "ጽሑፍ" ቦታ ያዥ = "የጽሑፍ ግቤት" >

ጽሑፍ አካባቢ

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

<textarea rows = "3" > </textarea>

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

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

ነባሪ (የተቆለለ)

<label class = "checkbox" > 
  <የግቤት አይነት = "አመልካች ሳጥን" እሴት = "" >  
  አማራጭ አንድ ይህ እና ያ ነው - ለምን ጥሩ እንደሆነ ማካተትዎን እርግጠኛ ይሁኑ
</ label>
 
<label class = "ራዲዮ" > 
  <የግብአት አይነት = "ራዲዮ" ስም = "አማራጮች ሬድዮዎች" id = "አማራጮች ሬድዮስ1" እሴት = "አማራጭ 1" ምልክት ተደርጎበታል >     
  አማራጭ አንድ ይህ እና ያ ነው - ለምን ጥሩ እንደሆነ ማካተትዎን እርግጠኛ ይሁኑ
</ label>
<label class = "ራዲዮ" > 
  <የግቤት አይነት = "ራዲዮ" ስም = "አማራጮች ሬድዮዎች" id = "አማራጮች ሬድዮስ2" እሴት = "አማራጭ2" >    
  አማራጭ ሁለት ሌላ ነገር ሊሆን ይችላል እና እሱን መምረጥ አማራጭ አንዱን አይመርጥም
</ label>

የመስመር ውስጥ አመልካች ሳጥኖች

.inlineክፍሉን ወደ ተከታታይ አመልካች ሳጥኖች ወይም ሬዲዮዎች በተመሳሳይ መስመር ላይ ለሚታዩ መቆጣጠሪያዎች ይጨምሩ ።

<label class = "Checkbox inline" > 
  <የግቤት አይነት = "checkbox " id = "inlineCheckbox1" እሴት = "አማራጭ 1 " > 1   
</ label>
<label class = "Checkbox inline" > 
  <የግቤት አይነት = "checkbox " id = "inlineCheckbox2" እሴት = "አማራጭ2 " > 2   
</ label>
<label class = "Checkbox inline" > 
  <የግቤት አይነት = "checkbox " id = "inlineCheckbox3" እሴት = "አማራጭ 3 " > 3   
</ label>

ይመርጣል

multiple="multiple"ብዙ አማራጮችን በአንድ ጊዜ ለማሳየት ነባሪውን አማራጭ ይጠቀሙ ወይም ሀ ይጥቀሱ ።

<ይምረጡ>
  <አማራጭ> 1 </ አማራጭ>
  <አማራጭ> 2 </አማራጭ>
  <አማራጭ> 3 </አማራጭ>
  <አማራጭ> 4 </አማራጭ>
  <አማራጭ> 5 </አማራጭ>
</select>
 
ብዙ ምረጥ = "በርካታ" > 
  <አማራጭ> 1 </ አማራጭ>
  <አማራጭ> 2 </አማራጭ>
  <አማራጭ> 3 </አማራጭ>
  <አማራጭ> 4 </አማራጭ>
  <አማራጭ> 5 </አማራጭ>
</select>

የቅጽ መቆጣጠሪያዎችን ማራዘም

በነባር የአሳሽ ቁጥጥሮች ላይ መጨመር፣ Bootstrap ሌሎች ጠቃሚ የቅጽ ክፍሎችን ያካትታል።

የተዘጋጁ እና የተጨመሩ ግብዓቶች

ከማንኛውም ጽሑፍ-ተኮር ግብዓት በፊት ወይም በኋላ ጽሑፍ ወይም አዝራሮችን ያክሉ። selectአባሎች እዚህ እንደማይደገፉ ልብ ይበሉ ።

ነባሪ አማራጮች

ጽሑፍን በግቤት ላይ ለማዘጋጀት ወይም ለማያያዝ ከሁለት ክፍሎች በአንዱ .add-onእና አንድን ይሸፍኑ ።input

<div class = "ግቤት-ፕሪፔንድ" > 
  <span class = "መደመር" > @ </span> 
  <input class = "span2" id = "prependedInput " type = "ጽሑፍ" ቦታ ያዥ = "የተጠቃሚ ስም" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "መደመር" > .00 </span> 
</div>

የተዋሃደ

.add-onግብአትን ለማዘጋጀት እና ለመጨመር ሁለቱንም ክፍሎችን እና ሁለት አጋጣሚዎችን ይጠቀሙ ።

<div class = "የግቤት-ዝግጅት ግብዓት-አባሪ" > 
  <span class = "መደመር" > $ </span> 
  <የግብአት ክፍል = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "መደመር" > .00 </span> 
</div>

ከጽሑፍ ይልቅ አዝራሮች

<span>ከጽሑፍ ጋር ሳይሆን .btnአንድ አዝራር (ወይም ሁለት) ከግቤት ጋር ለማያያዝ ይጠቀሙ።

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <button class = "btn" type = "button" > ሂድ! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "አዝራር" > ፈልግ </button>  
  <button class = "btn" type = "አዝራር" > አማራጮች </button>  
</div>

የአዝራሮች ተቆልቋይ

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "ተቆልቋይ" >  
      ድርጊት
      <span class = "caret" ></span> 
    </button>
    <ul class = "ተቆልቋይ-ሜኑ" > 
      ...
    </ul>
  </div>
</div>

<div class = "ግቤት-ፕሪፔንድ" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "ተቆልቋይ" >  
      ድርጊት
      <span class = "caret" ></span> 
    </button>
    <ul class = "ተቆልቋይ-ሜኑ" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton " type = "ጽሑፍ" >   
</div>

<div class = "የግቤት-ዝግጅት ግብዓት-አባሪ" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "ተቆልቋይ" >  
      ድርጊት
      <span class = "caret" ></span> 
    </button>
    <ul class = "ተቆልቋይ-ሜኑ" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " አይነት = "ጽሑፍ" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "ተቆልቋይ" >  
      ድርጊት
      <span class = "caret" ></span> 
    </button>
    <ul class = "ተቆልቋይ-ሜኑ" > 
      ...
    </ul>
  </div>
</div>

የተከፋፈሉ ተቆልቋይ ቡድኖች

<ፎርም>
  <div class = "ግቤት-ፕሪፔንድ" > 
    <div class = "btn-group" > ... </div> 
    <የግብአት አይነት = "ጽሑፍ" > 
  </div>
  <div class = "input-append" > 
    <የግብአት አይነት = "ጽሑፍ" > 
    <div class = "btn-group" > ... </div> 
  </div>
</ form>

የፍለጋ ቅጽ

<form class = "ቅጽ ፍለጋ" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > ፈልግ </button>  
  </div>
  <div class = "ግቤት-ፕሪፔንድ" > 
    <button type = "submit" class = "btn" > ፈልግ </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</ form>

የመቆጣጠሪያ መጠን

አንጻራዊ የመጠን ክፍሎችን ተጠቀም .input-largeወይም ክፍሎችን በመጠቀም ግብዓቶችህን ከፍርግርግ አምድ መጠኖች ጋር .span*አዛምድ።

ደረጃ ግብዓቶችን አግድ

ማንኛውም <input>ወይም <textarea>ኤለመንቱ እንደ እገዳ ደረጃ ኤለመንት እንዲመስል ያድርጉ።

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

አንጻራዊ መጠን

<input class = "input-mini" type = "text " placeholder = ".input-mini" >   
<input class = "input-small" type = "text " placeholder = ".input-small" >   
<input class = "input-medium" type = "text " placeholder = ".input-medium" >   
<input class = "input-large" type = "text " placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text " placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

ቀና በል!በወደፊቶቹ ስሪቶች የእነዚህን አንጻራዊ የግቤት ክፍሎች አጠቃቀማችን ከአዝራር መጠኖቻችን ጋር እንዲዛመድ እንለውጣለን። ለምሳሌ፣ .input-largeየአንድ ግቤት ንጣፍ እና የቅርጸ-ቁምፊ መጠን ይጨምራል።

የፍርግርግ መጠን

ከተመሳሳይ የፍርግርግ አምዶች መጠኖች ጋር ለሚዛመዱ ግብዓቶች .span1ተጠቀም ።.span12

<የግብአት ክፍል = "span1" አይነት = "ጽሑፍ" ቦታ ያዥ = ".span1" >   
<የግብአት ክፍል = "span2" አይነት = "ጽሑፍ" ቦታ ያዥ = ".span2" >   
<የግብአት ክፍል = "span3" አይነት = "ጽሑፍ" ቦታ ያዥ = ".span3" >   
< ክፍል ምረጥ = "span1" > 
  ...
</select>
< ክፍል ምረጥ = "span2" > 
  ...
</select>
< ክፍል ምረጥ = "span3" > 
  ...
</select>

ለአንድ መስመር ለብዙ የፍርግርግ ግብዓቶች፣ ለትክክለኛው ክፍተት መቀየሪያውን ክፍል ይጠቀሙ.controls-row ። ነጭ ቦታን ለመደርመስ ግብአቶቹን ይንሳፈፋል፣ ተገቢውን ህዳጎች ያዘጋጃል እና ተንሳፋፊውን ያጸዳል።

<div class = "መቆጣጠሪያዎች" > 
  <የግብአት ክፍል = "span5" አይነት = "ጽሑፍ" ቦታ ያዥ = ".span5" >   
</div>
<div class = "መቆጣጠሪያዎች-ረድፍ" > 
  <የግብአት ክፍል = "span4" አይነት = "ጽሑፍ" ቦታ ያዥ = ".span4" >   
  <የግብአት ክፍል = "span1" አይነት = "ጽሑፍ" ቦታ ያዥ = ".span1" >   
</div>
...

የማይስተካከሉ ግብዓቶች

ትክክለኛውን ቅጽ ማርክ ሳይጠቀሙ ሊስተካከል በማይችል ቅጽ ያቅርቡ።

<span class = "input-xlarge uneditable-input" > እዚህ የተወሰነ እሴት </span>

የቅጽ ድርጊቶች

ቅጹን በቡድን የተግባር (አዝራሮች) ጨርስ። በ ውስጥ ሲቀመጡ .form-actionsአዝራሮቹ ከቅጽ መቆጣጠሪያዎች ጋር ለመደርደር በራስ-ሰር ያስገባሉ።

<div class = "ቅጽ-ድርጊት" > 
  <button type = "submit" class = "btn btn-primary" > ለውጦችን አስቀምጥ </button>  
  <button type = "button" class = "btn" > ሰርዝ </button>  
</div>

የእገዛ ጽሑፍ

በቅጽ መቆጣጠሪያዎች ዙሪያ ለሚታየው የእገዛ ጽሑፍ የመስመር ውስጥ እና የማገድ ደረጃ ድጋፍ።

የመስመር ላይ እገዛ

<input type = "text" ><span class = "help-inline" > የመስመር ውስጥ የእርዳታ ጽሑፍ </span>

እገዛን አግድ

<input type = "text" ><span class = "help-block" > ወደ አዲስ መስመር የሚሰበር እና ከአንድ መስመር በላይ የሚዘልቅ ረጅም የእገዛ ጽሑፍ። </span>

የቅጽ ቁጥጥር ግዛቶች

በቅጽ ቁጥጥሮች እና መለያዎች ላይ መሠረታዊ የግብረመልስ ሁኔታዎች ለተጠቃሚዎች ወይም ጎብኝዎች ግብረ መልስ ይስጡ።

የግቤት ትኩረት

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

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "ይህ ያተኮረ ነው..." >

ልክ ያልሆኑ ግብዓቶች

የቅጥ ግብዓቶች በነባሪ የአሳሽ ተግባር በኩል :invalid። ሀ ይግለጹ ፣ መስኩ አማራጭ ካልሆነ አይነታውን typeይጨምሩ እና (የሚመለከተው ከሆነ) ሀ ይጥቀሱ ።requiredpattern

ይህ በCSS አስመሳይ መራጮች ድጋፍ እጦት ምክንያት በInternet Explorer 7-9 ስሪት ውስጥ አይገኝም።

<የግብአት ክፍል = "span3" type = "ኢሜል" ያስፈልጋል >

የተሰናከሉ ግብዓቶች

disabledየተጠቃሚውን ግቤት ለመከላከል እና ትንሽ ለየት ያለ መልክ ለመቀስቀስ በግብአት ላይ ያለውን ባህሪ ያክሉ ።

<input class = "input-xlarge" id = "disabledInput" type = "text" ቦታ ያዥ = "እዚህ ግቤት ተሰናክሏል..." ተሰናክሏል >

የማረጋገጫ ግዛቶች

Bootstrap ለስህተት፣ ማስጠንቀቂያ፣ መረጃ እና የስኬት መልዕክቶች የማረጋገጫ ቅጦችን ያካትታል። ለመጠቀም፣ ተገቢውን ክፍል ወደ አካባቢው ያክሉ .control-group።

<div class = "የቁጥጥር ቡድን ማስጠንቀቂያ" > 
  <label class = "control-label" ለ = "inputWarning" > ከማስጠንቀቂያ ጋር ግቤት </label>  
  <div class = "መቆጣጠሪያዎች" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > የሆነ ችግር ተፈጥሯል </span> ሊሆን ይችላል። 
  </div>
</div>
 
<div class = "የቁጥጥር-ቡድን ስህተት" > 
  <label class = "control-label" ለ = "inputError" > ግቤት ከስህተት ጋር </label>  
  <div class = "መቆጣጠሪያዎች" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > እባክህ ስህተቱን አስተካክል </span> 
  </div>
</div>
 
<div class = "የቁጥጥር-ቡድን መረጃ" > 
  <label class = "control-label" ለ = "inputInfo" > ከመረጃ ጋር ግቤት </label>  
  <div class = "መቆጣጠሪያዎች" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > የተጠቃሚ ስም አስቀድሞ ተወስዷል </span> 
  </div>
</div>
 
<div class = "የቁጥጥር ቡድን ስኬት" > 
  <label class = "control-label" ለ = "inputSuccess" > ግቤት ከስኬት ጋር </label>  
  <div class = "መቆጣጠሪያዎች" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > ዋው! </span> 
  </div>
</div>

ነባሪ አዝራሮች

.btnየአዝራር ቅጦች ከክፍል ጋር በማንኛውም ነገር ላይ ሊተገበሩ ይችላሉ. ነገር ግን፣ በተለምዶ እነዚህን ለምርጥ አተረጓጎም ብቻ <a>እና አካላትን መተግበር ትፈልጋለህ።<button>

አዝራር	ክፍል = ""	መግለጫ
	`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አባላትን ያክላል፣ ጽሑፍ ግራጫ በማድረግ ልንጠግነው የማንችለው መጥፎ የጽሑፍ ጥላ።

የአዝራሮች መጠኖች

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

<p>
  <button class = "btn btn-large btn-primary" type = "button" > ትልቅ አዝራር </button>  
  <button class = "btn btn-large" type = "አዝራር" > ትልቅ አዝራር </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > ነባሪ አዝራር </button>  
  <button class = "btn" type = "button" > ነባሪ አዝራር </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > ትንሽ አዝራር </button>  
  <button class = "btn btn-small" type = "አዝራር" > ትንሽ አዝራር </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > ሚኒ አዝራር </button>  
  <button class = "btn btn-mini" type = "አዝራር" > አነስተኛ አዝራር </button>  
</p>

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

<button class = "btn btn-large btn-block btn-primary" type = "button" > የደረጃ አግድ አዝራር </button>  
<button class = "btn btn-large btn-block" type = "button" > ደረጃ አግድ አዝራር </button>

የአካል ጉዳተኛ ሁኔታ

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

መልህቅ ኤለመንት

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

ዋና አገናኝ አገናኝ

<a href = "#" class = "btn btn-large btn-primary disabled" > ዋና አገናኝ </a>  
<a href = "#" class = "btn btn-large disabled" > አገናኝ </a>

ቀና በል!.disabledእዚህ እንደ መገልገያ ክፍል እንጠቀማለን , ከተለመደው .activeክፍል ጋር ተመሳሳይ ነው, ስለዚህ ምንም ቅድመ ቅጥያ አያስፈልግም. በተጨማሪም, ይህ ክፍል ውበት ብቻ ነው; አገናኞችን ለማሰናከል ብጁ ጃቫስክሪፕት መጠቀም አለብዎት።

የአዝራር አባል

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

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "የተሰናከለ" > ዋና አዝራር </button>   
<button type = "button" class = "btn btn-large" ተሰናክሏል > አዝራር </button>

አንድ ክፍል፣ በርካታ መለያዎች

.btnክፍሉን በ <a>, <button>ወይም <input>ኤለመንት ላይ ይጠቀሙ .

<a class = "btn" href = "" > አገናኝ </a>  
<button class = "btn" type = "አስረክብ" > አዝራር </button>  
<የግብአት ክፍል = "btn" አይነት = "አዝራር" እሴት = "ግቤት" >   
<input class = "btn" type = "submit" value = "አስረክብ" >

እንደ ምርጥ ልምምድ፣ የአሳሽ አቋራጭ መመሳሰልን ለማረጋገጥ ከአውድዎ ጋር ያለውን አካል ለማዛመድ ይሞክሩ። አንድ ካለዎት ለ አዝራርዎ inputይጠቀሙ <input type="submit">።

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

<img src = "..." ክፍል = "img-rounded" >  
<img src = "..." ክፍል = "img-circle" >  
<img src = "..." ክፍል = "img-polaroid" >

ቀና በል! .img-roundedእና .img-circleበ IE7-8 ውስጥ በድጋፍ እጦት ምክንያት አይሰሩም border-radius.

አዶ ግሊፍስ

140 አዶዎች በስፕሪት መልክ፣ በጨለማ ግራጫ (ነባሪ) እና ነጭ ይገኛሉ፣ በጊሊፊኮንስ የቀረበ ።

አዶ-መስታወት
አዶ-ሙዚቃ
አዶ-ፍለጋ
አዶ-ፖስታ
አዶ-ልብ
አዶ-ኮከብ
አዶ-ኮከብ-ባዶ
አዶ-ተጠቃሚ
አዶ-ፊልም
አዶ - ትልቅ
አዶ-th
አዶ-th-ዝርዝር
አዶ-እሺ
አዶ - አስወግድ
አዶ-ማጉላት
አዶ-ማጉላት
አዶ-ጠፍቷል
አዶ-ምልክት
አዶ-ኮግ
አዶ-ቆሻሻ
አዶ-ቤት
አዶ-ፋይል
አዶ-ጊዜ
አዶ-መንገድ
አዶ-ማውረጃ-alt
አዶ-ማውረድ
አዶ-መስቀል
አዶ-የገቢ መልእክት ሳጥን
አዶ-ጨዋታ-ክበብ
አዶ-ድገም
አዶ-አድስ
አዶ-ዝርዝር-alt
አዶ-መቆለፊያ
አዶ-ባንዲራ
አዶ-የጆሮ ማዳመጫዎች
አዶ-ድምጽ-ጠፍቷል
አዶ-ድምጽ-ወደታች
አዶ-ድምጽ-ከፍ
አዶ-qrcode
አዶ-ባርኮድ
አዶ-መለያ
አዶ-መለያዎች
አዶ-መጽሐፍ
አዶ-ዕልባት
አዶ-ማተም
አዶ-ካሜራ
አዶ-ቅርጸ-ቁምፊ
አዶ-ደፋር
አዶ-ኢታሊክ
አዶ-ጽሑፍ-ቁመት
አዶ-ጽሑፍ-ወርድ
አዶ-አሰላለፍ-ግራ
አዶ-አሰላለፍ-መሃል
አዶ-አሰላለፍ-ቀኝ
አዶ-align- justify
አዶ-ዝርዝር
አዶ-ገብ-ግራ
አዶ-ገብ-ቀኝ
አዶ-የፊት ጊዜ-ቪዲዮ
አዶ-ሥዕል
አዶ-እርሳስ
አዶ-ካርታ-ማርከር
አዶ-አስተካክል
አዶ-ቀለም
አዶ-አርትዕ
አዶ-አጋራ
አዶ-ቼክ
አዶ-አንቀሳቅስ
አዶ-ደረጃ-ወደ ኋላ
አዶ-ፈጣን-ወደ ኋላ
አዶ-ወደ ኋላ
አዶ-መጫወት
አዶ-አፍታ ማቆም
አዶ-ማቆሚያ
አዶ-ወደ ፊት
አዶ-ፈጣን-ወደ ፊት
አዶ-ደረጃ-ወደፊት
አዶ-ማስወጣት
አዶ-ቼቭሮን-ግራ
አዶ-ቼቭሮን-ቀኝ
አዶ-ፕላስ-ምልክት
አዶ-መቀነስ-ምልክት
አዶ-ማስወገድ-ምልክት
አዶ-እሺ-ምልክት
አዶ-ጥያቄ-ምልክት።
አዶ-መረጃ-ምልክት።
አዶ-ቅጽበታዊ ገጽ እይታ
አዶ-ማስወገድ-ክበብ
አዶ-እሺ-ክበብ
አዶ-ባን-ክበብ
አዶ-ቀስት-ግራ
አዶ-ቀስት-ቀኝ
አዶ-ቀስት-ወደ ላይ
አዶ-ቀስት-ወደታች
አዶ-share-alt
አዶ-መጠን-ሙሉ
አዶ-መጠን-ትንሽ
አዶ-ፕላስ
አዶ-መቀነስ
አዶ-ኮከብ
አዶ - አጋኖ - ምልክት
አዶ-ስጦታ
አዶ-ቅጠል
አዶ-እሳት
አዶ-ዓይን-ክፍት
አዶ-ዓይን-ቅርብ
አዶ-ማስጠንቀቂያ-ምልክት
አዶ-አውሮፕላን
አዶ - የቀን መቁጠሪያ
አዶ- በዘፈቀደ
አዶ-አስተያየት
አዶ-ማግኔት
አዶ-ቼቭሮን-አፕ
አዶ-ቼቭሮን-ታች
አዶ-retweet
አዶ-ግዢ-ጋሪ
አዶ-አቃፊ-ቅርብ
አዶ-አቃፊ-ክፍት
አዶ-መጠን-አቀባዊ
አዶ-መጠን-አግድም
አዶ-ኤችዲዲ
አዶ-ቡልሆርን
አዶ-ደወል
አዶ-የምስክር ወረቀት
አዶ-አውራ ጣት-እስከ
አዶ-አውራ ጣት-ወደታች
አዶ-እጅ-ቀኝ
አዶ-እጅ-ግራ
አዶ-እጅ-ወደላይ
አዶ-እጅ-ወደታች
አዶ-ክበብ-ቀስት-ቀኝ
አዶ-ክበብ-ቀስት-ግራ
አዶ-ክበብ-ቀስት-ወደ ላይ
አዶ-ክበብ-ቀስት-ወደታች
አዶ-ግሎብ
አዶ-መፍቻ
አዶ-ተግባራት
አዶ-ማጣሪያ
አዶ-አጭር
አዶ-ሙሉ ማያ

የ Glyphicons ባህሪ

Glyphicons Halflings በመደበኛነት በነጻ አይገኙም፣ ነገር ግን በBootstrap እና በ Glyphicons ፈጣሪዎች መካከል የተደረገ ዝግጅት ይህንን እንደ ገንቢዎች ያለ ምንም ወጪ እንዲሳካ አድርጎታል። ለማመስገን፣ በተግባራዊ በማንኛውም ጊዜ ወደ ግሊፊኮንስ የሚመለስ አማራጭ አገናኝ እንዲያካትቱ እንጠይቅዎታለን ።

እንዴት መጠቀም እንደሚቻል

ሁሉም አዶዎች <i>ልዩ ክፍል ያለው፣ ቅድመ ቅጥያ ያለው መለያ ያስፈልጋቸዋል icon-። ለመጠቀም የሚከተለውን ኮድ በማንኛውም ቦታ ያስቀምጡ፡

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

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

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

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.

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar

<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>

Dropdown in a button group

User

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>

Button sizes

Star Star Star

<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<ሀ class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<ሀ class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

Navigation

<ul class="nav nav-list">
  <li class = "ገባሪ" ><a   a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a  a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a  a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>

Form fields

<div class="control-group">
  <label class = "control-label"  for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-prepend">
      <span class = "መደመር" ><i class="icon-envelope"></i></span>
      <የግቤት ክፍል = "span2" id =  "inputIcon" type="text">
    </div>
  </div>
</div>

የፊደል አጻጻፍ

ርዕሶች

h1. ርዕስ 1

h2. ርዕስ 2

h3. ርዕስ 3

h4. ርዕስ 4

h5. ርዕስ 5

h6. ርዕስ 6

የሰውነት ቅጂ

የእርሳስ አካል ቅጂ

ባነሰ የተሰራ

አጽንዖት

<small>

ደፋር

ሰያፍ

አሰላለፍ ክፍሎች

አጽንዖት ክፍሎች

ምህጻረ ቃል

<abbr>

<abbr class="initialism">

አድራሻዎች

<address>

የብሎክ ጥቅሶች

ነባሪ blockquote

Blockquote አማራጮች

ምንጭ መሰየም

አማራጭ ማሳያዎች

ዝርዝሮች

ያልታዘዘ

ታዝዟል።

ቅጥ አልባ

በአግባቡ

መግለጫ

አግድም መግለጫ

ኮድ

በአግባቡ

መሰረታዊ እገዳ

ጠረጴዛዎች

ነባሪ ቅጦች

አማራጭ ክፍሎች

.table-striped

.table-bordered

.table-hover

.table-condensed

አማራጭ የረድፍ ክፍሎች

የሚደገፍ የሰንጠረዥ ምልክት

ቅጾች

ነባሪ ቅጦች

አማራጭ አቀማመጦች

የፍለጋ ቅጽ

የመስመር ውስጥ ቅጽ

አግድም ቅርጽ

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

ግብዓቶች

ጽሑፍ አካባቢ

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

ነባሪ (የተቆለለ)

የመስመር ውስጥ አመልካች ሳጥኖች

ይመርጣል

የቅጽ መቆጣጠሪያዎችን ማራዘም

የተዘጋጁ እና የተጨመሩ ግብዓቶች

ነባሪ አማራጮች

የተዋሃደ

ከጽሑፍ ይልቅ አዝራሮች

የአዝራሮች ተቆልቋይ

የተከፋፈሉ ተቆልቋይ ቡድኖች

የፍለጋ ቅጽ

የመቆጣጠሪያ መጠን

ደረጃ ግብዓቶችን አግድ

አንጻራዊ መጠን

የፍርግርግ መጠን

የማይስተካከሉ ግብዓቶች

የቅጽ ድርጊቶች

የእገዛ ጽሑፍ

የመስመር ላይ እገዛ

እገዛን አግድ

የቅጽ ቁጥጥር ግዛቶች

የግቤት ትኩረት

ልክ ያልሆኑ ግብዓቶች

የተሰናከሉ ግብዓቶች

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`