Etiam porta sem malesuada Magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
බූට්ස්ට්රැප් යනු ට්විටර් වෙතින් වෙබ් යෙදුම් සහ අඩවි සංවර්ධනය කිරීම සඳහා නිර්මාණය කර ඇති මෙවලම් කට්ටලයකි.
මුද්රණ ශිල්පය, පෝරම, බොත්තම්, වගු, ජාලක, සංචාලනය සහ තවත් දේ සඳහා මූලික CSS සහ HTML ඇතුළත් වේ.
Nerd අනතුරු ඇඟවීම: Bootstrap අඩුවෙන් ගොඩනගා ඇති අතර නවීන බ්රව්සර් මනසේ තබාගෙන දොරෙන් පිටත වැඩ කිරීමට සැලසුම් කර ඇත.
වේගවත්ම සහ පහසුම ආරම්භය සඳහා, මෙම කොටස ඔබේ වෙබ් පිටුවට පිටපත් කරන්න.
අඩුවෙන් භාවිතා කරන රසිකයෙක්ද? ගැටලුවක් නැත, repo ක්ලෝන කර මෙම රේඛා එක් කරන්න:
Github හි නිල Bootstrap repo සමඟ බාගන්න, දෙබලක, අදින්න, ගොනු ගැටළු සහ තවත් දේ.
දැනට v1.3.0
ට්විටර් හි ඉන්ජිනේරුවන් ඓතිහාසිකව ඔවුන් හුරුපුරුදු වූ ඕනෑම පුස්තකාලයක් ඉදිරිපස අවශ්යතා සපුරාලීම සඳහා භාවිතා කර ඇත. Bootstrap ආරම්භ වූයේ ඉදිරිපත් වූ අභියෝගවලට පිළිතුරක් වශයෙනි. බොහෝ නියම පුද්ගලයින්ගේ සහාය ඇතිව, Bootstrap සැලකිය යුතු ලෙස වර්ධනය වී ඇත.
dev.twitter.com හි වැඩිදුර කියවන්න ›
ක්රෝම්, සෆාරි, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සහ ෆයර්ෆොක්ස් වැනි ප්රධාන නවීන බ්රව්සර්වල බූට්ස්ට්රැප් පරීක්ෂා කර සහය දක්වයි.
Bootstrap සම්පාදනය කරන ලද CSS, uncompiled සහ උදාහරණ සැකිලි සමඟ සම්පුර්ණ වේ.
Bootstrap හි කොටසක් ලෙස සපයන ලද පෙරනිමි ජාල පද්ධතිය 940px පළල 16-තීරු ජාලයකි. එය ජනප්රිය 960 ග්රිඩ් පද්ධතියේ රසයකි, නමුත් වම් සහ දකුණු පැතිවල අමතර ආන්තිකය/පැඩිං නොමැතිව.
මෙහි පෙන්වා ඇති පරිදි, "තීරු" දෙකකින් මූලික පිරිසැලසුමක් නිර්මාණය කළ හැකි අතර, ඒ සෑම එකක්ම අපගේ ජාල පද්ධතියේ කොටසක් ලෙස අර්ථ දක්වා ඇති පාදක තීරු 16 කින් සමන්විත වේ. තවත් වෙනස්කම් සඳහා පහත උදාහරණ බලන්න.
- <div class = "row" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
.row
පවතින තීරුවක් තුළ නිර්මාණය කිරීමෙන් ඔබට අවශ්ය නම් ඔබේ අන්තර්ගතය කැදවන්න.
- <div class = "row" >
- <div class = "span12" >
- තීරුවේ 1 මට්ටම
- <div class = "row" >
- <div class = "span6" >
- 2 මට්ටම
- </div>
- <div class = "span6" >
- 2 මට්ටම
- </div>
- </div>
- </div>
- </div>
Bootstrap තුලට ගොඩනගා ඇත්තේ පෙරනිමි 940px ජාල පද්ධතිය අභිරුචිකරණය කිරීම සඳහා අතලොස්සක් වන විචල්යයන්ය. ටිකක් අභිරුචිකරණය සමඟ, ඔබට තීරුවල ප්රමාණය, ඒවායේ කාණු සහ ඒවා වාසය කරන බහාලුම් වෙනස් කළ හැකිය.
ජාල පද්ධතිය වෙනස් කිරීමට අවශ්ය විචල්යයන් සියල්ලම දැනට පවතින්නේ preboot.less
.
විචල්ය | පෙරනිමි අගය | විස්තර |
---|---|---|
@gridColumns |
16 | ජාලකය තුළ ඇති තීරු ගණන |
@gridColumnWidth |
40px | ජාලකය තුළ එක් එක් තීරුවේ පළල |
@gridGutterWidth |
20px | එක් එක් තීරු අතර සෘණ අවකාශය |
@siteWidth |
සියලුම තීරු සහ කාණු වල ගණනය කළ එකතුව | තීරු සහ කාණු ගණන ගණනය කිරීමට සහ .fixed-container() මික්සින් පළල සැකසීමට අපි මූලික ගැලපීමක් භාවිතා කරමු. |
ජාලකය වෙනස් කිරීම යනු @grid-*
විචල්ය තුන වෙනස් කිරීම සහ අඩු ගොනු නැවත සම්පාදනය කිරීමයි.
බූට්ස්ට්රැප් තීරු 24ක් දක්වා ජාල පද්ධතියක් හැසිරවීමට සන්නද්ධ වේ; පෙරනිමිය 16ක් පමණි. ඔබේ ජාල විචල්යයන් තීරු 24ක ජාලකයකට අභිරුචිකරණය කර ඇති ආකාරය මෙන්න.
- @GridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
නැවත සම්පාදනය කළ පසු, ඔබ සැකසෙනු ඇත!
පෙරනිමි සහ සරල 940px-පුළුල්, තනි වෙබ් අඩවියක් මඟින් සපයන ඕනෑම වෙබ් අඩවියක් හෝ පිටුවක් සඳහා කේන්ද්රගත පිරිසැලසුම <div.container>
.
- <ශරීරය>
- <div class = "බහාලකය" >
- ...
- </div>
- </body>
අවම සහ උපරිම පළල සහ වම් පැත්තේ පැති තීරුවක් සහිත විකල්ප, නම්යශීලී ද්රව පිටු ව්යුහයක්. යෙදුම් සහ ලේඛන සඳහා විශිෂ්ටයි.
- <ශරීරය>
- <div class = "container-fluid" >
- <div class = "පැති තීරුව" >
- ...
- </div>
- <div class = "අන්තර්ගතය" >
- ...
- </div>
- </div>
- </body>
ඔබේ වෙබ් පිටු ව්යුහගත කිරීම සඳහා සම්මත මුද්රණ ධුරාවලියක්.
සම්පූර්ණ මුද්රණ ජාලකය අපගේ preboot.less ගොනුවේ ඇති අඩු විචල්ය දෙකක් මත පදනම් වේ: @basefont
සහ @baseline
. පළමුවැන්න පුරාවට භාවිතා කරන මූලික අකුරු ප්රමාණය වන අතර දෙවැන්න මූලික රේඛා-උස වේ.
අපි එම විචල්යයන් සහ සමහර ගණිතය, අපගේ සියලු වර්ගවල සහ තවත් දේවල මායිම්, පිරවුම් සහ රේඛා-උස නිර්මාණය කිරීමට භාවිතා කරමු.
Nullam quis risus eget urna mollis ornare vel eu leo. සමාජීය නැටෝක් පෙනාටිබස් සහ මැග්නිස් ඩිස් පාචුරියන්ට් මොන්ටෙස්, නස්කෙටූර් රිඩිකුලස් මුස්. Nullam id dolor id nibh ultricies vehicula ut id elit.
අවධාරණය, ලිපින සහ කෙටි යෙදුම් භාවිතා කිරීම
<strong>
<em>
<address>
<abbr>
එහි අවට පිටපතට සාපේක්ෂව වචනයක් හෝ වාක්ය ඛණ්ඩයක අමතර වැදගත්කමක් හෝ අවධාරණයක් දැක්වීමට අවධාරණය ටැග් ( <strong>
සහ ) භාවිතා කළ යුතුය. වැදගත්කම සහ ආතතිය අවධාරණය කිරීම සඳහා <em>
භාවිතා කරන්න .<strong>
<em>
Fusce dapibus , Telus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra ague.
සටහන:<b>
HTML5 හි භාවිතා කිරීම සහ ටැග් කිරීම තවමත් කමක් <i>
නැත, ඒවා පිළිවෙලින් තද සහ ඇල අකුරු කළ යුතු නැත (වඩා අර්ථකථන අංගයක් තිබේ නම්, එය භාවිතා කරන්න). <b>
අමතර වැදගත්කමක් නොදක්වා වචන හෝ වාක්ය ඛණ්ඩ උද්දීපනය කිරීමට අදහස් කරන අතර, <i>
බොහෝ දුරට කටහඬ, තාක්ෂණික යෙදුම් ආදිය සඳහා වේ.
මූලද්රව්යය එහි <address>
ආසන්නතම මුතුන්මිත්තන් හෝ සමස්ත වැඩ කොටස සඳහා සම්බන්ධතා තොරතුරු සඳහා භාවිතා කරයි. එය භාවිතා කළ හැකි ආකාරය පිළිබඳ උදාහරණ දෙකක් මෙන්න:
සටහන: අන්තර්ගතය නිසි ලෙස ව්යුහගත කිරීම සඳහා එක් එක් පේළියක් රේඛා <address>
බිඳීමකින් අවසන් කළ යුතුය ( <br />
) හෝ වාරණ මට්ටමේ ටැගයකින් ඔතා තිබිය යුතුය (උදා, ).<p>
කෙටි යෙදුම් සහ කෙටි යෙදුම් සඳහා, <abbr>
ටැගය භාවිතා කරන්න ( HTML5<acronym>
හි අත්හරිනු ලැබේ ). කෙටිකතා පෝරමය ටැගය තුළ තබා සම්පූර්ණ නම සඳහා මාතෘකාවක් සකසන්න.
<blockquote>
<p>
<small>
<blockquote>
වාරණ උපුටා දැක්වීමක් ඇතුළත් කිරීමට, වටා එති <p>
සහ <small>
ටැග් කරන්න. ඔබේ මූලාශ්රය උපුටා දැක්වීමට මූලද්රව්යය භාවිත කරන්න, <small>
එවිට ඔබට —
එයට පෙර em dash එකක් ලැබෙනු ඇත.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල posuere erat a ante venenatis dapibus posuere velit aliquet.
ආචාර්ය ජුලියස් හිබර්ට්
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> ආචාර්ය ජුලියස් හිබර්ට් </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
සරල ටැග් දෙකකින් ඔබේ කේතය මෝස්තරයෙන් පිම්ප් කරන්න. ජාවාස්ක්රිප්ට් හරහා වඩාත් විශිෂ්ටත්වය සඳහා, Google හි කේතය prettify පුස්තකාලය තුළට දමන්න, එවිට ඔබ සකසා ඇත.
කේතය, බ්ලොක් හෝ ස්නිපට් පේළිගත කිරීම, නිවැරදි ටැගය එතීමෙන් පමණක් ශෛලිය සමඟ පෙන්විය හැක. රේඛා කිහිපයක් පුරා විහිදෙන කේත කොටස් සඳහා, <pre>
මූලද්රව්යය භාවිතා කරන්න. පේළිගත කේතය සඳහා, <code>
මූලද්රව්යය භාවිතා කරන්න.
මූලද්රව්යය | ප්රතිඵලය |
---|---|
<code> |
මෙවැනි පෙළ පේළියක, ඔබේ ඔතා ඇති කේතය මෙම >html< මූලද්රව්ය මෙන් පෙනෙනු ඇත. |
<pre> |
<div> <h1>ශීර්ෂකය</h1> <p>මෙහි යමක් තිබේ...</p> </div> සටහන: ටැග් තුළ කේතය |
<pre class="prettyprint"> |
google-code-prettify පුස්තකාලය භාවිතා කරමින්, ඔබ කේත කොටස් වලට තරමක් වෙනස් දෘශ්ය විලාසයක් සහ ස්වයංක්රීය වාක්ය ඛණ්ඩ උද්දීපනයක් ලැබේ. <div> <h1> ශීර්ෂකය </h1> <p> මෙතන යමක්... </p> </div> google-code-prettify බාගත කර භාවිතා කරන ආකාරය සඳහා readme බලන්න. |
<span class="label">
ඔබේ ශරීර පෙළෙහි ඇති ඕනෑම වාක්ය ඛණ්ඩයකට අවධානය යොමු කරන්න හෝ සලකුණු කරන්න.
කවදා හෝ එවැනි අලංකාර නව එකක් අවශ්ය විය! හෝ කේතය ලියන විට වැදගත් කොඩි? හොඳයි, දැන් ඔබට ඒවා තිබේ. පෙරනිමියෙන් ඇතුළත් කර ඇති දේ මෙන්න:
ලේබලය | ප්රතිඵලය |
---|---|
<span class="label">Default</span> |
පෙරනිමිය |
<span class="label success">New</span> |
අලුත් |
<span class="label warning">Warning</span> |
අවවාදයයි |
<span class="label important">Important</span> |
වැදගත් |
<span class="label notice">Notice</span> |
දැනුම්දීම |
අඩු HTML පියසටහනක් සහ අවම මෝස්තර සහිත පිටු මත විවිධ ප්රමාණයේ සිඟිති රූ සංදර්ශන කරන්න.
හි ඇති සිඟිති .media-grid
රූ ඕනෑම ප්රමාණයකින් විය හැකි නමුත්, ඒවා ගොඩනඟන ලද Bootstrap ජාල පද්ධතියට සෘජුවම සිතියම්ගත කළ විට වඩාත් හොඳින් ක්රියා කරයි. .span2
90, 210, සහ 330 වැනි රූප පළල , , .span4
, සහ .span6
තීරු ප්රමාණවලට සමාන කිරීමට පෑඩින් පික්සල කිහිපයක් සමඟ ඒකාබද්ධ වේ .
මාධ්ය ජාලක භාවිතා කිරීමට පහසු වන අතර සලකුණු පැත්තෙන් තරමක් සරල ය. ඒවායේ මානයන් තනිකරම ඇතුළත් කර ඇති පින්තූරවල ප්රමාණය මත පදනම් වේ.
- <ul class = "media-grid" >
- <li>
- <a href = "#" >
- <img පන්තිය = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
මේස විශිෂ්ටයි - බොහෝ දේ සඳහා. කෙසේ වෙතත්, විශිෂ්ට වගු, ප්රයෝජනවත්, පරිමාණය කළ හැකි සහ කියවිය හැකි (කේත මට්ටමින්) වීමට මාර්ක්අප් ආදරයක් අවශ්ය වේ. උදව් කිරීමට උපදෙස් කිහිපයක් මෙන්න.
සෑම විටම ඔබේ තීරු ශීර්ෂයන් a වලින් ඔතන්න<thead>
ධූරාවලියක් <thead>
> <tr>
> ලෙස ඔතා තබන්න <th>
.
තීරු ශීර්ෂවලට සමානව, ඔබේ වගුවේ සියලුම අන්තර්ගතයන් <tbody>
ඔබේ ධුරාවලිය තුළ ඔතා තිබිය යුතුය<tbody>
> <tr>
> <td>
.
සියලුම වගු කියවීමේ හැකියාව සහතික කිරීමට සහ ව්යුහය පවත්වා ගැනීමට අත්යවශ්ය මායිම් පමණක් සමඟ ස්වයංක්රීයව හැඩගස්වනු ඇත. අමතර පන්ති හෝ ගුණාංග එකතු කිරීමට අවශ්ය නැත.
# | මුල් නම | අවසන් නම | භාෂාව |
---|---|---|---|
1 | ඇතැම් | එක | ඉංග්රීසි |
2 | ජෝ | සික්ස්පැක් | ඉංග්රීසි |
3 | ස්ටු | දත් | කේතය |
- <වගුව>
- ...
- </ වගුව>
සීබ්රා-ඉරි එකතු කිරීමෙන් ඔබේ වගු සමඟ ටිකක් අලංකාර වන්න- .zebra-striped
පංතිය එක් කරන්න.
# | මුල් නම | අවසන් නම | භාෂාව |
---|---|---|---|
1 | ඇතැම් | එක | ඉංග්රීසි |
2 | ජෝ | සික්ස්පැක් | ඉංග්රීසි |
3 | ස්ටු | දත් | කේතය |
සටහන: Zebra-striping යනු IE8 සහ පහත වැනි පැරණි බ්රවුසර සඳහා ලබා ගත නොහැකි ප්රගතිශීලී වැඩිදියුණු කිරීමකි.
- <table class = "zebra-striped" >
- ...
- </ වගුව>
පෙර උදාහරණය ගෙන, jQuery සහ Tablesorter ප්ලගිනය හරහා වර්ග කිරීමේ ක්රියාකාරීත්වය ලබා දීමෙන් අපි අපගේ වගු වල ප්රයෝජනය වැඩි දියුණු කරමු . වර්ග කිරීම වෙනස් කිරීමට ඕනෑම තීරුවක ශීර්ෂයක් ක්ලික් කරන්න.
# | මුල් නම | අවසන් නම | භාෂාව |
---|---|---|---|
2 | ජෝ | සික්ස්පැක් | ඉංග්රීසි |
3 | ස්ටු | දත් | කේතය |
1 | ඔබගේ | එක | ඉංග්රීසි |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( කාර්යය () {
- $ ( "වගුව# වර්ග කිරීමේ වගු උදාහරණය" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </ වගුව>
කියවිය හැකි සහ පරිමාණය කළ හැකි ආකාරයෙන් ඉදිරිපත් කිරීමට සියලු ආකාරවලට පෙරනිමි මෝස්තර ලබා දී ඇත. පෙළ ආදාන, තෝරාගත් ලැයිස්තු, පෙළ ප්රදේශ, රේඩියෝ බොත්තම් සහ පිරික්සුම් කොටු සහ බොත්තම් සඳහා මෝස්තර සපයනු ලැබේ.
ඔබේ පෝරමයේ HTML වෙත එක් කරන්න .form-stacked
, එවිට ඔබට ලේබල ඔවුන්ගේ වමේ වෙනුවට ඔවුන්ගේ ක්ෂේත්රවල ඉහළින්ම ඇත. ඔබේ පෝරම කෙටි නම් හෝ ඔබට බර පෝරම සඳහා යෙදවුම් තීරු දෙකක් තිබේ නම් මෙය ඉතා හොඳින් ක්රියා කරයි.
ඕනෑම පෝරමයක් අභිරුචිකරණය කරන්න input
, select
හෝtextarea
ඔබේ සලකුණු කිරීමට පන්ති කිහිපයක් පමණක් එක් කිරීමෙන්
v1.3.0 වන විට, අපි ආකෘති මූලද්රව්ය සඳහා ජාලක පදනම් වූ ප්රමාණ පන්ති එකතු කර ඇත. කරුණාකර දැනට පවතින .mini
, .small
, ආදී පන්තිවලට වඩා මේවා භාවිතා කරන්න.
සම්මුතියක් ලෙස, ක්රියා සඳහා බොත්තම් භාවිතා කරන අතර වස්තූන් සඳහා සබැඳි භාවිතා වේ. උදාහරණයක් ලෙස, "බාගැනීම" බොත්තමක් විය හැකි අතර "මෑතකාලීන ක්රියාකාරකම්" සබැඳියක් විය හැක.
සියලුම බොත්තම් ලා අළු මෝස්තරයකට පෙරනිමිය, නමුත් විවිධ වර්ණ මෝස්තර සඳහා ක්රියාකාරී පන්ති ගණනාවක් යෙදිය හැක. මෙම පන්තිවලට නිල් .primary
පන්තියක්, ලා-නිල් .info
පන්තියක්, කොළ .success
පන්තියක් සහ රතු .danger
පන්තියක් ඇතුළත් වේ.
බොත්තම් මෝස්තර යෙදූ දේ සමඟ ඕනෑම දෙයකට .btn
යෙදිය හැක. සාමාන්යයෙන් ඔබට මේවා <a>
, <button>
, සහ තෝරන <input>
මූලද්රව්ය සඳහා පමණක් යෙදීමට අවශ්ය වනු ඇත. එය පෙනෙන ආකාරය මෙන්න:
විශාල හෝ කුඩා බොත්තම් කැමතිද? එය ලබා ගන්න!
එක් හේතුවක් හෝ වෙනත් හේතුවක් නිසා සක්රිය නොවන හෝ යෙදුම මඟින් අක්රිය කර ඇති බොත්තම් සඳහා, අක්රිය තත්ත්වය භාවිතා කරන්න. එය .disabled
සබැඳි සහ මූලද්රව්ය :disabled
සඳහා <button>
වේ.
.alert-message
ක්රියාවක අසාර්ථකත්වය, විය හැකි අසාර්ථකත්වය හෝ සාර්ථකත්වය ඉස්මතු කිරීම සඳහා එක් පේළි පණිවිඩ. ආකෘති සඳහා විශේෂයෙන් ප්රයෝජනවත් වේ.
- <div class = "alert-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> ශුද්ධ ග්වාකමෝල්! </strong> ඔබම පරීක්ෂා කර බලන්න, ඔබ එතරම් හොඳ පෙනුමක් නැත. </p>
- </div>
.alert-message.block-message
පැහැදිලි කිරීමක් අවශ්ය පණිවිඩ සඳහා, අපට ඡේද විලාස ඇඟවීම් ඇත. දිගු දෝෂ පණිවිඩ බුබුලු දැමීම, අපේක්ෂිත ක්රියාවක් ගැන පරිශීලකයෙකුට අනතුරු ඇඟවීම හෝ පිටුවේ වැඩි අවධාරණය සඳහා තොරතුරු ඉදිරිපත් කිරීම සඳහා මේවා පරිපූර්ණ වේ.
- <div class = "alert-message block-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> ශුද්ධ ග්වාකමෝල්! මෙය අනතුරු ඇඟවීමකි! </strong> ඔබම පරීක්ෂා කර බලන්න, ඔබ එතරම් හොඳ පෙනුමක් නැත. Nulla vitae elit libero, a pharetra ague. ප්රෙසෙන්ට් කොමෝඩෝ කර්සස් මැග්නා, හෝ ස්ක්ලෙරිස්ක් නිස්ල් කොන්සෙක්ටේචර් සහ. </p>
- <div class = "alert-actions" >
- <a class = "btn small" href = "#" > මෙම ක්රියාමාර්ගය ගන්න </a> <a class = "btn small" href = "#" > නැතිනම් මෙය කරන්න </a>
- </div>
- </div>
පසුබිම් සන්දර්භය පවත්වා ගැනීම වැදගත් වන අවස්ථාවන්හි සන්දර්භීය ක්රියාවන් සඳහා ආකෘති-සංවාද හෝ ලයිට් පෙට්ටිය විශිෂ්ට වේ.
එක් සියුම් සිරුරක්...
ව්යාකූල පරිශීලකයෙකුට උපකාර කිරීමට සහ ඔවුන් නිවැරදි දිශාවට යොමු කිරීමට Twipsies ඉතා ප්රයෝජනවත් වේ.
Lorem ipsum dolar sit amet illo දෝෂය ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit or natus consequuntur consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis tam dovoluptatium to voluptatem. Voluptasdicta eaque Betae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit Accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde Sunt sed dicta quae voluptastium quae volunte quae volante que volanti que volunte quae volanti que volanti quae volanti que volunte voluptas que voluptatum voluptas que voluptatum voluptas que voluptat que voluptatum
පිරිසැලසුමට බලපෑම් නොකර පිටුවකට යටිපෙළ තොරතුරු සැපයීමට popovers භාවිතා කරන්න.
Etiam porta sem malesuada Magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap පුස්තකාලය සමඟ javascript ඒකාබද්ධ කිරීම ඉතා පහසුයි. පහතින් අපි මූලික කරුණු හරහා ගොස් ඔබට ආරම්භ කිරීම සඳහා නියම ප්ලගීන කිහිපයක් ලබා දෙන්නෙමු!
jQuery සහ Ender සමඟ ක්රියා කරන නව අභිරුචි ප්ලගීන සමඟ Bootstrap හි ප්රාථමික සංරචක සමහරක් ජීවයට ගෙන එන්න . ඔබේ විශේෂිත සංවර්ධන අවශ්යතාවලට සරිලන පරිදි ඒවා දීර්ඝ කිරීමට සහ වෙනස් කිරීමට අපි ඔබව දිරිමත් කරමු.
ගොනුව | විස්තර |
---|---|
bootstrap-modal.js | අපගේ Modal ප්ලගිනය සාම්ප්රදායික මොඩල් js ප්ලගිනය මත ඉතා සිහින් වේ ! twitter හි අපට අවශ්ය හිස් ක්රියාකාරීත්වය පමණක් ඇතුළත් කිරීමට අපි විශේෂ සැලකිල්ලක් ගත්තෙමු. |
bootstrap-alerts.js | අනතුරු ඇඟවීමේ ප්ලගිනය යනු ඇඟවීම් වලට සමීප ක්රියාකාරීත්වයක් එක් කිරීම සඳහා සුපිරි කුඩා පන්තියකි. |
bootstrap-dropdown.js | මෙම ප්ලගිනය bootstrap topbar හෝ Tabbed navigations වෙත පතන අන්තර්ක්රියා එක් කිරීම සඳහා වේ. |
bootstrap-scrollspy.js | ScrollSpy ප්ලගිනය යනු bootstrap topbar වෙත අනුචලන ස්ථානය මත පදනම්ව ස්වයංක්රීයව යාවත්කාලීන වන nav එකක් එක් කිරීම සඳහාය. |
bootstrap-tabs.js | මෙම ප්ලගිනය දේශීය අන්තර්ගතය හරහා බයිසිකල් පැදීම සඳහා ඉක්මන්, ගතික ටැබ් සහ පෙති ක්රියාකාරීත්වය එක් කරයි. |
bootstrap-twipsy.js | Jason Frame විසින් ලියන ලද විශිෂ්ට jQuery.tipsy ප්ලගිනය මත පදනම්ව; twipsy යනු යාවත්කාලීන කරන ලද අනුවාදයකි, එය රූප මත රඳා නොපවතින, සජීවිකරණ සඳහා css3 සහ දේශීය මාතෘකා ආචයනය සඳහා දත්ත ගුණාංග භාවිතා කරයි! |
bootstrap-popover.js | popover ප්ලගිනය ඔබගේ යෙදුමට popovers එකතු කිරීම සඳහා සරල අතුරු මුහුණතක් සපයයි. එය boostrap-twipsy.js ප්ලගිනය දිගු කරයි, එබැවින් ඔබේ ව්යාපෘතියට popovers ඇතුළත් කිරීමේදී එම ගොනුව අල්ලා ගැනීමට වග බලා ගන්න! |
නැහැ! Bootstrap මුලින්ම නිර්මාණය කර ඇත්තේ CSS පුස්තකාලයක් ලෙසය. මෙම ජාවාස්ක්රිප්ට් ඇතුළත් කර ඇති මෝස්තරවලට ඉහළින් මූලික අන්තර්ක්රියාකාරී ස්ථරයක් සපයයි.
කෙසේ වෙතත්, ජාවාස්ක්රිප්ට් අවශ්ය අය සඳහා, අපි ඔබට බූට්ස්ට්රැප් ජාවාස්ක්රිප්ට් සමඟ ඒකාබද්ධ කරන්නේ කෙසේද යන්න තේරුම් ගැනීමට සහ මූලික ක්රියාකාරීත්වය සඳහා ඉක්මන්, සැහැල්ලු විකල්පයක් ඔබට ලබා දීමට ඉහත ප්ලගීන සපයා ඇත.
වැඩි විස්තර සඳහා සහ සමහර සජීවී ආදර්ශන බැලීමට, කරුණාකර අපගේ ප්ලගින ලේඛන පිටුව බලන්න .
Bootstrap ගොඩනගා ඇත්තේ Preboot සමඟින්, වේගවත් සහ පහසු වෙබ් සංවර්ධනය සඳහා CSS පෙර සකසනයක් වන Less සමඟ ඒකාබද්ධව භාවිතා කළ හැකි විවෘත මූලාශ්ර මික්සින් සහ විචල්ය ඇසුරුමකි .
අපි Bootstrap හි Preboot භාවිතා කළ ආකාරය සහ ඔබ ඔබේ මීළඟ ව්යාපෘතියේ අඩුවෙන් ධාවනය කිරීමට තෝරාගතහොත් ඔබට එය භාවිතා කළ හැකි ආකාරය පරීක්ෂා කරන්න.
ඔබගේ බ්රවුසරයේ ජාවාස්ක්රිප්ට් හරහා CSS හි Bootstrap හි අඩු විචල්යයන්, මිශ්රණයන් සහ nesting සම්පූර්ණයෙන්ම භාවිතා කිරීමට මෙම විකල්පය භාවිතා කරන්න.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "සියල්ල" />
- <script src = "js/less-1.1.3.min.js" ></script>
.js විසඳුම දැනෙන්නේ නැද්ද? ඔබ ඔබේ කේතය යොදවන විට සම්පාදනය කිරීමට අඩු මැක් යෙදුම උත්සාහ කරන්න හෝ Node.js භාවිතා කරන්න.
Bootstrap හි කොටසක් ලෙස Twitter Bootstrap හි ඇතුළත් කර ඇති විශේෂ අවස්ථා කිහිපයක් මෙන්න. බාගැනීමට සහ තව දැන ගැනීමට Bootstrap වෙබ් අඩවියට හෝ Github ව්යාපෘති පිටුවට යන්න.
අඩුවෙන් ඇති විචල්යයන් ඔබේ CSS හිසරදයෙන් තොරව නඩත්තු කිරීමට සහ යාවත්කාලීන කිරීමට පරිපූර්ණ වේ. ඔබට වර්ණ අගයක් හෝ නිතර භාවිතා කරන අගයක් වෙනස් කිරීමට අවශ්ය වූ විට, එය එක් ස්ථානයක යාවත්කාලීන කර ඔබ සකසා ඇත.
- // සබැඳි
- @linkColor : #8b59c2;
- @linkColorHover : අඳුරු කරන්න ( @linkColor , 10 );
- // අළු
- @කළු : #000;
- @grayDark : සැහැල්ලු කරන්න ( @කළු , 25 %);
- @අළු : සැහැල්ලු කරන්න ( @කළු , 50 %);
- @grayLight : සැහැල්ලු කරන්න ( @කළු , 70 %);
- @grayLighter : සැහැල්ලු කරන්න ( @කළු , 90 %);
- @සුදු : #fff ;
- // උච්චාරණ වර්ණ
- @නිල් : #08b5fb ;
- @කොළ : #46a546 ;
- @රතු : #9d261d ;
- @කහ : #ffc40d ;
- @තැඹිලි : #f89406 ;
- @රෝස : #c3325f ;
- @දම් : #7a43b6 ;
- // මූලික ජාලකය
- @basefont : 13px ;
- @baseline : 18px ;
/* ... */
CSS හි සාමාන්ය වාක්ය ඛණ්ඩයට අමතරව තවත් අදහස් දැක්වීමේ විලාසයක් ද අඩු සපයයි .
- // මෙය අදහස් දැක්වීමකි
- /* මේකත් කමෙන්ට් එකක් */
මික්සින් යනු මූලික වශයෙන් CSS සඳහා ඇතුළත් වන හෝ අර්ධ වශයෙන් වන අතර, ඔබට කේත බ්ලොක් එකක් එකකට ඒකාබද්ධ කිරීමට ඉඩ සලසයි. වැනි විකුණුම්කරුවන්ගේ උපසර්ග දේපල සඳහා ඒවා විශිෂ්ටයිbox-shadow
, හරස් බ්රවුසර් අනුක්රමණය, අකුරු අට්ටි, සහ තවත් බොහෝ දේ වැනි විකුණුම්කරුවන්ගේ උපසර්ග ගුණාංග සඳහා විශිෂ්ටයි. පහත දැක්වෙන්නේ Bootstrap සමඟ ඇතුළත් කර ඇති මික්සින්වල නියැදියකි.
- #අකුරු {
- . කෙටිකතා ( @බර : සාමාන්ය , @ ප්රමාණය : 14px , @lineHeight : 20px ) {
- අකුරු ප්රමාණය : @size ; _
- අකුරු - බර : @ බර ;
- රේඛාව - උස : @lineHeight ;
- }
- . sans - serif ( @බර : සාමාන්ය , @size : 14px , @lineHeight : 20px ) {
- font- family : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- අකුරු ප්රමාණය : @size ; _
- අකුරු - බර : @ බර ;
- රේඛාව - උස : @lineHeight ;
- }
- ...
- }
- #ශ්රේණිය {
- ...
- . සිරස් ( @startColor : #555, @endColor: #333) {
- පසුබිම - වර්ණය : @endColor ;
- පසුබිම - නැවත : නැවත - x ;
- පසුබිම - රූපය : - khtml - අනුක්රමණය ( රේඛීය , වම් ඉහළ , වම් පහළ , සිට ( @startColor ), ( @endColor ) දක්වා ); // කොන්කරර්
- පසුබිම - රූපය : - moz - රේඛීය - අනුක්රමණය ( @startColor , @endColor ); // FF 3.6+
- පසුබිම - රූපය : - ms - රේඛීය - අනුක්රමණය ( @startColor , @endColor ); // IE10
- පසුබිම - රූපය : - වෙබ් කට්ටලය - ශ්රේණිය ( රේඛීය , වම් ඉහළ , වම් පහළ , වර්ණ - නැවතුම ( 0 %, @startColor ), වර්ණ - නැවතුම ( 100 %, @ endColor )); // Safari 4+, Chrome 2+
- පසුබිම - රූපය : - වෙබ් කට්ටලය - රේඛීය - ශ්රේණිය ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- පසුබිම - රූපය : - o - රේඛීය - අනුක්රමණය ( @startColor , @endColor ); // ඔපෙරා 11.10
- පසුබිම - රූපය : රේඛීය - අනුක්රමණය ( @startColor , @endColor ); // සම්මතය
- }
- ...
- }
පහත දැක්වෙන පරිදි නම්යශීලී සහ බලවත් මිශ්රණ උත්පාදනය කිරීමට විචිත්රවත් වී ගණිතය කිහිපයක් කරන්න.
- // Griditude
- @GridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // තීරු කිහිපයක් සාදන්න
- . තීරු ( @columnSpan : 1 ) {
- පළල : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
/lib/ හි ඇති ගොනු වෙනස් කිරීමෙන් පසු .less
, bootstrap-*.*.*.css සහ bootstrap-*.*.*.min.css ගොනු නැවත උත්පාදනය කිරීම සඳහා ඔබට ඒවා නැවත සම්පාදනය කිරීමට අවශ්ය වනු ඇත. ඔබ GitHub වෙත ඇදීමේ ඉල්ලීමක් ඉදිරිපත් කරන්නේ නම්, ඔබ සැම විටම නැවත සම්පාදනය කළ යුතුය.
ක්රමය | පියවර |
---|---|
Makefile සමඟ නෝඩ් | පහත විධානය ක්රියාත්මක කිරීමෙන් අඩු විධාන රේඛා සම්පාදකය npm සමඟ ස්ථාපනය කරන්න: $npm අඩුවෙන් ස්ථාපනය කරන්න ස්ථාපනය කළ පසු මීට අමතරව, ඔබ මුරකරු ස්ථාපනය කර ඇත්නම්, ඔබ |
Javascript | නවතම Les.js බාගත කර එයට (සහ Bootstrap) මාර්ගය ඇතුළත් කරන්න
.less ගොනු නැවත සම්පාදනය කිරීමට, ඒවා සුරකින්න සහ ඔබේ පිටුව නැවත පූරණය කරන්න. Less.js ඒවා සම්පාදනය කර දේශීය ගබඩාවේ ගබඩා කරයි. |
විධාන රේඛාව | ඔබ දැනටමත් අඩු විධාන රේඛා මෙවලම ස්ථාපනය කර ඇත්නම්, පහත විධානය ක්රියාත්මක කරන්න: $ lessc ./lib/bootstrap.less > bootstrap.css
|
අඩු Mac යෙදුම | නිල නොවන Mac යෙදුම .less ගොනු නාමාවලි නරඹන අතර නැරඹූ .less ගොනුවක සෑම සුරැකුමකින්ම පසුව දේශීය ගොනු වෙත කේතය සම්පාදනය කරයි. ඔබ කැමති නම්, ඔබට ස්වයංක්රීයව කුඩා කිරීම සඳහා යෙදුම තුළ මනාප ටොගල කළ හැකි අතර සම්පාදනය කරන ලද ගොනු අවසන් වන්නේ කුමන නාමාවලියෙහිද යන්න. |