වඩා හොඳ, වේගවත්, ශක්තිමත් වෙබ් සංවර්ධනයක් සඳහා අපගේ ප්‍රවේශය ඇතුළුව, Bootstrap හි යටිතල ව්‍යුහයේ ප්‍රධාන කොටස් පහතින් ලබා ගන්න.

HTML5 doctype

Bootstrap විසින් HTML5 doctype භාවිතා කිරීමට අවශ්‍ය ඇතැම් HTML මූලද්‍රව්‍ය සහ CSS ගුණාංග භාවිතා කරයි. ඔබගේ සියලුම ව්‍යාපෘති ආරම්භයේදී එය ඇතුලත් කරන්න.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

මුලින්ම ජංගම

Bootstrap 2 සමඟ, අපි රාමුවේ ප්‍රධාන අංග සඳහා විකල්ප ජංගම හිතකාමී මෝස්තර එකතු කළෙමු. Bootstrap 3 සමඟින්, අපි ව්‍යාපෘතිය ආරම්භයේ සිටම ජංගම හිතකාමී ලෙස නැවත ලියා ඇත. විකල්ප ජංගම මෝස්තර එකතු කරනවා වෙනුවට, ඒවා හරයටම පුළුස්සනු ලැබේ. ඇත්ත වශයෙන්ම, Bootstrap ජංගම දුරකථන වේ. ජංගම පළමු විලාසයන් වෙනම ගොනු වෙනුවට මුළු පුස්තකාලය පුරාම සොයා ගත හැක.

නිසි විදැහුම්කරණය සහ ස්පර්ශ විශාලනය සහතික කිරීම සඳහා , viewport meta tag එක ඔබේ වෙත එක් කරන්න <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noඔබට viewport meta tag වෙත එක් කිරීමෙන් ජංගම උපාංගවල විශාලන කිරීමේ හැකියාවන් අක්‍රිය කළ හැක . මෙය විශාලනය කිරීම අබල කරයි, එනම් පරිශීලකයින්ට අනුචලනය කිරීමට පමණක් හැකි වන අතර, එහි ප්‍රතිඵලයක් ලෙස ඔබේ වෙබ් අඩවිය ස්වදේශීය යෙදුමක් වැනි හැඟීමක් ඇති කරයි. සමස්තයක් වශයෙන්, අපි මෙය සෑම වෙබ් අඩවියකම නිර්දේශ නොකරමු, එබැවින් ප්‍රවේශම් වන්න!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

මුද්‍රණ ශිල්පය සහ සබැඳි

Bootstrap මූලික ගෝලීය සංදර්ශකය, මුද්‍රණ ශිල්පය සහ සබැඳි විලාසයන් සකසයි. විශේෂයෙන්, අපි:

background-color: #fff;මත සකසන්නbody
අපගේ මුද්‍රණ පදනම ලෙස @font-family-base, @font-size-base, සහ ගුණාංග භාවිතා කරන්න@line-height-base
ගෝලීය සබැඳි වර්ණය සකසන්න @link-colorසහ සබැඳි යටි ඉරි මත පමණක් යොදන්න:hover

තුළ මෙම මෝස්තර සොයාගත හැකිය scaffolding.less.

Normalize.css

වැඩිදියුණු කළ හරස් බ්‍රවුසර විදැහුම්කරණය සඳහා, අපි Nicolas Gallagher සහ Jonathan Neal ගේ ව්‍යාපෘතියක් වන Normalize.css භාවිතා කරමු .

බහාලුම්

බූට්ස්ට්‍රැප් හට වෙබ් අඩවියේ අන්තර්ගතය එතීමට සහ අපගේ ජාල පද්ධතිය තැබීමට අඩංගු මූලද්‍රව්‍යයක් අවශ්‍ය වේ. ඔබට ඔබේ ව්‍යාපෘතිවල භාවිතා කිරීමට බහාලුම් දෙකෙන් එකක් තෝරාගත හැක. paddingසහ තවත් බොහෝ දේ නිසා බහාලුම් කිසිවක් ස්ථායී නොවන බව සලකන්න .

.containerප්‍රතිචාර දක්වන ස්ථාවර පළල බහාලුමක් සඳහා භාවිතා කරන්න .

<div class="container">
  ...
</div>

.container-fluidඔබේ නැරඹුම් තොටේ සම්පූර්ණ පළල පුරා විහිදෙන, සම්පූර්ණ පළල බහාලුමක් සඳහා භාවිත කරන්න .

<div class="container-fluid">
  ...
</div>

Bootstrap ප්‍රතිචාරාත්මක, ජංගම පළමු ද්‍රව ජාල පද්ධතියක් ඇතුළත් වන අතර එය උපාංගය හෝ දර්ශන ප්‍රමාණය වැඩි වන විට තීරු 12 දක්වා උචිත ලෙස පරිමාණය කරයි. පහසු පිරිසැලසුම් විකල්ප සඳහා පූර්ව නිශ්චිත පන්ති මෙන්ම වඩාත් අර්ථකථන පිරිසැලසුම් ජනනය කිරීම සඳහා බලවත් මිශ්‍රණයන් ද එයට ඇතුළත් වේ .

හැදින්වීම

ජාලක පද්ධති ඔබේ අන්තර්ගතය ඇති පේළි සහ තීරු මාලාවක් හරහා පිටු පිරිසැලසුම් නිර්මාණය කිරීම සඳහා භාවිතා කරයි. Bootstrap ජාල පද්ධතිය ක්‍රියා කරන ආකාරය මෙන්න:

නිසි ලෙස පෙළගැස්වීම සහ පිරවුම සඳහා පේළි .container(ස්ථාවර-පළල) හෝ (සම්පූර්ණ-පළල) තුළ තැබිය යුතුය ..container-fluid
තීරු වල තිරස් කණ්ඩායම් සෑදීමට පේළි භාවිතා කරන්න.
අන්තර්ගතය තීරු තුළ තැබිය යුතු අතර, තීරු පමණක් පේළිවල ක්ෂණික දරුවන් විය හැකිය.
ඉක්මනින් ජාල පිරිසැලසුම් සෑදීම සඳහා පූර්ව නිශ්චිත ජාල පන්ති වැනි .rowසහ ලබා ගත හැකිය. .col-xs-4වැඩි අර්ථකථන පිරිසැලසුම් සඳහා අඩු මික්සින් ද භාවිතා කළ හැකිය.
තීරු හරහා කාණු (තීරු අන්තර්ගතය අතර හිඩැස්) නිර්මාණය කරයි padding. එම පිරවුම s හි සෘණ ආන්තිකය හරහා පළමු සහ අවසාන තීරුව සඳහා පේළිවලින් හිලව් කර ඇත .row.
සෘණ ආන්තිකය යනු පහත උදාහරණ පිටතට නොපැමිණියේ මන්ද යන්නයි. එය ජාල තීරු තුළ ඇති අන්තර්ගතය ජාල නොවන අන්තර්ගතයන් සමඟ පෙළගැසී ඇති නිසා ය.
ජාල තීරු නිර්මාණය කරනු ලබන්නේ ඔබ විහිදීමට බලාපොරොත්තු වන තීරු දොළහක් සඳහන් කිරීමෙනි. උදාහරණයක් ලෙස, සමාන තීරු තුනක් තුනක් භාවිතා කරයි .col-xs-4.
තනි පේළියක් තුළ තීරු 12කට වඩා තැබුවහොත්, එක් එක් අමතර තීරු සමූහය, එක් ඒකකයක් ලෙස, නව රේඛාවක් මතට එති.
ජාලක පන්ති බ්‍රේක්පොයින්ට් ප්‍රමාණයට වඩා වැඩි හෝ සමාන තිරයේ පළල සහිත උපාංගවලට අදාළ වන අතර කුඩා උපාංග ඉලක්ක කරගත් ජාල පන්ති අභිබවා යන්න. එබැවින්, උදා: කිසියම් .col-md-*පන්තියක් මූලද්‍රව්‍යයකට යෙදීම මධ්‍යම උපාංගවල පමණක් නොව .col-lg-*පන්තියක් නොමැති නම් විශාල උපාංගවල ද එහි මෝස්තරයට බලපානු ඇත.

ඔබේ කේතයට මෙම මූලධර්ම යෙදීම සඳහා උදාහරණ බලන්න.

මාධ්‍ය විමසුම්

අපගේ ජාල පද්ධතියේ ප්‍රධාන බිඳුම් ලක්ෂ්‍ය සෑදීමට අපි අපගේ අඩු ගොනු තුළ පහත මාධ්‍ය විමසුම් භාවිතා කරමු.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

max-widthපටු උපාංග කට්ටලයකට CSS සීමා කිරීමට ඇතුළත් කිරීමට අපි ඉඳහිට මෙම මාධ්‍ය විමසුම් පුළුල් කරන්නෙමු .

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ජාල විකල්ප

Bootstrap ජාල පද්ධතියේ අංගයන් පහසු වගුවක් සහිත උපාංග කිහිපයක් හරහා ක්‍රියා කරන ආකාරය බලන්න.

	අමතර කුඩා උපාංග දුරකථන (<768px)	කුඩා උපාංග ටැබ්ලට් (≥768px)	මධ්‍යම උපාංග ඩෙස්ක්ටොප් (≥992px)	විශාල උපාංග ඩෙස්ක්ටොප් (≥1200px)
ජාලක හැසිරීම	සෑම විටම තිරස් අතට	ආරම්භයට හකුළා ඇත, කඩඉම් ඉහළින් තිරස්
බහාලුම් පළල	කිසිවක් නැත (ස්වයංක්‍රීය)	750px	970px	1170px
පන්ති උපසර්ගය	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
තීරු #	12
තීරු පළල	ඔටෝ	~62px	~81px	~97px
කාණු පළල	30px (තීරුවක සෑම පැත්තකින්ම 15px)
නෙස්ටබල්	ඔව්
ඕෆ්සෙට්	ඔව්
තීරු ඇණවුම් කිරීම	ඔව්

උදාහරණය: අට්ටි සිට තිරස් දක්වා

තනි ජාලක පන්ති කට්ටලයක් භාවිතා කරමින් .col-md-*, ඔබට ඩෙස්ක්ටොප් (මධ්‍යම) උපාංගවල තිරස් වීමට පෙර ජංගම උපාංග සහ ටැබ්ලට් උපාංග (අතිරේක කුඩා සිට කුඩා පරාසය දක්වා) ගොඩගැසී ඇති මූලික ජාල පද්ධතියක් නිර්මාණය කළ හැකිය. ඕනෑම ස්ථානයක ජාලක තීරු තබන්න .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

උදාහරණය: දියර බහාලුම්

ඔබගේ පිටත කොටස වෙනස් කිරීමෙන් ඕනෑම ස්ථාවර පළල ජාලක පිරිසැලසුමක් සම්පූර්ණ පළල පිරිසැලසුමක් බවට පත් .containerකරන්න .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

උදාහරණය: ජංගම සහ ඩෙස්ක්ටොප්

ඔබේ තීරු කුඩා උපාංගවල සරලව ගොඩගැසීමට අවශ්‍ය නැද්ද? .col-xs-* .col-md-*ඔබේ තීරුවලට එක් කිරීමෙන් අමතර කුඩා සහ මධ්‍යම උපාංග ජාල පන්ති භාවිත කරන්න. ඒ සියල්ල ක්‍රියාත්මක වන ආකාරය පිළිබඳ වඩා හොඳ අදහසක් සඳහා පහත උදාහරණය බලන්න.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

උදාහරණය: ජංගම, ටැබ්ලට්, ඩෙස්ක්ටොප්

.col-sm-*ටැබ්ලට් පන්ති සමඟ ඊටත් වඩා ගතික සහ බලවත් පිරිසැලසුම් නිර්මාණය කිරීමෙන් පෙර උදාහරණය මත ගොඩනඟන්න .

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

උදාහරණය: තීරු එතීම

තනි පේළියක් තුළ තීරු 12කට වඩා තැබුවහොත්, එක් එක් අමතර තීරු සමූහය, එක් ඒකකයක් ලෙස, නව රේඛාවක් මතට එති.

.col-xs-9

.col-xs-4
9 + 4 = 13 > 12 සිට, මෙම 4-තීරු-පුළුල් div එක යාබද ඒකකයක් ලෙස නව රේඛාවක් මත ඔතා ඇත.

.col-xs-6
පසුකාලීන තීරු නව රේඛාව ඔස්සේ ඉදිරියට යයි.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

ප්‍රතිචාරාත්මක තීරු යළි පිහිටුවීම

ලබා ගත හැකි ජාලක ස්ථර හතරක් සමඟින්, ඇතැම් කඩඉම් ස්ථානවලදී, එකක් අනෙකට වඩා උස බැවින් ඔබේ තීරු හරිහැටි නොපැහැදිලි ගැටළු වලට මුහුණ දීමට ඔබ බැඳී සිටී. එය නිවැරදි කිරීමට, a .clearfixසහ අපගේ ප්‍රතිචාරාත්මක උපයෝගිතා පන්තිවල එකතුවක් භාවිතා කරන්න .

.col-xs-6 .col-sm-3
ඔබගේ දර්ශන තොටේ ප්‍රමාණය වෙනස් කරන්න හෝ උදාහරණයක් සඳහා ඔබගේ දුරකථනයෙන් එය පරීක්ෂා කරන්න.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

ප්‍රතිචාරාත්මක කඩඉම් ලකුණු වලදී තීරු නිෂ්කාශනයට අමතරව, ඔබට ඕෆ්සෙට්, තල්ලු කිරීම් හෝ ඇදීම් නැවත සැකසීමට අවශ්‍ය විය හැක . ජාල උදාහරණයේ මෙය ක්‍රියාවෙන් බලන්න .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

තීරු කපා හැරීම

.col-md-offset-*පන්ති භාවිතයෙන් තීරු දකුණට ගෙන යන්න . මෙම පන්ති තීරුවක වම් මායිම තීරු වලින් වැඩි කරයි *. උදාහරණයක් ලෙස, තීරු හතරක් හරහා .col-md-offset-4ගමන් කරයි ..col-md-4

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0ඔබට පන්ති සමඟ පහළ ජාල ස්ථරවලින් ඕෆ්සෙට් ද අභිබවා යා හැක .

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

කූඩු තීරු

පෙරනිමි ජාලකය සමඟ ඔබේ අන්තර්ගතය කැදවා ගැනීමට, පවතින තීරුවක් තුළ නව .rowසහ තීරු කට්ටලයක් එක් කරන්න . කැදලි පේළි 12ක් හෝ ඊට අඩුවෙන් එකතු කරන තීරු කට්ටලයක් ඇතුළත් විය යුතුය (ඔබ පවතින තීරු 12ම භාවිත කිරීම අවශ්‍ය නොවේ)..col-sm-*.col-sm-*

1 මට්ටම: .col-sm-9

2 මට්ටම: .col-xs-8 .col-sm-6

2 මට්ටම: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

තීරු ඇණවුම් කිරීම

අපගේ බිල්ට් ජාල තීරුවල අනුපිළිවෙල .col-md-push-*සහ .col-md-pull-*විකරණකාරක පන්ති සමඟ පහසුවෙන් වෙනස් කරන්න.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

අඩු මික්සින් සහ විචල්යයන්

වේගවත් පිරිසැලසුම් සඳහා පෙර ගොඩනඟන ලද ජාල පන්තිවලට අමතරව, බූට්ස්ට්‍රැප් ඔබේම සරල, අර්ථකථන පිරිසැලසුම් ඉක්මනින් ජනනය කිරීම සඳහා අඩු විචල්‍යයන් සහ මික්සින් ඇතුළත් වේ.

විචල්යයන්

විචල්‍යයන් විසින් තීරු ගණන, කාණු පළල සහ පාවෙන තීරු ආරම්භ කිරීමට මාධ්‍ය විමසුම් ලක්ෂ්‍යය තීරණය කරයි. ඉහත ලේඛනගත කර ඇති පූර්ව නිශ්චිත ජාල පන්ති ජනනය කිරීමට මෙන්ම පහත ලැයිස්තුගත කර ඇති අභිරුචි මිශ්‍රණයන් සඳහා අපි මේවා භාවිතා කරමු.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

මික්සින්

තනි ජාලක තීරු සඳහා අර්ථකථන CSS උත්පාදනය කිරීම සඳහා ජාලක විචල්‍යයන් සමඟ ඒකාබද්ධව Mixins භාවිතා වේ.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

උදාහරණ භාවිතය

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

මාතෘකා

<h1>හරහා සියලුම HTML මාතෘකා <h6>තිබේ. ඔබට ශීර්ෂයක අකුරු මෝස්තරයට ගැළපීමට අවශ්‍ය නමුත් ඔබේ පෙළ පේළිගතව පෙන්වීමට අවශ්‍ය වූ විට පන්ති .h1හරහා ද ඇත..h6

h1. බූට්ස්ට්‍රැප් ශීර්ෂය	සෙමිබෝල්ඩ් 36px
h2. බූට්ස්ට්‍රැප් ශීර්ෂය	සෙමිබෝල්ඩ් 30px
h3. බූට්ස්ට්‍රැප් ශීර්ෂය	සෙමිබෝල්ඩ් 24px
h4. බූට්ස්ට්‍රැප් ශීර්ෂය	Semibold 18px
h5. බූට්ස්ට්‍රැප් ශීර්ෂය	සෙමිබෝල්ඩ් 14px
h6. බූට්ස්ට්‍රැප් ශීර්ෂය	සෙමිබෝල්ඩ් 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>සාමාන්‍ය ටැගයක් හෝ .smallපන්තියක් සමඟ ඕනෑම ශීර්ෂයක සැහැල්ලු, ද්විතියික පෙළ සාදන්න .

h1. Bootstrap ශීර්ෂය ද්විතියික පෙළ

h2. Bootstrap ශීර්ෂය ද්විතියික පෙළ

h3. Bootstrap ශීර්ෂය ද්විතියික පෙළ

h4. Bootstrap ශීර්ෂය ද්විතියික පෙළ

h5. Bootstrap ශීර්ෂය ද්විතියික පෙළ

h6. Bootstrap ශීර්ෂය ද්විතියික පෙළ

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

ශරීර පිටපත

Bootstrap හි ගෝලීය පෙරනිමිය 14pxfont-size වේ , 1.428 සමඟ . මෙය සියලුම ඡේදවලට අදාළ වේ. ඊට අමතරව, (ඡේදවලට) ඒවායේ ගණනය කළ රේඛා-උසෙන් අඩකින් පහළ ආන්තිකය (පෙරනිමියෙන් 10px) ලැබේ.line-height<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. සමාජීය නැටෝක් පෙනාටිබස් සහ මැග්නිස් ඩිස් පාචුරියන්ට් මොන්ටෙස්, නස්කෙටූර් රිඩිකුලස් මුස්. Nullam id dolor id nibh ultricies Vehicula.

සමාජීය නැටෝක් පෙනාටිබස් සහ මැග්නිස් ඩිස් පාචුරියන්ට් මොන්ටෙස්, නස්කෙටූර් රිඩිකුලස් මුස්. Donec ullamcorper nulla non metus aactor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus aactor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at 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 ague laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

අඩුවෙන් ඉදිකර ඇත

මුද්‍රණ පරිමාණය පදනම් වී ඇත්තේ විචල්‍යවල අඩු විචල්‍ය දෙකක් මත ය. less : @font-size-baseසහ @line-height-base. පළමුවැන්න පුරාවට භාවිතා කරන මූලික අකුරු ප්‍රමාණය වන අතර දෙවැන්න මූලික රේඛා-උස වේ. අපගේ සියලු වර්ගවල මායිම්, පිරවුම් සහ රේඛා-උස සහ තවත් බොහෝ දේ නිර්මාණය කිරීමට අපි එම විචල්‍යයන් සහ සරල ගණිතය භාවිතා කරමු. ඒවා අභිරුචිකරණය කර Bootstrap අනුවර්තනය කරයි.

පේළිගත පෙළ අංග

සලකුණු කළ පෙළ

වෙනත් සන්දර්භයක් තුළ එහි අදාළත්වය හේතුවෙන් පෙළ ධාවනය උද්දීපනය කිරීම සඳහා, <mark>ටැගය භාවිතා කරන්න.

ඔබට සලකුණු ටැගය භාවිතා කළ හැකියඉස්මතු කරන්නපෙළ.

You can use the mark tag to <mark>highlight</mark> text.

මකා දැමූ පෙළ

මකා දැමූ පෙළ කොටස් දැක්වීම සඳහා <del>ටැගය භාවිතා කරන්න.

~~මෙම පෙළ පේළිය මකා දැමූ පෙළ ලෙස සැලකීමට අදහස් කෙරේ.~~

<del>This line of text is meant to be treated as deleted text.</del>

වර්ජන පෙළ

තවදුරටත් අදාළ නොවන පෙළ කොටස් දැක්වීම සඳහා <s>ටැගය භාවිතා කරන්න.

~~මෙම පෙළ පේළිය තවදුරටත් නිවැරදි නොවන ලෙස සැලකීමට අදහස් කෙරේ.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

පෙළ ඇතුළත් කර ඇත

ලේඛනයට එකතු කිරීම් දැක්වීම සඳහා <ins>ටැගය භාවිතා කරන්න.

මෙම පෙළ පේළිය ලේඛනයට එකතු කිරීමක් ලෙස සැලකීමට අදහස් කෙරේ.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

යටින් ඉරි ඇඳ ඇති පෙළ

පෙළ යටින් ඉරි ඇඳීමට <u>ටැගය භාවිතා කරන්න.

මෙම පෙළ රේඛාව යටින් ඉරි ඇඳ ඇති පරිදි විදැහුම් කරනු ඇත

<u>This line of text will render as underlined</u>

සැහැල්ලු මෝස්තර සහිත HTML හි පෙරනිමි අවධාරණය ටැග් භාවිතා කරන්න.

කුඩා පෙළ

පේළිගත හෝ පෙළ කොටස් අවධාරනය <small>කිරීම සඳහා, මාපිය ප්‍රමාණයෙන් 85% ට පෙළ සැකසීමට ටැගය භාවිතා කරන්න. font-sizeකැදලි මූලද්‍රව්‍ය සඳහා ශීර්ෂ මූලද්‍රව්‍ය ඔවුන්ගේම ලබා <small>ගනී.

ඔබට විකල්ප .smallවශයෙන් ඕනෑම එකක් වෙනුවට පේළිගත මූලද්‍රව්‍යයක් භාවිතා කළ හැක <small>.

මෙම පෙළ පේළිය සියුම් මුද්‍රණයක් ලෙස සැලකීමට අදහස් කෙරේ.

<small>This line of text is meant to be treated as fine print.</small>

නිර්භීත

වැඩි අකුරු-බරක් සහිත පෙළ කොටසක් අවධාරණය කිරීම සඳහා.

පහත පෙළ කොටස තද අකුරු ලෙස විදැහුම් කෙරේ .

<strong>rendered as bold text</strong>

ඇල අකුරු

ඇල අකුරු සහිත පෙළ කොටසක් අවධාරණය කිරීම සඳහා.

පහත පෙළ කොටස ඇල අකුරු ලෙස විදැහුම් කෙරේ .

<em>rendered as italicized text</em>

විකල්ප මූලද්රව්ය

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

පෙළගැස්වීමේ පන්ති

පෙළ පෙළගැස්වීමේ පන්ති සමඟින් පෙළ කොටස්වලට පහසුවෙන් නැවත සකස් කරන්න.

වමට පෙළගස්වන ලද පෙළ.

පෙළ මැදට පෙළගස්වා ඇත.

දකුණට පෙළගස්වන ලද පෙළ.

සාධාරණ පෙළ.

එතුම් පෙළ නැත.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

පරිවර්තන පන්ති

පෙළ ප්‍රාග්ධනීකරණය පන්ති සමඟ සංරචක තුළ පෙළ පරිවර්තනය කරන්න.

කුඩා අකුරු සහිත පෙළ.

විශාල අකුරු සහිත පෙළ.

කැපිටල් අකුරු.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

කෙටි යෙදුම්

සංක්ෂිප්ත සහ කෙටි යෙදුම් සඳහා HTML හි <abbr>මූලද්‍රව්‍යයේ ශෛලීගත ක්‍රියාවට නැංවීම, ප්‍රසාරණය වූ අනුවාදය hover මත පෙන්වීමට. උපලක්ෂණයක් සහිත කෙටි යෙදුම්වලට titleසැහැල්ලු තිත් සහිත පහළ මායිමක් සහ ආධාරක කර්සරයක් ඇති අතර, එය උඩින් ගමන් කිරීමේදී සහ සහායක තාක්ෂණයන් භාවිතා කරන්නන්ට අමතර සන්දර්භයක් සපයයි.

මූලික කෙටි යෙදුම

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

<abbr title="attribute">attr</abbr>

ආරම්භකවාදය

.initialismතරමක් කුඩා අකුරු ප්‍රමාණය සඳහා කෙටි යෙදුමකට එක් කරන්න .

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

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

ලිපිනයන්

ළඟම ඇති මුතුන් මිත්තන් හෝ සමස්ත කාර්ය මණ්ඩලය සඳහා සම්බන්ධතා තොරතුරු ඉදිරිපත් කරන්න. සියලු රේඛා අවසන් කිරීමෙන් හැඩතල ගැන්වීම ආරක්ෂා කරන්න <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

සම්පූර්ණ නම
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

අවහිර කිරීම්

ඔබේ ලේඛනය තුළ වෙනත් මූලාශ්‍රයකින් අන්තර්ගත කොටස් උපුටා දැක්වීම සඳහා.

පෙරනිමි වාරණ උපුටා දැක්වීම

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote විකල්ප

සම්මතයක් මත සරල වෙනස්කම් සඳහා විලාසය සහ අන්තර්ගතය වෙනස් වේ <blockquote>.

මූලාශ්රයක් නම් කිරීම

<footer>මූලාශ්‍රය හඳුනා ගැනීම සඳහා එක් කරන්න . මූලාශ්‍ර කාර්යයේ නම ඔතා <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.

මූලාශ්‍ර මාතෘකාවේ ප්‍රසිද්ධ කෙනෙක්

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

විකල්ප සංදර්ශක

.blockquote-reverseදකුණට පෙළගස්වන ලද අන්තර්ගතය සහිත වාරණ උපුටා දැක්වීමක් සඳහා එක් කරන්න .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.

මූලාශ්‍ර මාතෘකාවේ ප්‍රසිද්ධ කෙනෙක්

<blockquote class="blockquote-reverse">
  ...
</blockquote>

ලැයිස්තු

ඇණවුම් නොකළ

ඇණවුම පැහැදිලිවම වැදගත් නොවන අයිතම ලැයිස්තුවක් .

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>
  <li>...</li>
</ul>

ඇණවුම් කළා

ඇණවුම පැහැදිලිවම වැදගත් වන අයිතම ලැයිස්තුවක් .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massa සහ integer molestie lorem
pretium nisl aliquet හි පහසුකම
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

මෝස්තර නොකළ

ලැයිස්තු අයිතමවල පෙරනිමි list-styleසහ වම් මායිම ඉවත් කරන්න (ක්ෂණික දරුවන් පමණි). මෙය අදාළ වන්නේ ක්ෂණික ළමා ලැයිස්තු අයිතම සඳහා පමණි , එනම් ඔබට ඕනෑම කැදලි ලැයිස්තු සඳහාද පන්තිය එක් කිරීමට අවශ්‍ය වනු ඇත.

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="list-unstyled">
  <li>...</li>
</ul>

පෙළට

සියලුම ලැයිස්තු අයිතම තනි පේළියක් display: inline-block;සහ සැහැල්ලු පිරවුමක් මත තබන්න.

ලෝරම් ඉප්සම්
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

විස්තර

ඒවායේ ආශ්‍රිත විස්තර සහිත නියම ලැයිස්තුවක්.

විස්තර ලැයිස්තු: නියමයන් නිර්වචනය කිරීම සඳහා විස්තර ලැයිස්තුවක් පරිපූර්ණයි.
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.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

තිරස් විස්තරය

නියමයන් සහ විස්තරයන් <dl>එක පැත්තකින් පෙළගස්වන්න. පෙරනිමි <dl>s ලෙස ගොඩගැසීම ආරම්භ වේ, නමුත් navbar පුළුල් වන විට, මේවා කරන්න.

විස්තර ලැයිස්තු: නියමයන් නිර්වචනය කිරීම සඳහා විස්තර ලැයිස්තුවක් පරිපූර්ණයි.
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.
Felis euismod semper eget lacinia: Fusce dapibus, Telus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa just sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

ස්වයංක්‍රීයව කප්පාදු කිරීම

තිරස් විස්තර ලැයිස්තු වම් තීරුවට ගැළපීමට නොහැකි තරම් දිගු පද කප්පාදු කරයි text-overflow. පටු දර්ශන තොටුපලවල, ඒවා පෙරනිමි ගොඩගැසූ පිරිසැලසුම වෙත වෙනස් වනු ඇත.

පෙළට

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

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

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

පරිශීලක ආදානය

<kbd>සාමාන්‍යයෙන් යතුරුපුවරුව හරහා ඇතුලත් කරන ආදානය දැක්වීමට භාවිතා කරන්න .

නාමාවලි මාරු කිරීමට, නාමාවලියේ cdනම ටයිප් කරන්න.
සැකසීම් සංස්කරණය කිරීමට, ඔබන්න ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

මූලික බ්ලොක්

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

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

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

ඔබට විකල්පයක් ලෙස .pre-scrollableපන්තිය එක් කළ හැකිය, එය උපරිම උස 350px සකසනු ඇති අතර y-අක්ෂ අනුචලන තීරුවක් සපයයි.

විචල්යයන්

විචල්‍යයන් දැක්වීම සඳහා <var>ටැගය භාවිතා කරන්න.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

නියැදි ප්රතිදානය

වැඩසටහනකින් බ්ලොක් නියැදි ප්‍රතිදානය දැක්වීම සඳහා <samp>ටැගය භාවිතා කරන්න.

මෙම පාඨය පරිගණක වැඩසටහනකින් නියැදි ප්‍රතිදානයක් ලෙස සැලකීමට අදහස් කෙරේ.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

මූලික උදාහරණය

.tableමූලික හැඩගැන්වීම් සඳහා-ආලෝකය පෑඩිං සහ තිරස් බෙදුම් පමණක්- ඕනෑම දෙයකට මූලික පන්තිය එක් කරන්න <table>. එය අධික ලෙස අනවශ්‍ය බවක් පෙනෙන්නට ඇත, නමුත් දින දර්ශන සහ දින තේරීම් වැනි අනෙකුත් ප්ලගීන සඳහා වගු බහුලව භාවිතා කිරීම සැලකිල්ලට ගෙන, අපි අපගේ අභිරුචි වගු විලාසයන් හුදකලා කිරීමට තීරණය කර ඇත.

විකල්ප වගු ශීර්ෂ පාඨය.
#	මුල් නම	අවසන් නම	පරිශීලක නාමය
1	ලකුණ	ඔටෝ	@mdo
2	යාකොබ්	තෝන්ටන්	@මේදය
3	ලැරී	කුරුල්ලා	@ට්විටර්

<table class="table">
  ...
</table>

ඉරි සහිත පේළි

.table-stripedතුළ ඇති ඕනෑම වගු පේළියකට සීබ්‍රා-ඉරි එකතු කිරීමට භාවිතා කරන්න <tbody>.

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

:nth-childInternet Explorer 8 හි නොමැති CSS තේරීම්කාරකය හරහා ඉරි සහිත වගු හැඩගස්වා ඇත.

#	මුල් නම	අවසන් නම	පරිශීලක නාමය
1	ලකුණ	ඔටෝ	@mdo
2	යාකොබ්	තෝන්ටන්	@මේදය
3	ලැරී	කුරුල්ලා	@ට්විටර්

<table class="table table-striped">
  ...
</table>

මායිම් මේසය

.table-borderedමේසයේ සහ සෛලවල සියලුම පැතිවල මායිම් සඳහා එකතු කරන්න .

#	මුල් නම	අවසන් නම	පරිශීලක නාමය
1	ලකුණ	ඔටෝ	@mdo
2	යාකොබ්	තෝන්ටන්	@මේදය
3	ලැරී	කුරුල්ලා	@ට්විටර්

<table class="table table-bordered">
  ...
</table>

පේළි සැරිසරන්න

.table-hovera තුළ වගු පේළි මත hover තත්වයක් සක්‍රීය කිරීමට එක් කරන්න <tbody>.

#	මුල් නම	අවසන් නම	පරිශීලක නාමය
1	ලකුණ	ඔටෝ	@mdo
2	යාකොබ්	තෝන්ටන්	@මේදය
3	ලැරී	කුරුල්ලා	@ට්විටර්

<table class="table table-hover">
  ...
</table>

ඝනීභවන වගුව

.table-condensedසෛල පිරවුම අඩකින් කැපීමෙන් වගු වඩාත් සංයුක්ත කිරීමට එක් කරන්න .

#	මුල් නම	අවසන් නම	පරිශීලක නාමය
1	ලකුණ	ඔටෝ	@mdo
2	යාකොබ්	තෝන්ටන්	@මේදය
3	ලැරී කුරුල්ලා		@ට්විටර්

<table class="table table-condensed">
  ...
</table>

සන්දර්භ පන්ති

වගු පේළි හෝ තනි සෛල වර්ණ කිරීමට සන්දර්භීය පන්ති භාවිතා කරන්න.

පන්තිය	විස්තර
`.active`	විශේෂිත පේළියකට හෝ කොටුවකට හෝවර් වර්ණය යොදයි
`.success`	සාර්ථක හෝ ධනාත්මක ක්‍රියාවක් පෙන්නුම් කරයි
`.info`	මධ්‍යස්ථ තොරතුරු වෙනසක් හෝ ක්‍රියාවක් පෙන්නුම් කරයි
`.warning`	අවධානය යොමු කළ යුතු අනතුරු ඇඟවීමක් පෙන්නුම් කරයි
`.danger`	භයානක හෝ සෘණාත්මක ක්‍රියාවක් පෙන්නුම් කරයි

#	තීරු ශීර්ෂය	තීරු ශීර්ෂය	තීරු ශීර්ෂය
1	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය
2	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය
3	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය
4	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය
5	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය
6	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය
7	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය
8	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය
9	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය	තීරු අන්තර්ගතය

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

උපකාරක තාක්ෂණයන් සඳහා අර්ථය ලබා දීම

වගු පේළියකට හෝ තනි කොටුවකට අරුතක් එක් කිරීමට වර්ණ භාවිත කිරීම මඟින් දෘශ්‍ය ඇඟවීමක් පමණක් සපයනු ලබන අතර, එය තිර කියවනය වැනි ආධාරක තාක්ෂණයන් භාවිතා කරන්නන්ට ලබා නොදේ. වර්ණයෙන් දැක්වෙන තොරතුරු එක්කෝ අන්තර්ගතයෙන්ම පැහැදිලි බව සහතික කර ගන්න (අදාළ වගු පේළියේ/සෛලයේ දෘශ්‍ය පෙළ) හෝ .sr-onlyපන්තිය සමඟ සඟවා ඇති අතිරේක පෙළ වැනි විකල්ප ක්‍රම හරහා ඇතුළත් කර ඇත.

ප්රතිචාරාත්මක වගු

.tableඕනෑම එකක් එතීමෙන් ප්‍රතිචාරාත්මක වගු සාදන්න.table-responsiveකුඩා උපාංගවල (768px යටතේ) තිරස් අතට අනුචලනය කිරීමට768px පළලට වඩා විශාල ඕනෑම දෙයක් බලන විට, ඔබට මෙම වගු වල කිසිදු වෙනසක් නොපෙනේ.

සිරස් කැපීම / කප්පාදු කිරීම

ප්‍රතිචාරාත්මක වගු භාවිතා කරයි overflow-y: hidden, එය මේසයේ පහළ හෝ ඉහළ දාරවලින් ඔබ්බට යන ඕනෑම අන්තර්ගතයක් ක්ලිප් කරයි. විශේෂයෙන්ම, මෙය පතන මෙනු සහ අනෙකුත් තෙවන පාර්ශවීය විජට් කපා හැරිය හැක.

ෆයර්ෆොක්ස් සහ ක්ෂේත්‍ර කට්ටල

widthෆයර්ෆොක්ස් සතුව ප්‍රතිචාරාත්මක වගුවට බාධා කරන සමහර අපහසු ක්ෂේත්‍ර කට්ටල මෝස්තර ඇත. අපි Bootstrap හි ලබා නොදෙන Firefox- විශේෂිත හැක් කිරීමකින් තොරව මෙය අතික්‍රමණය කළ නොහැක :

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

වැඩි විස්තර සඳහා, මෙම Stack Overflow පිළිතුර කියවන්න .

#	වගු ශීර්ෂය	වගු ශීර්ෂය	වගු ශීර්ෂය	වගු ශීර්ෂය	වගු ශීර්ෂය	වගු ශීර්ෂය
1	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව
2	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව
3	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව

#	වගු ශීර්ෂය	වගු ශීර්ෂය	වගු ශීර්ෂය	වගු ශීර්ෂය	වගු ශීර්ෂය	වගු ශීර්ෂය
1	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව
2	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව
3	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

මූලික උදාහරණය

තනි ආකෘති පාලන ස්වයංක්‍රීයව යම් ගෝලීය මෝස්තරයක් ලබා ගනී. සියලුම පාඨමය <input>, <textarea>සහ <select>මූලද්‍රව්‍ය පෙරනිමියෙන් .form-controlලෙස සකසා ඇත . ප්‍රශස්ත පරතරය සඳහා width: 100%;ලේබල් සහ පාලන ඔතා..form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ආදාන කණ්ඩායම් සමඟ පෝරම කණ්ඩායම් මිශ්‍ර නොකරන්න

ආකෘති කණ්ඩායම් සෘජුවම ආදාන කණ්ඩායම් සමඟ මිශ්‍ර නොකරන්න . ඒ වෙනුවට, පෝරම සමූහය තුළ ආදාන කණ්ඩායම කැදලි කරන්න.

පේළිගත පෝරමය

වමට පෙළගස්වන ලද සහ පේළිගත-වාරණ පාලන .form-inlineසඳහා ඔබේ පෝරමයට (එය විය යුතු නැත ) එක් කරන්න . මෙය අදාළ වන්නේ අවම වශයෙන් 768px පළල දර්ශන තොට තුළ ඇති පෝරම සඳහා පමණි.<form>

අභිරුචි පළල අවශ්ය විය හැක

ආදාන සහ width: 100%;තේරීම් Bootstrap හි පෙරනිමියෙන් යෙදී ඇත. පේළිගත පෝරම තුළ, අපි width: auto;පාලන කිහිපයක් එකම රේඛාවක පැවතිය හැකි බව නැවත සකසමු. ඔබගේ පිරිසැලසුම මත පදනම්ව, අමතර අභිරුචි පළල අවශ්‍ය විය හැක.

සෑම විටම ලේබල් එකතු කරන්න

ඔබ සෑම ආදානයක් සඳහාම ලේබලයක් ඇතුළත් නොකළහොත් තිර කියවනයට ඔබේ පෝරම සමඟ ගැටලු ඇති වේ. .sr-onlyමෙම පේළිගත පෝරම සඳහා, ඔබට පන්තිය භාවිතයෙන් ලේබල සැඟවිය හැක . උපකාරක තාක්ෂණයන් සඳහා ලේබලයක් සැපයීමේ තවත් විකල්ප ක්‍රම තිබේ, එනම් aria-label, aria-labelledbyහෝ titleගුණාංගය. මේවායින් කිසිවක් නොමැති නම්, තිර කියවනය තිබේ placeholderනම්, උපලක්ෂණ භාවිතා කිරීමට යොමු විය හැක, නමුත් placeholderවෙනත් ලේබල් කිරීමේ ක්‍රම සඳහා ආදේශකයක් ලෙස භාවිතා කිරීම උපදෙස් නොදෙන බව සලකන්න.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

තිරස් ආකෘතිය

පෝරමයට එකතු කිරීම මගින් තිරස් පිරිසැලසුමක ලේබල සහ පෝරම පාලන සමූහ පෙළගැස්වීමට Bootstrap හි පූර්ව නිශ්චිත ජාල පන්ති භාවිතා කරන්න .form-horizontal(එය a විය යුතු නැත <form>). එසේ කිරීමෙන් .form-groupජාල පේළි ලෙස හැසිරීමට s වෙනස් වේ, එබැවින් අවශ්‍ය නොවේ .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

සහාය දක්වන පාලන

උදාහරණ පෝරම පිරිසැලසුමක සහය දක්වන සම්මත පෝරම පාලන සඳහා උදාහරණ.

යෙදවුම්

වඩාත් පොදු ආකෘති පාලනය, පෙළ මත පදනම් වූ ආදාන ක්ෂේත්‍ර. සියලුම HTML5 වර්ග සඳහා සහය ඇතුළත් වේ: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telසහ color.

වර්ගය ප්රකාශය අවශ්ය වේ

ආදාන සම්පූර්ණයෙන් හැඩගස්වනු ලබන්නේ ඒවා typeනිවැරදිව ප්‍රකාශ කළහොත් පමණි.

<input type="text" class="form-control" placeholder="Text input">

ආදාන කණ්ඩායම්

ඕනෑම පෙළ-පාදක පෙර සහ/හෝ පසු ඒකාබද්ධ පෙළ හෝ බොත්තම් එක් කිරීමට <input>, ආදාන කණ්ඩායම් සංරචකය පරීක්ෂා කරන්න .

ටෙක්ස්ටාරියා

පෙළ පේළි කිහිපයකට සහය දක්වන පෝරම පාලනය. rowsඅවශ්‍ය පරිදි ගුණාංගය වෙනස් කරන්න .

<textarea class="form-control" rows="3"></textarea>

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

පිරික්සුම් කොටු යනු ලැයිස්තුවක විකල්ප එකක් හෝ කිහිපයක් තෝරාගැනීම සඳහා වන අතර රේඩියෝ යනු බොහෝ දෙනෙකුගෙන් එක් විකල්පයක් තෝරාගැනීම සඳහා වේ.

ආබාධිත පිරික්සුම් කොටු සහ ගුවන්විදුලි සහය දක්වයි, නමුත් මාපියගේ සැරිසැරීම මත "අවසර නොලබන" කර්සරයක් සැපයීමට <label>, ඔබට .disabledපන්තිය මාපිය වෙත එක් කිරීමට අවශ්‍ය වනු ඇත .radio, .radio-inline, .checkbox, හෝ .checkbox-inline.

පෙරනිමි (අතුගත)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

පේළිගත පිරික්සුම් කොටු සහ ගුවන් විදුලි

එකම පේළියේ දිස්වන පාලන සඳහා පිරික්සුම් කොටු හෝ රේඩියෝ මාලාවක .checkbox-inlineහෝ පන්ති භාවිතා කරන්න ..radio-inline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

ලේබල් පෙළ නොමැති පිරික්සුම් කොටු සහ රේඩියෝ

ඔබ තුළ පෙළක් නොමැති නම් <label>, ආදානය ඔබ අපේක්ෂා කරන පරිදි ස්ථානගත කර ඇත. දැනට ක්‍රියා කරන්නේ නොබැඳි පිරික්සුම් කොටු සහ රේඩියෝ වල පමණි. උපකාරක තාක්ෂණයන් සඳහා තවමත් යම් ආකාරයක ලේබලයක් සැපයීමට මතක තබා ගන්න (උදාහරණයක් ලෙස, භාවිතා කිරීම aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

තෝරනවා

border-radiusබොහෝ ස්වදේශීය තෝරාගත් මෙනු - එනම් Safari සහ Chrome හි - ගුණාංග හරහා වෙනස් කළ නොහැකි වටකුරු කොන් ඇති බව සලකන්න .

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ගුණාංගය සහිත <select>පාලන සඳහා multiple, බහුවිධ විකල්ප පෙරනිමියෙන් පෙන්වනු ලැබේ.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ස්ථිතික පාලනය

ඔබට පෝරමයක් තුළ පෝරම ලේබලයක් අසල සරල පෙළ තැබීමට අවශ්‍ය වූ විට, a හි .form-control-staticපන්තිය භාවිතා කරන්න <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

නාභිගත තත්ත්වය

අපි සමහර පෝරම පාලනවල පෙරනිමි outlineවිලාසයන් ඉවත් box-shadowකර එහි ස්ථානයේ :focus.

Demo `:focus`රාජ්යය

ඉහත උදාහරණ ආදානය අපගේ ලේඛනගත කිරීමේ අභිරුචි විලාසයන් භාවිතා :focusකරයි .form-control.

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

disabledපරිශීලක අන්තර්ක්‍රියා වැළැක්වීම සඳහා ආදානයක් මත බූලියන් උපලක්ෂණය එක් කරන්න . අබල කළ යෙදවුම් සැහැල්ලුවෙන් දිස්වන අතර not-allowedකර්සරයක් එක් කරන්න.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

ආබාධිත ක්ෂේත්ර කට්ටල

තුළ ඇති සියලුම පාලන එකවර අක්‍රිය disabledකිරීමට a වෙත උපලක්ෂණය එක් කරන්න .<fieldset><fieldset>

සබැඳි ක්‍රියාකාරීත්වය පිළිබඳ අවවාදය`<a>`

පෙරනිමියෙන්, බ්‍රවුසරය තුළ ඇති සියලුම ස්වදේශීය ආකෘති පාලන ( <input>, <select>සහ <button>මූලද්‍රව්‍ය) <fieldset disabled>අක්‍රිය ලෙස සලකනු ඇත, ඒවා මත යතුරුපුවරු සහ මූසික අන්තර්ක්‍රියා වළක්වයි. කෙසේ වෙතත්, ඔබේ පෝරමයට <a ... class="btn btn-*">මූලද්‍රව්‍ය ද ඇතුළත් නම්, මේවාට ලබා දෙන්නේ විලාසයක් පමණි pointer-events: none. බොත්තම් සඳහා ආබාධිත තත්ත්වය පිළිබඳ කොටසේ (සහ විශේෂයෙන් නැංගුරම් මූලද්‍රව්‍ය සඳහා උප කොටසේ) සඳහන් කර ඇති පරිදි, මෙම CSS ගුණය තවමත් ප්‍රමිතිගත කර නොමැති අතර ඔපෙරා 18 සහ ඊට පහළින් හෝ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 11 හි පූර්ණ සහාය නොදක්වයි, සහ ජයග්‍රහණය කළේය. යතුරුපුවරු පරිශීලකයින්ට මෙම සබැඳි අවධානය යොමු කිරීමට හෝ සක්‍රිය කිරීමට නොහැකි වීම වළක්වන්නේ නැත. එබැවින් ආරක්ෂිත වීමට, එවැනි සබැඳි අක්‍රිය කිරීමට අභිරුචි JavaScript භාවිතා කරන්න.

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

disabledBootstrap මෙම විලාසයන් සියලුම බ්‍රවුසරවල යොදන අතර, Internet Explorer 11 සහ ඊට පහළින් a හි උපලක්ෂණයට සම්පූර්ණයෙන් සහය නොදක්වයි <fieldset>. මෙම බ්‍රවුසරවල ක්ෂේත්‍ර කට්ටලය අක්‍රිය කිරීමට අභිරුචි JavaScript භාවිතා කරන්න.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

කියවීමට පමණක් ප්‍රාන්තය

readonlyආදානයේ අගය වෙනස් කිරීම වැළැක්වීම සඳහා ආදානයක් මත බූලියන් උපලක්ෂණය එක් කරන්න . කියවීමට පමණක් යෙදවුම් සැහැල්ලුවෙන් දිස්වේ (ආබාධිත ආදාන මෙන්), නමුත් සම්මත කර්සරය රඳවා තබා ගන්න.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

උදව් පෙළ

පෝරම පාලන සඳහා බ්ලොක් මට්ටමේ උපකාරක පෙළ.

පෝරම පාලන සමඟ උපකාරක පෙළ සම්බන්ධ කිරීම

aria-describedbyඋපකාරක පෙළ එය උපලක්ෂණ භාවිතයට අදාළ පෝරම පාලනය සමඟ පැහැදිලිව සම්බන්ධ කළ යුතුය . පරිශීලකයා අවධානය යොමු කරන විට හෝ පාලනයට ඇතුළු වූ විට සහායක තාක්ෂණයන් - තිර කියවනය වැනි - මෙම උපකාරක පෙළ නිවේදනය කරන බව මෙය සහතික කරයි.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

වලංගුකරණය සඳහන් කරයි

බූට්ස්ට්‍රැප් වලට පෝරම පාලනයන්හි දෝෂ, අනතුරු ඇඟවීම් සහ සාර්ථක තත්ත්වයන් සඳහා වලංගුකරණ විලාස ඇතුළත් වේ. භාවිතා කිරීමට, එක් කරන්න .has-warning, .has-errorහෝ .has-successමව් මූලද්‍රව්‍ය වෙත. ඕනෑම .control-label, .form-control, සහ .help-blockඑම මූලද්‍රව්‍යය තුළ වලංගුකරණ ශෛලීන් ලැබෙනු ඇත.

උපකාරක තාක්ෂණයන් සහ වර්ණ අන්ධ පරිශීලකයන් වෙත වලංගු කිරීමේ තත්ත්වය ලබා දීම

පෝරම පාලනයක තත්ත්‍වය දැක්වීමට මෙම වලංගුකරණ ශෛලීන් භාවිතා කිරීම මඟින් දෘශ්‍ය, වර්ණ මත පදනම් වූ ඇඟවීමක් පමණක් සපයනු ලබන අතර, එය තිර කියවනය වැනි - සහායක තාක්ෂණයන් භාවිතා කරන්නන්ට හෝ වර්ණ අන්ධ පරිශීලකයින්ට ලබා නොදෙනු ඇත.

රාජ්‍යයේ විකල්ප ඇඟවීමක් ද සපයා ඇති බවට සහතික වන්න. උදාහරණයක් ලෙස, ඔබට පෝරම පාලනයේ <label>පෙළ තුළම තත්වය පිළිබඳ ඉඟියක් ඇතුළත් කළ හැකිය (පහත කේත උදාහරණයේ ඇති පරිදි), Glyphicon ඇතුළත් කරන්න (පංතිය භාවිතා කරමින් සුදුසු විකල්ප පෙළ සමඟ .sr-only- Glyphicon උදාහරණ බලන්න ) හෝ ලබා දීමෙන් අමතර උපකාර පෙළ වාරණ. aria-invalid="true"විශේෂයෙන් සහායක තාක්ෂණයන් සඳහා, වලංගු නොවන පෝරම පාලනයන් ද උපලක්ෂණයක් පැවරිය හැක .

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

විකල්ප අයිකන සමඟ

ඔබට එකතු කිරීම .has-feedbackසහ නිවැරදි නිරූපකය සමඟ විකල්ප ප්‍රතිපෝෂණ අයිකන එක් කළ හැකිය.

ප්‍රතිපෝෂණ අයිකන ක්‍රියා කරන්නේ පාඨමය <input class="form-control">මූලද්‍රව්‍ය සමඟ පමණි.

අයිකන, ලේබල් සහ ආදාන කණ්ඩායම්

ලේබලයක් නොමැති යෙදවුම් සඳහා සහ දකුණු පස ඇඩෝනයක් සහිත ආදාන කණ්ඩායම් සඳහා ප්‍රතිපෝෂණ අයිකන අතින් ස්ථානගත කිරීම අවශ්‍ය වේ. ප්‍රවේශ්‍යතා හේතූන් මත සියලුම යෙදවුම් සඳහා ලේබල සැපයීමට ඔබව දැඩි ලෙස දිරිමත් කරනු ලැබේ. ඔබට ලේබල් දර්ශනය වීම වැළැක්වීමට අවශ්‍ය නම්, ඒවා .sr-onlyපන්තිය සමඟ සඟවන්න. ඔබ ලේබල් නොමැතිව කළ යුතු නම් top, ප්‍රතිපෝෂණ නිරූපකයේ අගය සකසන්න. ආදාන කණ්ඩායම් සඳහා, rightඔබගේ ඇඩෝනයේ පළල මත පදනම්ව සුදුසු පික්සල් අගයකට අගය සකසන්න.

නිරූපකයේ තේරුම උපකාරක තාක්ෂණයන් වෙත ගෙන යාම

තිර කියවනය වැනි උපකාරක තාක්ෂණයන් - අයිකනයක තේරුම නිවැරදිව ප්‍රකාශ කරන බව සහතික කිරීම සඳහා, අමතර සැඟවුණු පෙළ .sr-onlyපන්තිය සමඟ ඇතුළත් කළ යුතු අතර එය භාවිතා කිරීමට අදාළ පෝරම පාලනය සමඟ පැහැදිලිව සම්බන්ධ කළ යුතුය aria-describedby. විකල්පයක් ලෙස, අර්ථය (උදාහරණයක් ලෙස, විශේෂිත පෙළ ඇතුළත් කිරීමේ ක්ෂේත්‍රයක් සඳහා අනතුරු ඇඟවීමක් තිබීම) සත්‍යයේ පෙළ වෙනස් කිරීම වැනි වෙනත් ආකාරයකින් ප්‍රකාශ කරන බවට සහතික වන්න.<label>විකල්පයක් ලෙස, පෝරමය පාලනයට සම්බන්ධ

පහත උදාහරණ දැනටමත් පාඨය තුළම ඒවායේ අදාළ ආකෘති පාලනවල වලංගු කිරීමේ තත්ත්වය සඳහන් කර ඇතත් <label>, ඉහත තාක්ෂණය ( .sr-onlyපෙළ සහ aria-describedby) නිදර්ශන අරමුණු සඳහා ඇතුළත් කර ඇත.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

තිරස් සහ පේළිගත ආකාරවලින් විකල්ප අයිකන

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

සැඟවුණු `.sr-only`ලේබල සහිත විකල්ප අයිකන

.sr-onlyපෝරම පාලනයක් සැඟවීමට ඔබ පන්තිය භාවිතා කරන්නේ නම් <label>(උලක්ෂණ වැනි වෙනත් ලේබල් කිරීමේ විකල්ප භාවිතා කරනවාට වඩා aria-label), Bootstrap එය එකතු කළ පසු අයිකනයේ පිහිටීම ස්වයංක්‍රීයව සකසනු ඇත.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

පාලන ප්‍රමාණය

වැනි පන්ති භාවිතා කරමින් උස සකසන්න .input-lg, සහ ජාල තීරු පන්ති භාවිතා කරමින් පළල සකසන්න .col-lg-*.

උස ප්රමාණය

බොත්තම් ප්‍රමාණවලට ගැළපෙන උස හෝ කෙටි ආකෘති පාලන සාදන්න.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

තිරස් ආකෘති කණ්ඩායම් ප්රමාණ

එකතු .form-horizontalකිරීම මගින් .form-group-lgහෝ .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

තීරු ප්රමාණය

අවශ්‍ය පළල පහසුවෙන් බලාත්මක කිරීමට ජාලක තීරු හෝ ඕනෑම අභිරුචි මාපිය මූලද්‍රව්‍යවල යෙදවුම් ඔතා.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

බොත්තම් ටැග්

<a>, <button>, හෝ <input>මූලද්‍රව්‍ය මත බොත්තම් පන්ති භාවිතා කරන්න .

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

සන්දර්භය-විශේෂිත භාවිතය

<a>බොත්තම් පන්ති සහ <button>මූලද්‍රව්‍ය භාවිතා කළ හැකි අතර , <button>අපගේ nav සහ navbar සංරචක තුළ මූලද්‍රව්‍ය පමණක් සහාය දක්වයි.

සබැඳි බොත්තම් ලෙස ක්‍රියා කරයි

මූලද්‍රව්‍ය බොත්තම් ලෙස ක්‍රියා කිරීමට භාවිතා කරන්නේ නම් <a>- පිටුව-තුළ ක්‍රියාකාරීත්වය අවුලුවාලීම, වෙනත් ලේඛනයක් හෝ වත්මන් පිටුව තුළ කොටසකට සැරිසැරීමට වඩා - ඒවාට සුදුසු එකක් ද ලබා දිය යුතුය role="button".

හරස් බ්‍රවුසර විදැහුම්කරණය

හොඳම භාවිතයක් ලෙස, හරස් බ්‍රවුසර විදැහුම්කරණය ගැළපීම සහතික කිරීම සඳහා හැකි සෑම විටම මූලද්‍රව්‍යය භාවිත කිරීම අපි තරයේ නිර්දේශ කරමු .<button>

වෙනත් දේ අතර, ෆයර්ෆොක්ස් <30 හි දෝෂයක් ඇතline-height , එය පදනම් බොත්තම් සැකසීමෙන් අපව වළක්වයි <input>, එමඟින් ඒවා ෆයර්ෆොක්ස් හි අනෙකුත් බොත්තම්වල උසට හරියටම නොගැලපේ.

විකල්ප

මෝස්තර සහිත බොත්තමක් ඉක්මනින් සෑදීමට පවතින ඕනෑම බොත්තම් පන්ති භාවිතා කරන්න.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

උපකාරක තාක්ෂණයන් සඳහා අර්ථය ලබා දීම

බොත්තමකට අරුතක් එක් කිරීමට වර්ණය භාවිතා කිරීම මඟින් දෘශ්‍ය ඇඟවීමක් පමණක් සපයනු ලබන අතර, එය තිර කියවනය වැනි ආධාරක තාක්ෂණයන් භාවිතා කරන්නන්ට ලබා නොදේ. වර්ණයෙන් දැක්වෙන තොරතුරු අන්තර්ගතයෙන් ම (බොත්තමෙහි දෘශ්‍ය පෙළ) පැහැදිලි බව හෝ .sr-onlyපන්තිය සමඟ සඟවා ඇති අතිරේක පෙළ වැනි විකල්ප ක්‍රම හරහා ඇතුළත් කර ඇති බව සහතික කර ගන්න.

ප්රමාණ

විශාල හෝ කුඩා බොත්තම් කැමතිද? එකතු කරන්න .btn-lg, .btn-smහෝ .btn-xsඅතිරේක ප්රමාණ සඳහා.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

බ්ලොක් මට්ටමේ බොත්තම්-දෙමව්පියෙකුගේ සම්පූර්ණ පළල දක්වා විහිදෙන-එකතු කිරීමෙන් සාදන්න .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

ක්රියාකාරී තත්ත්වය

සක්‍රිය වූ විට බොත්තම් එබූ විට (අඳුරු පසුබිමක්, අඳුරු මායිම සහ ඇතුල් සෙවන සහිත) දිස්වනු ඇත. මූලද්රව්ය සඳහා <button>, මෙය සිදු කරනු ලබන්නේ හරහාය :active. <a>මූලද්රව්ය සඳහා , එය සිදු කරනු .activeලැබේ. කෙසේ වෙතත්, ඔබට සක්‍රිය තත්ත්වය ක්‍රමලේඛනාත්මකව ප්‍රතිනිර්මාණය කිරීමට අවශ්‍ය නම් ඔබට s (සහ ගුණාංගය ඇතුළත් ) භාවිතා .activeකළ හැක.<button>aria-pressed="true"

බොත්තම් මූලද්රව්යය

එය ව්‍යාජ පන්තියක් බැවින් එකතු කිරීමට අවශ්‍ය නැත :active, නමුත් ඔබට එකම පෙනුම බල කිරීමට අවශ්‍ය නම්, ඉදිරියට ගොස් එකතු කරන්න .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

ඇන්කර් මූලද්රව්යය

බොත්තම් .activeවලට පන්තිය එක් කරන්න .<a>

මූලික සබැඳිය සබැඳිය

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

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

බොත්තම් නැවත මැකී යාමෙන් ක්ලික් කළ නොහැකි පෙනුමක් ඇති කරන්න opacity.

බොත්තම් මූලද්රව්යය

බොත්තම් disabledවලට ගුණාංගය එක් කරන්න .<button>

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

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

ඔබ disableda ට උපලක්ෂණය එක් කළහොත් <button>, Internet Explorer 9 සහ ඊට පහළින් අපට නිවැරදි කළ නොහැකි අශෝභන අකුරු සෙවනැල්ලක් සහිත අකුරු අළු පැහැයක් ගනී.

ඇන්කර් මූලද්රව්යය

බොත්තම් .disabledවලට පන්තිය එක් කරන්න .<a>

මූලික සබැඳිය සබැඳිය

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

අපි .disabledමෙහි සාමාන්‍ය පන්තියට සමාන උපයෝගිතා පන්තියක් ලෙස භාවිතා කරමු .active, එබැවින් උපසර්ගයක් අවශ්‍ය නොවේ.

සබැඳි ක්‍රියාකාරී අවවාදය

pointer-events: nones හි සබැඳි ක්‍රියාකාරීත්වය අක්‍රිය කිරීමට මෙම පන්තිය භාවිතා කරයි <a>, නමුත් එම CSS ගුණය තවමත් ප්‍රමිතිගත කර නැති අතර Opera 18 සහ ඊට පහළින් හෝ Internet Explorer 11 හි පූර්ණ සහාය නොදක්වයි. ඊට අමතරව, සහාය දක්වන බ්‍රවුසරවල පවා pointer-events: none, යතුරු පුවරුව සංචලනය බල නොපායි, එයින් අදහස් කරන්නේ දෘෂ්‍යමාන යතුරුපුවරු භාවිතා කරන්නන්ට සහ උපකාරක තාක්ෂණයන් භාවිතා කරන්නන්ට තවමත් මෙම සබැඳි සක්‍රිය කිරීමට හැකි වනු ඇති බවයි. එබැවින් ආරක්ෂිත වීමට, එවැනි සබැඳි අක්‍රිය කිරීමට අභිරුචි JavaScript භාවිතා කරන්න.

ප්‍රතිචාරාත්මක රූප

.img-responsiveBootstrap 3 හි පින්තූර පන්තිය එකතු කිරීම හරහා ප්‍රතිචාරාත්මක-හිතකාමී බවට පත් කළ හැක . මෙය අදාළ වේ max-width: 100%;, height: auto;සහ display: block;රූපයට එය මව් මූලද්‍රව්‍යයට මනාව පරිමාණය වේ.

.img-responsiveපන්තිය භාවිතා කරන රූප මධ්‍යගත කිරීමට , .center-blockවෙනුවට භාවිතා කරන්න .text-center. භාවිතය පිළිබඳ වැඩි විස්තර සඳහා උපකාරක පන්ති අංශය බලන්න ..center-block

SVG රූප සහ IE 8-10

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8-10 හි, SVG පින්තූර .img-responsiveඅසමානුපාතික ලෙස ප්‍රමාණයෙන් යුක්ත වේ. width: 100% \9;මෙය නිවැරදි කිරීම සඳහා, අවශ්ය තැනට එකතු කරන්න . බූට්ස්ට්‍රැප් මෙය ස්වයංක්‍රීයව අදාළ නොවේ, මන්ද එය වෙනත් රූප ආකෘතිවලට සංකූලතා ඇති කරයි.

<img src="..." class="img-responsive" alt="Responsive image">

රූප හැඩතල

<img>ඕනෑම ව්‍යාපෘතියක රූප පහසුවෙන් හැඩගස්වා ගැනීමට අංගයකට පන්ති එක් කරන්න .

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

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 හි වටකුරු කොන් සඳහා සහය නොමැති බව මතක තබා ගන්න.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

සන්දර්භ වර්ණ

අවධාරණ උපයෝගිතා පන්ති අතලොස්සක් සමඟ වර්ණය හරහා අර්ථය ප්‍රකාශ කරන්න. මේවා සබැඳිවලට ද යෙදිය හැකි අතර අපගේ පෙරනිමි සබැඳි විලාසයන් මෙන් ම උඩින් අඳුරු වේ.

Fusce dapibus, Telus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada Magna mollis euismod.

Donec ullamcorper nulla non metus aactor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

විශේෂත්වය සමඟ කටයුතු කිරීම

වෙනත් තේරීම්කාරකයක විශේෂත්වය නිසා සමහර විට අවධාරණය පන්ති යෙදිය නොහැක. බොහෝ අවස්ථාවන්හීදී, ප්‍රමාණවත් විසඳුමක් වන්නේ ඔබේ පෙළ <span>පන්තිය සමඟ එතීමයි.

උපකාරක තාක්ෂණයන් සඳහා අර්ථය ලබා දීම

අර්ථය එකතු කිරීම සඳහා වර්ණය භාවිතා කිරීම දෘශ්‍ය ඇඟවීමක් පමණක් සපයයි, එය තිර කියවනය වැනි ආධාරක තාක්ෂණයන් භාවිතා කරන්නන්ට ලබා නොදේ. වර්ණයෙන් දැක්වෙන තොරතුරු එක්කෝ අන්තර්ගතයෙන්ම පැහැදිලිව පෙනෙන බව සහතික කර ගන්න (සන්දර්භීය වර්ණ භාවිතා කරන්නේ දැනටමත් පෙළ/සලකුණු තුළ ඇති අර්ථය ශක්තිමත් කිරීමට පමණි) හෝ .sr-onlyපන්තිය සමඟ සඟවා ඇති අතිරේක පෙළ වැනි විකල්ප ක්‍රම හරහා ඇතුළත් කර ඇත. .

සන්දර්භ පසුබිම

සන්දර්භීය පාඨ වර්ණ පන්තිවලට සමානව, ඕනෑම සන්දර්භීය පන්තියකට මූලද්රව්යයක පසුබිම පහසුවෙන් සකසන්න. නැංගුරම් සංරචක පෙළ පන්ති මෙන්, hover මත අඳුරු වනු ඇත.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada Magna mollis euismod.

Donec ullamcorper nulla non metus aactor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

විශේෂත්වය සමඟ කටයුතු කිරීම

වෙනත් තේරීමක විශේෂත්වය හේතුවෙන් සමහර විට සන්දර්භීය පසුබිම් පන්ති යෙදිය නොහැක. සමහර අවස්ථාවලදී, ප්‍රමාණවත් විසඳුමක් වන්නේ ඔබේ මූලද්‍රව්‍යයේ අන්තර්ගතය <div>පන්තිය සමඟ එතීමයි.

උපකාරක තාක්ෂණයන් සඳහා අර්ථය ලබා දීම

සන්දර්භීය වර්ණ වලදී මෙන් , වර්ණය හරහා ප්‍රකාශ කරන ඕනෑම අර්ථයක් හුදු ඉදිරිපත් කිරීමක් නොවන ආකෘතියකින් ද සම්ප්‍රේෂණය වන බවට සහතික වන්න.

නිරූපකය වසන්න

ආකෘති සහ ඇඟවීම් වැනි අන්තර්ගතය ඉවතලීම සඳහා සාමාන්‍ය සමීප නිරූපකය භාවිතා කරන්න.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

පතන ක්‍රියාකාරීත්වය සහ දිශාව දැක්වීමට Carets භාවිතා කරන්න. පතන මෙනු වල පෙරනිමි කැරැට්ටුව ස්වයංක්‍රීයව ප්‍රතිවර්තනය වන බව සලකන්න .

<span class="caret"></span>

ඉක්මන් පාවෙන

පන්තියක් සමඟ මූලද්‍රව්‍යයක් වමට හෝ දකුණට පා කරන්න. !importantවිශේෂිත ගැටළු මඟහරවා ගැනීම සඳහා ඇතුළත් කර ඇත. පන්ති මික්සින් ලෙසද භාවිතා කළ හැකිය.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

මධ්යස්ථ අන්තර්ගත අවහිර කිරීම්

මූලද්‍රව්‍යයක් සකසන්න display: blockසහ හරහා මැදට සකසන්න margin. මිශ්‍රණයක් සහ පන්තියක් ලෙස පවතී.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

මව් මූලද්‍රව්‍යයටfloat එකතු කිරීමෙන් s පහසුවෙන් ඉවත් කරන්න . Nicolas Gallagher විසින් ප්‍රචලිත කරන ලද micro clearfix භාවිතා කරයි. මිශ්‍රණයක් ලෙසද භාවිතා කළ හැක..clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

අන්තර්ගතය පෙන්වීම සහ සැඟවීම

භාවිතා කිරීම සහ පන්ති සමඟින් අංගයක් පෙන්වීමට හෝ සැඟවීමට ( තිර කියවන්නන් සඳහා ඇතුළුව ) බල කරන්න. ඉක්මන් පාවෙන ආකාරයටම, නිශ්චිතතා ගැටුම් මඟහරවා ගැනීමට මෙම පන්ති භාවිතා කරයි . ඒවා ලබා ගත හැක්කේ වාරණ මට්ටමේ ටොගල් කිරීම සඳහා පමණි. ඒවා මික්සින් ලෙසද භාවිතා කළ හැකිය..show.hidden!important

.hideඇත, නමුත් එය සෑම විටම තිර කියවනයට බලපාන්නේ නැති අතර v3.0.1 ලෙස අත්හරිනු ලැබේ. භාවිතා කරන්න .hiddenහෝ .sr-onlyඒ වෙනුවට.

තවද, .invisibleමූලද්‍රව්‍යයක දෘශ්‍යතාව පමණක් ටොගල් කිරීමට භාවිතා කළ හැක, එනම් එය displayවෙනස් කර නොමැති අතර මූලද්‍රව්‍යය තවමත් ලේඛනයේ ප්‍රවාහයට බලපෑම් කළ හැකිය.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

තිර කියවනය සහ යතුරුපුවරු සංචාලන අන්තර්ගතය

සමඟ තිර කියවනය හැර අනෙකුත් සියලුම උපාංග වෙත අංගයක් සඟවන්න .sr-only. මූලද්‍රව්‍යය නාභිගත වූ විට එය නැවත පෙන්වීමට .sr-onlyසමඟ ඒකාබද්ධ කරන්න (උදා: යතුරුපුවරුව-පමණි පරිශීලකයෙකු විසින්). ප්‍රවේශ්‍යතා හොඳම භාවිතයන් අනුගමනය.sr-only-focusable කිරීම සඳහා අවශ්‍ය වේ . මික්සින් ලෙසද භාවිතා කළ හැක.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

රූපය ආදේශ කිරීම

.text-hideමූලද්‍රව්‍යයක පෙළ අන්තර්ගතය පසුබිම් රූපයක් සමඟ ප්‍රතිස්ථාපනය කිරීමට උපකාර කිරීමට පන්තිය හෝ මික්සින් භාවිතා කරන්න .

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

වේගවත් ජංගම-හිතකාමී සංවර්ධනයක් සඳහා, මාධ්‍ය විමසුම හරහා උපාංගය මඟින් අන්තර්ගතය පෙන්වීමට සහ සැඟවීමට මෙම උපයෝගිතා පන්ති භාවිතා කරන්න. මුද්‍රණය කරන විට අන්තර්ගතය ටොගල් කිරීම සඳහා උපයෝගිතා පන්ති ද ඇතුළත් වේ.

මේවා සීමිත පදනමක් මත භාවිතා කිරීමට උත්සාහ කරන්න සහ එකම වෙබ් අඩවියේ සම්පූර්ණයෙන්ම වෙනස් අනුවාද නිර්මාණය කිරීමෙන් වළකින්න. ඒ වෙනුවට, එක් එක් උපාංගයේ ඉදිරිපත් කිරීම සම්පූර්ණ කිරීමට ඒවා භාවිතා කරන්න.

ලබා ගත හැකි පන්ති

Viewport breakpoints හරහා අන්තර්ගතය ටොගල් කිරීම සඳහා පවතින පන්තිවල තනි හෝ එකතුවක් භාවිතා කරන්න.

	අමතර කුඩා උපාංගදුරකථන (<768px)	කුඩා උපාංගටැබ්ලට් (≥768px)	මධ්යම උපාංගඩෙස්ක්ටොප් (≥992px)	විශාල උපාංගඩෙස්ක්ටොප් (≥1200px)
`.visible-xs-*`	දෘශ්‍යමානයි	සැඟවී ඇත	සැඟවී ඇත	සැඟවී ඇත
`.visible-sm-*`	සැඟවී ඇත	දෘශ්‍යමානයි	සැඟවී ඇත	සැඟවී ඇත
`.visible-md-*`	සැඟවී ඇත	සැඟවී ඇත	දෘශ්‍යමානයි	සැඟවී ඇත
`.visible-lg-*`	සැඟවී ඇත	සැඟවී ඇත	සැඟවී ඇත	දෘශ්‍යමානයි
`.hidden-xs`	සැඟවී ඇත	දෘශ්‍යමානයි	දෘශ්‍යමානයි	දෘශ්‍යමානයි
`.hidden-sm`	දෘශ්‍යමානයි	සැඟවී ඇත	දෘශ්‍යමානයි	දෘශ්‍යමානයි
`.hidden-md`	දෘශ්‍යමානයි	දෘශ්‍යමානයි	සැඟවී ඇත	දෘශ්‍යමානයි
`.hidden-lg`	දෘශ්‍යමානයි	දෘශ්‍යමානයි	දෘශ්‍යමානයි	සැඟවී ඇත

v3.2.0 වන විට, .visible-*-*එක් එක් කඩඉම් ලක්ෂ්‍යය සඳහා පන්ති වෙනස්කම් තුනකින් පැමිණේ, displayපහත ලැයිස්තුගත කර ඇති එක් එක් CSS දේපල අගය සඳහා එකක්.

පන්ති සමූහය	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

එබැවින්, අමතර කුඩා ( xs) තිර සඳහා උදාහරණයක් ලෙස, පවතින .visible-*-*පන්ති වන්නේ: .visible-xs-block, .visible-xs-inline, සහ .visible-xs-inline-block.

පන්ති .visible-xs, .visible-sm, .visible-md, සහ .visible-lgද පවතී, නමුත් v3.2.0 ලෙස අත්හරිනු ලැබේ. ඒවා ටොගල්-ආශ්‍රිත මූලද්‍රව්‍ය .visible-*-blockසඳහා අමතර විශේෂ අවස්ථා හැර, ආසන්න වශයෙන් සමාන වේ.<table>

මුද්රණ පන්ති

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

පංතිවල	බ්රවුසරය	මුද්‍රණය කරන්න
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	සැඟවී ඇත	දෘශ්‍යමානයි
`.hidden-print`	දෘශ්‍යමානයි	සැඟවී ඇත

පන්තිය .visible-printද පවතින නමුත් v3.2.0 ලෙස අත්හරිනු ලැබේ. -ආශ්‍රිත මූලද්‍රව්‍ය .visible-print-blockසඳහා අමතර විශේෂ අවස්��ා හැර එය ආසන්න වශයෙන් සමාන වේ.<table>

පරීක්ෂණ අවස්ථා

ප්‍රතිචාරාත්මක උපයෝගිතා පන්ති පරීක්ෂා කිරීමට ඔබේ බ්‍රවුසරයේ ප්‍රමාණය වෙනස් කරන්න හෝ විවිධ උපාංග මත පූරණය කරන්න.

දෘශ්‍යමානයි...

හරිත පිරික්සුම් සලකුණු මූලද්රව්යය දක්වයි ඔබගේ වත්මන් දර්ශන තොටේ දෘශ්‍යමාන බවයි.

අමතර කුඩා ✔ x-small මත දිස්වේ

කුඩා ✔ කුඩා මත දිස්වේ

මධ්යම ✔ මධ්‍යම මත දිස්වේ

මහා ✔ විශාල මත දිස්වේ

අමතර කුඩා සහ කුඩා ✔ x-කුඩා සහ කුඩා මත දෘශ්‍යමාන වේ

මධ්යම සහ විශාල ✔ මධ්‍යම සහ විශාල මත දිස්වේ

අමතර කුඩා හා මධ්යම ✔ x-කුඩා සහ මධ්‍යම මත දිස්වේ

කුඩා හා විශාල ✔ කුඩා හා විශාල වශයෙන් දැකිය හැක

අමතර කුඩා හා විශාල ✔ x-කුඩා සහ විශාල මත දෘශ්‍යමාන වේ

කුඩා හා මධ්යම ✔ කුඩා හා මධ්‍යම මත දිස්වේ

සඟවාගෙන...

මෙහිදී, හරිත පිරික්සුම් සලකුණු මඟින් ඔබේ වත්මන් දර්ශන තොටේ මූලද්‍රව්‍යය සඟවා ඇති බව ද දක්වයි.

අමතර කුඩා ✔ x-small හි සඟවා ඇත

කුඩා ✔ කුඩා මත සැඟවී ඇත

මධ්යම ✔ මධ්‍යස්ථව සැඟවී ඇත

මහා ✔ විශාල මත සැඟවී ඇත

අමතර කුඩා සහ කුඩා ✔ x-කුඩා සහ කුඩා මත සැඟවී ඇත

මධ්යම සහ විශාල ✔ මධ්යම සහ විශාල මත සැඟවී ඇත

අමතර කුඩා හා මධ්යම ✔ x-කුඩා සහ මධ්‍යම මත සැඟවී ඇත

කුඩා හා විශාල ✔ කුඩා හා විශාල මත සැඟවී ඇත

අමතර කුඩා හා විශාල ✔ x-කුඩා සහ විශාල මත සැඟවී ඇත

කුඩා හා මධ්යම ✔ කුඩා හා මධ්යම මත සැඟවී ඇත

Bootstrap හි CSS ගොඩනගා ඇත්තේ Less මත, විචල්‍යයන්, මික්සින්, සහ CSS සම්පාදනය සඳහා වන ශ්‍රිත වැනි අමතර ක්‍රියාකාරීත්වයක් සහිත පූර්ව සකසනයකි. අපගේ සම්පාදනය කරන ලද CSS ගොනු වෙනුවට ප්‍රභව අඩු ගොනු භාවිතා කිරීමට බලාපොරොත්තු වන අයට රාමුව පුරා අප භාවිතා කරන බොහෝ විචල්‍යයන් සහ මිශ්‍රණයන් භාවිතා කළ හැකිය.

ජාලක විචල්‍යයන් සහ මිශ්‍රණයන් ජාල පද්ධති අංශය තුළ ආවරණය කර ඇත ආවරණය කර ඇත .

Bootstrap සම්පාදනය කිරීම

Bootstrap අවම වශයෙන් ආකාර දෙකකින් භාවිතා කළ හැක: සම්පාදනය කරන ලද CSS හෝ මූලාශ්‍රය අඩු ගොනු සමඟ. අඩු ගොනු සම්පාදනය කිරීමට, අවශ්‍ය විධාන ක්‍රියාත්මක කිරීම සඳහා ඔබේ සංවර්ධන පරිසරය සකසන්නේ කෙසේද යන්න සඳහා ආරම්භ කිරීම යන කොටස බලන්න .

තෙවන පාර්ශ්ව සම්පාදක මෙවලම් Bootstrap සමඟ ක්‍රියා කළ හැකි නමුත් ඒවාට අපගේ මූලික කණ්ඩායම විසින් සහාය නොදක්වයි.

විචල්යයන්

වර්ණ, පරතරය, හෝ අකුරු අට්ටි වැනි බහුලව භාවිතා වන අගයන් මධ්‍යගත කිරීමට සහ බෙදා ගැනීමට මාර්ගයක් ලෙස සමස්ත ව්‍යාපෘතිය පුරා විචල්‍යයන් භාවිතා වේ. සම්පූර්ණ බිඳවැටීමක් සඳහා, කරුණාකර Customizer බලන්න .

වර්ණ

වර්ණ පටිපාටි දෙකක් පහසුවෙන් භාවිතා කරන්න: අළු පරිමාණ සහ අර්ථකථන. අළු පරිමාණ වර්ණ සාමාන්‍යයෙන් භාවිතා කරන කළු වර්ණවලට ඉක්මන් ප්‍රවේශයක් සපයන අතර අර්ථවත් සන්දර්භීය අගයන් සඳහා පවරා ඇති විවිධ වර්ණ අර්ථකථනයට ඇතුළත් වේ.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

මෙම වර්ණ විචල්‍යයන් ඕනෑම එකක් ලෙස භාවිතා කරන්න හෝ ඔබේ ව්‍යාපෘතිය සඳහා වඩාත් අර්ථවත් විචල්‍යයන් වෙත ඒවා නැවත පවරන්න.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

පලංචිය

ඔබේ වෙබ් අඩවියේ ඇටසැකිල්ලේ ප්‍රධාන අංග ඉක්මනින් අභිරුචිකරණය කිරීම සඳහා විචල්‍ය අතලොස්සක්.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

සබැඳි

එක් අගයක් පමණක් සහිත නිවැරදි වර්ණයකින් ඔබේ සබැඳි පහසුවෙන් හැඩගස්වන්න.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

@link-hover-colorනිවැරදි hover වර්ණය ස්වයංක්‍රීයව නිර්මාණය කිරීමට, Less වෙතින් තවත් විශිෂ්ට මෙවලමක් ශ්‍රිතයක් භාවිතා කරන බව සලකන්න . ඔබට භාවිතා කළ හැකිය darken, lighten, saturateසහ desaturate.

මුද්‍රණ ශිල්පය

ඉක්මන් විචල්‍ය කිහිපයක් සමඟින් ඔබේ අකුරු මුහුණත, පෙළ ප්‍රමාණය, ප්‍රමුඛත්වය සහ තවත් දේ පහසුවෙන් සකසන්න. බූට්ස්ට්‍රැප් පහසු මුද්‍රණ මිශ්‍රණයක් සැපයීමට මේවා භාවිතා කරයි.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

අයිකන

ඔබගේ අයිකන වල පිහිටීම සහ ගොනු නාමය අභිරුචිකරණය කිරීම සඳහා ඉක්මන් විචල්‍ය දෙකක්.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

සංරචක

Bootstrap පුරා ඇති සංරචක පොදු අගයන් සැකසීම සඳහා සමහර පෙරනිමි විචල්‍යයන් භාවිතා කරයි. මෙන්න වඩාත් බහුලව භාවිතා වේ.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

වෙළෙන්දා මික්සින්

විකුණුම්කරු මික්සින් යනු ඔබේ සම්පාදනය කරන ලද CSS හි සියලුම අදාළ විකුණුම් උපසර්ග ඇතුළත් කිරීමෙන් බහු බ්‍රවුසර සඳහා සහාය වීමට මික්සින් වේ.

පෙට්ටි ප්රමාණය

තනි මිශ්‍රණයකින් ඔබේ සංරචක පෙට්ටි ආකෘතිය නැවත සකසන්න. සන්දර්භය සඳහා, Mozilla වෙතින් මෙම ප්‍රයෝජනවත් ලිපිය බලන්න .

Autoprefixer හඳුන්වාදීමත් සමඟ මික්සින් v3.2.0 ලෙස අත්හරිනු ලැබේ. පසුගාමී-ගැළපීම ආරක්ෂා කර ගැනීමට, Bootstrap v4 තෙක් Bootstrap අභ්‍යන්තරව mixin භාවිතා කරයි.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

වටකුරු කොන්

අද සියලුම නවීන බ්‍රව්සර් උපසර්ග නොවන border-radiusදේපල සඳහා සහය දක්වයි. එනිසා, මිශ්‍රණයක් නොමැත .border-radius(), නමුත් Bootstrap වස්තුවක විශේෂිත පැත්තක කොන් දෙකක් ඉක්මනින් වට කිරීම සඳහා කෙටිමං ඇතුළත් වේ.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

පෙට්ටිය (බිංදු) සෙවනැලි

ඔබගේ ඉලක්කගත ප්‍රේක්ෂකයින් නවතම සහ විශිෂ්ටතම බ්‍රවුසර සහ උපාංග භාවිතා කරන්නේ නම්, එම box-shadowදේපල පමණක් භාවිතා කිරීමට වග බලා ගන්න. ඔබට පැරණි Android (pre-v4) සහ iOS උපාංග (pre-iOS 5) සඳහා සහය අවශ්‍ය නම්, අවශ්‍ය උපසර්ගය ලබා ගැනීමට අවලංගු කළ mixin භාවිතා කරන්න.-webkit

සම්මත දේපල සඳහා සහය නොදක්වන යල් පැන ගිය වේදිකා සඳහා Bootstrap නිල වශයෙන් සහාය නොදක්වන බැවින්, mixin v3.1.0 ලෙස අත්හරිනු ලැබේ . පසුගාමී-ගැළපීම ආරක්ෂා කර ගැනීමට, Bootstrap v4 තෙක් Bootstrap අභ්‍යන්තරව mixin භාවිතා කරයි.

rgba()පසුබිම් සමඟ හැකිතාක් බාධාවකින් තොරව සම්මිශ්‍රණය වන පරිදි ඔබේ පෙට්ටි සෙවනැලි වල වර්ණ භාවිතා කිරීමට වග බලා ගන්න .

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

සංක්රාන්ති

නම්‍යශීලී බව සඳහා බහු මිශ්‍රණ. සියලුම සංක්‍රාන්ති තොරතුරු එකක් සමඟ සකසන්න, නැතහොත් අවශ්‍ය පරිදි වෙනම ප්‍රමාදයක් සහ කාල සීමාවක් සඳහන් කරන්න.

ඔටෝප්‍රෙෆික්සර් හඳුන්වාදීමත් සමඟ මික්සින් v3.2.0 ලෙස අත්හරිනු ලැබේ . පසුගාමී-ගැළපීම ආරක්ෂා කර ගැනීම සඳහා, Bootstrap v4 තෙක් Bootstrap අභ්‍යන්තරව මිශ්‍රණයන් භාවිතා කරනු ඇත.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

පරිවර්තනයන්

ඕනෑම වස්තුවක් කරකවන්න, පරිමාණය කරන්න, පරිවර්තනය කරන්න (චලනය කරන්න) හෝ විකෘති කරන්න.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

සජීවිකරණ

CSS3 හි සියලුම සජීවිකරණ ගුණාංග එක් ප්‍රකාශනයක සහ අනෙකුත් මිශ්‍රණ තනි ගුණාංග සඳහා භාවිතා කිරීම සඳහා තනි මිශ්‍රණයක්.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

පාරාන්ධතාව

සියලුම බ්‍රව්සර් සඳහා පාරාන්ධතාව සකසන්න සහ filterIE8 සඳහා පසුබැසීමක් ලබා දෙන්න.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

ස්ථාන දරණ පෙළ

එක් එක් ක්ෂේත්‍රය තුළ පෝරම පාලනය සඳහා සන්දර්භය සපයන්න.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

තීරු

තනි මූලද්‍රව්‍යයක් තුළ CSS හරහා තීරු ජනනය කරන්න.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

අනුක්‍රමික

ඕනෑම වර්ණ දෙකක් පහසුවෙන් පසුබිම් අනුක්‍රමයක් බවට පත් කරන්න. වඩාත් දියුණු වී දිශාවක් සකසන්න, වර්ණ තුනක් භාවිතා කරන්න, හෝ රේඩියල් අනුක්‍රමයක් භාවිතා කරන්න. තනි මිශ්‍රණයකින් ඔබට අවශ්‍ය සියලුම උපසර්ග වාක්‍ය ඛණ්ඩ ලැබේ.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

ඔබට සම්මත ද්වි-වර්ණ, රේඛීය අනුක්‍රමයක කෝණය ද නියම කළ හැක:

#gradient > .directional(#333; #000; 45deg);

ඔබට බාබර්-ඉරි විලාසිතාවේ අනුක්‍රමයක් අවශ්‍ය නම්, එයද පහසුය. තනි වර්ණයක් සඳහන් කරන්න, අපි පාරභාසක සුදු තීරුවක් උඩින් තබන්නෙමු.

#gradient > .striped(#333; 45deg);

පෙරට ගොස් ඒ වෙනුවට වර්ණ තුනක් භාවිතා කරන්න. පළමු වර්ණය, දෙවන වර්ණය, දෙවන වර්ණයෙහි වර්ණ නැවතුම (25% වැනි ප්‍රතිශත අගයක්) සහ තුන්වන වර්ණය මෙම මිශ්‍රණ සමඟ සකසන්න:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

දැනුම්දීම! ඔබට කවදා හෝ අනුක්‍රමණයක් ඉවත් කිරීමට අවශ්‍ය නම්, filterඔබ එක් කළ හැකි IE විශේෂිත එකක් ඉවත් කිරීමට වග බලා ගන්න. .reset-filter()මික්සින් සමඟ භාවිතා කිරීමෙන් ඔබට එය කළ හැකිය background-image: none;.

උපයෝගිතා මිශ්රණ

උපයෝගිතා මික්සින් යනු නිශ්චිත ඉලක්කයක් හෝ කාර්යයක් සාක්ෂාත් කර ගැනීම සඳහා වෙනත් ආකාරයකින් සම්බන්ධ නොවූ CSS ගුණාංග ඒකාබද්ධ කරන මිශ්‍රණ වේ.

Clearfix

class="clearfix"ඕනෑම මූලද්‍රව්‍යයකට එකතු කිරීම අමතක කර ඒ වෙනුවට .clearfix()සුදුසු තැන්වල මික්සින් එක් කරන්න. Nicolas Gallagher වෙතින් micro clearfix භාවිතා කරයි .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

තිරස් කේන්ද්රගත කිරීම

ඕනෑම මූලද්‍රව්‍යයක් එහි මාපිය තුළ ඉක්මනින් මධ්‍යගත කරන්න. අවශ්‍ය widthහෝ max-widthසැකසීමට.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

ප්‍රමාණයේ සහායකයින්

වස්තුවක මානයන් වඩාත් පහසුවෙන් සඳහන් කරන්න.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

ප්‍රතිප්‍රමාණ කළ හැකි පෙළ ප්‍රදේශ

ඕනෑම textarea, හෝ වෙනත් ඕනෑම අංගයක් සඳහා ප්‍රමාණය වෙනස් කිරීමේ විකල්ප පහසුවෙන් වින්‍යාස කරන්න. සාමාන්‍ය බ්‍රවුසර හැසිරීමට පෙරනිමිය ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

පෙළ කප්පාදු කිරීම

තනි මිශ්‍රණයක් සහිත ඉලිප්සයක් සමඟ පෙළ පහසුවෙන් කපා දමන්න. මූලද්‍රව්‍ය තිබීමට blockහෝ inline-blockමට්ටමට අවශ්‍ය වේ.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

දෘෂ්ටි විතානයේ රූප

රූප මාර්ග දෙකක් සහ @1x රූප මානයන් සඳහන් කරන්න, සහ Bootstrap @2x මාධ්‍ය විමසුමක් සපයනු ඇත. ඔබට සේවය කිරීමට බොහෝ පින්තූර තිබේ නම්, එක් මාධ්‍ය විමසුමකින් ඔබේ දෘෂ්ටි විතානයේ රූපය CSS අතින් ලිවීම සලකා බලන්න.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Bootstrap අඩු මත ගොඩනගා ඇති අතර, එය නිල Sass port එකක් ද ඇත . අපි එය වෙනම GitHub ගබඩාවක නඩත්තු කරන අතර පරිවර්තන ස්ක්‍රිප්ට් එකකින් යාවත්කාලීන හසුරුවමු.

ඇතුළත් දේ

Sass port වෙනම repo එකක් ඇති නිසා සහ තරමක් වෙනස් ප්‍රේක්ෂක පිරිසකට සේවය කරන බැවින්, ව්‍යාපෘතියේ අන්තර්ගතය ප්‍රධාන Bootstrap ව්‍යාපෘතියට වඩා බෙහෙවින් වෙනස් වේ. මෙය Sass වරාය හැකිතාක් Sass මත පදනම් වූ පද්ධති සමඟ අනුකූල බව සහතික කරයි.

මාර්ගය	විස්තර
`lib/`	රූබි මැණික් කේතය (Sass වින්‍යාසය, රේල් සහ මාලිමා ඒකාබද්ධ කිරීම්)
`tasks/`	පරිවර්තක ස්ක්‍රිප්ට් (උඩු ධාරාව අඩුවෙන් සාස් වෙත හැරවීම)
`test/`	සම්පාදන පරීක්ෂණ
`templates/`	මාලිමා පැකේජ මැනිෆෙස්ටය
`vendor/assets/`	Sass, JavaScript සහ අකුරු ගොනු
`Rakefile`	රේක් සහ පරිවර්තනය වැනි අභ්‍යන්තර කාර්යයන්

මෙම ගොනු ක්‍රියාත්මක වන ආකාරය බැලීමට Sass port හි GitHub ගබඩාවට පිවිසෙන්න .

ස්ථාපනය

Sass සඳහා Bootstrap ස්ථාපනය සහ භාවිතා කරන ආකාරය පිළිබඳ තොරතුරු සඳහා, GitHub repository readme බලන්න . එය වඩාත්ම යාවත්කාලීන මූලාශ්‍රය වන අතර Rails, Compass, සහ සම්මත Sass ව්‍යාපෘති සමඟ භාවිතය සඳහා තොරතුරු ඇතුළත් වේ.

Sass සඳහා Bootstrap

CSS

දළ විශ්ලේෂණය

HTML5 doctype

මුලින්ම ජංගම

මුද්‍රණ ශිල්පය සහ සබැඳි

Normalize.css

බහාලුම්

ජාල පද්ධතිය

හැදින්වීම

මාධ්‍ය විමසුම්

ජාල විකල්ප

උදාහරණය: අට්ටි සිට තිරස් දක්වා

උදාහරණය: දියර බහාලුම්

උදාහරණය: ජංගම සහ ඩෙස්ක්ටොප්

උදාහරණය: ජංගම, ටැබ්ලට්, ඩෙස්ක්ටොප්

උදාහරණය: තීරු එතීම

ප්‍රතිචාරාත්මක තීරු යළි පිහිටුවීම

තීරු කපා හැරීම

කූඩු තීරු

තීරු ඇණවුම් කිරීම

අඩු මික්සින් සහ විචල්යයන්

විචල්යයන්

මික්සින්

උදාහරණ භාවිතය

මුද්‍රණ ශිල්පය

මාතෘකා

h1. බූට්ස්ට්‍රැප් ශීර්ෂය

h2. බූට්ස්ට්‍රැප් ශීර්ෂය

h3. බූට්ස්ට්‍රැප් ශීර්ෂය

h4. බූට්ස්ට්‍රැප් ශීර්ෂය

h5. බූට්ස්ට්‍රැප් ශීර්ෂය

h6. බූට්ස්ට්‍රැප් ශීර්ෂය

h1. Bootstrap ශීර්ෂය ද්විතියික පෙළ

h2. Bootstrap ශීර්ෂය ද්විතියික පෙළ

h3. Bootstrap ශීර්ෂය ද්විතියික පෙළ

h4. Bootstrap ශීර්ෂය ද්විතියික පෙළ

h5. Bootstrap ශීර්ෂය ද්විතියික පෙළ

h6. Bootstrap ශීර්ෂය ද්විතියික පෙළ

ශරීර පිටපත

ඊයම් ශරීර පිටපත

අඩුවෙන් ඉදිකර ඇත

පේළිගත පෙළ අංග

සලකුණු කළ පෙළ

මකා දැමූ පෙළ

වර්ජන පෙළ

පෙළ ඇතුළත් කර ඇත

යටින් ඉරි ඇඳ ඇති පෙළ

කුඩා පෙළ

නිර්භීත

ඇල අකුරු

විකල්ප මූලද්රව්ය

පෙළගැස්වීමේ පන්ති

පරිවර්තන පන්ති

කෙටි යෙදුම්

මූලික කෙටි යෙදුම

ආරම්භකවාදය

ලිපිනයන්

අවහිර කිරීම්

පෙරනිමි වාරණ උපුටා දැක්වීම

Blockquote විකල්ප

මූලාශ්රයක් නම් කිරීම

විකල්ප සංදර්ශක

ලැයිස්තු

ඇණවුම් නොකළ

ඇණවුම් කළා

මෝස්තර නොකළ

පෙළට

විස්තර

තිරස් විස්තරය

ස්වයංක්‍රීයව කප්පාදු කිරීම

කේතය

පෙළට

පරිශීලක ආදානය

මූලික බ්ලොක්

විචල්යයන්

නියැදි ප්රතිදානය

මේස

මූලික උදාහරණය

ඉරි සහිත පේළි

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

Demo `:focus`රාජ්යය

සබැඳි ක්‍රියාකාරීත්වය පිළිබඳ අවවාදය`<a>`

සැඟවුණු `.sr-only`ලේබල සහිත විකල්ප අයිකන