கூறுகள்

வழிசெலுத்தல், விழிப்பூட்டல்கள், பாப்ஓவர்கள் மற்றும் பலவற்றை வழங்குவதற்காக மீண்டும் பயன்படுத்தக்கூடிய டஜன் கணக்கான கூறுகள் உருவாக்கப்பட்டுள்ளன.

எடுத்துக்காட்டுகள்

இரண்டு அடிப்படை விருப்பங்கள், மேலும் இரண்டு குறிப்பிட்ட மாறுபாடுகளுடன்.

ஒற்றை பொத்தான் குழு

.btnஉடன் பொத்தான்களின் வரிசையை மடிக்கவும் .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > இடது </button>
  3. <button class = "btn" > Middle </button>
  4. <button class = "btn" > வலது </button>
  5. </div>

பல பொத்தான் குழுக்கள்

மிகவும் சிக்கலான கூறுகளுக்கு <div class="btn-group">ஒரு தொகுப்புகளை இணைக்கவும்.<div class="btn-toolbar">

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

செங்குத்து பொத்தான் குழுக்கள்

பொத்தான்களின் தொகுப்பை கிடைமட்டமாக இல்லாமல் செங்குத்தாக அடுக்கி வைக்கவும்.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

தேர்வுப்பெட்டி மற்றும் ரேடியோ சுவைகள்

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

பொத்தான் குழுக்களில் கீழ்தோன்றல்கள்

எச்சரிக்கை!கீழ்தோன்றும் பொத்தான்கள் சரியான ரெண்டரிங்கிற்குள் தனித்தனியாக மூடப்பட்டிருக்க வேண்டும் .btn-group..btn-toolbar

கண்ணோட்டம் மற்றும் எடுத்துக்காட்டுகள்

ஒரு கீழ்தோன்றும் மெனுவைத் தூண்டுவதற்கு எந்த பட்டனையும் பயன்படுத்தவும், அதை ஒரு க்குள் வைத்து .btn-groupசரியான மெனு மார்க்அப்பை வழங்கவும்.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. செயல்
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- கீழ்தோன்றும் மெனு இணைப்புகள் -->
  8. </ul>
  9. </div>

அனைத்து பொத்தான் அளவுகளிலும் வேலை செய்கிறது

பட்டன் கீழ்தோன்றும் எந்த அளவிலும் வேலை செய்யும்: .btn-large, .btn-small, அல்லது .btn-mini.

ஜாவாஸ்கிரிப்ட் தேவை

பொத்தான் கீழ்தோன்றும் செயல்பாட்டிற்கு பூட்ஸ்டார்ப் கீழ்தோன்றும் செருகுநிரல் தேவைப்படுகிறது.

மொபைல் போன்ற சில சந்தர்ப்பங்களில் கீழ்தோன்றும் மெனுக்கள் காட்சிப் பகுதிக்கு வெளியே நீட்டிக்கப்படும். நீங்கள் கைமுறையாக அல்லது தனிப்பயன் ஜாவாஸ்கிரிப்ட் மூலம் சீரமைப்பைத் தீர்க்க வேண்டும்.


பிளவு பட்டன் கீழ்தோன்றும்

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > செயல் </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- கீழ்தோன்றும் மெனு இணைப்புகள் -->
  8. </ul>
  9. </div>

அளவுகள்

கூடுதல் பட்டன் வகுப்புகளைப் பயன்படுத்தவும் .btn-mini, .btn-small, அல்லது .btn-largeஅளவிடுவதற்கு.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > செயல் </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- கீழ்தோன்றும் மெனு இணைப்புகள் -->
  8. </ul>
  9. </div>

டிராப்அப் மெனுக்கள்

கீழ்தோன்றும் மெனுக்களை உடனடி பெற்றோருக்கு ஒற்றை வகுப்பைச் சேர்ப்பதன் மூலம் கீழிருந்து மேலே மாற்றலாம் .dropdown-menu. இது மெனுவின் திசையைப் .caretபுரட்டி, மேலிருந்து கீழாக நகர்த்துவதற்குப் பதிலாக கீழே இருந்து மேலே நகரும்.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- கீழ்தோன்றும் மெனு இணைப்புகள் -->
  8. </ul>
  9. </div>

நிலையான பேஜினேஷன்

Rdio மூலம் ஈர்க்கப்பட்ட எளிய பேஜினேஷன், பயன்பாடுகள் மற்றும் தேடல் முடிவுகளுக்கு சிறந்தது. பெரிய தொகுதி தவறவிடுவது கடினம், எளிதில் அளவிடக்கூடியது மற்றும் பெரிய கிளிக் பகுதிகளை வழங்குகிறது.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > முந்தைய </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > அடுத்து </a></li>
  10. </ul>
  11. </div>

விருப்பங்கள்

ஊனமுற்ற மற்றும் செயலில் உள்ள மாநிலங்கள்

இணைப்புகள் வெவ்வேறு சூழ்நிலைகளுக்கு தனிப்பயனாக்கக்கூடியவை. .disabledகிளிக் செய்ய முடியாத இணைப்புகளுக்கும் .activeதற்போதைய பக்கத்தைக் குறிப்பிடுவதற்கும் பயன்படுத்தவும் .

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "முடக்கப்பட்டது" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "முடக்கப்பட்டது" ><span> « </span></li>
  4. <li class = "செயலில்" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

அளவுகள்

பெரிய அல்லது சிறிய பக்கத்தை விரும்புகிறீர்களா? .pagination-large, .pagination-smallஅல்லது .pagination-miniகூடுதல் அளவுகளைச் சேர்க்கவும் .

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

சீரமைப்பு

பேஜினேஷன் இணைப்புகளின் சீரமைப்பை மாற்ற இரண்டு விருப்ப வகுப்புகளில் ஒன்றைச் சேர்க்கவும்: .pagination-centeredமற்றும் .pagination-right.

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

பேஜர்

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

இயல்புநிலை உதாரணம்

இயல்பாக, பேஜர் இணைப்புகளை மையப்படுத்துகிறது.

  1. <ul class = "பேஜர்" >
  2. <li><a href = "#" > முந்தையது </a></li>
  3. <li><a href = "#" > அடுத்து </a></li>
  4. </ul>

சீரமைக்கப்பட்ட இணைப்புகள்

மாற்றாக, நீங்கள் ஒவ்வொரு இணைப்பையும் பக்கங்களுக்கு சீரமைக்கலாம்:

  1. <ul class = "பேஜர்" >
  2. <li class = "முந்தையது" >
  3. <a href = "#" > பழையது </a>
  4. </li>
  5. <li class = "அடுத்து" >
  6. <a href = "#" > புதியது → </a>
  7. </li>
  8. </ul>

விருப்ப முடக்கப்பட்ட நிலை

பேஜர் இணைப்புகள் பேஜினேஷனில் .disabledஇருந்து பொது பயன்பாட்டு வகுப்பையும் பயன்படுத்துகின்றன.

  1. <ul class = "பேஜர்" >
  2. <li class = "முந்தைய முடக்கப்பட்டது" >
  3. <a href = "#" > பழையது </a>
  4. </li>
  5. ...
  6. </ul>

லேபிள்கள்

லேபிள்கள் மார்க்அப்
இயல்புநிலை <span class="label">Default</span>
வெற்றி <span class="label label-success">Success</span>
எச்சரிக்கை <span class="label label-warning">Warning</span>
முக்கியமான <span class="label label-important">Important</span>
தகவல் <span class="label label-info">Info</span>
தலைகீழ் <span class="label label-inverse">Inverse</span>

பேட்ஜ்கள்

பெயர் உதாரணமாக மார்க்அப்
இயல்புநிலை 1 <span class="badge">1</span>
வெற்றி 2 <span class="badge badge-success">2</span>
எச்சரிக்கை 4 <span class="badge badge-warning">4</span>
முக்கியமான 6 <span class="badge badge-important">6</span>
தகவல் 8 <span class="badge badge-info">8</span>
தலைகீழ் 10 <span class="badge badge-inverse">10</span>

எளிதில் மடிக்கக்கூடியது

எளிதாக செயல்படுத்த, லேபிள்கள் மற்றும் பேட்ஜ்கள் :emptyஉள்ளடக்கம் இல்லாதபோது (CSS இன் தேர்வி வழியாக) வெறுமனே சரிந்துவிடும்.

ஹீரோ யூனிட்

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

வணக்கம், உலகம்!

இது ஒரு எளிய ஹீரோ யூனிட், பிரத்யேக உள்ளடக்கம் அல்லது தகவலுக்கு கூடுதல் கவனம் செலுத்துவதற்கான எளிய ஜம்போட்ரான்-பாணி கூறு.

மேலும் அறிக

  1. <div class = "hero-unit" >
  2. <h1> தலைப்பு </h1>
  3. <p> டேக்லைன் </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. மேலும் அறிக
  7. </a>
  8. </p>
  9. </div>

பக்க தலைப்பு

h1ஒரு பக்கத்தில் உள்ள உள்ளடக்கத்தின் சரியான இடைவெளி மற்றும் பிரிவுகளைப் பிரிப்பதற்கான எளிய ஷெல் . இது h1இன் இயல்புநிலை small, உறுப்பு மற்றும் பிற கூறுகளை (கூடுதல் பாணிகளுடன்) பயன்படுத்தலாம்.

  1. <div class = "page-header" >
  2. <h1> எடுத்துக்காட்டு பக்க தலைப்பு <small> தலைப்புக்கான துணை உரை </small></h1>
  3. </div>

இயல்புநிலை சிறுபடங்கள்

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

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

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

  • 300x200

    சிறுபட லேபிள்

    க்ராஸ் ஜஸ்டோ ஓடியோ, டாபிபஸ் ஏசி ஃபேசிலிசிஸ் இன், எஜெஸ்டாஸ் எகெட் குவாம். டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ். Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.

    செயல் செயல்

  • 300x200

    சிறுபட லேபிள்

    க்ராஸ் ஜஸ்டோ ஓடியோ, டாபிபஸ் ஏசி ஃபேசிலிசிஸ் இன், எஜெஸ்டாஸ் எகெட் குவாம். டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ். Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.

    செயல் செயல்

  • 300x200

    சிறுபட லேபிள்

    க்ராஸ் ஜஸ்டோ ஓடியோ, டாபிபஸ் ஏசி ஃபேசிலிசிஸ் இன், எஜெஸ்டாஸ் எகெட் குவாம். டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ். Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.

    செயல் செயல்

சிறுபடங்களை ஏன் பயன்படுத்த வேண்டும்

.media-gridபுகைப்படங்கள் அல்லது வீடியோக்கள், படத் தேடல் முடிவுகள், சில்லறை தயாரிப்புகள், போர்ட்ஃபோலியோக்கள் மற்றும் பலவற்றின் கட்டங்களுக்கு சிறுபடங்கள் (முன்பு v1.4 வரை) சிறந்தவை. அவை இணைப்புகள் அல்லது நிலையான உள்ளடக்கமாக இருக்கலாம்.

எளிய, நெகிழ்வான மார்க்அப்

சிறுபடம் மார்க்அப் எளிமையானது-எவ்வளவு உறுப்புகள் இருந்தாலும் தேவை ul. liஇது மிகவும் நெகிழ்வானது, உங்கள் உள்ளடக்கங்களை மடிக்க இன்னும் சிறிது மார்க்அப் மூலம் எந்த வகையான உள்ளடக்கத்தையும் அனுமதிக்கிறது.

கட்ட நெடுவரிசை அளவுகளைப் பயன்படுத்துகிறது

கடைசியாக, சிறுபடவுருக் கூறுகள் ஏற்கனவே உள்ள கட்டம் அமைப்பு வகுப்புகளைப் பயன்படுத்துகிறது-போன்ற .span2அல்லது .span3-சிறுபட அளவுகளைக் கட்டுப்படுத்த.

மார்க்அப்

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

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <a href = "#" class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

சிறுபடங்களில் தனிப்பயன் HTML உள்ளடக்கத்திற்கு, மார்க்அப் சிறிது மாறுகிறது. தொகுதி நிலை உள்ளடக்கத்தை எங்கும் அனுமதிக்க, நாங்கள் <a>இப்படி மாற்றுகிறோம் <div>:

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> சிறுபட லேபிள் </h3>
  6. <p> சிறுபட தலைப்பு... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

மேலும் உதாரணங்கள்

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

இயல்புநிலை எச்சரிக்கை

.alertஅடிப்படை எச்சரிக்கை எச்சரிக்கைச் செய்திக்கு ஏதேனும் உரை மற்றும் விருப்பமான நிராகரிப்பு பொத்தானைக் கட்டவும்.

எச்சரிக்கை! நீங்களே சரி பார்க்கவும், நீங்கள் மிகவும் அழகாக இல்லை.
  1. <div class = "எச்சரிக்கை" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <strong> எச்சரிக்கை! </strong> நீங்களே சரி பார்க்கவும், நீங்கள் நன்றாக இல்லை.
  4. </div>

பட்டன்களை நிராகரி

மொபைல் சஃபாரி மற்றும் மொபைல் ஓபரா உலாவிகள், data-dismiss="alert"பண்புக்கூறுடன் கூடுதலாக, குறிச்சொல்லைப் href="#"பயன்படுத்தும் போது விழிப்பூட்டல்களை நிராகரிக்க வேண்டும்.<a>

  1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

மாற்றாக, நீங்கள் <button>தரவுப் பண்புக்கூறுடன் ஒரு உறுப்பைப் பயன்படுத்தலாம், அதை நாங்கள் எங்கள் டாக்ஸிற்காகச் செய்யத் தேர்ந்தெடுத்துள்ளோம். பயன்படுத்தும் போது <button>, ​​நீங்கள் சேர்க்க வேண்டும் type="button"அல்லது உங்கள் படிவங்கள் சமர்ப்பிக்கப்படாமல் இருக்கலாம்.

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </button>

JavaScript மூலம் விழிப்பூட்டல்களை நிராகரிக்கவும்

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


விருப்பங்கள்

நீண்ட செய்திகளுக்கு, சேர்ப்பதன் மூலம் எச்சரிக்கை ரேப்பரின் மேல் மற்றும் கீழ் திணிப்பை அதிகரிக்கவும் .alert-block.

எச்சரிக்கை!

நீங்களே சரி பார்க்கவும், நீங்கள் மிகவும் அழகாக இல்லை. Nulla vitae elit libero, a pharetra ague. பிரசென்ட் கொமோடோ கர்சஸ் மேக்னா, அல்லது ஸ்கெலரிஸ்க் நிஸ்ல் கான்செக்டூர் மற்றும்.

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <h4> எச்சரிக்கை! </h4>
  4. நீங்களே சரி பார்க்கவும், நீங்கள் இல்லை...
  5. </div>

சூழ்நிலை மாற்றுகள்

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

பிழை அல்லது ஆபத்து

ஓ ஸ்னாப்! சில விஷயங்களை மாற்றி மீண்டும் சமர்ப்பிக்க முயற்சிக்கவும்.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

வெற்றி

நல்லது! இந்த முக்கியமான எச்சரிக்கை செய்தியை நீங்கள் வெற்றிகரமாகப் படித்தீர்கள்.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

தகவல்

எச்சரிக்கை! இந்த விழிப்பூட்டலுக்கு உங்கள் கவனம் தேவை, ஆனால் இது மிக முக்கியமானதல்ல.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

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

அடிப்படை

செங்குத்து சாய்வு கொண்ட இயல்புநிலை முன்னேற்றப் பட்டி.

  1. <div class = "முன்னேற்றம்" >
  2. <div class = "bar" style = " width : 60 %; " ></div>
  3. </div>

கோடிட்டது

ஒரு கோடிட்ட விளைவை உருவாக்க ஒரு சாய்வு பயன்படுத்துகிறது. IE7-8 இல் கிடைக்கவில்லை.

  1. <div class = "progress progress-striped" >
  2. <div class = "bar" style = " width : 20 %; " ></div>
  3. </div>

அனிமேஷன்

கோடுகளை வலமிருந்து இடமாக அனிமேஷன் செய்ய to ஐ .activeசேர்க்கவும் . .progress-stripedIE இன் அனைத்து பதிப்புகளிலும் கிடைக்காது.

  1. <div class = "progress progress-striped active" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

அடுக்கப்பட்ட

பல பார்களை .progressஅடுக்கி வைக்கவும்.

  1. <div class = "முன்னேற்றம்" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

விருப்பங்கள்

கூடுதல் வண்ணங்கள்

ப்ரோக்ரஸ் பார்கள் ஒரே மாதிரியான சில பொத்தான்களைப் பயன்படுத்துகின்றன மற்றும் சீரான பாணிகளுக்கு விழிப்பூட்டல் வகுப்புகளைப் பயன்படுத்துகின்றன.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "முன்னேற்றம் முன்னேற்றம்-வெற்றி" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "முன்னேற்ற முன்னேற்றம்-எச்சரிக்கை" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

கோடிட்ட பட்டைகள்

திட வண்ணங்களைப் போலவே, எங்களிடம் பல்வேறு கோடிட்ட முன்னேற்றப் பட்டைகள் உள்ளன.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

உலாவி ஆதரவு

முன்னேற்றப் பட்டைகள் அவற்றின் அனைத்து விளைவுகளையும் அடைய CSS3 சாய்வுகள், மாற்றங்கள் மற்றும் அனிமேஷன்களைப் பயன்படுத்துகின்றன. இந்த அம்சங்கள் IE7-9 அல்லது Firefox இன் பழைய பதிப்புகளில் ஆதரிக்கப்படவில்லை.

இன்டர்நெட் எக்ஸ்புளோரர் 10 மற்றும் ஓபரா 12ஐ விட முந்தைய பதிப்புகள் அனிமேஷனை ஆதரிக்காது.

உரை உள்ளடக்கத்துடன் இடது அல்லது வலது-சீரமைக்கப்பட்ட படத்தைக் கொண்டிருக்கும் பல்வேறு வகையான கூறுகளை (வலைப்பதிவு கருத்துகள், கீச்சுகள் போன்றவை) உருவாக்குவதற்கான சுருக்க பொருள் பாணிகள்.

இயல்புநிலை உதாரணம்

இயல்புநிலை மீடியா ஒரு மீடியா பொருளை (படங்கள், வீடியோ, ஆடியோ) உள்ளடக்கத் தொகுதியின் இடது அல்லது வலதுபுறத்தில் மிதக்க அனுமதிக்கிறது.

64x64

ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, இன் கிராவிடா நுல்லா. நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் டோனெக் லாசினியா கொங்கு பெலிஸ்.
64x64

ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, இன் கிராவிடா நுல்லா. நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் டோனெக் லாசினியா கொங்கு பெலிஸ்.
64x64

ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, இன் கிராவிடா நுல்லா. நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் டோனெக் லாசினியா கொங்கு பெலிஸ்.
  1. <div class = "media" >
  2. <a class = "left-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Media heading </h4>
  7. ...
  8.  
  9. <!-- Nested media object -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

மீடியா பட்டியல்

கூடுதல் மார்க்அப் மூலம், நீங்கள் பட்டியலில் உள்ள மீடியாவைப் பயன்படுத்தலாம் (கருத்து நூல்கள் அல்லது கட்டுரைகள் பட்டியல்களுக்குப் பயன்படும்).

  • 64x64

    ஊடக தலைப்பு

    க்ராஸ் சிட் அமெட் நிப் லிபரோ, இன் கிராவிடா நுல்லா. நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ்.

    64x64

    உள்ளமைக்கப்பட்ட ஊடக தலைப்பு

    க்ராஸ் சிட் அமெட் நிப் லிபரோ, இன் கிராவிடா நுல்லா. நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ்.
    64x64

    உள்ளமைக்கப்பட்ட ஊடக தலைப்பு

    க்ராஸ் சிட் அமெட் நிப் லிபரோ, இன் கிராவிடா நுல்லா. நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ்.
    64x64

    உள்ளமைக்கப்பட்ட ஊடக தலைப்பு

    க்ராஸ் சிட் அமெட் நிப் லிபரோ, இன் கிராவிடா நுல்லா. நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ்.
  • 64x64

    ஊடக தலைப்பு

    க்ராஸ் சிட் அமெட் நிப் லிபரோ, இன் கிராவிடா நுல்லா. நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ்.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class = "left-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Media heading </h4>
  8. ...
  9.  
  10. <!-- Nested media object -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

கிணறுகள்

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

பார், நான் கிணற்றில் இருக்கிறேன்!
  1. <div class = "well" >
  2. ...
  3. </div>

விருப்ப வகுப்புகள்

இரண்டு விருப்ப மாற்றியமைக்கும் வகுப்புகளுடன் திணிப்பு மற்றும் வட்டமான மூலைகளைக் கட்டுப்படுத்தவும்.

பார், நான் கிணற்றில் இருக்கிறேன்!
  1. <div class = "நன்றாக-பெரியது" >
  2. ...
  3. </div>
பார், நான் கிணற்றில் இருக்கிறேன்!
  1. <div class = "நன்றாக-சிறியது" >
  2. ...
  3. </div>

மூடு ஐகான்

மாதிரிகள் மற்றும் விழிப்பூட்டல்கள் போன்ற உள்ளடக்கத்தை நிராகரிக்க பொதுவான மூட ஐகானைப் பயன்படுத்தவும்.

  1. <button class = "close" > × </button>

href="#"நீங்கள் ஆங்கரைப் பயன்படுத்த விரும்பினால், iOS சாதனங்களுக்கு கிளிக் நிகழ்வுகள் தேவை .

  1. <a class = "close" href = "#" > × </a>

உதவி வகுப்புகள்

சிறிய காட்சி அல்லது நடத்தை மாற்றங்களுக்கான எளிய, கவனம் செலுத்தும் வகுப்புகள்.

.இடதுபுறம் இழுக்கவும்

ஒரு உறுப்பை இடதுபுறமாக மிதக்கவும்

  1. வகுப்பு = "இடதுபுறம் இழுக்கவும்"
  1. . இழு - இடது {
  2. மிதவை : இடது ;
  3. }

.வலது இழு

ஒரு உறுப்பை வலதுபுறமாக மிதக்கவும்

  1. வர்க்கம் = "வலது இழுப்பு"
  1. . இழு - வலது {
  2. மிதவை : வலது ;
  3. }

.முடக்கப்பட்டது

ஒரு உறுப்பின் நிறத்தை இதற்கு மாற்றவும்#999

  1. வகுப்பு = "முடக்கப்பட்டது"
  1. . முடக்கப்பட்டது {
  2. நிறம் : #999;
  3. }

.clearfix

floatஎந்த உறுப்பு மீதும் அழிக்கவும்

  1. வகுப்பு = "தெளிவு"
  1. . தெளிவு _
  2. * பெரிதாக்கு : 1 ;
  3. &: முன் ,
  4. &: பிறகு {
  5. காட்சி : அட்டவணை ;
  6. உள்ளடக்கம் : "" ;
  7. }
  8. &: பிறகு {
  9. தெளிவு : இரண்டும் ;
  10. }
  11. }