የትየባ ልኬት

ሙሉው የፊደል አጻጻፍ ፍርግርግ በእኛ ተለዋዋጮች ውስጥ በሁለት ትናንሽ ተለዋዋጮች ላይ የተመሠረተ ነው። ያለ ፋይል @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>መለያውን እንዴት መጠቀም እንደሚቻል ሁለት ምሳሌዎች እነሆ ።

ምሳሌ ምህጻረ ቃላት

አህጽሮተ ቃላት በአቢይ ሆሄ ጽሁፍ እና በቀላል ነጠብጣብ የታችኛው ድንበር ተዘጋጅተዋል። ተጠቃሚዎች በማንዣበብ ላይ የሆነ ነገር እንዲታይ ተጨማሪ ማሳያ እንዲኖራቸው በማንዣበብ ላይ የእገዛ ጠቋሚ አላቸው።

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

ባህሪ የሚለው ቃል ምህጻረ ቃል 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 libero 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 libero 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.

በአግባቡ

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

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

መሰረታዊ እገዳ

<pre>ለብዙ የኮድ መስመሮች ተጠቀም ። ለትክክለኛው አተረጓጎም ማናቸውንም እንክብካቤዎች ወደ ዩኒኮድ ቁምፊዎች መቀየርዎን እርግጠኛ ይሁኑ።

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

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

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

ጎግል ቆንጆ

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

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

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

ጉግል-ኮድ-ማሳመር ያውርዱ እና እንዴት እንደሚጠቀሙበት Readme ይመልከቱ።

<ጠረጴዛ>
  <ርዕስ>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </ thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</ ሠንጠረዥ>

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

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

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

ማሳሰቢያ ፡ የተበተኑ ጠረጴዛዎች የ :nth-childCSS መምረጡን ይጠቀማሉ እና በIE7-IE8 ውስጥ የለም።

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

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

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

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

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

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

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

ተለዋዋጭ HTML እና CSS

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

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

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

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

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

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

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

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

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

በv2.0፣ ለቅጽ ቅጦች ቀላል እና ብልህ ነባሪዎች አሉን። ምንም ተጨማሪ ምልክት የለም፣ ልክ መቆጣጠሪያዎችን ይፍጠሩ።

ነባሪ የWebKit ቅጦችን በማንፀባረቅ፣ .form-searchለተጨማሪ የተጠጋጋ የፍለጋ መስኮች ያክሉ።

ግብዓቶች ለመጀመር የማገጃ ደረጃ ናቸው። ለ .form-inlineእና .form-horizontal፣ የውስጠ-መስመር ብሎክን እንጠቀማለን።

ምን ይካተታል።

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

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

አዲስ ነባሪዎች ከ v2.0 ጋር

እስከ v1.4፣ የBootstrap ነባሪ የቅጽ ቅጦች አግድም አቀማመጥን ተጠቅመዋል። በBootstrap 2፣ ለማንኛውም ቅፅ የበለጠ ብልህ፣ የበለጠ ሊለወጡ የሚችሉ ነባሪዎች እንዲኖረን ገደቡን አስወግደናል።

እንደገና የተነደፈ የአሳሽ ግዛቶች

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

የቅጽ ማረጋገጫ

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

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

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

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

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

እስከ v1.4 ድረስ፣ Bootstrap ለመቆለል በአመልካች ሳጥኖች እና በራዲዮዎች ዙሪያ ተጨማሪ ምልክት ማድረግን ይጠይቃል። <label class="checkbox">አሁን፣ የሚጠቅመውን መድገም ቀላል ነው <input type="checkbox">።

የመስመር ውስጥ አመልካች ሳጥኖች እና ራዲዮዎች እንዲሁ ይደገፋሉ። .inlineበቀላሉ ወደ ማንኛውም ያክሉ .checkboxወይም .radioጨርሰዋል።

የመስመር ውስጥ ቅጾች እና አባሪ/አስቀድመው

ግብዓቶችን በውስጠ-መስመር ቅጽ ለመጠቀም፣ .add-onእና inputበተመሳሳይ መስመር ላይ፣ ያለ ክፍተቶች ማስቀመጥዎን ያረጋግጡ።

የእገዛ ጽሑፍ ቅፅ

ለቅጽ ግብዓቶችዎ የእገዛ ጽሁፍ ለማከል፣ ከውስጥ መስመር የእርዳታ ጽሁፍ ጋር <span class="help-inline">ወይም <p class="help-block">ከግቤት ኤለመንት በኋላ የእገዛ ጽሁፍ ማገድን ያካትቱ።

ለድርጊቶች አዝራሮች

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

ለመልህቆች እና ቅጾች

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

ማሳሰቢያ:.btn ሁሉም አዝራሮች ክፍሉን ማካተት አለባቸው . <button>የአዝራር ዘይቤዎች ለጽንሰ-ሃሳብ እና <a>አካላት መተግበር አለባቸው ።

በርካታ መጠኖች

ትልልቅ ወይም ትንሽ አዝራሮች ይፈልጋሉ? ይኑርዎት!

ዋና ተግባር ድርጊት

ዋና ተግባር ድርጊት

የአካል ጉዳተኛ ሁኔታ

ለተሰናከሉ አዝራሮች፣ ለአገናኞች .btn-disabledእና ለአካላት ይጠቀሙ ።:disabled<button>

ዋና ተግባር ድርጊት

ዋና ተግባር ድርጊት

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

በIE9 ውስጥ፣ IE9 የበስተጀርባ ድግግሞሾችን ወደ ማእዘኖቹ ስለማይሰበስብ ቅልመትን በሁሉም አዝራሮች ላይ እናስቀምጠዋለን።

ተዛማጅ፣ IE9 የአካል ጉዳተኞችን buttonአባላትን ያቃልላል፣ ጽሑፍ ግራጫ በሚያሳየው የጽሑፍ ጥላ - እንደ አለመታደል ሆኖ ይህንን ማስተካከል አንችልም።

እንደ sprite የተሰራ

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

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

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

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

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

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

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

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

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

ጉዳዮችን ተጠቀም

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

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

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

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

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