கூறுகள்

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

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

பல பொத்தான்களை ஒரு கூட்டு அங்கமாக இணைக்க பொத்தான் குழுக்களைப் பயன்படுத்தவும். ஒரு தொடர் <a>அல்லது <button>உறுப்புகளுடன் அவற்றை உருவாக்கவும்.

சிறந்த நடைமுறைகள்

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

  • ஒரே பொத்தான் குழுவில் எப்போதும் ஒரே உறுப்பைப் பயன்படுத்தவும் <a>அல்லது <button>.
  • ஒரே பொத்தான் குழுவில் வெவ்வேறு வண்ணங்களின் பட்டன்களை கலக்க வேண்டாம்.
  • உரையுடன் கூடுதலாக அல்லது அதற்குப் பதிலாக ஐகான்களைப் பயன்படுத்தவும், ஆனால் பொருத்தமான இடத்தில் மாற்று மற்றும் தலைப்பு உரையைச் சேர்க்கவும்.

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

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

ஆங்கர் டேக் பட்டன்களுடன் கட்டமைக்கப்பட்ட ஒரு நிலையான பொத்தான் குழுவை HTML எவ்வாறு பார்க்கிறது என்பது இங்கே:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </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>

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

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

ஜாவாஸ்கிரிப்டைப் பெறுக »

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

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

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

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

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

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

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

  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.

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

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

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


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

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

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

அளவுகள்

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- கீழ்தோன்றும் மெனு இணைப்புகள் -->
  5. </ul>
  6. </div>

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

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

  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>

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

கீழ்தோன்றும் மெனுக்களை உடனடி பெற்றோருக்கு ஒற்றை வகுப்பைச் சேர்ப்பதன் மூலம் கீழிருந்து மேலே மாற்றலாம் .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 மூலம் ஈர்க்கப்பட்ட அல்ட்ரா எளிமையான மற்றும் குறைந்த பாணியிலான பேஜினேஷன், பயன்பாடுகள் மற்றும் தேடல் முடிவுகளுக்கு சிறந்தது. பெரிய தொகுதி தவறவிடுவது கடினம், எளிதில் அளவிடக்கூடியது மற்றும் பெரிய கிளிக் பகுதிகளை வழங்குகிறது.

உறுதியான பக்க இணைப்புகள்

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

நெகிழ்வான சீரமைப்பு

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

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

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

மார்க்அப்

ஒரு <div>, pagination வெறும் ஒரு <ul>.

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

விரைவான முந்தைய மற்றும் அடுத்த இணைப்புகளுக்கு பேஜர்

பேஜர் பற்றி

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

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

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

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

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

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

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

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

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

பற்றி

பேட்ஜ்கள் ஒரு குறிகாட்டி அல்லது சில வகையான எண்ணிக்கையைக் காண்பிப்பதற்கான சிறிய, எளிமையான கூறுகள். அவை பொதுவாக Mail.app போன்ற மின்னஞ்சல் கிளையண்டுகளில் அல்லது புஷ் அறிவிப்புகளுக்கான மொபைல் பயன்பாடுகளில் காணப்படுகின்றன.

கிடைக்கும் வகுப்புகள்

பெயர் உதாரணமாக மார்க்அப்
இயல்புநிலை 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>

ஹீரோ யூனிட்

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

மார்க்அப்

உங்கள் உள்ளடக்கத்தை divஇப்படி மடிக்கவும்:

  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> எடுத்துக்காட்டு பக்க தலைப்பு </h1>
  3. </div>

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

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

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

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

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

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

    செயல் செயல்

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

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

    செயல் செயல்

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

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

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

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

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

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

மார்க்அப்

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

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> சிறுபட லேபிள் </h5>
  6. <p> சிறுபட தலைப்பு இங்கே... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

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

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

இலகுரக இயல்புநிலைகள்

மீண்டும் எழுதப்பட்ட அடிப்படை வகுப்பு

பூட்ஸ்டார்ப் 2 உடன், அடிப்படை வகுப்பை எளிதாக்கியுள்ளோம்: .alertக்கு பதிலாக .alert-message. தேவையான குறைந்தபட்ச மார்க்அப்பையும் குறைத்துள்ளோம்- <p>இயல்புநிலையாக தேவையில்லை, வெளிப்புறமாக மட்டுமே <div>.

ஒற்றை எச்சரிக்கை செய்தி

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


ஜாவாஸ்கிரிப்ட் நன்றாக செல்கிறது

பூட்ஸ்டார்ப் ஒரு சிறந்த jQuery செருகுநிரலுடன் வருகிறது, இது எச்சரிக்கை செய்திகளை ஆதரிக்கிறது, அவற்றை விரைவாகவும் எளிதாகவும் நீக்குகிறது.

செருகுநிரலைப் பெறுக »

எடுத்துக்காட்டு எச்சரிக்கைகள்

எளிய வகுப்பில் உங்கள் செய்தியையும் விருப்பமான நெருக்கமான ஐகானையும் மடிக்கவும்.

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

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

இரண்டு விருப்ப வகுப்புகளுடன் நிலையான விழிப்பூட்டல் செய்தியை எளிதாக நீட்டிக்கவும்: .alert-blockகூடுதல் திணிப்பு மற்றும் உரை கட்டுப்பாடுகள் மற்றும் .alert-headingபொருத்தமான தலைப்புக்கு.

எச்சரிக்கை!

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

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > எச்சரிக்கை! </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"
  3. பாணி = " அகலம் : 60 %; " ></div>
  4. </div>

கோடிட்டது

ஒரு கோடிட்ட விளைவை உருவாக்க ஒரு சாய்வு பயன்படுத்துகிறது (IE இல்லை).

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. பாணி = " அகலம் : 20 %; " ></div>
  4. </div>

அனிமேஷன்

கோடிட்ட உதாரணத்தை எடுத்து அதை அனிமேட் செய்கிறது (IE இல்லை).

  1. <div class = "முன்னேற்றம் முன்னேற்றம்-கோடிட்டது
  2. செயலில்" >
  3. <div class = "bar"
  4. பாணி = " அகலம் : 40 %; " ></div>
  5. </div>

விருப்பங்கள் மற்றும் உலாவி ஆதரவு

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

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

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

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

நடத்தை

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

நீங்கள் .activeவகுப்பைப் பயன்படுத்தினால், உங்கள் .progress-stripedமுன்னேற்றப் பட்டைகள் இடமிருந்து வலமாக கோடுகளை அனிமேட் செய்யும்.

உலாவி ஆதரவு

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

Opera மற்றும் IE இந்த நேரத்தில் அனிமேஷன்களை ஆதரிக்கவில்லை.

கிணறுகள்

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

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

மூடு ஐகான்

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

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

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

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