මුද්‍රණ පරිමාණය

සම්පූර්ණ මුද්‍රණ ජාලකය පදනම් වී ඇත්තේ අපගේ variables.less ගොනුවේ අඩු විචල්‍ය දෙකක් මත ය: @baseFontSizeසහ @baseLineHeight. පළමුවැන්න පුරාවට භාවිතා කරන මූලික අකුරු ප්‍රමාණය වන අතර දෙවැන්න මූලික රේඛා-උස වේ.

අපගේ සියලු වර්ගවල මායිම්, පිරවුම් සහ රේඛා-උස සහ තවත් බොහෝ දේ නිර්මාණය කිරීමට අපි එම විචල්‍යයන් සහ සමහර ගණිතය භාවිතා කරමු.

ආදර්ශ පාඨය

Nullam quis risus eget urna mollis ornare vel eu leo. සමාජීය නැටෝක් පෙනාටිබස් සහ මැග්නිස් ඩිස් පාචූරියන්ට් මොන්ටෙස්, නස්කෙටූර් රිඩිකුලස් මුස්. 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 sed odio dui.

අවධාරණය භාවිතා කිරීම

Fusce dapibus , Telus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra ague.

සටහන:<b> HTML5 භාවිතා කිරීමට නිදහස් <i>වන්න, නමුත් ඔවුන්ගේ භාවිතය ටිකක් වෙනස් වී ඇත. වැඩි වශයෙන් කටහඬ, තාක්ෂණික පද ආදිය සඳහා වන <b>අතර අමතර වැදගත්කමක් නොදක්වා වචන හෝ වාක්‍ය ඛණ්ඩ ඉස්මතු කිරීමට අදහස් කෙරේ .<i>

උදාහරණ ලිපින

<address>ටැගය භාවිතා කළ හැකි ආකාරය පිළිබඳ උදාහරණ දෙකක් මෙන්න :

උදාහරණ කෙටි යෙදුම්

කෙටි යෙදුම් විශාල අකුරු සහ සැහැල්ලු තිත් සහිත පහළ මායිමකින් හැඩගස්වා ඇත. ඔවුන්ට hover මත උදවු කර්සරයක් ද ඇත, එබැවින් පරිශීලකයින්ට hover මත යමක් පෙන්වනු ඇති බවට අමතර ඇඟවීමක් ඇත.

HTML යනු පෙති කපන ලද පාන් වලින් හොඳම දෙයයි.

attribute යන වචනයේ කෙටි යෙදුම attr වේ.

වාරණ උපුටා දැක්වීමක් ඇතුළත් කිරීමට, <blockquote>ඕනෑම HTML එකක් උද්ධෘතය ලෙස ඔතා ගන්න . සෘජු උපුටා දැක්වීම් සඳහා අපි නිර්දේශ කරමු a <p>.

ඔබේ මූලාශ්‍රය උපුටා දැක්වීමට විකල්ප අංගයක් ඇතුළත් කරන්න, එවිට ඔබට මෝස්තර කිරීමේ අරමුණු සඳහා එයට පෙර <small>em dash එකක් ලැබෙනු ඇත .—

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. පූර්ව වෙනිනාටිස් සමඟ පූර්ණ සංඛ්යා. </p>
  <small> ප්‍රසිද්ධ කෙනෙක් </small>
</blockquote>

පෙරනිමි වාරණ උපුටා දැක්වීම් මෙලෙස හැඩගස්වා ඇත:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. පූර්ව වෙනිනාටිස් සමඟ පූර්ණ සංඛ්යා.

බොඩි ඔෆ් වර්ක් එකේ ප්‍රසිද්ධ කෙනෙක්

ඔබගේ වාරණ උද්ධෘතය දකුණට පාවීමට, එක් කරන්න class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. පූර්ව වෙනිනාටිස් සමඟ පූර්ණ සංඛ්යා.

බොඩි ඔෆ් වර්ක් එකේ ප්‍රසිද්ධ කෙනෙක්

ඇණවුම් නොකළ

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Massa සහ integer molestie lorem
• pretium nisl aliquet හි පහසුකම
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet nunc
• Eget porttitor lorem

මෝස්තර නොකළ

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Massa සහ integer molestie lorem
• pretium nisl aliquet හි පහසුකම
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet nunc
• Eget porttitor lorem

ඇණවුම් කළා

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Massa සහ integer molestie lorem
4. pretium nisl aliquet හි පහසුකම
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet nunc
8. Eget porttitor lorem

විස්තර

<dl>

විස්තර ලැයිස්තු

නියමයන් නිර්වචනය කිරීම සඳහා විස්තර ලැයිස්තුවක් පරිපූර්ණයි.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada Magna mollis euismod.

පෙළට

සමඟින් පේළිගත කේත කොටස් ඔතා <code>.

උදාහරණයක් ලෙස , <code> කොටස </ code > පේළිගත ලෙස ඔතා තිබිය යුතුය .  

මූලික බ්ලොක්

<pre>කේත පේළි කිහිපයක් සඳහා භාවිතා කරන්න . නිසි විදැහුම්කරණය සඳහා ඕනෑම Carets ඔවුන්ගේ යුනිකෝඩ් අක්ෂර බවට පත් කිරීමට වග බලා ගන්න.

<p>සාම්පල පෙළ මෙතැනින්...</p>

<පෙර>
  <p>සාම්පල පෙළ මෙතනින්...</p>
</pre>

සටහන: ටැග් තුළ කේතය <pre>හැකිතාක් වමට සමීපව තබා ගැනීමට වග බලා ගන්න; එය සියලු ටැබ් ලබා දෙනු ඇත.

Google Prettify

එකම <pre>මූලද්‍රව්‍යය ගෙන වැඩි දියුණු කළ විදැහුම්කරණය සඳහා විකල්ප පන්ති දෙකක් එක් කරන්න.

<p> නියැදි පෙළ මෙතනින්... </p>

<pre class = "pretyprint 
     linenums" >
  <p>සාම්පල පෙළ මෙතනින්...</p>
</pre>

google-code-prettify බාගත කර භාවිතා කරන ආකාරය සඳහා readme බලන්න.

<වගුව>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</ වගුව>

කියවීමේ හැකියාව සහතික කිරීමට සහ ව්‍යුහය පවත්වා ගැනීමට වගු ස්වයංක්‍රීයව මායිම් කිහිපයකින් පමණක් හැඩගස්වා ඇත. 2.0 සමඟ, .tableපන්තිය අවශ්ය වේ.

<මේස පන්තිය = "වගුව" > 
  …
</ වගුව>

සීබ්‍රා-ඉරි එකතු කිරීමෙන් ඔබේ වගු සමඟ ටිකක් අලංකාර වන්න- .table-stripedපංතිය එක් කරන්න.

සටහන: Sprited වගු :nth-childCSS තේරීම්කාරකය භාවිතා කරන අතර IE7-IE8 හි නොමැත.

<table class = "මේස ඉරි සහිත" > 
  …
</ වගුව>

සෞන්දර්යාත්මක අරමුණු සඳහා සම්පූර්ණ මේසය වටා මායිම් සහ වටකුරු කොන් එකතු කරන්න.

<table class = "table-bordered" > 
  …
</ වගුව>

.table-condensedමේස සෛල පිරවුම අඩකින් (8px සිට 4px දක්වා) කැපීමට පන්තිය එක් කිරීමෙන් ඔබේ වගු වඩාත් සංයුක්ත කරන්න .

<table class = "table-condensed" > 
  …
</ වගුව>

පවතින ඕනෑම පන්තියක් භාවිතා කිරීමෙන් විවිධ පෙනුමක් ලබා ගැනීම සඳහා ඕනෑම වගු පන්ති ඒකාබද්ධ කිරීමට නිදහස් වන්න.

<table class = "මේස-ඉරි සහිත වගු-මායිම් සහිත වගුව-ඝණීකෘත" > 
  ...
</ වගුව>

නම්‍යශීලී HTML සහ CSS

Bootstrap හි ඇති පෝරම පිළිබඳ හොඳම කොටස නම්, ඔබ ඔබේ සලකුණු කිරීමේදී ඒවා ගොඩනඟන ආකාරය කුමක් වුවත්, ඔබගේ සියලු යෙදවුම් සහ පාලනයන් විශිෂ්ට ලෙස පෙනෙනු ඇත. අනවශ්‍ය HTML අවශ්‍ය නොවේ, නමුත් අවශ්‍ය අය සඳහා අපි රටා සපයන්නෙමු.

වඩාත් සංකීර්ණ පිරිසැලසුම් පහසු හැඩගැන්වීම් සහ සිදුවීම් බන්ධනය සඳහා සංක්ෂිප්ත සහ පරිමාණය කළ හැකි පන්ති සමඟ පැමිණේ, එබැවින් ඔබ සෑම පියවරකදීම ආවරණය වේ.

පිරිසැලසුම් හතරක් ඇතුළත් වේ

Bootstrap ආකෘති පිරිසැලසුම් වර්ග හතරක් සඳහා සහය දක්වයි:

• සිරස් (පෙරනිමි)
• සොයන්න
• පෙළට
• තිරස්

විවිධ ආකාරයේ ආකෘති පිරිසැලසුම් සලකුණු කිරීම සඳහා යම් යම් වෙනස්කම් අවශ්‍ය වේ, නමුත් පාලනයන්ම පවතින අතර එලෙසම හැසිරේ.

පාලන තත්වයන් සහ තවත් දේ

Bootstrap හි ආකෘති වලට ආදානය, textarea, සහ ඔබ අපේක්ෂා කරන තේරීම වැනි සියලුම මූලික ආකෘති පාලන සඳහා මෝස්තර ඇතුළත් වේ. නමුත් එය ඇමුණුම් සහ පෙර සැකසූ ආදාන සහ පිරික්සුම් කොටු ලැයිස්තු සඳහා සහය වැනි අභිරුචි සංරචක ගණනාවක් සමඟ ද පැමිණේ.

එක් එක් ආකාරයේ පෝරම පාලනය සඳහා දෝෂ, අනතුරු ඇඟවීම සහ සාර්ථකත්වය වැනි රාජ්‍යයන් ඇතුළත් වේ. ආබාධිත පාලන සඳහා මෝස්තර ද ඇතුළත් වේ.

v2.0 සමඟින්, ආකෘති මෝස්තර සඳහා අපට සැහැල්ලු සහ වඩා හොඳ පෙරනිමි ඇත. අමතර සලකුණු නොමැත, පෝරම පාලනයන් පමණි.

පෙරනිමි WebKit මෝස්තර පිළිබිඹු කරමින්, .form-searchඅමතර වටකුරු සෙවුම් ක්ෂේත්‍ර සඳහා එක් කරන්න.

ආදාන ආරම්භ කිරීමට වාරණ මට්ටම වේ. .form-inlineසහ සඳහා .form-horizontal, අපි inline-block භාවිතා කරමු.

ඇතුළත් දේ

වම් පසින් පෙන්වා ඇත්තේ අප සහාය දක්වන සියලුම පෙරනිමි පෝරම පාලන වේ. මෙන්න බුලටිත ලැයිස්තුව:

• පෙළ ආදාන (පෙළ, මුරපදය, ඊමේල්, ආදිය)
• පිරික්සුම් කොටුව
• ගුවන් විදුලි
• තෝරන්න
• බහු තේරීම
• ගොනු ආදානය
• textarea

v2.0 සමඟ නව පෙරනිමි

v1.4 දක්වා, Bootstrap හි පෙරනිමි ආකෘති විලාසයන් තිරස් පිරිසැලසුම භාවිතා කරයි. Bootstrap 2 සමඟින්, ඕනෑම පෝරමයක් සඳහා වඩා හොඳ, වඩා පරිමාණය කළ හැකි පෙරනිමියන් තිබීම සඳහා අපි එම සීමාව ඉවත් කළෙමු.

ප්‍රතිනිර්මාණය කරන ලද බ්‍රවුසරය ප්‍රකාශ කරයි

disabledබූට්ස්ට්‍රැප් බ්‍රවුසරයට සහය දක්වන නාභිගත සහ ප්‍රාන්ත සඳහා විලාස දක්වයි . අපි පෙරනිමි Webkit ඉවත් කර outlineඑහි box-shadowස්ථානයේ :focus.

පෝරමය වලංගු කිරීම

දෝෂ, අනතුරු ඇඟවීම් සහ සාර්ථකත්වය සඳහා වලංගුකරණ විලාස ද එයට ඇතුළත් ය. භාවිතා කිරීමට, වටපිටාවට දෝෂ පන්තිය එක් කරන්න .control-group.

<ෆීල්ඩ්සෙට්
  class = "පාලක කණ්ඩායම් දෝෂය" >
  …
</fieldset>

ආදාන පෙර සහ එකතු කරන්න

ආදාන කණ්ඩායම්-ඇමිණූ හෝ පෙර පෙළ සහිත-ඔබගේ යෙදවුම් සඳහා වැඩි සන්දර්භයක් ලබා දීමට පහසු ක්‍රමයක් සපයයි. ට්විටර් පරිශීලක නාමයන් සඳහා @ ලකුණ හෝ මූල්‍ය සඳහා $ වැනි විශිෂ්ට උදාහරණ ඇතුළත් වේ.

පිරික්සුම් පෙට්ටි සහ ගුවන් විදුලි

v1.4 දක්වා, Bootstrap ඒවා ගොඩගැසීමට පිරික්සුම් කොටු සහ රේඩියෝ වටා අමතර සලකුණු කිරීම අවශ්‍ය විය. දැන්, එය ආවරණය කරන දේ නැවත නැවත කිරීම සරල <label class="checkbox">කාරණයකි <input type="checkbox">.

පේළිගත පිරික්සුම් කොටු සහ රේඩියෝ ද සහාය දක්වයි. .inlineඕනෑම දෙයකට එකතු කරන්න .checkboxහෝ .radioඔබ ඉවරයි.

පේළිගත පෝරම සහ ඇමුණුම්/පෙර කරන්න

පේළිගත පෝරමයක පෙරනිමිති හෝ එකතු කිරීමේ යෙදවුම් භාවිතා කිරීමට , හිස්තැන් නොමැතිව එකම පේළියක තැබීමට වග .add-onබලා ගන්න.input

පෝරමය උපකාරක පෙළ

ඔබේ පෝරම ආදාන සඳහා උදවු පෙළ එක් කිරීමට , ආදාන මූලද්‍රව්‍යයට පසුව සමඟින් පේළිගත උදවු පෙළ <span class="help-inline">හෝ උදවු පෙළ අවහිර කිරීමක් ඇතුළත් කරන්න.<p class="help-block">

ක්රියා සඳහා බොත්තම්

සම්මුතියක් ලෙස, බොත්තම් භාවිතා කළ යුත්තේ ක්‍රියා සඳහා පමණක් වන අතර වස්තු සඳහා අධි සබැඳි භාවිතා කළ යුතුය. උදාහරණයක් ලෙස, "බාගැනීම" බොත්තමක් විය යුතු අතර "මෑතකාලීන ක්‍රියාකාරකම්" සබැඳියක් විය යුතුය.

නැංගුරම් සහ ආකෘති සඳහා

බොත්තම් මෝස්තර යෙදූ දේ සමඟ ඕනෑම දෙයකට .btnයෙදිය හැක. කෙසේ වෙතත්, සාමාන්‍යයෙන් ඔබට මේවා පමණක් <a>සහ <button>මූලද්‍රව්‍ය සඳහා යෙදීමට අවශ්‍ය වනු ඇත.

සටහන: සියලුම බොත්තම් .btnපන්තිය ඇතුළත් විය යුතුය. <button>බොත්තම් විලාසයන් සහ <a>අනුකූලතාව සඳහා මූලද්රව්ය යෙදිය යුතුය .

බහු ප්රමාණ

විශාල හෝ කුඩා බොත්තම් කැමතිද? එය ලබා ගන්න!

ප්‍රාථමික ක්‍රියාව කටයුතු

ප්‍රාථමික ක්‍රියාව කටයුතු

ආබාධිත තත්ත්වය

ආබාධිත බොත්තම් .btn-disabledසඳහා, සබැඳි :disabledසඳහා සහ <button>මූලද්රව්ය සඳහා භාවිතා කරන්න.

ප්‍රාථමික ක්‍රියාව කටයුතු

ප්‍රාථමික ක්‍රියාව කටයුතු

හරස් බ්‍රවුසර ගැළපුම

IE9 හි, IE9 පසුබිම් අනුක්‍රමණයන් කොන් වලට කපා නොගන්නා බැවින් අපි වටකුරු කොන සඳහා සියලු බොත්තම් මත අනුක්‍රමය අත්හරිමු.

ආශ්‍රිත, IE9 ආබාධිත buttonමූලද්‍රව්‍ය jankifies, නරක අකුරු-සෙවණැල්ලක් සහිත අකුරු අළු පැහැයක් ලබා දෙයි—අවාසනාවකට අපට මෙය නිවැරදි කළ නොහැක.

ස්ප්‍රයිට් එකක් ලෙස ගොඩනගා ඇත

සෑම අයිකනයක්ම අමතර ඉල්ලීමක් කරනවා වෙනුවට, අපි ඒවා ස්ප්‍රයිට් එකක් බවට සම්පාදනය කර ඇත—එක් ගොනුවක් තුළ පින්තූර ස්ථානගත කිරීම සඳහා CSS භාවිතා කරන පින්තූර පොකුරක් background-position. අපි Twitter.com හි භාවිතා කරන ක්‍රමයම වන අතර එය අපට හොඳින් ක්‍රියා කර ඇත.

සියලුම අයිකන පන්ති .icon-අපගේ අනෙකුත් සංරචක මෙන්, නිසි නාම පරතරය සහ විෂය පථය සඳහා උපසර්ග කර ඇත. මෙය වෙනත් මෙවලම් සමඟ ගැටුම් වළක්වා ගැනීමට උපකාරී වේ.

Glyphicons අපට අපගේ විවෘත මූලාශ්‍ර මෙවලම් කට්ටලයේ ඇති Halflings භාවිතා කිරීමට අවසර දී ඇත, අපි මෙහි docs හි සබැඳියක් සහ ණය ලබා දෙන තාක් කල්. ඔබගේ ව්‍යාපෘති වලදීද එයම කිරීම සලකා බලන්න.

භාවිතා කරන ආකාරය

v2.0.0 සමඟින්, අපි <i>අපගේ සියලුම අයිකන සඳහා ටැගයක් භාවිතා කිරීමට තෝරාගෙන ඇත, නමුත් ඒවාට කේස් පන්තියක් නොමැත-බෙදාගත් උපසර්ගයක් පමණි. භාවිතා කිරීමට, පහත කේතය ඕනෑම තැනක තබන්න:

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

එක් අමතර පන්තියක් සමඟ සූදානම් කර ඇති ප්‍රතිලෝම (සුදු) අයිකන සඳහා මෝස්තර ද තිබේ:

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

ඔබේ අයිකන සඳහා තෝරා ගැනීමට පන්ති 120ක් ඇත. නිවැරදි පන්ති සහිත ටැගයක් එක් කරන්න <i>එවිට ඔබ සකසා ඇත. ඔබට සම්පූර්ණ ලැයිස්තුව sprites.less හි හෝ මෙම ලේඛනයේ මෙතැනින් සොයාගත හැක.

නඩු භාවිතා කරන්න

අයිකන විශිෂ්ටයි, නමුත් ඒවා භාවිතා කරන්නේ කොහේද? මෙන්න අදහස් කිහිපයක්:

• ඔබේ පැති තීරු සංචාලනය සඳහා දර්ශන ලෙස
• තනිකරම අයිකනය මත පදනම් වූ සංචාලනයක් සඳහා
• ක්‍රියාවක තේරුම ප්‍රකාශ කිරීමට උදවු වන බොත්තම් සඳහා
• පරිශීලකයෙකුගේ ගමනාන්තය මත සන්දර්භය බෙදා ගැනීමට සබැඳි සමඟ

අත්යවශ්යයෙන්ම, ඔබට <i>ටැග් එකක් තැබිය හැකි ඕනෑම තැනක, ඔබට අයිකනයක් තැබිය හැකිය.

නැවුම් කරන්න පරීක්ෂාකාරී වන්න මකන්න

අදහස් දක්වන්න සැකසුම් වැඩි විස්තර