Etiam porta sem malesuada Magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
பூட்ஸ்டார்ப் என்பது ட்விட்டரின் டூல்கிட் ஆகும், இது வெப்அப்கள் மற்றும் தளங்களின் கிக்ஸ்டார்ட் மேம்பாட்டிற்காக வடிவமைக்கப்பட்டுள்ளது.
அச்சுக்கலை, படிவங்கள், பொத்தான்கள், அட்டவணைகள், கட்டங்கள், வழிசெலுத்தல் மற்றும் பலவற்றிற்கான அடிப்படை CSS மற்றும் HTML ஆகியவை இதில் அடங்கும்.
மேதாவி எச்சரிக்கை: பூட்ஸ்டார்ப் குறைவாக உருவாக்கப்பட்டுள்ளது மற்றும் நவீன உலாவிகளை மனதில் கொண்டு வாயிலுக்கு வெளியே வேலை செய்யும் வகையில் வடிவமைக்கப்பட்டுள்ளது.
விரைவான மற்றும் எளிதான தொடக்கத்திற்கு, இந்த துணுக்கை உங்கள் வலைப்பக்கத்தில் நகலெடுக்கவும்.
குறைவாக பயன்படுத்தும் ரசிகரா? பிரச்சனை இல்லை, ரெப்போவை குளோன் செய்து, இந்த வரிகளைச் சேர்க்கவும்:
Github இல் அதிகாரப்பூர்வ பூட்ஸ்டார்ப் ரெப்போ மூலம் பதிவிறக்கம், போர்க், இழுத்தல், கோப்பு சிக்கல்கள் மற்றும் பல.
ட்விட்டரின் முந்தைய நாட்களில், பொறியாளர்கள் தங்களுக்குத் தெரிந்த எந்த நூலகத்தையும் முன்-இறுதித் தேவைகளைப் பூர்த்தி செய்யப் பயன்படுத்தினர். ட்விட்டரின் முதல் ஹேக்வீக்கின் போது முன்வைக்கப்பட்ட சவால்களுக்கு விடையாக பூட்ஸ்டார்ப் தொடங்கப்பட்டது மற்றும் வளர்ச்சி துரிதப்படுத்தப்பட்டது.
ட்விட்டரில் உள்ள பல பொறியாளர்களின் உதவி மற்றும் பின்னூட்டத்துடன், பூட்ஸ்டார்ப் குறிப்பிடத்தக்க வகையில் அடிப்படை பாணிகளை மட்டும் உள்ளடக்கியது, ஆனால் மிகவும் நேர்த்தியான மற்றும் நீடித்த முன்-இறுதி வடிவமைப்பு வடிவங்களை உள்ளடக்கியது.
dev.twitter.com இல் மேலும் படிக்கவும் ›
Chrome, Safari, Internet Explorer மற்றும் Firefox போன்ற முக்கிய நவீன உலாவிகளில் பூட்ஸ்டார்ப் சோதிக்கப்பட்டு ஆதரிக்கப்படுகிறது.
தொகுக்கப்பட்ட CSS, தொகுக்கப்படாத மற்றும் எடுத்துக்காட்டு வார்ப்புருக்களுடன் பூட்ஸ்ட்ராப் முழுமையாக வருகிறது.
பூட்ஸ்டார்ப்பின் ஒரு பகுதியாக வழங்கப்படும் இயல்புநிலை கட்ட அமைப்பு 940px அகலம் கொண்ட 16-நெடுவரிசை கட்டமாகும். இது பிரபலமான 960 கிரிட் அமைப்பின் சுவையாகும், ஆனால் இடது மற்றும் வலது பக்கங்களில் கூடுதல் விளிம்பு/திணிப்பு இல்லாமல்.
இங்கே காட்டப்பட்டுள்ளபடி, ஒரு அடிப்படை அமைப்பை இரண்டு "நெடுவரிசைகள்" கொண்டு உருவாக்கலாம், ஒவ்வொன்றும் எங்கள் கட்டம் அமைப்பின் ஒரு பகுதியாக வரையறுக்கப்பட்ட 16 அடித்தள நெடுவரிசைகளில் பலவற்றைக் கொண்டுள்ளது. மேலும் மாறுபாடுகளுக்கு கீழே உள்ள எடுத்துக்காட்டுகளைப் பார்க்கவும்.
- <div class = "row" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
இயல்புநிலை மற்றும் எளிமையான 940px-அகலமான, மையப்படுத்தப்பட்ட தளவமைப்பு எந்தவொரு இணையதளம் அல்லது ஒரு பக்கத்தால் வழங்கப்படும் <div.container>
.
- <உடல்>
- <div class = "container" >
- ...
- </div>
- </body>
குறைந்தபட்ச மற்றும் அதிகபட்ச அகலம் மற்றும் இடது பக்க பக்கப்பட்டியுடன் மாற்று, நெகிழ்வான திரவ பக்க அமைப்பு. பயன்பாடுகள் மற்றும் ஆவணங்களுக்கு சிறந்தது.
- <உடல்>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
உங்கள் வலைப்பக்கங்களை கட்டமைப்பதற்கான நிலையான அச்சுக்கலை படிநிலை.
முழு அச்சுக்கலை கட்டமும் எங்கள் preboot.less கோப்பில் இரண்டு குறைவான மாறிகளை அடிப்படையாகக் கொண்டது: @basefont
மற்றும் @baseline
. முதலாவது முழுவதும் பயன்படுத்தப்படும் அடிப்படை எழுத்துரு அளவு மற்றும் இரண்டாவது அடிப்படை வரி உயரம்.
எங்கள் அனைத்து வகைகளின் விளிம்புகள், திணிப்புகள் மற்றும் வரி உயரங்களை உருவாக்க, அந்த மாறிகள் மற்றும் சில கணிதத்தைப் பயன்படுத்துகிறோம்.
Nullam quis risus eget urna mollis ornare vel eu leo. கம் சோசியஸ் நேடோக் பெனாடிபஸ் மற்றும் மேக்னிஸ் டிஸ் பார்டூரியண்ட் மான்டெஸ், நாஸ்கெட்டூர் ரிடிகுலஸ் மஸ். Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.
முக்கியத்துவம், முகவரிகள் மற்றும் சுருக்கங்களைப் பயன்படுத்துதல்
<strong>
<em>
<address>
<abbr>
ஒரு சொல் அல்லது சொற்றொடரைச் சுற்றியுள்ள நகலுடன் தொடர்புடைய கூடுதல் முக்கியத்துவம் அல்லது முக்கியத்துவத்தைக் குறிக்க வலியுறுத்தல் குறிச்சொற்கள் ( <strong>
மற்றும் <em>
) பயன்படுத்தப்பட வேண்டும். <strong>
முக்கியத்துவம் மற்றும் அழுத்தத்தை வலியுறுத்துவதற்கு பயன்படுத்தவும் <em>
.
ஃபியூஸ் டேபிபஸ் , டெல்லஸ் ஏசி கர்சஸ் கம்மோடோ, டார்ட்டர் மாரிஸ் கான்டிமென்டம் நிப் , யுட் ஃபெர்மெண்டம் மாஸா ஜஸ்டோ சிட் அமெட் ரிசஸ். 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>
ஒரு எம் கோடு கிடைக்கும் .—
லோரெம் இப்சம் டோலர் சிட் அமெட், கான்செக்டெர் அடிபிஸ்சிங் எலிட். முழு எண் போஸ்யூரே எராட் அன்டே வெனெனாடிஸ் டாபிபஸ் போஸ்யூரே வெலிட் அலிக்வெட்.
டாக்டர் ஜூலியஸ் ஹிபர்ட்
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
பல விஷயங்களுக்கு அட்டவணைகள் சிறந்தவை. எவ்வாறாயினும், சிறந்த அட்டவணைகள் பயனுள்ளதாகவும், அளவிடக்கூடியதாகவும், படிக்கக்கூடியதாகவும் இருக்க (குறியீடு மட்டத்தில்) மார்க்அப் காதல் தேவை. உதவ சில குறிப்புகள் இங்கே உள்ளன.
எப்பொழுதும் உங்கள் நெடுவரிசை தலைப்புகளை ஒரு <thead>
படிநிலையில் மடிக்கவும் <thead>
> <tr>
> <th>
.
நெடுவரிசைத் தலைப்புகளைப் போலவே, உங்கள் அட்டவணையின் அனைத்து உள்ளடக்கமும் ஒரு வரிசையில் மூடப்பட்டிருக்க வேண்டும், <tbody>
எனவே உங்கள் படிநிலை <tbody>
> <tr>
> <td>
.
அனைத்து அட்டவணைகளும் வாசிப்புத்திறனை உறுதி செய்வதற்கும் கட்டமைப்பைப் பராமரிப்பதற்கும் அத்தியாவசிய எல்லைகளுடன் மட்டுமே தானாகவே வடிவமைக்கப்படும். கூடுதல் வகுப்புகள் அல்லது பண்புக்கூறுகளைச் சேர்க்க வேண்டியதில்லை.
# | முதல் பெயர் | கடைசி பெயர் | மொழி |
---|---|---|---|
1 | சில | ஒன்று | ஆங்கிலம் |
2 | ஜோ | சிக்ஸ்பேக் | ஆங்கிலம் |
3 | ஸ்து | டென்ட் | குறியீடு |
- <அட்டவணை>
- ...
- </table>
ஜீப்ரா-ஸ்ட்ரிப்பிங்கைச் சேர்ப்பதன் மூலம் உங்கள் அட்டவணைகளைக் கொஞ்சம் ஆடம்பரமாகப் பெறுங்கள் - .zebra-striped
வகுப்பைச் சேர்க்கவும்.
# | முதல் பெயர் | கடைசி பெயர் | மொழி |
---|---|---|---|
1 | சில | ஒன்று | ஆங்கிலம் |
2 | ஜோ | சிக்ஸ்பேக் | ஆங்கிலம் |
3 | ஸ்து | டென்ட் | குறியீடு |
குறிப்பு: Zebra-striping என்பது IE8 மற்றும் அதற்குக் கீழே உள்ள பழைய உலாவிகளுக்கு கிடைக்காத ஒரு முற்போக்கான மேம்பாடு ஆகும்.
- <table class = "zebra-striped" >
- ...
- </table>
முந்தைய உதாரணத்தை எடுத்துக் கொண்டால், jQuery மற்றும் Tablesorter செருகுநிரல் வழியாக வரிசைப்படுத்தும் செயல்பாட்டை வழங்குவதன் மூலம் எங்கள் அட்டவணைகளின் பயனை மேம்படுத்துகிறோம் . வரிசையை மாற்ற, எந்த நெடுவரிசையின் தலைப்பையும் கிளிக் செய்யவும்.
# | முதல் பெயர் | கடைசி பெயர் | மொழி |
---|---|---|---|
1 | உங்கள் | ஒன்று | ஆங்கிலம் |
2 | ஜோ | சிக்ஸ்பேக் | ஆங்கிலம் |
3 | ஸ்து | டென்ட் | குறியீடு |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( செயல்பாடு () {
- $ ( "அட்டவணை#வரிசைப்படுத்தப்பட்ட அட்டவணை" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </table>
படிக்கக்கூடிய மற்றும் அளவிடக்கூடிய வகையில் அனைத்து வடிவங்களுக்கும் இயல்புநிலை பாணிகள் வழங்கப்படுகின்றன. உரை உள்ளீடுகள், தேர்ந்தெடுக்கப்பட்ட பட்டியல்கள், உரைப் பகுதிகள், ரேடியோ பொத்தான்கள் மற்றும் தேர்வுப்பெட்டிகள் மற்றும் பொத்தான்களுக்கு ஸ்டைல்கள் வழங்கப்படுகின்றன.
.form-stacked
உங்கள் படிவத்தின் HTML இல் சேர்த்தால், அவர்களின் புலங்களின் இடதுபுறத்தில் இல்லாமல் மேலே லேபிள்கள் இருக்கும் . உங்கள் படிவங்கள் குறுகியதாக இருந்தால் அல்லது கனமான படிவங்களுக்கான உள்ளீடுகளின் இரண்டு நெடுவரிசைகள் இருந்தால் இது சிறப்பாகச் செயல்படும்.
ஒரு மாநாட்டாக, பொத்தான்கள் செயல்களுக்குப் பயன்படுத்தப்படுகின்றன, அதே நேரத்தில் பொருள்களுக்கு இணைப்புகள் பயன்படுத்தப்படுகின்றன. உதாரணமாக, "பதிவிறக்கம்" என்பது ஒரு பொத்தானாகவும் "சமீபத்திய செயல்பாடு" என்பது இணைப்பாகவும் இருக்கலாம்.
அனைத்து பொத்தான்களும் ஒரு வெளிர் சாம்பல் பாணியில் இயல்புநிலையாக இருக்கும், ஆனால் பல செயல்பாட்டு வகுப்புகள் வெவ்வேறு வண்ண பாணிகளுக்குப் பயன்படுத்தப்படலாம். இந்த வகுப்புகளில் நீல .primary
வகுப்பு, வெளிர்-நீல .info
வகுப்பு, பச்சை .success
வகுப்பு மற்றும் சிவப்பு .danger
வகுப்பு ஆகியவை அடங்கும். கூடுதலாக, உங்கள் சொந்த பாணிகளை உருட்டுவது எளிதானது.
பொத்தான் பாணிகள் பயன்படுத்தப்பட்டதைக் கொண்டு எதற்கும் .btn
பயன்படுத்தப்படலாம். பொதுவாக நீங்கள் <a>
, <button>
, மற்றும் தேர்ந்தெடுக்கப்பட்ட <input>
உறுப்புகளுக்கு மட்டுமே இவற்றைப் பயன்படுத்த விரும்புவீர்கள். இது எப்படி இருக்கிறது என்பது இங்கே:
பெரிய அல்லது சிறிய பொத்தான்களை விரும்புகிறீர்களா? அதில் இருங்கள்!
செயலில் இல்லாத அல்லது ஒரு காரணத்திற்காக ஆப்ஸால் முடக்கப்பட்ட பொத்தான்களுக்கு, முடக்கப்பட்ட நிலையைப் பயன்படுத்தவும். இது .disabled
இணைப்புகள் மற்றும் :disabled
உறுப்புகளுக்கானது <button>
.
div.alert-message
ஒரு செயலின் தோல்வி, சாத்தியமான தோல்வி அல்லது வெற்றியை முன்னிலைப்படுத்த ஒரு வரி செய்திகள். படிவங்களுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும்.
div.alert-message.block-message
சிறிது விளக்கம் தேவைப்படும் செய்திகளுக்கு, எங்களிடம் பத்தி பாணி விழிப்பூட்டல்கள் உள்ளன. நீண்ட பிழைச் செய்திகளை வெளியிடுவதற்கும், நிலுவையில் உள்ள செயலைப் பற்றி பயனரை எச்சரிப்பதற்கும் அல்லது பக்கத்தில் அதிக முக்கியத்துவம் கொடுப்பதற்காக தகவலை வழங்குவதற்கும் இவை சரியானவை.
மாதிரிகள்-உரையாடல்கள் அல்லது லைட்பாக்ஸ்கள்-பின்னணிச் சூழலைப் பேணுவது முக்கியமான சூழ்நிலைகளில் சூழல் சார்ந்த செயல்களுக்கு மிகச் சிறந்தவை.
ஒரு நல்ல உடல்...
குழப்பமான பயனருக்கு உதவுவதற்கும் அவர்களை சரியான திசையில் சுட்டிக்காட்டுவதற்கும் ட்விப்ஸிகள் மிகவும் பயனுள்ளதாக இருக்கும்.
லோரெம் இப்சம் டோலர் சிட் அமெட் இல்லோ எர்ரர் இப்சம் வெரிடாடிஸ் அல்லது இஸ்டெ பெர்ஸ்பிசியாடிஸ் இஸ்டெ வால்யூப்டாஸ் நேட்டஸ் நேட்டஸ் இஸ் இலோ க்வாஸி ஓடிட் அல்லது நேட்டஸ் நேட்டஸ் இலோ வால்புடடேம் ஓடிட் பெர்ஸ்பிசியாடிஸ் டோலோருபண்ட்டியம்ஸ் டோலோருபம்டான்டியம். Voluptasdicta eaque betae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit Accanantium Totam Totam architecto explicabo sit quasi fugit fugit, Totam doloremque unde Sunt sed dicta quae voluptasti quae voluptasti quamo voluptas
தளவமைப்பைப் பாதிக்காமல் பக்கத்திற்கு வசனத் தகவலை வழங்க பாப்ஓவர்களைப் பயன்படுத்தவும்.
Etiam porta sem malesuada Magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
வேகமான மற்றும் எளிதான இணைய மேம்பாட்டிற்கான CSS ப்ரீப்ராசஸரான Less உடன் இணைந்து பயன்படுத்தப்படும் மிக்சின்கள் மற்றும் மாறிகளின் திறந்த மூலப் பொதியான Preboot உடன் பூட்ஸ்டார்ப் உருவாக்கப்பட்டது.
பூட்ஸ்டார்ப்பில் ப்ரீபூட்டை எப்படிப் பயன்படுத்தினோம் என்பதையும், உங்கள் அடுத்த திட்டத்தில் குறைவாக இயக்கத் தேர்வுசெய்தால், அதை எப்படிப் பயன்படுத்தலாம் என்பதையும் பார்க்கவும்.
உங்கள் உலாவியில் ஜாவாஸ்கிரிப்ட் வழியாக CSS இல் பூட்ஸ்டார்ப்பின் குறைவான மாறிகள், மிக்சின்கள் மற்றும் கூடுகளை முழுமையாகப் பயன்படுத்த இந்த விருப்பத்தைப் பயன்படுத்தவும்.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
.js தீர்வை உணரவில்லையா? லெஸ் மேக் பயன்பாட்டை முயற்சிக்கவும் அல்லது உங்கள் குறியீட்டைப் பயன்படுத்தும்போது தொகுக்க Node.js ஐப் பயன்படுத்தவும்.
பூட்ஸ்டார்ப்பின் ஒரு பகுதியாக ட்விட்டர் பூட்ஸ்டார்ப்பில் சேர்க்கப்பட்டுள்ள சில சிறப்பம்சங்கள் இங்கே உள்ளன. பதிவிறக்கம் செய்து மேலும் அறிய 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 ;
- @ அடிப்படை : 18px ;
CSS இன் இயல்பான /* ... */
தொடரியல் கூடுதலாக கருத்து தெரிவிக்கும் மற்றொரு பாணியை Less வழங்குகிறது.
- //இது ஒரு கருத்து
- /* இதுவும் ஒரு கருத்து */
மிக்சின்கள் அடிப்படையில் CSSக்கான உள்ளடக்கம் அல்லது பகுதியளவுகள் ஆகும், இது குறியீட்டின் தொகுதியை ஒன்றாக இணைக்க உங்களை அனுமதிக்கிறது. box-shadow
, குறுக்கு உலாவி சாய்வுகள், எழுத்துரு அடுக்குகள் மற்றும் பல போன்ற விற்பனையாளர் முன்னொட்டு பண்புகளுக்கு அவை சிறந்தவை . பூட்ஸ்டார்ப்பில் சேர்க்கப்பட்டுள்ள மிக்சின்களின் மாதிரி கீழே உள்ளது.
- #எழுத்துரு {
- . சுருக்கெழுத்து ( @எடை : சாதாரண , @ அளவு : 14px , @lineHeight : 20px ) {
- எழுத்துரு அளவு : @size ; _
- எழுத்துரு - எடை : @ எடை ;
- கோடு - உயரம் : @lineHeight ;
- }
- . sans - serif ( @எடை : சாதாரணம் , @ அளவு : 14px , @lineHeight : 20px ) {
- எழுத்துரு குடும்பம் : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- எழுத்துரு அளவு : @size ; _
- எழுத்துரு - எடை : @ எடை ;
- கோடு - உயரம் : @lineHeight ;
- }
- . serif ( @எடை : சாதாரண , @ அளவு : 14px , @lineHeight : 20px ) {
- எழுத்துரு குடும்பம் : " ஜார்ஜியா" , டைம்ஸ் நியூ ரோமன் , டைம்ஸ் , சான்ஸ் - செரிஃப் ;
- எழுத்துரு அளவு : @size ; _
- எழுத்துரு - எடை : @ எடை ;
- கோடு - உயரம் : @lineHeight ;
- }
- . மோனோஸ்பேஸ் ( @எடை : சாதாரணம் , @ அளவு : 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 )); // சஃபாரி 4+, குரோம் 2+
- பின்னணி - படம் : - வெப்கிட் - நேரியல் - சாய்வு ( இடது , @startColor , @endColor ); // சஃபாரி 5.1+, குரோம் 10+
- பின்னணி - படம் : - o - நேரியல் - சாய்வு ( இடது , @startColor , @endColor ); // ஓபரா 11.10
- பின்னணி - படம் : நேரியல் - சாய்வு ( இடது , @startColor , @endColor ); // தரநிலை
- }
- . செங்குத்து ( @startColor : #555, @endColor: #333) {
- பின்னணி நிறம் : @endColor ; _
- பின்னணி - மீண்டும் : மீண்டும் - x ;
- பின்னணி - படம் : - khtml - சாய்வு ( நேரியல் , இடது மேல் , இடது கீழ் , இலிருந்து ( @startColor ), ( @endColor ) வரை ; // கான்குவரர்
- பின்னணி - படம் : - moz - நேரியல் - சாய்வு ( @startColor , @endColor ); // FF 3.6+
- பின்னணி - படம் : - எம்எஸ் - நேரியல் - சாய்வு ( @startColor , @endColor ); // IE10
- பின்னணி - படம் : - வெப்கிட் - சாய்வு ( நேரியல் , இடது மேல் , இடது கீழ் , வண்ணம் - நிறுத்தம் ( 0 %, @startColor ), வண்ணம் - நிறுத்தம் ( 100 %, @ endColor )); // சஃபாரி 4+, குரோம் 2+
- பின்னணி - படம் : - வெப்கிட் - நேரியல் - சாய்வு ( @startColor , @endColor ); // சஃபாரி 5.1+, குரோம் 10+
- பின்னணி - படம் : - o - நேரியல் - சாய்வு ( @startColor , @endColor ); // ஓபரா 11.10
- பின்னணி - படம் : நேரியல் - சாய்வு ( @startColor , @endColor ); // நிலையான
- }
- . திசைவழி ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . செங்குத்து - மூன்று - வண்ணங்கள் ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
கீழே உள்ளதைப் போன்ற நெகிழ்வான மற்றும் சக்திவாய்ந்த கலவைகளை உருவாக்க ஆடம்பரமாகி, சில கணிதங்களைச் செய்யுங்கள்.
- // கிரிடிட்யூட்
- @GridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // கட்ட அமைப்பு
- . கொள்கலன் {
- அகலம் : @siteWidth ;
- விளிம்பு : 0 ஆட்டோ ;
- . clearfix ();
- }
- . நெடுவரிசைகள் ( @columnSpan : 1 ) {
- அகலம் : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . ஆஃப்செட் ( @columnOffset : 1 ) {
- விளிம்பு - இடது : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }