வரலாறு

ட்விட்டரின் முந்தைய நாட்களில், பொறியாளர்கள் தங்களுக்குத் தெரிந்த எந்த நூலகத்தையும் முன்-இறுதித் தேவைகளைப் பூர்த்தி செய்யப் பயன்படுத்தினர். ட்விட்டரின் முதல் ஹேக்வீக்கின் போது முன்வைக்கப்பட்ட சவால்களுக்கு விடையாக பூட்ஸ்டார்ப் தொடங்கப்பட்டது மற்றும் வளர்ச்சி துரிதப்படுத்தப்பட்டது.

ட்விட்டரில் உள்ள பல பொறியாளர்களின் உதவி மற்றும் பின்னூட்டத்துடன், பூட்ஸ்டார்ப் குறிப்பிடத்தக்க வகையில் அடிப்படை பாணிகளை மட்டும் உள்ளடக்கியது, ஆனால் மிகவும் நேர்த்தியான மற்றும் நீடித்த முன்-இறுதி வடிவமைப்பு வடிவங்களை உள்ளடக்கியது.

dev.twitter.com இல் மேலும் படிக்கவும் ›

உலாவி ஆதரவு

Chrome, Safari, Internet Explorer மற்றும் Firefox போன்ற முக்கிய நவீன உலாவிகளில் பூட்ஸ்டார்ப் சோதிக்கப்பட்டு ஆதரிக்கப்படுகிறது.

• சமீபத்திய சஃபாரி
• சமீபத்திய Google Chrome
• பயர்பாக்ஸ் 4+
• இன்டர்நெட் எக்ஸ்ப்ளோரர் 7+

என்ன சேர்க்கப்பட்டுள்ளது

தொகுக்கப்பட்ட CSS, தொகுக்கப்படாத மற்றும் எடுத்துக்காட்டு வார்ப்புருக்களுடன் பூட்ஸ்ட்ராப் முழுமையாக வருகிறது.

• அனைத்து அசல் .லெஸ் கோப்புகள்
• முழுமையாக தொகுக்கப்பட்ட மற்றும் சிறிதாக்கப்பட்ட CSS
• முழுமையான நடை வழிகாட்டி ஆவணங்கள்
• எடுத்துக்காட்டு பக்க டெம்ப்ளேட் (மேலும் விரைவில் வரும்)

இயல்புநிலை கட்டம்

பூட்ஸ்டார்ப்பின் ஒரு பகுதியாக வழங்கப்படும் இயல்புநிலை கட்ட அமைப்பு 940px அகலம் கொண்ட 16-நெடுவரிசை கட்டமாகும். இது பிரபலமான 960 கிரிட் அமைப்பின் சுவையாகும், ஆனால் இடது மற்றும் வலது பக்கங்களில் கூடுதல் விளிம்பு/திணிப்பு இல்லாமல்.

எடுத்துக்காட்டு கட்டம் மார்க்அப்

இங்கே காட்டப்பட்டுள்ளபடி, ஒரு அடிப்படை அமைப்பை இரண்டு "நெடுவரிசைகள்" கொண்டு உருவாக்கலாம், ஒவ்வொன்றும் எங்கள் கட்டம் அமைப்பின் ஒரு பகுதியாக வரையறுக்கப்பட்ட 16 அடித்தள நெடுவரிசைகளில் பலவற்றைக் கொண்டுள்ளது. மேலும் மாறுபாடுகளுக்கு கீழே உள்ள எடுத்துக்காட்டுகளைப் பார்க்கவும்.

<div class = "row" > 
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

நிலையான தளவமைப்பு

எந்தவொரு தளம் அல்லது பக்கத்திற்கான அடிப்படை 940px அகலம், மையப்படுத்தப்பட்ட கொள்கலன் தளவமைப்பு.

<உடல்>
  <div class = "container" > 
    ...
  </div>
</body>

திரவ அமைப்பு

குறைந்தபட்ச மற்றும் அதிகபட்ச அகலம் மற்றும் இடது பக்க பக்கப்பட்டியுடன் கூடிய நெகிழ்வான திரவம் அல்லது திரவ பக்க அமைப்பு. பயன்பாடுகளுக்கு சிறந்தது.

<உடல்>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </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 வாகனங்கள் ut id elit.

எடுத்துக்காட்டுத் தலைப்பில் துணைத் தலைப்பு உள்ளது...

மற்றவை உறுப்புகள்

முக்கியத்துவம், முகவரிகள் மற்றும் சுருக்கங்களைப் பயன்படுத்துதல்

<strong> <em> <address> <abbr>

எப்போது பயன்படுத்த வேண்டும்

ஒரு சொல் அல்லது சொற்றொடரைச் சுற்றியுள்ள நகலுடன் தொடர்புடைய கூடுதல் முக்கியத்துவம் அல்லது முக்கியத்துவத்தைக் குறிக்க வலியுறுத்தல் குறிச்சொற்கள் ( <strong>மற்றும் <em>) பயன்படுத்தப்பட வேண்டும். <strong>முக்கியத்துவம் மற்றும் பயன்படுத்தவும்<em> அழுத்தத்தை வலியுறுத்துவதற்கு .

ஒரு பத்தியில் வலியுறுத்தல்

ஃபுஸ்ஸ் டாபிபஸ் , டெல்லஸ் ஏசி கர்சஸ் கொமோடோ , டார்ட்டர் மவுரிஸ் காண்டிமென்டம் நிப் யூட் ஃபெர்மெண்டம் மாஸா ஜஸ்டோ சிட் அமெட் ரிசஸ். Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra ague.

குறிப்பு: HTML5 இல் பயன்படுத்துவதற்கும் குறியிடுவதற்கும் இன்னும் பரவாயில்லை <b>, <i>ஆனால் அவை இனி உள்ளார்ந்த பாணிகளுடன் வராது.<b>கூடுதல் முக்கியத்துவத்தை தெரிவிக்காமல் வார்த்தைகள் அல்லது சொற்றொடர்களை முன்னிலைப்படுத்துவதாகும், அதே சமயம் <i>பெரும்பாலும் குரல், தொழில்நுட்ப சொற்கள், முதலியன.

முகவரிகள்

உறுப்பு <address>அதன் அருகிலுள்ள மூதாதையர் அல்லது முழு வேலை அமைப்புக்கான தொடர்புத் தகவலுக்காகப் பயன்படுத்தப்படுகிறது. இது எப்படி இருக்கிறது என்பது இங்கே:

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

குறிப்பு: ஒரு வரியில் உள்ள ஒவ்வொரு வரியும் <address>ஒரு வரி முறிவுடன் ( ) முடிவடைய வேண்டும் அல்லது உள்ளடக்கத்தை சரியாக கட்டமைக்க <br />ஒரு தொகுதி-நிலை குறிச்சொல்லில் (எ.கா., ) மூடப்பட்டிருக்க வேண்டும் .<p>

சுருக்கங்கள்

சுருக்கங்கள் மற்றும் சுருக்கெழுத்துக்களுக்கு, <abbr>குறிச்சொல்லைப் பயன்படுத்தவும் ( HTML5<acronym> இல் நிறுத்தப்பட்டது ). குறிச்சொல்லுக்குள் சுருக்கெழுத்து படிவத்தை வைத்து முழுமையான பெயருக்கு ஒரு தலைப்பை அமைக்கவும்.

தடைகள்

<blockquote> <p> <small>

எப்படி மேற்கோள் காட்டுவது

ஒரு தொகுதி மேற்கோளைச் சேர்க்க, <blockquote>சுற்றிக் <p>குறியிடவும் <small>. உங்கள் மூலத்தை மேற்கோள் காட்ட உறுப்பைப் பயன்படுத்தவும், அதற்கு முன் <small>ஒரு எம் கோடு கிடைக்கும் .—

லோரெம் இப்சம் டோலர் சிட் அமெட், கான்செக்டெர் அடிபிஸ்சிங் எலிட். முழு எண் போஸ்யூரே எராட் அன்டே வெனெனாடிஸ் டாபிபஸ் போஸ்யூரே வெலிட் அலிக்வெட்.

டாக்டர் ஜூலியஸ் ஹிபர்ட்

வரிசைப்படுத்தப்படவில்லை<ul>

• லோரெம் இப்சம் டோலர் சிட் அமெட்
• Consectetur adipiscing elit
• முழு எண் மோலஸ்டி லோரெம் மற்றும் மாசா
• ப்ரீடியம் நிஸ்ல் அலிக்வெட்டில் வசதி
• நுல்ல வோழுட்பட் அழிகம் வேலிட்
  • Phasellus iaculis neque
  • புருஸ் சோடேல்ஸ் அல்ட்ரிசிஸ்
  • வெஸ்டிபுலம் லாரீட் போர்டிட்டர் செம்
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• இப்போது நான் உட்கார்ந்து இருக்கிறேன்
• Eget porttitor lorem

பாணியற்றது<ul.unstyled>

• லோரெம் இப்சம் டோலர் சிட் அமெட்
• Consectetur adipiscing elit
• முழு எண் மோலஸ்டி லோரெம் மற்றும் மாசா
• ப்ரீடியம் நிஸ்ல் அலிக்வெட்டில் வசதி
• நுல்ல வோழுட்பட் அழிகம் வேலிட்
  • Phasellus iaculis neque
  • புருஸ் சோடேல்ஸ் அல்ட்ரிசிஸ்
  • வெஸ்டிபுலம் லாரீட் போர்டிட்டர் செம்
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• இப்போது நான் உட்கார்ந்து இருக்கிறேன்
• Eget porttitor lorem

உத்தரவிட்டார்<ol>

1. லோரெம் இப்சம் டோலர் சிட் அமெட்
2. Consectetur adipiscing elit
3. முழு எண் மோலஸ்டி லோரெம் மற்றும் மாசா
4. ப்ரீடியம் நிஸ்ல் அலிக்வெட்டில் வசதி
5. நுல்ல வோழுட்பட் அழிகம் வேலிட்
6. Faucibus porta lacus fringilla vel
7. இப்போது நான் உட்கார்ந்து இருக்கிறேன்
8. Eget porttitor lorem

விளக்கம்dl

விளக்க பட்டியல்கள்

விதிமுறைகளை வரையறுக்க ஒரு விளக்கப் பட்டியல் சரியானது.

யூயிஸ்மோட்

வெஸ்டிபுலம் ஐடி லிகுலா போர்டா ஃபெலிஸ் யூஸ்மோட் செம்பர் எகெட் லாசினியா ஓடியோ செம் நெக் எலிட்.

டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ்.

மலேசுடா போர்டா

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	ஸ்து	டென்ட்	குறியீடு

<table class = "common-table" > 
  ...
</ அட்டவணை>

எடுத்துக்காட்டு: வரிக்குதிரை-கோடுகள்

ஜீப்ரா-ஸ்ட்ரிப்பிங்கைச் சேர்ப்பதன் மூலம் உங்கள் அட்டவணைகளைக் கொஞ்சம் ஆடம்பரமாகப் பெறுங்கள் - .zebra-stripedவகுப்பைச் சேர்க்கவும்.

#	முதல் பெயர்	கடைசி பெயர்	மொழி
1	சில	ஒன்று	ஆங்கிலம்
2	ஜோ	சிக்ஸ்பேக்	ஆங்கிலம்
3	ஸ்து	டென்ட்	குறியீடு

குறிப்பு: Zebra-striping என்பது IE8 மற்றும் அதற்குக் கீழே உள்ள பழைய உலாவிகளுக்குக் கிடைக்காத முற்போக்கான மேம்பாடு ஆகும்.

<table class = "common-table zebra-striped" > 
...
</ அட்டவணை>

எடுத்துக்காட்டு: Zebra-striped w/ TableSorter.js

முந்தைய உதாரணத்தை எடுத்துக் கொண்டால், jQuery மற்றும் Tablesorter செருகுநிரல் வழியாக வரிசைப்படுத்தும் செயல்பாட்டை வழங்குவதன் மூலம் எங்கள் அட்டவணைகளின் பயனை மேம்படுத்துகிறோம் . வரிசையை மாற்ற, எந்த நெடுவரிசையின் தலைப்பையும் கிளிக் செய்யவும்.

#	முதல் பெயர்	கடைசி பெயர்	மொழி
1	உங்கள்	ஒன்று	ஆங்கிலம்
2	ஜோ	சிக்ஸ்பேக்	ஆங்கிலம்
3	ஸ்து	டென்ட்	குறியீடு

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( செயல்பாடு () { 
    $ ( "அட்டவணை#வரிசைப்படுத்தப்பட்ட அட்டவணை" ). 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) காட்டப்படுகின்றன.

டெக்ஸ்டாரியா

தேவைப்பட்டால் மேலே உள்ள புலத்தை விவரிக்க உதவி உரையின் தொகுதி.

விருப்பங்களின் பட்டியல்

• விருப்பம் ஒன்று இது மற்றும் அது - இது ஏன் சிறந்தது என்பதைச் சேர்க்க மறக்காதீர்கள்
• விருப்பம் இரண்டையும் சரிபார்த்து, படிவ முடிவுகளில் சேர்க்கலாம்

மாற்றங்களை சேமியுங்கள்  ரத்து செய்

அடுக்கப்பட்ட படிவங்கள்

.form-stackedஉங்கள் படிவத்தின் HTML இல் சேர்த்தால், அவர்களின் புலங்களின் இடதுபுறத்தில் இல்லாமல் மேலே லேபிள்கள் இருக்கும் . உங்கள் படிவங்கள் குறுகியதாக இருந்தால் அல்லது கனமான படிவங்களுக்கான உள்ளீடுகளின் இரண்டு நெடுவரிசைகள் இருந்தால் இது சிறப்பாகச் செயல்படும்.

எடுத்துக்காட்டு வடிவம் புராணக்கதை

X-பெரிய உள்ளீடு

தேர்ந்தெடு

1 2 3 4 5

எடுத்துக்காட்டு வடிவம் புராணக்கதை

X-பெரிய உள்ளீடு

உதவி உரையின் சிறிய துணுக்கு

விருப்பங்களின் பட்டியல்

• விருப்பம் ஒன்று இது மற்றும் அது - இது ஏன் சிறந்தது என்பதைச் சேர்க்க மறக்காதீர்கள்
• விருப்பம் இரண்டையும் சரிபார்த்து, படிவ முடிவுகளில் சேர்க்கலாம்

குறிப்பு: மிகப் பெரிய கிளிக் பகுதிகள் மற்றும் பயன்படுத்தக்கூடிய படிவத்திற்கான அனைத்து விருப்பங்களையும் லேபிள்கள் சுற்றி வருகின்றன.

மாற்றங்களை சேமியுங்கள்  ரத்து செய்

பொத்தான்கள்

ஒரு மாநாட்டாக, பொத்தான்கள் செயல்களுக்குப் பயன்படுத்தப்படுகின்றன, அதே நேரத்தில் பொருள்களுக்கு இணைப்புகள் பயன்படுத்தப்படுகின்றன. உதாரணமாக, "பதிவிறக்கம்" என்பது ஒரு பொத்தானாகவும் "சமீபத்திய செயல்பாடு" என்பது இணைப்பாகவும் இருக்கலாம்.

அனைத்து பொத்தான்களும் வெளிர் சாம்பல் நிறத்தில் இயல்புநிலையாக இருக்கும், ஆனால் நீல நிற .primaryவகுப்பு கிடைக்கிறது. கூடுதலாக, உங்கள் சொந்த பாணிகளை உருட்டுவது எளிதானது.

எடுத்துக்காட்டு பொத்தான்கள்

பொத்தான் பாணிகள் பயன்படுத்தப்பட்டதைக் கொண்டு எதற்கும் .btnபயன்படுத்தப்படலாம். பொதுவாக நீங்கள் <a>, <button>, மற்றும் தேர்ந்தெடுக்கப்பட்ட <input>உறுப்புகளுக்கு மட்டுமே இவற்றைப் பயன்படுத்த விரும்புவீர்கள். இது எப்படி இருக்கிறது என்பது இங்கே:

மாற்று அளவுகள்

பெரிய அல்லது சிறிய பொத்தான்களை விரும்புகிறீர்களா? அதில் இருங்கள்!

ஊனமுற்ற நிலை

செயலில் இல்லாத அல்லது ஒரு காரணத்திற்காக ஆப்ஸால் முடக்கப்பட்ட பொத்தான்களுக்கு, முடக்கப்பட்ட நிலையைப் பயன்படுத்தவும். இது .disabledஇணைப்புகள் மற்றும் :disabledஉறுப்புகளுக்கானது <button>.

இணைப்புகள்

பொத்தான்கள்

அது என்ன

எங்கள் டாப்பார் என்பது இணையதளத்தின் லோகோ அல்லது பெயர், முதன்மை வழிசெலுத்தல் மற்றும் தேடல் படிவம் ஆகியவற்றைக் கொண்ட நிலையான பட்டியாகும்.

தனிப்பயனாக்கக்கூடியது

உள்ளே உள்ள அனைத்து கூறுகளும் மற்றும் முழு மேல் பட்டையும் விருப்பமானவை. லோகோ/பெயர், nav, தேடல் மற்றும் இரண்டாம் நிலை nav அல்லது அதன் கலவையைச் சேர்க்க நீங்கள் தேர்வு செய்யலாம்.

கீழ்தோன்றும் சேர்க்கப்பட்டுள்ளது

முக்கிய வழிசெலுத்தலின் ஒரு பகுதியாக, உங்கள் nav இல் கீழ்தோன்றும் சேர்க்கும் திறனை நாங்கள் சேர்த்துள்ளோம். இது எவ்வாறு செய்யப்படுகிறது என்பதைப் பார்க்க, மேலே உள்ள இரண்டாம் நிலை nav ஐப் பார்க்கவும் (வலது சீரமைக்கப்பட்டது).

தாவல்கள் மற்றும் மாத்திரைகள்

ஒரு மூலம் எளிய இரண்டாம் நிலை வழிசெலுத்தலை உருவாக்கவும் <ul>. பொருத்தமான வகுப்பைச் சேர்ப்பதன் மூலம் தாவல்கள் அல்லது மாத்திரைகளுக்கு இடையில் மாற்றவும்.

எங்கள் கணக்கு அமைப்புகள் பக்கங்கள் மற்றும் உள்ளடக்கத்தின் பக்கங்களுக்கு இடையில் மாறுவதற்கான பயனர் காலவரிசைகள் போன்ற உள்ளடக்கத்தின் துணைப் பிரிவுகளுக்கு சிறந்தது. டேப் செய்யப்பட்ட அல்லது மாத்திரை வடிவங்களில் கிடைக்கும்.

• வீடு
• சுயவிவரம்
• செய்திகள்
• அமைப்புகள்
• தொடர்பு கொள்ளவும்

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Home </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 = "active" ><a href = "#" > Home </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 = "active" ><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

தளவமைப்பைப் பாதிக்காமல் பக்கத்திற்கு வசனத் தகவலை வழங்க பாப்ஓவர்களைப் பயன்படுத்தவும்.

வேகமான மற்றும் எளிதான இணைய மேம்பாட்டிற்கான CSS ப்ரீப்ராசஸரான Less உடன் இணைந்து பயன்படுத்தப்படும் மிக்சின்கள் மற்றும் மாறிகளின் திறந்த மூலப் பொதியான Preboot உடன் பூட்ஸ்டார்ப் உருவாக்கப்பட்டது.

பூட்ஸ்டார்ப்பில் ப்ரீபூட்டை எப்படிப் பயன்படுத்தினோம் என்பதையும், உங்கள் அடுத்த திட்டத்தில் குறைவாக இயக்கத் தேர்வுசெய்தால், அதை எப்படிப் பயன்படுத்தலாம் என்பதையும் பார்க்கவும்.

அதை எப்படி பயன்படுத்துவது

உங்கள் உலாவியில் ஜாவாஸ்கிரிப்ட் வழியாக CSS இல் பூட்ஸ்டார்ப்பின் குறைவான மாறிகள், மிக்சின்கள் மற்றும் கூடுகளை முழுமையாகப் பயன்படுத்த இந்த விருப்பத்தைப் பயன்படுத்தவும்.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.0.41.min.js" ></script> 

.js தீர்வை உணரவில்லையா? லெஸ் மேக் பயன்பாட்டை முயற்சிக்கவும் அல்லது உங்கள் குறியீட்டைப் பயன்படுத்தும்போது தொகுக்க Node.js ஐப் பயன்படுத்தவும்.

என்ன சேர்க்கப்பட்டுள்ளது

பூட்ஸ்டார்ப்பின் ஒரு பகுதியாக ட்விட்டர் பூட்ஸ்டார்ப்பில் சேர்க்கப்பட்டுள்ள சில சிறப்பம்சங்கள் இங்கே உள்ளன. பதிவிறக்கம் செய்து மேலும் அறிய பூட்ஸ்டார்ப் இணையதளம் அல்லது கிதுப் திட்டப் பக்கத்திற்குச் செல்லவும்.

வண்ண மாறிகள்

உங்கள் CSS தலைவலியை இலவசமாகப் பராமரிப்பதற்கும் புதுப்பிப்பதற்கும் குறைவான மாறிகள் சரியானவை. நீங்கள் ஒரு வண்ண மதிப்பை அல்லது அடிக்கடி பயன்படுத்தப்படும் மதிப்பை மாற்ற விரும்பினால், அதை ஒரே இடத்தில் புதுப்பிக்கவும்.

// இணைப்புகள்
@linkColor : #8b59c2;         
@linkColorHover :     கருமையாக்கு ( @linkColor , 10 ); 
 
//கிரேஸ்
@கருப்பு : #000;             
@grayDark :           இலகுவாக்கு ( @கருப்பு , 25 %); 
@சாம்பல் :               இலகுவாக்கு ( @கருப்பு , 50 %); 
@grayLight :          ஒளிரவும் ( @கருப்பு , 70 %); 
@grayLighter :        இலகுவாக்கு ( @கருப்பு , 90 %); 
@வெள்ளை : #fff ;             
 
// உச்சரிப்பு நிறங்கள்
@நீலம் : #08b5fb ;              
@பச்சை : #46a546 ;             
@சிவப்பு : #9d261d ;               
@ மஞ்சள் : #ffc40d ;            
@ஆரஞ்சு : #f89406 ;            
@பிங்க் : #c3325f ;              
@ஊதா : #7a43b6 ;            
 
// அடிப்படை
@ அடிப்படை : 20px ;          

கருத்து தெரிவிக்கிறது

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    
    - ms - filter : %( "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+   
    பின்னணி - படம் : - எம்எஸ் - நேரியல் - சாய்வு ( @startColor , @endColor ); // IE10   
    பின்னணி - படம் : - வெப்கிட் - சாய்வு ( நேரியல் , இடது மேல் , இடது கீழ் , வண்ணம் - நிறுத்தம் ( 0 %, @startColor ), வண்ணம் - நிறுத்தம் ( 100 %, @ endColor )); // சஃபாரி 4+, குரோம் 2+    
    பின்னணி - படம் : - வெப்கிட் - நேரியல் - சாய்வு ( @startColor , @endColor ); // சஃபாரி 5.1+, குரோம் 10+   
    பின்னணி - படம் : - o - நேரியல் - சாய்வு ( @startColor , @endColor ); // ஓபரா 11.10   
    - ms - filter : %( "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) { 
    ...
  }
}

செயல்பாடுகள் மற்றும் கட்ட அமைப்பு

கீழே உள்ளதைப் போன்ற நெகிழ்வான மற்றும் சக்திவாய்ந்த மிக்சின்களை உருவாக்க ஆடம்பரமான மற்றும் சில கணிதங்களைச் செய்யுங்கள்.

// கிரிடிட்யூட்
@GridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// கட்ட அமைப்பு
. கொள்கலன் {
  அகலம் : @siteWidth ; 
  விளிம்பு : 0 ஆட்டோ ;  
  . clearfix ();
}
. நெடுவரிசைகள் ( @columnSpan : 1 ) {  
  காட்சி : இன்லைன் ; 
  மிதவை : இடது ;
  அகலம் : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  விளிம்பு - இடது : @gridGutterWidth ; 
  &: முதல் - குழந்தை {
    விளிம்பு - இடது : 0 ; 
  }
}
. ஆஃப்செட் ( @columnOffset : 1 ) {  
  விளிம்பு - இடது : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! முக்கியமானது ;          
}