මූලික HTML මූලද්රව්ය විස්තීරණ පන්ති සමඟ හැඩගස්වා වැඩිදියුණු කර ඇත.
සියලුම HTML මාතෘකා, <h1>
හරහා <h6>
ලබා ගත හැක.
Bootstrap හි ගෝලීය පෙරනිමිය 14pxfont-size
වේ , 20px සමඟ . මෙය සියලුම ඡේදවලට අදාළ වේ. ඊට අමතරව, (ඡේදවලට) ඒවායේ රේඛා-උසෙන් අඩක පහළ ආන්තිකය (පෙරනිමියෙන් 9px) ලැබේ.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 : @baseFontSize
සහ @baseLineHeight
. පළමුවැන්න පුරාවට භාවිතා කරන මූලික අකුරු ප්රමාණය වන අතර දෙවැන්න මූලික රේඛා-උස වේ. අපගේ සියලු වර්ගවල මායිම්, පිරවුම් සහ රේඛා-උස සහ තවත් බොහෝ දේ නිර්මාණය කිරීමට අපි එම විචල්යයන් සහ සරල ගණිතය භාවිතා කරමු. ඒවා අභිරුචිකරණය කර Bootstrap අනුවර්තනය කරයි.
සැහැල්ලු මෝස්තර සහිත HTML හි පෙරනිමි අවධාරණය ටැග් භාවිතා කරන්න.
<small>
පේළිගත හෝ පෙළ කොටස් අවධාරනය කිරීම සඳහා, කුඩා ටැගය භාවිතා කරන්න.
මෙම පෙළ පේළිය සියුම් මුද්රණයක් ලෙස සැලකීමට අදහස් කෙරේ.
<p> <small> මෙම පෙළ පේළිය සියුම් මුද්රණය ලෙස සැලකීමට අදහස් කෙරේ. </small> </p>
<strong>
වැදගත් සමග පෙළ කොටසක් අවධාරණය කිරීම සඳහා
පහත පෙළ කොටස තද අකුරු ලෙස විදැහුම් කෙරේ .
<strong> තද පෙළ ලෙස විදහා දැක්විණි </strong>
<em>
ආතතිය සමඟ පෙළ කොටස අවධාරණය කිරීම සඳහා
පහත පෙළ කොටස ඇල අකුරු ලෙස විදැහුම් කෙරේ .
<em> ඇල අකුරු </em> ලෙස විදහා දක්වයි
දැනුම්දීම! HTML5 <b>
සහ භාවිතා කිරීමට නිදහස් වන්න. වැඩි වශයෙන් කටහඬ, තාක්ෂණික පද ආදිය සඳහා වන අතර අමතර වැදගත්කමක් නොදක්වා වචන හෝ වාක්ය ඛණ්ඩ ඉස්මතු කිරීමට අදහස් කෙරේ .<i>
<b>
<i>
සංක්ෂිප්ත සහ කෙටි යෙදුම් සඳහා HTML හි <abbr>
මූලද්රව්යයේ ශෛලීගත ක්රියාත්මක කිරීම ප්රසාරණය වූ අනුවාදය hover මත පෙන්වීමට. උපලක්ෂණයක් සහිත කෙටි යෙදුම්වලට title
සැහැල්ලු තිත් සහිත පහළ මායිමක් සහ ආධාරක කර්සරයක් ඇති අතර, එය උඩින් ගමන් කිරීමේදී අමතර සන්දර්භයක් සපයයි.
<abbr>
කෙටි යෙදුමක දිගු සැරිසැරීම මත පුළුල් කළ පෙළ සඳහා, title
ගුණාංගය ඇතුළත් කරන්න.
attribute යන වචනයේ කෙටි යෙදුම attr වේ.
<abbr title = "attribute" > attr </abbr>
<abbr class="initialism">
.initialism
තරමක් කුඩා අකුරු ප්රමාණය සඳහා කෙටි යෙදුමකට එක් කරන්න .
HTML යනු පෙති කපන ලද පාන් වලින් හොඳම දෙයයි.
<abbr title = "attribute" class = "initialism" > attr </abbr>
ළඟම ඇති මුතුන් මිත්තන් හෝ සමස්ත කාර්ය මණ්ඩලය සඳහා සම්බන්ධතා තොරතුරු ඉදිරිපත් කරන්න.
<address>
සියලු රේඛා අවසන් කිරීමෙන් හැඩතල ගැන්වීම ආරක්ෂා කරන්න <br>
.
- <ලිපිනය>
- <strong> Twitter, Inc. </strong><br>
- 795 Folsom Ave, Suite 600 <br>
- සැන් ෆ්රැන්සිස්කෝ, CA 94107 <br>
- <abbr title = "දුරකථනය" > P: </abbr> (123) 456-7890
- </address>
- <ලිපිනය>
- <strong> සම්පූර්ණ නම </strong><br>
- <a href = "mailto:#" > [email protected] </a>
- </address>
ඔබේ ලේඛනය තුළ වෙනත් මූලාශ්රයකින් අන්තර්ගත කොටස් උපුටා දැක්වීම සඳහා.
උපුටා ගැනීම ලෙස <blockquote>
ඕනෑම HTML වටා ඔතා . සෘජු උපුටා දැක්වීම් සඳහා අපි නිර්දේශ කරමු a <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්. </p>
- </blockquote>
සම්මත බ්ලොක්කෝට් එකක සරල වෙනස්කම් සඳහා විලාසය සහ අන්තර්ගත වෙනස්කම්.
<small>
මූලාශ්රය හඳුනා ගැනීම සඳහා ටැගය එක් කරන්න . මූලාශ්ර කාර්යයේ නම ඔතා <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.
මූලාශ්ර මාතෘකාවේ ප්රසිද්ධ කෙනෙක්
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්. </p>
- <small> ප්රසිද්ධ කෙනෙක් <cite title = "මූලාශ්ර මාතෘකාව" > මූලාශ්ර මාතෘකාව </cite></small>
- </blockquote>
.pull-right
පාවෙන, දකුණට පෙළගස්වන ලද බ්ලොක්කෝට් සඳහා භාවිතා කරන්න .
- <blockquote class = "දකුණට අදින්න" >
- ...
- </blockquote>
ඇණවුම පැහැදිලිවම වැදගත් නොවන අයිතම ලැයිස්තුවක් .
- <ul>
- <li> ... </li>
- </ul>
ඇණවුම පැහැදිලිවම වැදගත් වන අයිතම ලැයිස්තුවක් .
- <ol>
- <li> ... </li>
- </ol>
list-style
වම්පස පිරවුමක් නොමැති හෝ අතිරේක අයිතම ලැයිස්තුවක් .
- <ul class = "unstyled" >
- <li> ... </li>
- </ul>
ඒවායේ ආශ්රිත විස්තර සහිත නියම ලැයිස්තුවක්.
- <dl>
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
නියමයන් සහ විස්තරයන් <dl>
එක පැත්තකින් පෙළගස්වන්න.
- <dl class = "dl-horizontal" >
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
දැනුම්දීම! තිරස් විස්තර ලැයිස්තු වම් තීරුවේ සවි කිරීමෙහි ගැළපිය නොහැකි තරම් දිගු පද කප්පාදු කරයි text-overflow
. පටු දර්ශන තොටුපලවල, ඒවා පෙරනිමි ගොඩගැසූ පිරිසැලසුම වෙත වෙනස් වනු ඇත.
සමඟින් පේළිගත කේත කොටස් ඔතා <code>
.
<section>
පේළිගත ලෙස ඔතා තිබිය යුතුය.
- උදාහරණයක් ලෙස , <code><section> </ code > පේළිගත ලෙස ඔතා තිබිය යුතුය .
<pre>
කේත රේඛා කිහිපයක් සඳහා භාවිතා කරන්න . නිසි විදැහුම්කරණය සඳහා කේතයේ ඇති ඕනෑම කෝණ වරහනකින් ගැලවීමට වග බලා ගන්න.
<p>සාම්පල පෙළ මෙතැනින්...</p>
- <පෙර>
- <p>සාම්පල පෙළ මෙතනින්...</p>
- </pre>
දැනුම්දීම! ටැග් තුළ කේතය <pre>
හැකිතාක් වමට සමීපව තබා ගැනීමට වග බලා ගන්න; එය සියලු ටැබ් ලබා දෙනු ඇත.
ඔබට විකල්ප .pre-scrollable
වශයෙන් 350px උපරිම උස සකසන සහ y-අක්ෂ අනුචලන තීරුවක් සපයන පන්තිය එක් කළ හැක.
.table
මූලික හැඩගැන්වීම් සඳහා-ආලෝකය පෑඩිං සහ තිරස් බෙදුම් පමණක්- ඕනෑම දෙයකට මූලික පන්තිය එක් කරන්න <table>
.
# | මුල් නම | අවසන් නම | පරිශීලක නාමය |
---|---|---|---|
1 | ලකුණ | ඔටෝ | @mdo |
2 | යාකොබ් | තෝන්ටන් | @මේදය |
3 | ලැරී | කුරුල්ලා | @ට්විටර් |
- <මේස පන්තිය = "වගුව" >
- …
- </ වගුව>
පහත දැක්වෙන ඕනෑම පංතියක් .table
මූලික පන්තියට එක් කරන්න.
.table-striped
<tbody>
CSS තේරීම්කාරකය හරහා ඕනෑම වගු පේළියකට සීබ්රා-ඉරි එකතු කරයි :nth-child
(IE7-IE8 හි නොමැත).
# | මුල් නම | අවසන් නම | පරිශීලක නාමය |
---|---|---|---|
1 | ලකුණ | ඔටෝ | @mdo |
2 | යාකොබ් | තෝන්ටන් | @මේදය |
3 | ලැරී | කුරුල්ලා | @ට්විටර් |
- <table class = "මේස ඉරි සහිත" >
- …
- </ වගුව>
.table-bordered
මේසයට මායිම් සහ වටකුරු කොන් එකතු කරන්න.
# | මුල් නම | අවසන් නම | පරිශීලක නාමය |
---|---|---|---|
1 | ලකුණ | ඔටෝ | @mdo |
ලකුණ | ඔටෝ | @getbootstrap | |
2 | යාකොබ් | තෝන්ටන් | @මේදය |
3 | ලැරී කුරුල්ලා | @ට්විටර් |
- <table class = "table-bordered" >
- …
- </ වගුව>
.table-hover
a තුළ වගු පේළි මත hover තත්වයක් සබල කරන්න <tbody>
.
# | මුල් නම | අවසන් නම | පරිශීලක නාමය |
---|---|---|---|
1 | ලකුණ | ඔටෝ | @mdo |
2 | යාකොබ් | තෝන්ටන් | @මේදය |
3 | ලැරී කුරුල්ලා | @ට්විටර් |
- <table class = "table table-hover" >
- …
- </ වගුව>
.table-condensed
සෛල පිරවුම අඩකින් කැපීමෙන් වගු වඩාත් සංයුක්ත කරයි.
# | මුල් නම | අවසන් නම | පරිශීලක නාමය |
---|---|---|---|
1 | ලකුණ | ඔටෝ | @mdo |
2 | යාකොබ් | තෝන්ටන් | @මේදය |
3 | ලැරී කුරුල්ලා | @ට්විටර් |
- <table class = "table-condensed" >
- …
- </ වගුව>
වගු පේළි වර්ණ ගැන්වීමට සන්දර්භීය පන්ති භාවිතා කරන්න.
පන්තිය | විස්තර |
---|---|
.success |
සාර්ථක හෝ ධනාත්මක ක්රියාවක් පෙන්නුම් කරයි. |
.error |
භයානක හෝ සෘණාත්මක ක්රියාවක් පෙන්නුම් කරයි. |
.info |
පෙරනිමි මෝස්තර සඳහා විකල්පයක් ලෙස භාවිතා කරයි. |
# | නිෂ්පාදන | ගෙවීම ගෙන ඇත | තත්ත්වය |
---|---|---|---|
1 | TB - මාසිකව | 01/04/2012 | අනුමත කළා |
2 | TB - මාසිකව | 02/04/2012 | ප්රතික්ෂේප කළා |
3 | TB - මාසිකව | 03/04/2012 | පොරොත්තුවෙන් |
- ...
- < tr class = "සාර්ථකත්වය" >
- <td> 1 < /td>
- <td>TB - මාසිකව</ td >
- <td> 01 / 04 / 2012 < /td>
- <td>අනුමතයි</ td >
- </ tr >
- ...
සහාය දක්වන වගු HTML මූලද්රව්ය ලැයිස්තුව සහ ඒවා භාවිතා කළ යුතු ආකාරය.
ටැග් කරන්න | විස්තර |
---|---|
<table> |
වගු ආකෘතියකින් දත්ත සංදර්ශනය කිරීම සඳහා එතීමේ මූලද්රව්යය |
<thead> |
<tr> වගු තීරු ලේබල් කිරීමට වගු ශීර්ෂ පේළි ( ) සඳහා බහාලුම් මූලද්රව්යය |
<tbody> |
<tr> මේසයේ සිරුරේ වගු පේළි () සඳහා බහාලුම් මූලද්රව්යය |
<tr> |
තනි පේළියක දිස්වන වගු සෛල ( <td> හෝ ) කට්ටලයක් සඳහා බහාලුම් මූලද්රව්යය<th> |
<td> |
පෙරනිමි වගු කොටුව |
<th> |
තීරු සඳහා විශේෂ වගු කොටුව (හෝ පේළිය, විෂය පථය සහ ස්ථානගත කිරීම මත පදනම්ව) ලේබල් a තුළ භාවිතා කළ යුතුය <thead> |
<caption> |
වගුවේ ඇති දේ පිළිබඳ විස්තරය හෝ සාරාංශය, විශේෂයෙන් තිර කියවන්නන් සඳහා ප්රයෝජනවත් වේ |
- <වගුව>
- < caption> ... </ caption>
- <thead>
- <tr>
- <th> ... </th>
- <th> ... </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> ... </td>
- <td> ... </td>
- </tr>
- </tbody>
- </ වගුව>
තනි පුද්ගල පෝරම පාලන මෝස්තර ලබා ගනී, නමුත් කිසිදු අවශ්ය මූලික පන්තියක් නොමැතිව හෝ <form>
සලකුණු කිරීමේ විශාල වෙනස්කම් නොමැතිව. පෝරම පාලනවලට ඉහළින් අට්ටි කළ, වමට පෙළගස්වන ලද ලේබලවල ප්රතිඵල.
- <form>
- <legend> Legend </legend>
- <label> ලේබල් නම </label>
- <input type = "text" placeholder = "යමක් ටයිප් කරන්න..." >
- <span class = "help-block" > මෙහි උදාහරණ වාරණ මට්ටමේ උපකාරක පෙළ. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > මාව පරීක්ෂා කරන්න
- </label>
- <button type = "submit" class = "btn" > Submit </button>
- </form>
Bootstrap සමඟ ඇතුළත් කර ඇත්තේ පොදු භාවිත අවස්ථා සඳහා විකල්ප ආකෘති පිරිසැලසුම් තුනකි.
.form-search
පෝරමයට සහ අමතර වටකුරු පෙළ ආදානයක් සඳහා එක් කරන්න .search-query
.<input>
- <form class = "form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Search </button>
- </form>
.form-inline
සංයුක්ත පිරිසැලසුමක් සඳහා වමට පෙළගස්වන ලද ලේබල සහ පේළිගත අවහිර පාලන සඳහා එක් කරන්න .
- <form class = "form-inline" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- <input type = "මුරපදය" class = "input-small" placeholder = "මුරපදය" >
- <label class = "checkbox" >
- <input type = "checkbox" > මාව මතක තියාගන්න
- </label>
- <button type = "submit" class = "btn" > Sign in </button>
- </form>
ලේබල් දකුණට පෙළගස්වා ඒවා පාලනයන් මෙන් එකම පේළියක දිස් කිරීමට ඒවා වමට පා කරන්න. පෙරනිමි පෝරමයකින් වඩාත්ම සලකුණු වෙනස්කම් අවශ්ය වේ:
.form-horizontal
පෝරමයට එකතු කරන්න.control-group
.control-label
ලේබලයට එකතු කරන්න.controls
නිසි පෙළගැස්ම සඳහා ඕනෑම ආශ්රිත පාලනයක් ඔතා
- <form class = "form-horizontal" >
- <div class = "control-group" >
- <label class = "control-label" for = "inputEmail" > Email </label>
- <div class = "පාලන" >
- <input type = "text" id = "inputEmail" placeholder = "Email" >
- </div>
- </div>
- <div class = "control-group" >
- <label class = "control-label" for = "inputPassword" > මුරපදය </label>
- <div class = "පාලන" >
- <input type = "මුරපදය" id = "inputPassword" placeholder = "මුරපදය" >
- </div>
- </div>
- <div class = "control-group" >
- <div class = "පාලන" >
- <label class = "checkbox" >
- <input type = "checkbox" > මාව මතක තියාගන්න
- </label>
- <button type = "submit" class = "btn" > Sign in </button>
- </div>
- </div>
- </form>
උදාහරණ පෝරම පිරිසැලසුමක සහය දක්වන සම්මත පෝරම පාලන සඳහා උදාහරණ.
වඩාත් පොදු ආකෘති පාලනය, පෙළ මත පදනම් වූ ආදාන ක්ෂේත්ර. සියලුම HTML5 වර්ග සඳහා සහය ඇතුළත් වේ: පෙළ, මුරපදය, දින වේලාව, දිනය-දේශීය, දිනය, මාසය, වේලාව, සතිය, අංකය, විද්යුත් තැපෑල, url, සෙවීම, දුරකථන සහ වර්ණය.
type
සෑම විටම නිශ්චිතව භාවිතා කිරීම අවශ්ය වේ .
- <input type = "text" placeholder = "Text input" >
පෙළ පේළි කිහිපයකට සහය දක්වන පෝරම පාලනය. row
අවශ්ය පරිදි ගුණාංගය වෙනස් කරන්න .
- <textarea row = " 3" ></textarea>
පිරික්සුම් කොටු යනු ලැයිස්තුවක විකල්ප එකක් හෝ කිහිපයක් තෝරාගැනීම සඳහා වන අතර රේඩියෝ යනු බොහෝ දෙනෙකුගෙන් එක් විකල්පයක් තෝරාගැනීම සඳහාය.
- <label class = "checkbox" >
- <input type = "checkbox" value = "" >
- විකල්පය එක මෙය සහ එයයි - එය විශිෂ්ට වන්නේ මන්දැයි ඇතුළත් කිරීමට වග බලා ගන්න
- </label>
- <ලේබල් පන්තිය = "රේඩියෝ" >
- <ආදාන වර්ගය = "රේඩියෝ" නම = "optionsRadios" id = "optionsRadios1 " අගය = "option1" සලකුණු කර ඇත >
- විකල්පය එක මෙය සහ එයයි - එය විශිෂ්ට වන්නේ මන්දැයි ඇතුළත් කිරීමට වග බලා ගන්න
- </label>
- <ලේබල් පන්තිය = "රේඩියෝ" >
- <input type = "රේඩියෝ" නම = "optionsRadios" id = "optionsRadios2 " value = "option2" >
- විකල්ප දෙක වෙනත් දෙයක් විය හැකි අතර එය තේරීමෙන් විකල්පය එක තේරීම ඉවත් කරනු ඇත
- </label>
.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>
multiple="multiple"
එකවර විකල්ප කිහිපයක් පෙන්වීමට පෙරනිමි විකල්පය භාවිතා කරන්න හෝ a සඳහන් කරන්න .
- <තෝරන්න>
- <option> 1 </option>
- <option> 2 </option>
- <option> 3 </option>
- <option> 4 </option>
- <option> 5 </option>
- </select>
- <select multiple = "multiple" >
- <option> 1 </option>
- <option> 2 </option>
- <option> 3 </option>
- <option> 4 </option>
- <option> 5 </option>
- </select>
පවතින බ්රවුසර පාලන මතට එකතු කිරීම, Bootstrap වෙනත් ප්රයෝජනවත් ආකෘති සංරචක ඇතුළත් වේ.
ඕනෑම පෙළ පදනම් ආදානයකට පෙර හෝ පසුව පෙළ හෝ බොත්තම් එක් කරන්න. select
මෙහි මූලද්රව්ය සඳහා සහය නොදක්වන බව සලකන්න .
ආදානයකට පෙළ පෙර කිරීමට හෝ එක් කිරීමට පන්ති දෙකෙන් එකක් සමඟින් .add-on
සහ එකක් ඔතා.input
- <div class = "input-prepend" >
- <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput" size = "16" type = "text" placeholder = "Username" >
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInput " size = "16" type = "text" ><span class = "add-on" > .00 </span>
- </div>
.add-on
ආදානයක් පෙර කිරීමට සහ එකතු කිරීමට පන්ති දෙකම සහ අවස්ථා දෙකක් භාවිතා කරන්න .
- <div class = "input-prepend input-append" >
- <span class = "add-on" > $ </span><input class = "span2" id = "appendedPrependedInput " size = "16" type = "text" ><span class = "add-on" > .00 </span>
- </div>
<span>
අකුරු සමඟ වෙනුවට , .btn
ආදානයකට බොත්තමක් (හෝ දෙකක්) ඇමිණීමට a භාවිතා කරන්න.
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButton " size = "16" type = "text" ><button class = "btn" type = "button" > යන්න! </button>
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButtons " size = "16" type = "text" ><button class = "btn" type = "button" > Search </button><button class = "btn" type = "බොත්තම" > විකල්ප </button>
- </div>
- <form class = "form-search" >
- <div class = "input-append" >
- <input type = "text" class = "span2 search-query" >
- <button type = "submit" class = "btn" > Search </button>
- </div>
- <div class = "input-prepend" >
- <බොත්තම type = "submit" class = "btn" > Search </button>
- <input type = "text" class = "span2 search-query" >
- </div>
- </form>
.input-large
පන්ති භාවිතා කරමින් ජාල තීරු ප්රමාණවලට ඔබේ යෙදවුම් වැනි සාපේක්ෂ ප්රමාණ පන්ති භාවිතා කරන්න .span*
.
- <input class = "input-mini" type = "text" placeholder = ".input-mini" >
- <input class = "input-small" වර්ගය = "text" placeholder = ".input-small" >
- <input class = "input-medium" වර්ගය = "text" placeholder = ".input-medium" >
- <input class = "input-large" වර්ගය = "text" placeholder = ".input-large" >
- <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
- <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >
දැනුම්දීම! අනාගත අනුවාදවලදී, අපි අපගේ බොත්තම් ප්රමාණයන්ට ගැළපෙන පරිදි මෙම සාපේක්ෂ ආදාන පන්ති භාවිතය වෙනස් කරන්නෙමු. උදාහරණයක් ලෙස, .input-large
ආදානයක පිරවුම සහ අකුරු ප්රමාණය වැඩි කරයි.
භාවිත.span1
.span12
ජාල තීරුවල එකම ප්රමාණයන්ට ගැළපෙන ආදාන සඳහා .
- <input class = "span1" type = "text" placeholder = ".span1" >
- <input class = "span2" type = "text" placeholder = ".span2" >
- <input class = "span3" type = "text" placeholder = ".span3" >
- < පන්තිය තෝරන්න = "span1" >
- ...
- </select>
- < පන්තිය තෝරන්න = "span2" >
- ...
- </select>
- < පන්තිය තෝරන්න = "span3" >
- ...
- </select>
එක් පේළියකට බහු ජාල ආදාන සඳහා, නිසි පරතරය සඳහා විකරණය කිරීමේ පන්තිය භාවිතා කරන්න.controls-row
. එය සුදු-අවකාශය කඩා වැටීමට යෙදවුම් පාවෙන අතර, නිසි මායිම් සකසයි, සහ පාවෙන ඉවත් කරයි.
- <div class = "පාලන" >
- <input class = "span5" type = "text" placeholder = ".span5" >
- </div>
- <div class = "controls controls-row" >
- <input class = "span4" type = "text" placeholder = ".span4" >
- <input class = "span1" type = "text" placeholder = ".span1" >
- </div>
- ...
සත්ය පෝරම ලකුණු කිරීම භාවිතයෙන් තොරව සංස්කරණය කළ නොහැකි පෝරමයක දත්ත ඉදිරිපත් කරන්න.
- <span class = "input-xlarge uneditable-input" > මෙහි යම් අගයක් </span>
ක්රියා සමූහයක් (බොත්තම්) සමඟ පෝරමයක් අවසන් කරන්න. a තුළ තැබූ විට .form-horizontal
, බොත්තම් ස්වයංක්රීයව පෝරම පාලන සමඟ පෙලගැසෙනු ඇත.
- <div class = "form-actions" >
- <button type = "submit" class = "btn btn-primary" > වෙනස්කම් සුරකින්න </button>
- <button type = "button" class = "btn" > Cancel </button>
- </div>
පෝරම පාලන වටා දිස්වන උපකාරක පෙළ සඳහා පේළිගත සහ වාරණ මට්ටමේ සහාය.
- <input type = "text" ><span class = "help-inline" > Inline help text </span>
- <input type = "text" ><span class = "help-block" > නව පේළියකට කැඩී එක් පේළියකින් ඔබ්බට විහිදෙන දිගු උපකාරක පෙළ කොටසකි. </span>
පෝරම පාලන සහ ලේබල පිළිබඳ මූලික ප්රතිපෝෂණ තත්ත්වයන් සමඟ පරිශීලකයින්ට හෝ අමුත්තන්ට ප්රතිපෝෂණ ලබා දෙන්න.
අපි සමහර පෝරම පාලනවල පෙරනිමි outline
විලාසයන් ඉවත් box-shadow
කර එහි ස්ථානයේ :focus
.
- <input class = "input-xlarge" id = "focusedInput" type = "text" value = "මෙය නාභිගත කර ඇත..." >
disabled
පරිශීලක ආදානය වැළැක්වීමට සහ තරමක් වෙනස් පෙනුමක් අවුලුවාලීමට ආදානයක් මත ගුණාංගය එක් කරන්න .
- <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "මෙතැන අබල කළ ආදානය..." අක්රිය >
දෝෂ, අනතුරු ඇඟවීම් සහ සාර්ථක පණිවිඩ සඳහා වලංගුකරණ විලාසයන් Bootstrap ඇතුළත් වේ. භාවිතා කිරීමට, අවට ඇති සුදුසු පන්තිය එක් කරන්න .control-group
.
- <div class = "පාලක කණ්ඩායම් අනතුරු ඇඟවීම" >
- <label class = "control-label" for = "inputWarning" > අවවාදය සහිත ආදානය </label>
- <div class = "පාලන" >
- <input type = "text" id = "inputWarning" >
- <span class = "help-inline" > යම් දෙයක් වැරදී ඇත </span>
- </div>
- </div>
- <div class = "control-group error" >
- <label class = "control-label" for = "inputError" > දෝෂ සහිත ආදානය </label>
- <div class = "පාලන" >
- <input type = "text" id = "inputError" >
- <span class = "help-inline" > කරුණාකර දෝෂය නිවැරදි කරන්න </span>
- </div>
- </div>
- <div class = "control-group success" >
- <label class = "control-label" for = "inputSuccess" > සාර්ථකත්වය සමඟ ආදානය </label>
- <div class = "පාලන" >
- <ආදාන වර්ගය = "පෙළ" id = "inputSuccess" >
- <span class = "help-inline" > Woohoo! </span>
- </div>
- </div>
<img>
ඕනෑම ව්යාපෘතියක පින්තූර පහසුවෙන් හැඩගස්වා ගැනීමට අංගයකට පන්ති එක් කරන්න .
- <img src = "..." class = "img-rounded" >
- <img src = "..." class = "img-circle" >
- <img src = "..." class = "img-polaroid" >
දැනුම්දීම! .img-rounded
සහ සහාය .img-circle
නොමැතිකම නිසා IE7-8 හි වැඩ නොකරන්න border-radius
.
ස්ප්රයිට් ආකාරයෙන් අයිකන 140ක්, Glyphicons විසින් සපයන ලද තද අළු (පෙරනිමි) සහ සුදු පැහැයෙන් ලබා ගත හැක .
Glyphicons Halflings සාමාන්යයෙන් නොමිලේ ලබා ගත නොහැක, නමුත් Bootstrap සහ Glyphicons නිර්මාපකයින් අතර ඇති විධිවිධානයක් මඟින් සංවර්ධකයින් ලෙස ඔබට වියදමකින් තොරව මෙය සිදු කළ හැක. ස්තූතියක් වශයෙන්, ප්රායෝගික ඕනෑම අවස්ථාවක Glyphicons වෙත විකල්ප සබැඳියක් ඇතුළත් කරන ලෙස අපි ඔබෙන් ඉල්ලා සිටිමු .
සියලුම අයිකන වලට <i>
අනන්ය පන්තියක් සහිත ටැගයක් අවශ්ය වේ, උපසර්ග කර icon-
ඇත. භාවිතා කිරීමට, පහත කේතය ඕනෑම තැනක තබන්න:
- <i class = "icon-search" ></i>
එක් අමතර පන්තියක් සමඟ සූදානම් කර ඇති ප්රතිලෝම (සුදු) අයිකන සඳහා මෝස්තර ද තිබේ. nav සහ dropdown links සඳහා අපි මෙම පන්තිය hover සහ සක්රිය තත්වයන් මත විශේෂයෙන් බලාත්මක කරන්නෙමු.
- <i class = "icon-search icon-white" ></i>
දැනුම්දීම! <i>
බොත්තම් හෝ nav සබැඳි වල මෙන්, අකුරු තන්තු අසල භාවිතා කරන විට, නියම පරතරය සඳහා ටැගයට පසුව ඉඩක් තැබීමට වග බලා ගන්න .
මෙවලම් තීරුවක්, සංචලනය, හෝ පෙර සැකසූ ආකෘති ආදාන සඳහා බොත්තම්, බොත්තම් කණ්ඩායම් තුළ ඒවා භාවිත කරන්න.
- <div class = "btn-toolbar" >
- <div class = "btn-group" >
- <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>
- </div>
- </div>
- <div class = "btn-group" >
- <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> පරිශීලක </a>
- <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>
- <ul class = "dropdown-menu" >
- <li><a href = "#" ><i class = "icon-pencil" ></i> සංස්කරණය </a></li>
- <li><a href = "#" ><i class = "icon-trash" ></i> මකන්න </a></li>
- <li><a href = "#" ><i class = "icon-ban-circle" ></i> තහනම් </a></li>
- <li class = "divider" ></li>
- <li><a href = "#" ><i class = "i" ></i> පරිපාලක කරන්න </a></li>
- </ul>
- </div>
- <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>
- <ul class = "nav nav-list" >
- <li class = "සක්රිය" ><a href = "#" ><i class = "icon-home icon-white" ></i> මුල් පිටුව </a></li>
- <li><a href = "#" ><i class = "icon-book" ></i> පුස්තකාලය </a></li>
- <li><a href = "#" ><i class = "icon-pencil" ></i> යෙදුම් </a></li>
- <li><a href = "#" ><i class = "i" ></i> වෙනත් </a> </li>
- </ul>
- <div class = "control-group" >
- <label class = "control-label" for = "inputIcon" > ඊමේල් ලිපිනය </label>
- <div class = "පාලන" >
- <div class = "input-prepend" >
- <span class = "add-on" ><i class = "icon-envelope" ><i><span><input class = "span2" id = "inputIcon" type = "text" >
- </div>
- </div>