පෙරනිමි ජාලකය

Bootstrap හි කොටසක් ලෙස සපයන ලද පෙරනිමි ජාල පද්ධතිය 940px පළල 16-තීරු ජාලයකි. එය ජනප්‍රිය 960 ග්‍රිඩ් පද්ධතියේ රසයකි, නමුත් වම් සහ දකුණු පැතිවල අමතර ආන්තිකය/පැඩිං නොමැතිව.

උදාහරණ ජාල සලකුණු කිරීම

මෙහි පෙන්වා ඇති පරිදි, "තීරු" දෙකකින් මූලික පිරිසැලසුමක් නිර්මාණය කළ හැකි අතර, ඒ සෑම එකක්ම අපගේ ජාල පද්ධතියේ කොටසක් ලෙස අර්ථ දක්වා ඇති පාදක තීරු 16 කින් සමන්විත වේ. තවත් වෙනස්කම් සඳහා පහත උදාහරණ බලන්න.

<div class="row"> පන්තිය = "පේළිය" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

ස්ථාවර පිරිසැලසුම

ඕනෑම අඩවියක් හෝ පිටුවක් සඳහා මූලික 940px පළල, මධ්‍යගත බහාලුම් පිරිසැලසුමක්.

<ශරීරය>
  <div class = "බහාලකය" > 
    ...
  </div>
</body>

දියර පිරිසැලසුම

අවම සහ උපරිම පළල සහ වම් පැත්තේ පැති තීරුවක් සහිත නම්‍යශීලී ද්‍රව හෝ ද්‍රව පිටු ව්‍යුහයක්. යෙදුම් සඳහා විශිෂ්ටයි.

<ශරීරය>
  <div class = "container-fluid" > 
    <div class = "පැති තීරුව" > 
      ...
    </div>
    <div class = "අන්තර්ගතය" > 
      ...
    </div>
  </div>
</body>

ශීර්ෂයන් සහ පිටපත

ඔබේ වෙබ් පිටු ව්‍යුහගත කිරීම සඳහා සම්මත මුද්‍රණ ධුරාවලියක්.

h1. ශීර්ෂය 1

h2. ශීර්ෂය 2

h3. ශීර්ෂය 3

h4. ශීර්ෂය 4

h5. ශීර්ෂය 5

h6. ශීර්ෂය 6

උදාහරණ ඡේදය

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

උදාහරණ ශීර්ෂයට උප ශීර්ෂයක් ඇත...

<strong>ඔබට සහ සමඟ උපමාතෘකා එකතු කළ හැකිය<em>

වෙනත් මූලද්රව්ය

අවධාරණය, ලිපින සහ කෙටි යෙදුම් භාවිතා කිරීම

<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.

ලිපිනයන්

මූලද්‍රව්‍යය addressභාවිතා කර ඇත්තේ—ඔබ එය අනුමාන කළා!—ලිපින සඳහා. එය පෙනෙන ආකාරය මෙන්න:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

සටහන: කිසිදු මෝස්තරයක් යෙදීමකින් තොරව සැබෑ ජීවිතයේදී කියවන පරිදි අන්තර්ගතය නිසි ලෙස ව්‍යුහගත කිරීම addressසඳහා රේඛා බිඳීමකින් ( ) සෑම පේළියක්ම අවසන් විය යුතුය.<br />

කෙටි යෙදුම්

කෙටි යෙදුම් සහ කෙටි යෙදුම් සඳහා, abbrටැගය භාවිතා කරන්න ( HTML5acronym හි අත්හරිනු ලැබේ ). කෙටිකතා පෝරමය ටැගය තුළ තබා සම්පූර්ණ නම සඳහා මාතෘකාවක් සකසන්න.

අවහිර කිරීම්

<blockquote> <p> <cite>

ඔබේ blockquoteවටා paragraphසහ citeටැග් එතීමට වග බලා ගන්න. මූලාශ්රයක් උපුටා දක්වන විට, citeමූලද්රව්යය භාවිතා කරන්න. CSS ස්වයංක්‍රීයව em dash (—) සහිත නමක් පෙරවදනක් දරයි.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labare et dolore Magna aliqua...

ආචාර්ය ජුලියස් හිබර්ට්

ඇණවුම් නොකළ<ul>

• ජෙරමි බික්ස්බි
• රොබට් ඩෙසුරේ
• ජොෂ් වොෂින්ටන්
• ඇන්ටන් කප්රේසි
• මගේ කණ්ඩායමේ මිතුරන්
  • ජෝර්ජ් කැස්ටන්සා
  • ජෙරී සයින්ෆෙල්ඩ්
  • කොස්මෝ ක්රේමර්
  • ඉලේන් බෙනිස්
  • නිව්මන්
• ජෝන් ජේකබ්
• පෝල් පියර්ස්
• කෙවින් ගාර්නට්

මෝස්තර නොකළ<ul.unstyled>

• ජෙරමි බික්ස්බි
• රොබට් ඩෙසුරේ
• ජොෂ් වොෂින්ටන්
• ඇන්ටන් කප්රේසි
• මගේ කණ්ඩායමේ මිතුරන්
  • ජෝර්ජ් කැස්ටන්සා
  • ජෙරී සයින්ෆෙල්ඩ්
  • කොස්මෝ ක්රේමර්
  • ඉලේන් බෙනිස්
  • නිව්මන්
• ජෝන් ජේකබ්
• පෝල් පියර්ස්
• කෙවින් ගාර්නට්

ඇණවුම් කළා<ol>

1. ජෙරමි බික්ස්බි
2. රොබට් ඩෙසුරේ
3. ජොෂ් වොෂින්ටන්
4. ඇන්ටන් කප්රේසි
5. මගේ කණ්ඩායමේ මිතුරන්
   1. ජෝර්ජ් කැස්ටන්සා
   2. ජෙරී සයින්ෆෙල්ඩ්
   3. කොස්මෝ ක්රේමර්
   4. ඉලේන් බෙනිස්
   5. නිව්මන්
6. ජෝන් ජේකබ්
7. පෝල් පියර්ස්
8. කෙවින් ගාර්නට්

විස්තරdl

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

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

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada Magna mollis euismod.

ගොඩනැගිලි මේස

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

මේස විශිෂ්ටයි - බොහෝ දේ සඳහා. කෙසේ වෙතත්, විශිෂ්ට වගු, ප්‍රයෝජනවත්, පරිමාණය කළ හැකි සහ කියවිය හැකි (කේත මට්ටමින්) වීමට මාර්ක්අප් ආදරයක් අවශ්‍ය වේ. උදව් කිරීමට උපදෙස් කිහිපයක් මෙන්න.

සෑම විටම ඔබේ තීරු ශීර්ෂයන් theadධූරාවලියක් thead> tr> ලෙස ඔතා තබන්න th.

තීරු ශීර්ෂවලට සමානව, ඔබේ වගුවේ සියලුම අන්තර්ගතයන් ඔතා තිබිය යුතු tbodyබැවින් ඔබේ ධුරාවලිය tbody> tr> td.

උදාහරණ: පෙරනිමි වගු මෝස්තර

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

#	මුල් නම	අවසන් නම	භාෂාව
1	ඇතැම්	එක	ඉංග්රීසි
2	ජෝ	සික්ස්පැක්	ඉංග්රීසි
3	ස්ටු	දත්	කේතය

<වගු පන්තිය = "පොදු වගුව" > 
  ...
</ වගුව>

උදාහරණය: සීබ්‍රා-ඉරි සහිත

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

#	මුල් නම	අවසන් නම	භාෂාව
1	ඇතැම්	එක	ඉංග්රීසි
2	ජෝ	සික්ස්පැක්	ඉංග්රීසි
3	ස්ටු	දත්	කේතය

<table class = "common-table zebra-striped" > 
...
</ වගුව>

උදාහරණය: Zebra-striped w/ TableSorter.js

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

#	මුල් නම	අවසන් නම	භාෂාව
1	ඔබගේ	එක	ඉංග්රීසි
2	ජෝ	සික්ස්පැක්	ඉංග්රීසි
3	ස්ටු	දත්	කේතය

<script type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>  
<script type = "text/javascript" > 
  $ ( ලේඛනය ). සූදානම් ( කාර්යය () { 
    $ ( "වගුව# වර්ග කිරීමේ වගු උදාහරණය" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</ වගුව>

පෙරනිමි මෝස්තර

කියවිය හැකි සහ පරිමාණය කළ හැකි ආකාරයෙන් ඉදිරිපත් කිරීමට සියලු ආකාරවලට පෙරනිමි මෝස්තර ලබා දී ඇත. පෙළ ආදාන, තෝරාගත් ලැයිස්තු, පෙළ ප්‍රදේශ, රේඩියෝ බොත්තම් සහ පිරික්සුම් කොටු සහ බොත්තම් සඳහා මෝස්තර සපයනු ලැබේ.

උදාහරණ පෝරමය පුරාවෘත්තය

X-විශාල ආදානය

තෝරන්න

1 2 3 4 5

තෝරන්න

1 2 3 4 5

සංස්කරණය කළ නොහැකි ආදානය

මෙහි යම් වටිනාකමක්

අබල කළ ආදානය

X-විශාල ආදානය

උපකාරක පෙළෙහි කුඩා කොටස

උදාහරණ පෝරමය පුරාවෘත්තය

පෙර සැකසූ පෙළ

@

පෙර සැකසූ පිරික්සුම් කොටුව

අමුණා ඇති පිරික්සුම් කොටුව

ගොනු ආදානය

උදාහරණ පෝරමය පුරාවෘත්තය

විකල්ප ලැයිස්තුව

• විකල්පය එක මෙය සහ එයයි - එය විශිෂ්ට වන්නේ මන්දැයි ඇතුළත් කිරීමට වග බලා ගන්න
• විකල්ප දෙක ද පරීක්ෂා කර පෝරම ප්‍රතිඵලවලට ඇතුළත් කළ හැක
• තුන්වන විකල්පයට හැකිය-ඔව්, ඔබ එය අනුමාන කළා-ද පරීක්ෂා කර පෝරම ප්‍රතිඵලවලට ඇතුළත් කළ හැක
• හතරවන විකල්පය අක්‍රිය කර ඇති බැවින් එය පරීක්ෂා කළ නොහැක.

සටහන: ලේබල් විශාල ක්ලික් ප්‍රදේශ සහ වඩාත් භාවිත කළ හැකි පෝරමයක් සඳහා සියලු විකල්ප වට කර ඇත.

දින පරාසය

වෙත සියලුම වේලාවන් පැසිෆික් සම්මත වේලාව ලෙස පෙන්වනු ලැබේ (GMT -08:00).

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

අවශ්‍ය නම් ඉහත ක්ෂේත්‍රය විස්තර කිරීමට උපකාරක පෙළ අවහිර කරන්න.

විකල්ප ලැයිස්තුව

• විකල්පය එක මෙය සහ එයයි - එය විශිෂ්ට වන්නේ මන්දැයි ඇතුළත් කිරීමට වග බලා ගන්න
• විකල්ප දෙක ද පරීක්ෂා කර පෝරම ප්‍රතිඵලවලට ඇතුළත් කළ හැක

වෙනස්කම් සුරකින්න අවලංගු කරන්න

ගොඩගැසූ ආකෘති

ඔබේ පෝරමයේ HTML වෙත එක් කරන්න .form-stacked, එවිට ඔබට ලේබල ඔවුන්ගේ වමේ වෙනුවට ඔවුන්ගේ ක්ෂේත්‍රවල ඉහළින්ම ඇත. ඔබේ පෝරම කෙටි නම් හෝ ඔබට බර පෝරම සඳහා යෙදවුම් තීරු දෙකක් තිබේ නම් මෙය ඉතා හොඳින් ක්‍රියා කරයි.

උදාහරණ පෝරමය පුරාවෘත්තය

X-විශාල ආදානය

තෝරන්න

1 2 3 4 5

උදාහරණ පෝරමය පුරාවෘත්තය

විකල්ප ලැයිස්තුව

• විකල්පය එක මෙය සහ එයයි - එය විශිෂ්ට වන්නේ මන්දැයි ඇතුළත් කිරීමට වග බලා ගන්න
• විකල්ප දෙක ද පරීක්ෂා කර පෝරම ප්‍රතිඵලවලට ඇතුළත් කළ හැක

සටහන: ලේබල් විශාල ක්ලික් ප්‍රදේශ සහ වඩාත් භාවිත කළ හැකි පෝරමයක් සඳහා සියලු විකල්ප වට කර ඇත.

වෙනස්කම් සුරකින්න අවලංගු කරන්න

බොත්තම්

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

සියලුම බොත්තම් ලා අළු මෝස්තරයකට පෙරනිමි, නමුත් නිල් .primaryපන්තියක් ඇත. ඊට අමතරව, ඔබේම මෝස්තර පෙරළීම පහසුයි.

උදාහරණ බොත්තම්

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

විකල්ප ප්රමාණ

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

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

එක් හේතුවක් හෝ වෙනත් හේතුවක් නිසා සක්‍රිය නොවන හෝ යෙදුම මඟින් අක්‍රිය කර ඇති බොත්තම් සඳහා, අක්‍රිය තත්ත්වය භාවිතා කරන්න. එය .disabledසබැඳි සහ මූලද්‍රව්‍ය :disabledසඳහා buttonවේ.

සබැඳි

බොත්තම්

එය කුමක් ද

අපගේ topbar යනු වෙබ් අඩවියක ලාංඡනය හෝ නම, ප්‍රාථමික සංචාලනය සහ සෙවුම් පෝරමය අඩංගු ස්ථාවර තීරුවකි.

අභිරුචිකරණය කළ හැකි

ඇතුළත සියලුම මූලද්‍රව්‍ය සහ සම්පූර්ණ ඉහළ තීරුව ද විකල්ප වේ. ඔබට ලාංඡනය/නම, nav, සෙවීම, සහ ද්විතියික nav-හෝ එහි ඕනෑම සංයෝජනයක් ඇතුළත් කිරීමට තෝරාගත හැක.

පතන ඇතුළත්

ප්‍රධාන සංචාලනයේ කොටසක් ලෙස, අපි ඔබට ඔබගේ nav වෙත පතන එකතු කිරීමේ හැකියාව ඇතුළත් කර ඇත්තෙමු. එය සිදු කරන්නේ කෙසේදැයි බැලීමට ඉහත (දකුණට පෙළගස්වා ඇති) ද්විතියික නාවිකය පරීක්ෂා කරන්න.

ටැබ් සහ පෙති

සමඟ සරල ද්විතියික සංචලනය සාදන්න ul. සුදුසු පන්තිය එකතු කිරීමෙන් ටැබ් හෝ පෙති අතර මාරු කරන්න.

අපගේ ගිණුම් සැකසීම් පිටු සහ සමාන අන්තර්ගත පිටු අතර ටොගල් කිරීම සඳහා පරිශීලක කාලරේඛා වැනි අන්තර්ගත උප කොටස් සඳහා විශිෂ්ටයි. ටැබ් හෝ පෙති මෝස්තර වලින් ලබා ගත හැක.

• නිවස
• පැතිකඩ
• පණිවිඩ
• සැකසුම්
• අමතන්න

<ul class = "tabs" > 
  <li class = "සක්‍රිය" ><a href = "" > මුල් පිටුව </a></li>  
  <li><a href = "" > පැතිකඩ </a></li> 
  <li><a href = "" > පණිවිඩ </a></li> 
  <li><a href = "" > සැකසීම් </a></li> 
  <li><a href = "" > සම්බන්ධතා </a></li> 
</ul>

• නිවස
• පැතිකඩ
• පණිවිඩ
• සැකසුම්
• අමතන්න

<ul class = "පෙති" > 
  <li class = "සක්‍රිය" ><a href = "" > මුල් පිටුව </a></li>  
  <li><a href = "" > පැතිකඩ </a></li> 
  <li><a href = "" > පණිවිඩ </a></li> 
  <li><a href = "" > සැකසීම් </a></li>
  <li><a href = "" > අමතන්න </a></li>
</ul>

පේජිනේෂන්

Rdio විසින් ආනුභාව ලත් අතිශය සරල සහ අවම මෝස්තර සහිත පිටු නිර්මාණය. විශාල කොටස මග හැරීමට අපහසුය, පහසුවෙන් පරිමාණය කළ හැකි අතර විශාල ක්ලික් ප්‍රදේශ සපයයි.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "" > ← පෙර </a></li>  
    <li class = "සක්‍රිය" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> 
    <li><a href = "" > 3 </a></li> 
    <li><a href = "" > 4 </a></li> 
    <li><a href = "" > 5 </a></li> 
    <li class = "ඊළඟ" ><a href = "" > ඊළඟ → </a></li>  
  </ul>
</div>

මූලික ඇඟවීම්

ක්‍රියාවක අසාර්ථකත්වය, විය හැකි අසාර්ථකත්වය හෝ සාර්ථකත්වය ඉස්මතු කිරීම සඳහා එක් පේළි පණිවිඩ. ආකෘති සඳහා විශේෂයෙන් ප්රයෝජනවත් වේ.

පණිවිඩ අවහිර කරන්න

පැහැදිලි කිරීමක් අවශ්‍ය පණිවිඩ සඳහා, අපට ඡේද විලාස ඇඟවීම් ඇත. දිගු දෝෂ පණිවිඩ බුබුලු දැමීම, අපේක්ෂිත ක්‍රියාවක් ගැන පරිශීලකයෙකුට අනතුරු ඇඟවීම හෝ පිටුවේ වැඩි අවධාරණය සඳහා තොරතුරු ඉදිරිපත් කිරීම සඳහා මේවා පරිපූර්ණ වේ.

මාදිලි

පසුබිම් සන්දර්භය පවත්වා ගැනීම වැදගත් වන අවස්ථා වලදී සන්දර්භීය ක්‍රියාවන් සඳහා ආකෘති-සංවාද හෝ ලයිට් පෙට්ටිය විශිෂ්ටයි.

Popovers

පිරිසැලසුම බල නොපා පිටුවකට යටි පෙළ තොරතුරු සැපයීමට popovers භාවිතා කරන්න.

Bootstrap ගොඩනගා ඇත්තේ Preboot සමඟින්, වේගවත් සහ පහසු වෙබ් සංවර්ධනය සඳහා CSS පෙර සකසනයක් වන Less සමඟ ඒකාබද්ධව භාවිතා කළ හැකි විවෘත මූලාශ්‍ර මික්සින් සහ විචල්‍ය ඇසුරුමකි .

අපි Bootstrap හි Preboot භාවිතා කළ ආකාරය සහ ඔබ ඔබේ මීළඟ ව්‍යාපෘතියේ අඩුවෙන් ධාවනය කිරීමට තෝරාගතහොත් ඔබට එය භාවිතා කළ හැකි ආකාරය පරීක්ෂා කරන්න.

එය භාවිතා කරන්නේ කෙසේද

ඔබගේ බ්‍රවුසරයේ ජාවාස්ක්‍රිප්ට් හරහා CSS හි Bootstrap හි අඩු විචල්‍යයන්, මිශ්‍රණයන් සහ nesting සම්පූර්ණයෙන්ම භාවිතා කිරීමට මෙම විකල්පය භාවිතා කරන්න.

<link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "සියල්ල" />     
<script type = "text/javascript" src = "js/less-1.0.41.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 ;            
 
// මූලික
@baseline : 20px ;          

අදහස් දක්වමින්

/* ... */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    
    - ms - පෙරහන : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    පෙරහන : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 සහ IE7 
    පසුබිම - රූපය : රේඛීය - අනුක්‍රමණය ( වමේ , @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   
    - ms - පෙරහන : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    පෙරහන : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 සහ IE7 
    පසුබිම - රූපය : රේඛීය - අනුක්‍රමණය ( @startColor , @endColor ); // සම්මතය  
  }
  . දිශානුගත ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . සිරස් - වර්ණ තුනක් ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

මෙහෙයුම් සහ ජාල පද්ධතිය

පහත දැක්වෙන පරිදි නම්‍යශීලී සහ බලවත් මිශ්‍රණ උත්පාදනය කිරීමට විචිත්‍රවත් වී ගණිතය කිහිපයක් කරන්න.

// Griditude
@GridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// ජාල පද්ධතිය
. කන්ටේනර් {
  පළල : @siteWidth ; 
  ආන්තිකය : 0 ස්වයංක්‍රීය ;  
  . clearfix ();
}
. තීරු ( @columnSpan : 1 ) {  
  සංදර්ශකය : පේළිගත ; 
  පාවෙන : වම් ;
  පළල : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  මායිම - වම් : @ gridGutterWidth ; 
  &: පළමු - දරුවා {
    ආන්තිකය - වම් : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  ආන්තිකය - වම් : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! වැදගත් ;          
}