የትየባ ልኬት

ሙሉው የፊደል አጻጻፍ ፍርግርግ በእኛ ተለዋዋጮች ውስጥ በሁለት ትናንሽ ተለዋዋጮች ላይ የተመሠረተ ነው። ያለ ፋይል @baseFontSize፡ እና @baseLineHeight. የመጀመሪያው በጠቅላላው ጥቅም ላይ የዋለው የመሠረት ቅርጸ-ቁምፊ መጠን ሲሆን ሁለተኛው ደግሞ የመሠረት መስመር ቁመት ነው.

የኛን አይነት እና ሌሎችንም ህዳጎችን፣ ንጣፍን እና የመስመር ከፍታዎችን ለመፍጠር እነዚያን ተለዋዋጮች እና አንዳንድ ሂሳብን እንጠቀማለን።

የአካል ጽሑፍ ምሳሌ

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor። Duis mollis፣ est non commodo luctus፣ nisi erat porttitor ligula፣ eget lacinia odio sem nec elit። Donec ሴድ ኦዲዮ dui.

አጽንዖት በመጠቀም

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ።

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

ምሳሌ አድራሻዎች

<address>መለያውን እንዴት መጠቀም እንደሚቻል ሁለት ምሳሌዎች እነሆ ።

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

ሙሉ ስም
[email protected]

ምሳሌ ምህጻረ ቃላት

ከባህሪ ጋር አህጽሮተ ቃላት titleቀላል ነጠብጣብ ያለው የታችኛው ድንበር እና በማንዣበብ ላይ የረዳት ጠቋሚ አላቸው። ይህ ለተጠቃሚዎች አንድ ነገር በማንዣበብ ላይ እንደሚታይ ተጨማሪ ፍንጭ ይሰጣል።

initialismትንሽ ያነሰ የጽሑፍ መጠን በመስጠት የትየባ ስምምነትን ለመጨመር ክፍሉን ወደ ምህጻረ ቃል ያክሉት ።

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

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

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

ምንጭዎን ለመጥቀስ አንድ አማራጭ አካል ያካትቱ እና ከሱ በፊት ለቅጥ ስራ ዓላማዎች <small>em dash ያገኛሉ ።—

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat እና ante venenatis። </p>
  <ትንሽ> ታዋቂ ሰው </small>
</blockquote>

ነባሪ የማገጃ ጥቅሶች በሚከተለው መልኩ ተቀምጠዋል።

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

በስራ አካል ውስጥ ታዋቂ የሆነ ሰው

የብሎክ ጥቅስዎን ወደ ቀኝ ለመንሳፈፍ፣ ያክሉ class="pull-right"፡-

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

በስራ አካል ውስጥ ታዋቂ የሆነ ሰው

ያልታዘዘ

<ul>

• 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 ሊቤሮ volutpat በ
• Faucibus porta lacus fringilla vel
• አኔን ሲት አሜት ኤራት ኑንክ
• Eget porttitor lorem

ቅጥ አልባ

<ul class="unstyled">

• 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 ሊቤሮ volutpat በ
• Faucibus porta lacus fringilla vel
• አኔን ሲት አሜት ኤራት ኑንክ
• Eget porttitor lorem

ታዝዟል።

<ol>

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

መግለጫ

<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.

አግድም መግለጫ

<dl class="dl-horizontal">

መግለጫ ዝርዝሮች

የመግለጫ ዝርዝር ቃላትን ለመወሰን ፍጹም ነው።

ኢዩስሞድ

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።

---

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

በአግባቡ

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

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

መሰረታዊ እገዳ

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

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

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

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

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

ጎግል ቆንጆ

ተመሳሳዩን <pre>ኤለመንት ይውሰዱ እና ለተሻሻለ አተረጓጎም ሁለት አማራጭ ክፍሎችን ያክሉ።

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

<pre class = "የሚያምር 
     linenums" >
  <p>ናሙና ጽሑፍ እዚህ...</p>
</pre>

ጉግል-ኮድ-ማሳመር ያውርዱ እና እንዴት እንደሚጠቀሙበት 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>
</ሠንጠረዥ>

ሰንጠረዦች ተነባቢነትን ለማረጋገጥ እና አወቃቀሩን ለመጠበቅ በጥቂት ድንበሮች ብቻ በራስ-ሰር ይቀመጣሉ። ከ 2.0 ጋር, .tableክፍሉ ያስፈልጋል.

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

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

የዜብራ-ዝርፊያን በመጨመር በጠረጴዛዎችዎ ትንሽ ቆንጆ ይሁኑ - .table-stripedክፍሉን ብቻ ይጨምሩ።

ማሳሰቢያ ፡ የተጣሩ ጠረጴዛዎች :nth-childየሲኤስኤስ መምረጡን ይጠቀማሉ እና በIE7-IE8 ውስጥ አይገኝም።

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

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

ለመዋቢያ ዓላማዎች በጠቅላላው ጠረጴዛ ዙሪያ ድንበሮችን እና የተጠጋጋ ማዕዘኖችን ይጨምሩ።

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

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

.table-condensedየጠረጴዛ ሕዋስ ንጣፍ በግማሽ (ከ 8 ፒክስል እስከ 4 ፒክስል) ለመቁረጥ ክፍሉን በመጨመር ጠረጴዛዎችዎን የበለጠ የታመቁ ያድርጉ ።

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

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

ያሉትን ክፍሎች በመጠቀም የተለያዩ መልክን ለማግኘት ማንኛውንም የሰንጠረዥ ክፍሎችን በማጣመር ነፃነት ይሰማህ።

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

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

ተለዋዋጭ HTML እና CSS

በ Bootstrap ውስጥ ስለ ቅፆች ምርጡ ክፍል ሁሉም የእርስዎ ግብዓቶች እና ቁጥጥሮች በምልክትዎ ውስጥ እንዴት ቢገነቡዋቸው በጣም ጥሩ ሆነው ይታያሉ። ምንም እጅግ የላቀ ኤችቲኤምኤል አያስፈልግም፣ ነገር ግን ስልቶችን ለሚፈልጉት እናቀርባለን።

ይበልጥ የተወሳሰቡ አቀማመጦች ለቀላል የቅጥ አሰራር እና የክስተት ትስስር አጭር እና ሊለኩ ከሚችሉ ክፍሎች ጋር ይመጣሉ፣ ስለዚህ በእያንዳንዱ ደረጃ ይሸፈናሉ።

አራት አቀማመጦች ተካትተዋል።

Bootstrap ለአራት ዓይነት የቅጽ አቀማመጦች ድጋፍ ይመጣል።

• አቀባዊ (ነባሪ)
• ፈልግ
• በአግባቡ
• አግድም

የተለያዩ የቅጽ አቀማመጥ ዓይነቶች ምልክት ለማድረግ አንዳንድ ለውጦችን ይፈልጋሉ፣ ነገር ግን መቆጣጠሪያዎቹ እራሳቸው ይቀራሉ እና ተመሳሳይ ባህሪ አላቸው።

የቁጥጥር ግዛቶች እና ሌሎችም።

የቡትስትራፕ ቅጾች ለሁሉም የመሠረታዊ ቅፅ ቁጥጥሮች እንደ ግብዓት፣ ጽሑፍ አካባቢ እና የሚጠብቁትን ይምረጡ። ግን እንደ ተያይዘው እና ዝግጁ የሆኑ ግብዓቶች እና የአመልካች ሳጥኖች ዝርዝሮች ካሉ በርካታ ብጁ አካላት ጋር አብሮ ይመጣል።

እንደ ስህተት፣ ማስጠንቀቂያ እና ስኬት ያሉ ግዛቶች ለእያንዳንዱ የቅጽ ቁጥጥር አይነት ይካተታሉ። እንዲሁም ለአካል ጉዳተኛ ቁጥጥሮች ቅጦች ተካትተዋል።

መሰረታዊ ቅፅ

ብልህ እና ቀላል ክብደት ያላቸው ነባሪዎች ያለ ተጨማሪ ምልክት ማድረጊያ።

የመለያ ስም

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

ፈትሽኝ። አስገባ

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

የፍለጋ ቅጽ

ወደ ቅጹ .form-searchእና .search-queryወደ input.

ፈልግ

<form class = "በደንብ ቅፅ ፍለጋ" > 
  <input type = "text" class = "input-medium search-query" >  
  <አዝራር  type = "submit" class = "btn" > ፈልግ </button> 
</ form>

የመስመር ውስጥ ቅጽ

.form-inlineየቅጽ መቆጣጠሪያዎችን አቀባዊ አሰላለፍ እና ክፍተት ለማጣራት ይጨምሩ ።

አስታወስከኝ ስግን እን

<ፎርም  class = "well form-inline" >
  <የግብአት አይነት = "ጽሑፍ" ክፍል = "ግቤት-ትንሽ"    ቦታ ያዥ = "ኢሜል" >
  <የግቤት አይነት = "የይለፍ ቃል" ክፍል = "ግቤት-ትንሽ"    ቦታ ያዥ = "የይለፍ ቃል" >
  < መለያ class = "checkbox" >
    <ግቤት  type = "checkbox" > አስታውሰኝ::
  </ label>
  <button type = "አስረክብ" ክፍል   = "btn" > ይግቡ </button>
</ form>

በቀኝ በኩል የሚታዩት እኛ የምንደግፋቸው ሁሉም ነባሪ የቅጽ መቆጣጠሪያዎች ናቸው። ነጥበ ምልክት የተደረገበት ዝርዝር እነሆ፡-

• የጽሑፍ ግብዓቶች (ጽሑፍ ፣ የይለፍ ቃል ፣ ኢሜል ፣ ወዘተ)
• አመልካች ሳጥን
• ሬዲዮ
• ይምረጡ
• ብዙ ይምረጡ
• የፋይል ግቤት
• textarea

የጽሑፍ ግቤት

ከፍሪፎርም ጽሑፍ በተጨማሪ ማንኛውም HTML5 ጽሑፍ ላይ የተመሠረተ ግብዓት እንደዚህ ይመስላል።

አመልካች ሳጥን

አማራጭ አንድ ይህ እና ያ ነው - ለምን ጥሩ እንደሆነ ማካተትዎን እርግጠኛ ይሁኑ

ዝርዝር ይምረጡ

የሆነ ነገር 2 3 4 5

ባለብዙ-ኮን-ምረጥ

1 2 3 4 5

የፋይል ግቤት

ጽሑፍ አካባቢ

ለውጦችን አስቀምጥ ሰርዝ

ምሳሌ ምልክት ማድረግ

ከላይ ያለውን የምሳሌ ቅጽ አቀማመጥ ከተመለከትን፣ ከመጀመሪያው ግብዓት እና ቁጥጥር ቡድን ጋር የተያያዘው ምልክት ይህ ነው። የ .control-group፣ .control-label፣ እና .controlsክፍሎች ሁሉም ለቅጥ አሰራር ያስፈልጋሉ።

<form class = "ቅጽ-አግድም" > 
  <fieldset>
    አፈ ታሪክ ጽሑፍ </legend>
    <div class = "ቁጥጥር-ቡድን" > 
      <label class = "control-label" ለ = "input01" > የጽሑፍ ግቤት </label>  
      <div class = "መቆጣጠሪያዎች" > 
        <የግብአት አይነት = "ጽሑፍ" ክፍል = "input-xlarge" id = "input01" >   
        <p class = "help-block" > የድጋፍ ጽሑፍ </p> 
      </div>
    </div>
  </fieldset>
</ form>

Bootstrap በአሳሽ ለሚደገፉ ትኩረት እና disabledግዛቶች ቅጦችን ያቀርባል። ነባሪውን Webkit እናስወግደዋለን outlineእና box-shadowበእሱ ቦታ ለ :focus.

---

የቅጽ ማረጋገጫ

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

< የመስክ ስብስብ
  ክፍል = "የቁጥጥር ቡድን ስህተት" >
  …
</fieldset>

ተኮር ግብአት

የማይስተካከል ግቤት

እዚህ የተወሰነ እሴት

ግቤት ተሰናክሏል።

አመ���ካች ሳጥን ተሰናክሏል።

ይህ የተሰናከለ አመልካች ሳጥን ነው።

ከማስጠንቀቂያ ጋር ግቤት

የሆነ ችግር ተፈጥሯል።

ግቤት ከስህተት ጋር

እባክህ ስህተቱን አስተካክል።

ከስኬት ጋር ግቤት

ዋው!

በስኬት ይምረጡ

1 2 3 4 5 ዋው!

ለውጦችን አስቀምጥ ሰርዝ

ግብዓቶችን አዘጋጅ እና ጨምር

የግቤት ቡድኖች - ከተጨመረው ወይም አስቀድሞ የተዘጋጀ ጽሑፍ - ለግብዓቶችዎ ተጨማሪ አውድ ለመስጠት ቀላል መንገድን ያቅርቡ። ምርጥ ምሳሌዎች የTwitter የተጠቃሚ ስሞች ወይም $ ለፋይናንስ ያካትታሉ።

---

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

እስከ 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*ለግቤት መጠኖች ተመሳሳይ ክፍሎችን ከግሪድ ሲስተም ይጠቀሙ ።

ተለዋጭ መጠኖች

እንዲሁም በፍርግርግ ላይ ካርታ የሌላቸው፣ ምላሽ ከሚሰጡ የሲኤስኤስ ቅጦች ጋር የማይጣጣሙ፣ ወይም ለተለያዩ የቁጥጥር ዓይነቶች (ለምሳሌ፣ inputከ select) ጋር የማይመሳሰሉ ክፍሎችን መጠቀም ይችላሉ።

አስቀድሞ የተዘጋጀ ጽሑፍ

@

አንዳንድ የእርዳታ ጽሑፍ ይኸውና

የተገጠመ ጽሑፍ

.00

ተጨማሪ የእገዛ ጽሑፍ ይኸውና።

አባሪ እና አስቀድመህ

$ .00

በአዝራር አባሪ

ሂድ!

ባለ ሁለት አዝራር አባሪ

ፈልግ አማራጮች

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

1 2 3

አመልካች ሳጥኖች

አማራጭ አንድ ይህ እና ያ ነው - ለምን ጥሩ እንደሆነ ማካተትዎን እርግጠኛ ይሁኑ አማራጭ ሁለትም ተረጋግጦ በቅጽ ውጤቶች ውስጥ ሊካተት ይችላል። አማራጭ ሶስት-አዎ፣ እንደገመቱት-እንዲሁም ተረጋግጦ በቅጽ ውጤቶች ውስጥ ሊካተት ይችላል።

ማሳሰቢያ ፡ ስያሜዎች ለትልቅ ጠቅታ ቦታዎች እና ለበለጠ ጥቅም ላይ ሊውል የሚችል ቅጽ ሁሉንም አማራጮች ይከብባሉ።

የሬዲዮ አዝራሮች

አማራጭ አንድ ይህ እና ያ ነው - ለምን ጥሩ እንደሆነ ማካተትዎን እርግጠኛ ይሁኑ አማራጭ ሁለት ጣሳ ሌላ ነገር ነው እና እሱን መምረጥ ምርጫ አንድን አይመርጥም።

ለውጦችን አስቀምጥ ሰርዝ

ለድርጊቶች አዝራሮች

እንደ ደንቡ፣ አዝራሮች ለድርጊቶች ብቻ ጥቅም ላይ መዋል ያለባቸው hyperlinks ለዕቃዎች ጥቅም ላይ መዋል አለባቸው። ለምሳሌ "አውርድ" አዝራር ሲሆን "የቅርብ ጊዜ እንቅስቃሴ" አገናኝ መሆን አለበት.

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

የአሳሽ ተኳኋኝነት ተሻገሩ

IE9 በተጠጋጋ ማዕዘኖች ላይ የጀርባ ቅልመትን አይከርምም፣ ስለዚህ እናስወግደዋለን። ተዛማጅ፣ IE9 የአካል ጉዳተኞችን buttonአባላትን ያከብራቸዋል፣ ይህም ጽሑፍ ግራጫ በማድረግ ልንጠግነው የማንችለው መጥፎ የጽሑፍ ጥላ።

በርካታ መጠኖች

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

ዋና ተግባር ድርጊት

ዋና ተግባር ድርጊት

ዋና ተግባር ድርጊት

የአካል ጉዳተኛ ሁኔታ

ለተሰናከሉ አዝራሮች፣ .disabledክፍሉን ወደ አገናኞች እና የንጥረ ነገሮች disabledባህሪ ያክሉ።<button>

ዋና አገናኝ አገናኝ

ዋና አዝራር አዝራር

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

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

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

አገናኝ አዝራር

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

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

• አዶ-መስታወት
• አዶ-ሙዚቃ
• አዶ-ፍለጋ
• አዶ-ፖስታ
• አዶ-ልብ
• አዶ-ኮከብ
• አዶ-ኮከብ-ባዶ
• አዶ-ተጠቃሚ
• አዶ-ፊልም
• አዶ - ትልቅ
• አዶ-th
• አዶ-th-ዝርዝር
• አዶ-እሺ
• አዶ - አስወግድ
• አዶ-ማጉላት
• አዶ-ማጉላት
• አዶ-ጠፍቷል
• አዶ-ምልክት
• አዶ-ኮግ
• አዶ-ቆሻሻ
• አዶ-ቤት
• አዶ-ፋይል
• አዶ-ጊዜ
• አዶ-መንገድ
• አዶ-ማውረጃ-alt
• አዶ-ማውረድ
• አዶ-መስቀል
• አዶ-የገቢ መልእክት ሳጥን
• አዶ-ጨዋታ-ክበብ
• አዶ-ድገም
• አዶ-አድስ
• አዶ-ዝርዝር-alt
• አዶ-መቆለፊያ
• አዶ-ባንዲራ
• አዶ-የጆሮ ማዳመጫዎች

• አዶ-ድምጽ-ጠፍቷል
• አዶ-ድምጽ-ወደታች
• አዶ-ድምጽ-ከፍ
• አዶ-qrcode
• አዶ-ባርኮድ
• አዶ-መለያ
• አዶ-መለያዎች
• አዶ-መጽሐፍ
• አዶ-ዕልባት
• አዶ-ማተም
• አዶ-ካሜራ
• አዶ-ቅርጸ-ቁምፊ
• አዶ-ደፋር
• አዶ-ኢታሊክ
• አዶ-ጽሑፍ-ቁመት
• አዶ-ጽሑፍ-ወርድ
• አዶ-አሰላለፍ-ግራ
• አዶ-አሰላለፍ-መሃል
• አዶ-አሰላለፍ-ቀኝ
• አዶ-align- justify
• አዶ-ዝርዝር
• አዶ-ገብ-ግራ
• አዶ-ገብ-ቀኝ
• አዶ-የፊት ጊዜ-ቪዲዮ
• አዶ-ሥዕል
• አዶ-እርሳስ
• አዶ-ካርታ-ማርከር
• አዶ-አስተካክል
• አዶ-ቀለም
• አዶ-አርትዕ
• አዶ-አጋራ
• አዶ-ቼክ
• አዶ-አንቀሳቅስ
• አዶ-ደረጃ-ወደ ኋላ
• አዶ-ፈጣን-ወደ ኋላ

• አዶ-ወደ ኋላ
• አዶ-መጫወት
• አዶ-አፍታ ማቆም
• አዶ-ማቆሚያ
• አዶ-ወደ ፊት
• አዶ-ፈጣን-ወደ ፊት
• አዶ-ደረጃ-ወደፊት
• አዶ-ማስወጣት
• አዶ-ቼቭሮን-ግራ
• አዶ-ቼቭሮን-ቀኝ
• አዶ-ፕላስ-ምልክት
• አዶ-መቀነስ-ምልክት
• አዶ-ማስወገድ-ምልክት
• አዶ-እሺ-ምልክት
• አዶ-ጥያቄ-ምልክት።
• አዶ-መረጃ-ምልክት።
• አዶ-ቅጽበታዊ ገጽ እይታ
• አዶ-ማስወገድ-ክበብ
• አዶ-እሺ-ክበብ
• አዶ-ባን-ክበብ
• አዶ-ቀስት-ግራ
• አዶ-ቀስት-ቀኝ
• አዶ-ቀስት-ወደ ላይ
• አዶ-ቀስት-ወደታች
• አዶ-share-alt
• አዶ-መጠን-ሙሉ
• አዶ-መጠን-ትንሽ
• አዶ-ፕላስ
• አዶ-መቀነስ
• አዶ-ኮከብ
• አዶ - አጋኖ - ምልክት
• አዶ-ስጦታ
• አዶ-ቅጠል
• አዶ-እሳት
• አዶ-ዓይን-ክፍት

• አዶ-ዓይን-ቅርብ
• አዶ-ማስጠንቀቂያ-ምልክት
• አዶ-አውሮፕላን
• አዶ - የቀን መቁጠሪያ
• አዶ- በዘፈቀደ
• አዶ-አስተያየት
• አዶ-ማግኔት
• አዶ-ቼቭሮን-አፕ
• አዶ-ቼቭሮን-ታች
• አዶ-retweet
• አዶ-ግዢ-ጋሪ
• አዶ-አቃፊ-ቅርብ
• አዶ-አቃፊ-ክፍት
• አዶ-መጠን-አቀባዊ
• አዶ-መጠን-አግድም
• አዶ-ኤችዲዲ
• አዶ-ቡልሆርን
• አዶ-ደወል
• አዶ-የምስክር ወረቀት
• አዶ-አውራ ጣት-እስከ
• አዶ-አውራ ጣት-ወደታች
• አዶ-እጅ-ቀኝ
• አዶ-እጅ-ግራ
• አዶ-እጅ-ወደላይ
• አዶ-እጅ-ወደታች
• አዶ-ክበብ-ቀስት-ቀኝ
• አዶ-ክበብ-ቀስት-ግራ
• አዶ-ክበብ-ቀስት-ወደ ላይ
• አዶ-ክበብ-ቀስት-ወደታች
• አዶ-ግሎብ
• አዶ-መፍቻ
• አዶ-ተግባራት
• አዶ-ማጣሪያ
• አዶ-አጭር
• አዶ-ሙሉ ማያ

እንደ sprite የተሰራ

እያንዳንዱን አዶ ተጨማሪ ጥያቄ ከማቅረብ ይልቅ በአንድ ፋይል ውስጥ ያሉ ምስሎችን ወደ sprite አጠናቅረናቸዋል - በአንድ ፋይል ውስጥ ምስሎቹን ለማስቀመጥ CSS background-position. ይህ በTwitter.com ላይ የምንጠቀመው ተመሳሳይ ዘዴ ነው እና ለእኛ ጥሩ ሆኖ አገልግሏል።

ሁሉም የአዶ መደቦች ልክ .icon-እንደሌሎች ክፍሎቻችን ለትክክለኛው የስም አወጣጥ እና ወሰን ቅድመ ቅጥያ ተሰጥቷቸዋል። ይህ ከሌሎች መሳሪያዎች ጋር ግጭቶችን ለማስወገድ ይረዳል.

በሰነዶቹ ውስጥ አገናኝ እና ክሬዲት እስከሰጠን ድረስ Glyphicons በእኛ የክፍት ምንጭ መሣሪያ ስብስብ ውስጥ ያለውን Halflings እንድንጠቀም ሰጥቶናል። እባክዎ በፕሮጀክቶችዎ ውስጥ ተመሳሳይ ነገር ለማድረግ ያስቡበት።

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

<i>ቡትስትራፕ ለሁሉም አዶዎች መለያ ይጠቀማል ፣ነገር ግን ምንም አይነት መያዣ ክፍል የላቸውም—የተጋራ ቅድመ ቅጥያ ብቻ። ለመጠቀም የሚከተለውን ኮድ በማንኛውም ቦታ ያስቀምጡ፡

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

ከአንድ ተጨማሪ ክፍል ጋር ተዘጋጅተው ለተገለበጠ (ነጭ) አዶዎችም ቅጦች አሉ።

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

ለአዶዎችዎ የሚመርጡት 120 ክፍሎች አሉ። ልክ ከትክክለኛዎቹ ክፍሎች ጋር መለያ ያክሉ <i>እና ተዘጋጅተዋል። ሙሉውን ዝርዝር በ sprites.less ወይም እዚሁ ሰነድ ውስጥ ማግኘት ይችላሉ።

ቀና በል! እንደ አዝራሮች ወይም ናቭ ማገናኛዎች ከጽሑፍ ሕብረቁምፊዎች ጎን ሲጠቀሙ፣ <i>ከመለያው በኋላ ለትክክለኛው ክፍተት ቦታ መተውዎን ያረጋግጡ።

ጉዳዮችን ተጠቀም

አዶዎች በጣም ጥሩ ናቸው, ግን አንድ ሰው የት ሊጠቀምባቸው ይችላል? ጥቂት ሃሳቦች እነኚሁና፡

• ለእርስዎ የጎን አሞሌ አሰሳ እንደ ምስሎች
• በንፁህ አዶ ለሚመራ አሰሳ
• የአንድን ድርጊት ትርጉም ለማስተላለፍ የሚረዱ አዝራሮች
• በተጠቃሚ መድረሻ ላይ አውድ ለማጋራት አገናኞች

በመሠረቱ፣ የትም ቦታ ላይ <i>መለያ ማድረግ፣ አዶ ማስቀመጥ ይችላሉ።

አድስ ጨርሰህ ውጣ ሰርዝ

አስተያየት ቅንብሮች ተጨማሪ መረጃ

የ ኢሜል አድራሻ