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 සමඟ බාගන්න, දෙබලක, අදින්න, ගොනු ගැටළු සහ තවත් දේ.
ට්විටර් හි මුල් දිනවල, ඉංජිනේරුවන් ඉදිරිපස අවශ්යතා සපුරාලීම සඳහා ඔවුන්ට හුරුපුරුදු ඕනෑම පුස්තකාලයක් පාහේ භාවිතා කළහ. බූට්ස්ට්රැප් ආරම්භ වූයේ ඉදිරිපත් කළ අභියෝගවලට පිළිතුරක් ලෙසින් සහ Twitter හි පළමු Hackweek තුළ සංවර්ධනය ඉක්මනින් වේගවත් විය.
Twitter හි බොහෝ ඉංජිනේරුවන්ගේ උපකාරය සහ ප්රතිපෝෂණ ඇතිව, Bootstrap මූලික මෝස්තර පමණක් නොව, වඩාත් අලංකාර සහ කල් පවතින ඉදිරිපස මෝස්තර රටා ඇතුළත් කිරීමට සැලකිය යුතු ලෙස වර්ධනය වී ඇත.
dev.twitter.com හි වැඩිදුර කියවන්න ›
ක්රෝම්, සෆාරි, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සහ ෆයර්ෆොක්ස් වැනි ප්රධාන නවීන බ්රව්සර්වල බූට්ස්ට්රැප් පරීක්ෂා කර සහය දක්වයි.
Bootstrap සම්පාදනය කරන ලද CSS, uncompiled සහ උදාහරණ සැකිලි සමඟ සම්පුර්ණ වේ.
Bootstrap හි කොටසක් ලෙස සපයන ලද පෙරනිමි ජාල පද්ධතිය 940px පළල 16-තීරු ජාලයකි. එය ජනප්රිය 960 ග්රිඩ් පද්ධතියේ රසයකි, නමුත් වම් සහ දකුණු පැතිවල අමතර ආන්තිකය/පැඩිං නොමැතිව.
මෙහි පෙන්වා ඇති පරිදි, "තීරු" දෙකකින් මූලික පිරිසැලසුමක් නිර්මාණය කළ හැකි අතර, ඒ සෑම එකක්ම අපගේ ජාල පද්ධතියේ කොටසක් ලෙස අර්ථ දක්වා ඇති පාදක තීරු 16 කින් සමන්විත වේ. තවත් වෙනස්කම් සඳහා පහත උදාහරණ බලන්න.
- <div class = "row" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
පෙරනිමි සහ සරල 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.
ආචාර්ය ජුලියස් හිබර්ට්
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
මේස විශිෂ්ටයි - බොහෝ දේ සඳහා. කෙසේ වෙතත්, විශිෂ්ට වගු, ප්රයෝජනවත්, පරිමාණය කළ හැකි සහ කියවිය හැකි (කේත මට්ටමින්) වීමට මාර්ක්අප් ආදරයක් අවශ්ය වේ. උදව් කිරීමට උපදෙස් කිහිපයක් මෙන්න.
සෑම විටම ඔබේ තීරු ශීර්ෂයන් <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 ප්ලගිනය හරහා වර්ග කිරීමේ ක්රියාකාරීත්වය ලබා දීමෙන් අපි අපගේ වගු වල ප්රයෝජනය වැඩි දියුණු කරමු . වර්ග කිරීම වෙනස් කිරීමට ඕනෑම තීරුවක ශීර්ෂයක් ක්ලික් කරන්න.
# | මුල් නම | අවසන් නම | භාෂාව |
---|---|---|---|
1 | ඔබගේ | එක | ඉංග්රීසි |
2 | ජෝ | සික්ස්පැක් | ඉංග්රීසි |
3 | ස්ටු | දත් | කේතය |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( කාර්යය () {
- $ ( "වගුව# වර්ග කිරීමේ වගු උදාහරණය" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </ වගුව>
කියවිය හැකි සහ පරිමාණය කළ හැකි ආකාරයෙන් ඉදිරිපත් කිරීමට සියලු ආකාරවලට පෙරනිමි මෝස්තර ලබා දී ඇත. පෙළ ආදාන, තෝරාගත් ලැයිස්තු, පෙළ ප්රදේශ, රේඩියෝ බොත්තම් සහ පිරික්සුම් කොටු සහ බොත්තම් සඳහා මෝස්තර සපයනු ලැබේ.
ඔබේ පෝරමයේ HTML වෙත එක් කරන්න .form-stacked
, එවිට ඔබට ලේබල ඔවුන්ගේ වමේ වෙනුවට ඔවුන්ගේ ක්ෂේත්රවල ඉහළින්ම ඇත. ඔබේ පෝරම කෙටි නම් හෝ ඔබට බර පෝරම සඳහා යෙදවුම් තීරු දෙකක් තිබේ නම් මෙය ඉතා හොඳින් ක්රියා කරයි.
සම්මුතියක් ලෙස, ක්රියා සඳහා බොත්තම් භාවිතා කරන අතර වස්තූන් සඳහා සබැඳි භාවිතා වේ. උදාහරණයක් ලෙස, "බාගැනීම" බොත්තමක් විය හැකි අතර "මෑත ක්රියාකාරකම්" සබැඳියක් විය හැක.
සියලුම බොත්තම් ලා අළු මෝස්තරයකට පෙරනිමිය, නමුත් විවිධ වර්ණ මෝස්තර සඳහා ක්රියාකාරී පන්ති ගණනාවක් යෙදිය හැක. මෙම පන්තිවලට නිල් .primary
පන්තියක්, ලා-නිල් .info
පන්තියක්, කොළ .success
පන්තියක් සහ රතු .danger
පන්තියක් ඇතුළත් වේ. ඊට අමතරව, ඔබේම මෝස්තර පෙරළීම පහසුයි.
බොත්තම් මෝස්තර යෙදූ දේ සමඟ ඕනෑම දෙයකට .btn
යෙදිය හැක. සාමාන්යයෙන් ඔබට මේවා <a>
, <button>
, සහ තෝරන <input>
මූලද්රව්ය සඳහා පමණක් යෙදීමට අවශ්ය වනු ඇත. එය පෙනෙන ආකාරය මෙන්න:
විශාල හෝ කුඩා බොත්තම් කැමතිද? එය ලබා ගන්න!
එක් හේතුවක් හෝ වෙනත් හේතුවක් නිසා සක්රිය නොවන හෝ යෙදුම මඟින් අක්රිය කර ඇති බොත්තම් සඳහා, අක්රිය තත්ත්වය භාවිතා කරන්න. එය .disabled
සබැඳි සහ මූලද්රව්ය :disabled
සඳහා <button>
වේ.
div.alert-message
ක්රියාවක අසාර්ථකත්වය, විය හැකි අසාර්ථකත්වය හෝ සාර්ථකත්වය ඉස්මතු කිරීම සඳහා එක් පේළි පණිවිඩ. ආකෘති සඳහා විශේෂයෙන් ප්රයෝජනවත් වේ.
div.alert-message.block-message
පැහැදිලි කිරීමක් අවශ්ය පණිවිඩ සඳහා, අපට ඡේද විලාස ඇඟවීම් ඇත. දිගු දෝෂ පණිවිඩ බුබුලු දැමීම, අපේක්ෂිත ක්රියාවක් ගැන පරිශීලකයෙකුට අනතුරු ඇඟවීම හෝ පිටුවේ වැඩි අවධාරණය සඳහා තොරතුරු ඉදිරිපත් කිරීම සඳහා මේවා පරිපූර්ණ වේ.
පසුබිම් සන්දර්භය පවත්වා ගැනීම වැදගත් වන අවස්ථා වලදී සන්දර්භීය ක්රියාවන් සඳහා ආකෘති-සංවාද හෝ ලයිට් පෙට්ටිය විශිෂ්ටයි.
එක් සියුම් සිරුරක්...
ව්යාකූල පරිශීලකයෙකුට උපකාර කිරීමට සහ ඔවුන් නිවැරදි දිශාවට යොමු කිරීමට 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 ගොඩනගා ඇත්තේ 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 ;
- }
- . serif ( @බර : සාමාන්ය , @size : 14px , @lineHeight : 20px ) {
- font- family : " Georgia" , Times New Roman , Times , sans - serif ;
- අකුරු ප්රමාණය : @size ; _
- අකුරු - බර : @ බර ;
- රේඛාව - උස : @lineHeight ;
- }
- . monospace ( @බර : සාමාන්ය , @size : 12px , @lineHeight : 20px ) {
- අකුරු පවුල : " මොනාකෝ" , කූරියර් නිව් , මොනොස්පේස් ;
- අකුරු ප්රමාණය : @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 ); // සම්මතය
- }
- . සිරස් ( @startColor : #555, @endColor: #333) {
- පසුබිම - වර්ණය : @endColor ;
- පසුබිම - නැවත : නැවත - x ;
- පසුබිම - රූපය : - khtml - අනුක්රමණය ( රේඛීය , වම් ඉහළ , වම් පහළ , සිට ( @startColor ), ( @endColor ) දක්වා ); // කොන්කරර්
- පසුබිම - රූපය : - moz - රේඛීය - අනුක්රමණය ( @startColor , @endColor ); // FF 3.6+
- පසුබිම - රූපය : - ms - රේඛීය - අනුක්රමණය ( @startColor , @endColor ); // IE10
- පසුබිම - රූපය : - webkit - gradient ( රේඛීය , වම් ඉහළ , වම් පහළ , වර්ණ - නැවතුම ( 0 %, @startColor ), වර්ණ - නැවතුම ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- පසුබිම - රූපය : - වෙබ් කට්ටලය - රේඛීය - ශ්රේණිය ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- පසුබිම - රූපය : - o - රේඛීය - අනුක්රමණය ( @startColor , @endColor ); // ඔපෙරා 11.10
- පසුබිම - රූපය : රේඛීය - අනුක්රමණය ( @startColor , @endColor ); // සම්මතය
- }
- . දිශානුගත ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . සිරස් - වර්ණ තුනක් ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
පහත දැක්වෙන පරිදි නම්යශීලී සහ බලවත් මිශ්රණ උත්පාදනය කිරීමට විචිත්රවත් වී ගණිතය කිහිපයක් කරන්න.
- // Griditude
- @GridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // ජාල පද්ධතිය
- . කන්ටේනර් {
- පළල : @siteWidth ;
- ආන්තිකය : 0 ස්වයංක්රීය ;
- . clearfix ();
- }
- . තීරු ( @columnSpan : 1 ) {
- පළල : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- ආන්තිකය - වම් : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }