መሠረት CSS

ከስካፎልዲንግ አናት ላይ፣ አዲስ፣ ወጥ የሆነ መልክ እና ስሜት ለማቅረብ መሰረታዊ የኤችቲኤምኤል አባሎች በቅጥ ተዘጋጅተው ሊወጡ በሚችሉ ክፍሎች ተሻሽለዋል።

ርዕሶች እና የሰውነት ቅጂ

የትየባ ልኬት

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

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

የአካል ጽሑፍ ምሳሌ

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

የእርሳስ አካል ቅጂ

በማከል አንድ አንቀጽ ጎልቶ እንዲታይ ያድርጉ .lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor። Duis mollis፣ est non commodo luctus።

h1. ርዕስ 1

h2. ርዕስ 2

h3. ርዕስ 3

h4. ርዕስ 4

h5. ርዕስ 5
h6. ርዕስ 6

አጽንዖት, አድራሻ እና ምህጻረ ቃል

ንጥረ ነገር አጠቃቀም አማራጭ
<strong> የጽሑፍ ቅንጣቢን ከአስፈላጊ ጋር ለማጉላት ምንም
<em> ከጭንቀት ጋር ቅንጭብ ጽሑፍን ለማጉላት ምንም
<abbr> የተስፋፋውን እትም በማንዣበብ ላይ ለማሳየት ምህጻረ ቃላትን እና ምህጻረ ቃላትን ያጠቃልላል

ለሰፋ ጽሑፍ አማራጭ titleባህሪን ያካትቱ

.initialismለትላልቅ ፊደላት አህጽሮተ ቃላት ተጠቀም ።
<address> ለቅርብ ቅድመ አያቱ ወይም ለመላው የስራ አካል የመገኛ መረጃ ለማግኘት ሁሉንም መስመሮች በመጨረስ ቅርጸትን ያስቀምጡ<br>

አጽንዖት በመጠቀም

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> ከሌላ ምንጭ ይዘትን ለመጥቀስ አግድ-ደረጃ አካል

citeየምንጭ ዩአርኤል መገለጫ ባህሪን ያክሉ

ለተንሳፈፉ አማራጮች ተጠቀም .pull-leftእና ክፍሎች.pull-right
<small> ተጠቃሚን የሚያይ ጥቅስ ለማከል አማራጭ አካል፣በተለይ የስራ ርዕስ ያለው ደራሲ <cite>በርዕሱ ዙሪያ ወይም የምንጭ ስም ያስቀምጡ

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

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

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat እና ante venenatis። </p>
  3. <ትንሽ> ታዋቂ ሰው </small>
  4. </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.

አግድም መግለጫ

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

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

መሰረታዊ እገዳ

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

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

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

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

ጎግል ቆንጆ

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

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

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

የሠንጠረዥ ምልክት ማድረጊያ

መለያ መግለጫ
<table> መረጃን በሰንጠረዥ ቅርጸት ለማሳየት የመጠቅለያ አካል
<thead> <tr>የጠረጴዛ ዓምዶችን ለመሰየም የጠረጴዛ ራስጌ ረድፎች () መያዣ አባል
<tbody> <tr>በጠረጴዛው አካል ውስጥ ለጠረጴዛ ረድፎች ( ) መያዣ አካል
<tr> በአንድ ረድፍ ላይ ለሚታየው የሰንጠረዥ ሴሎች ስብስብ ( <td>ወይም ) መያዣ አካል<th>
<td> ነባሪ የጠረጴዛ ሕዋስ
<th> ልዩ የሰንጠረዥ ሕዋስ ለአምድ (ወይም ረድፍ፣ እንደ ስፋት እና አቀማመጥ) መለያዎች
በ ውስጥ ጥቅም ላይ መዋል አለባቸው<thead>
<caption> ሠንጠረዡ ምን እንደሚይዝ መግለጫ ወይም ማጠቃለያ፣ በተለይም ለስክሪን አንባቢዎች ጠቃሚ
  1. <ጠረጴዛ>
  2. <ርዕስ>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </ thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </ ሠንጠረዥ>

የጠረጴዛ አማራጮች

ስም ክፍል መግለጫ
ነባሪ ምንም ምንም ቅጦች የሉም፣ አምዶች እና ረድፎች ብቻ
መሰረታዊ .table በረድፎች መካከል አግድም መስመሮች ብቻ
ተወስኗል .table-bordered ጠርዞቹን ያዞራል እና የውጪውን ድንበር ይጨምራል
የዜብራ-ጭረት .table-striped ፈካ ያለ ግራጫ የጀርባ ቀለም ወደ ያልተለመዱ ረድፎች (1፣ 3፣ 5፣ ወዘተ) ያክላል
የታመቀ .table-condensed ቀጥ ያለ ንጣፍ ከ 8 ፒክስል እስከ 4 ፒክስል በሁሉም tdእና በንጥረ thነገሮች ውስጥ በግማሽ ይቀንሳል

ምሳሌ ሠንጠረዦች

1. ነባሪ የጠረጴዛ ቅጦች

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

  1. <table class = "ጠረጴዛ" >
  2. </ ሠንጠረዥ>
# የመጀመሪያ ስም ያባት ስም የተጠቃሚ ስም
1 ምልክት ያድርጉ ኦቶ @mdo
2 ያዕቆብ እሾህ @ ስብ
3 ላሪ ወፉ @twitter

2. የተጣራ ጠረጴዛ

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

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

  1. <table class = "በጠረጴዛ የተሰነጠቀ" >
  2. </ ሠንጠረዥ>
# የመጀመሪያ ስም ያባት ስም የተጠቃሚ ስም
1 ምልክት ��ድርጉ ኦቶ @mdo
2 ያዕቆብ እሾህ @ ስብ
3 ላሪ ወፉ @twitter

3. የድንበር ጠረጴዛ

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

  1. <table class = "ጠረጴዛ ድንበር" >
  2. </ ሠንጠረዥ>
# የመጀመሪያ ስም ያባት ስም የተጠቃሚ ስም
1 ምልክት ያድርጉ ኦቶ @mdo
ምልክት ያድርጉ ኦቶ @getbootstrap
2 ያዕቆብ እሾህ @ ስብ
3 ላሪ ወፍ @twitter

4. የታመቀ ጠረጴዛ

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

  1. <table class = "ጠረጴዛ-የተጨመቀ" >
  2. </ ሠንጠረዥ>
# የመጀመሪያ ስም ያባት ስም የተጠቃሚ ስም
1 ምልክት ያድርጉ ኦቶ @mdo
2 ያዕቆብ እሾህ @ ስብ
3 ላሪ ወፍ @twitter

5. ሁሉንም ያጣምሩ!

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

  1. <table class = "በጠረጴዛ የተሰነጠቀ ጠረጴዚ-የጠረጠረ ጠረጴዚ" >
  2. ...
  3. </ ሠንጠረዥ>
ሙሉ ስም
# የመጀመሪያ ስም ያባት ስም የተጠቃሚ ስም
1 ምልክት ያድርጉ ኦቶ @mdo
2 ያዕቆብ እሾህ @ ስብ
3 ላሪ ወፍ @twitter

ተለዋዋጭ HTML እና CSS

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

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

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

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

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

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

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

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

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

አራት ዓይነት ቅጾች

Bootstrap ለአራት የተለመዱ የድር ቅጾች ቀላል ማርክ እና ቅጦችን ያቀርባል።

ስም ክፍል መግለጫ
አቀባዊ (ነባሪ) .form-vertical (ግዴታ አይደለም) የተቆለሉ፣ በግራ የተሰለፉ መለያዎች በመቆጣጠሪያዎች ላይ
በአግባቡ .form-inline በግራ የተሰለፈ መሰየሚያ እና የመስመር ውስጥ-ብሎክ ቁጥጥሮች ለታመቀ ዘይቤ
ፈልግ .form-search ለተለመደ የፍለጋ ውበት ተጨማሪ-የተጠጋጋ የጽሑፍ ግቤት
አግድም .form-horizontal ከመቆጣጠሪያዎች ጋር በተመሳሳይ መስመር ላይ በግራ፣ በቀኝ የተሰለፉ መለያዎች ተንሳፈፉ

የቅጽ መቆጣጠሪያዎችን በመጠቀም የምሳሌ ቅጾች ፣ ምንም ተጨማሪ ምልክት የለም።

መሰረታዊ ቅፅ

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

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

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

የፍለጋ ቅጽ

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

  1. <form class = "በደንብ ቅፅ ፍለጋ" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > ፈልግ </button>
  4. </ form>

የመስመር ውስጥ ቅጽ

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

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" ቦታ ያዥ = "ኢሜል" >
  3. <input type = "password" class = "input-small" ቦታ ያዥ = "የይለፍ ቃል" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > አስታውሰኝ::
  6. </ label>
  7. <button type = "submit" class = "btn" > ይግቡ </button>
  8. </ form>

አግድም ቅርጾች

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

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

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

ምሳሌ ምልክት ማድረግ

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

  1. <form class = "ቅጽ-አግድም" >
  2. <fieldset>
  3. አፈ ታሪክ ጽሑፍ </legend>
  4. <div class = "ቁጥጥር-ቡድን" >
  5. <label class = "control-label" = "input01" > የጽሑፍ ግቤት </label>
  6. <div class = "መቆጣጠሪያዎች" >
  7. <የግብአት አይነት = "ጽሑፍ" ክፍል = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > የድጋፍ ጽሑፍ </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </ form>

የቅጽ ቁጥጥር ግዛቶች

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


የቅጽ ማረጋገጫ

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

  1. < የመስክ ስብስብ
  2. ክፍል = "የቁጥጥር ቡድን ስህተት" >
  3. </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">ከግቤት ኤለመንት በኋላ የእገዛ ጽሁፍ ማገድን ያካትቱ።

.span*ለግቤት መጠኖች ተመሳሳይ ክፍሎችን ከግሪድ ሲስተም ይጠቀሙ ።

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

@

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

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

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

አዝራር ክፍል = "" መግለጫ
btn መደበኛ ግራጫ አዝራር ከግራዲየንት ጋር
btn btn-primary ተጨማሪ የእይታ ክብደትን ያቀርባል እና በአዝራሮች ስብስብ ውስጥ ዋናውን ተግባር ይለያል
btn btn-info ለነባሪ ቅጦች እንደ አማራጭ ጥቅም ላይ ይውላል
btn btn-success የተሳካ ወይም አዎንታዊ እርምጃን ያመለክታል
btn btn-warning በዚህ እርምጃ ጥንቃቄ መደረግ እንዳለበት ያመለክታል
btn btn-danger አደገኛ ወይም እምቅ አሉታዊ እርምጃን ያመለክታል
btn btn-inverse ተለዋጭ ጥቁር ግራጫ አዝራር፣ ከትርጉም ድርጊት ወይም አጠቃቀም ጋር ያልታሰረ

ለድርጊቶች አዝራሮች

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

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

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

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

በርካታ መጠኖች

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


የአካል ጉዳተኛ ሁኔታ

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

ዋና አገናኝ አገናኝ

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

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

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

አገናኝ
  1. <a class = "btn" href = "" > አገናኝ </a>
  2. <button class = "btn" type = "ማስረከብ" >
  3. አዝራር
  4. </button>
  5. <የግቤት ክፍል = "btn" አይነት = "አዝራር"
  6. እሴት = "ግቤት" >
  7. <ግቤት ክፍል = "btn" አይነት = "አስረክብ"
  8. እሴት = "አስረክብ" >

እንደ ምርጥ ልምምድ፣ የአሳሽ አቋራጭ መመሳሰልን ለማረጋገጥ ከአንተ አውድ ጋር ለማዛመድ ሞክር። አንድ ካለዎት ለ አዝራርዎ 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>ቡትስትራፕ ለሁሉም አዶዎች መለያ ይጠቀማል ፣ነገር ግን ምንም አይነት መያዣ ክፍል የላቸውም—የተጋራ ቅድመ ቅጥያ ብቻ። ለመጠቀም የሚከተለውን ኮድ በማንኛውም ቦታ ያስቀምጡ፡

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

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

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

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

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

ጉዳዮችን ተጠቀም

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

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

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

ምሳሌዎች

ለመሳሪያ አሞሌ፣ አሰሳ ወይም ቀድሞ የተሰሩ የቅጽ ግብዓቶች በአዝራሮች፣ የአዝራር ቡድኖች ውስጥ ይጠቀሙባቸው።