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

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

மிகவும் சிக்கலான திட்டங்களுக்கான தொகுப்புகளை <div class="btn-group">நீங்கள் இணைக்கலாம் .<div class="btn-toolbar">

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

மேலும் பல குழுக்களுக்கான கருவிப்பட்டியுடன்:

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

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

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

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

தலையிடுகிறது

பொத்தான் குழுக்களுக்கான CSS தனி கோப்பில் உள்ளது, button-groups.less.

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

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

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

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

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

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

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

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

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

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

சக்திவாய்ந்த அடிப்படை வகுப்பு

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

ஏன் மாத்திரைகள் மற்றும் மாத்திரைகள்

<ul>பூட்ஸ்டார்ப்பில் உள்ள தாவல்கள் மற்றும் மாத்திரைகள் இணைப்புகளின் பட்டியலான அதே முக்கிய HTML உடன் கட்டமைக்கப்பட்டுள்ளன . தாவல்கள் அல்லது மாத்திரைகளுக்கு இடையில் ஒரு வகுப்பை மட்டும் மாற்றவும்.

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

அடிப்படை தாவல்கள்

வழக்கமான <ul>இணைப்புகளை எடுத்து சேர்க்கவும் .nav-tabs:

• வீடு
• சுயவிவரம்
• செய்திகள்

<ul class = "nav nav-tabs" > 
  <li class = "செயலில்" > 
    <a href = "#" > முகப்பு </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

அடிப்படை மாத்திரைகள்

அதே HTML ஐ எடுத்துக் கொள்ளுங்கள், ஆனால் .nav-pillsஅதற்குப் பதிலாகப் பயன்படுத்தவும்:

• வீடு
• சுயவிவரம்
• செய்திகள்

<ul class = "nav nav-pills" > 
  <li class = "செயலில்" > 
    <a href = "#" > முகப்பு </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

அவற்றை எவ்வாறு அடுக்கி வைப்பது

தாவல்கள் மற்றும் மாத்திரைகள் முன்னிருப்பாக கிடைமட்டமாக இருப்பதால், .nav-stackedசெங்குத்தாக அடுக்கப்பட்டதாகக் காட்ட, இரண்டாம் வகுப்பைச் சேர்க்கவும்.

அடுக்கப்பட்ட தாவல்கள்

• வீடு
• சுயவிவரம்
• செய்திகள்

<ul class = "nav nav-tabs nav-stated" > 
  ...
</ul>

அடுக்கப்பட்ட மாத்திரைகள்

• வீடு
• சுயவிவரம்
• செய்திகள்

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

பணக்கார மெனுக்கள் எளிதாக்கப்பட்டன

பூட்ஸ்டார்ப் தாவல்கள் மற்றும் மாத்திரைகளில் உள்ள கீழ்தோன்றும் மெனுக்கள் மிகவும் எளிதானவை மற்றும் சிறிது கூடுதல் HTML மற்றும் இலகுரக jQuery செருகுநிரல் மட்டுமே தேவைப்படும்.

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

கீழிறங்கும் தாவல்கள்

• வீடு
• சுயவிவரம்
• கீழே போடு
  • செயல்
  • மற்றொரு செயல்
  • இங்கே வேறு ஏதாவது
  • பிரிக்கப்பட்ட இணைப்பு

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "கீழே"
       href = "#" >
        கீழே போடு
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- இணைப்புகள் -->
    </ul>
  </li>
</ul>

கீழ்தோன்றும் மாத்திரைகள்

• வீடு
• சுயவிவரம்
• கீழே போடு
  • செயல்
  • மற்றொரு செயல்
  • இங்கே வேறு ஏதாவது
  • பிரிக்கப்பட்ட இணைப்பு

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "கீழே"
       href = "#" >
        கீழே போடு
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- இணைப்புகள் -->
    </ul>
  </li>
</ul>

பயன்பாட்டு பாணி வழிசெலுத்தல்

Nav பட்டியல்கள் விருப்ப தலைப்புகளுடன் nav இணைப்புகளின் குழுக்களை உருவாக்க எளிய மற்றும் எளிதான வழியை வழங்குகிறது. OS X இல் உள்ள Finder போன்ற பக்கப்பட்டிகளில் அவை சிறப்பாகப் பயன்படுத்தப்படுகின்றன.

கட்டமைப்பு ரீதியாக, அவை தாவல்கள் மற்றும் மாத்திரைகள் போன்ற அதே முக்கிய நாவ் பாணிகளில் கட்டமைக்கப்பட்டுள்ளன, எனவே பயன்பாடு மற்றும் தனிப்பயனாக்கம் ஆகியவை நேரடியானவை.

சின்னங்களுடன்

நாவ் பட்டியல்கள் ஐகான்களுடன் சித்தப்படுத்துவதும் எளிதானது. வகுப்பில் சரியான <i>குறிச்சொல்லைச் சேர்க்கவும், நீங்கள் அமைத்துவிட்டீர்கள்.

உதாரணம் nav பட்டியல்

இணைப்புகளின் பட்டியலை எடுத்து சேர்க்கவும் class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    பட்டியல் தலைப்பு
  </li>
  <li class = "செயலில்" > 
    <a href = "#" > முகப்பு </a> 
  </li>
  <li>
    <a href = "#" > நூலகம் </a> 
  </li>
  ...
</ul>

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

அதே உதாரணம், ஆனால் <i>ஐகான்களுக்கான குறிச்சொற்களுடன்.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      நூலகம்
    </a>
  </li>
  ...
</ul>

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

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

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

அட்டவணைப்படுத்தக்கூடிய உதாரணம்

தாவல்களை டேபிளாக மாற்ற, வகுப்புடன் .nav-tabsமற்றொரு பிரிவில் மடிக்கவும் .tabbable.

விருப்ப jQuery சொருகி

அனைத்து tabable தாவல்களும் எங்கள் இலகுரக jQuery சொருகி மூலம் இயக்கப்படுகின்றன. ஜாவாஸ்கிரிப்ட் டாக்ஸ் பக்கத்தில் டேபிளபிள் டேப்களை எப்படி உயிர்ப்பிப்பது என்பது பற்றி மேலும் படிக்கவும்.

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

கீழே தாவல்கள்

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

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

இடதுபுறத்தில் தாவல்கள்

இடதுபுறத்தில் தாவல்களை வைக்க வகுப்பை மாற்றவும்.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

வலதுபுறத்தில் தாவல்கள்

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

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

நவ்பார் சாரக்கட்டு

navbar நிலையான அல்லது நிலையான காட்சிக்கு அதை நன்றாக கட்டமைக்க ஒரு சில divs மட்டுமே தேவைப்படுகிறது.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

வியூபோர்ட்டின் மேற்புறத்தில் நேவ்பாரைச் சரி செய்ய .navbar-fixed-top, வெளிப்புறப் பகுதியில் சேர்க்கவும், .navbar. உங்கள் CSS இல், padding-top: 40px;உங்களின் <body>.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

பிராண்ட் பெயர்

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

<a class = "brand" href = "#" >  
  திட்டத்தின் பெயர்
</a>

தேடல் படிவம்

தேடல் படிவங்கள் வகுப்போடு navbar இல் தனிப்பயன் பாணிகளைப் பெறுகின்றன .navbar-search. அதைச் சீரமைக்கச் சேர்க்கவும் .pull-leftஅல்லது .pull-rightஆன் செய்யவும் .form

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

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

உங்கள் டாப்பாரில் உள்ள உள்ளடக்கத்தின் அளவைப் பொறுத்து, நீங்கள் பதிலளிக்கக்கூடிய விருப்பங்களைச் செயல்படுத்த விரும்பலாம். அவ்வாறு செய்ய, உங்கள் nav உள்ளடக்கத்தை உள்ளடக்கிய div இல் போர்த்தி .nav-collapse.collapse, navbar மாற்று பொத்தானைச் சேர்க்கவும், .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar சுருக்கப்பட்ட navbar உள்ளடக்கத்திற்கான நிலைமாற்றமாகப் பயன்படுத்தப்படுகிறது -->
      <a class = "btn btn-navbar" data-toggle = "சரிவு" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- பிராண்ட் காட்டப்பட வேண்டுமெனில் அதை அங்கேயே விட்டுவிட மறக்காதீர்கள் -->
      <a class = "brand" href = "#" > திட்டப் பெயர் </a>  
 
      <!-- நீங்கள் 940px அல்லது அதற்கும் குறைவாக மறைக்க விரும்பும் அனைத்தையும் இங்கே வைக்கவும் -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

நாவ் இணைப்புகள்

ஆர்டர் செய்யப்படாத பட்டியல்கள் மூலம் Nav உருப்படிகளைச் சேர்ப்பது எளிது.

<ul class = "nav" > 
  <li class = "செயலில்" > 
    <a href = "#" > முகப்பு </a> 
  </li>
  <li><a href = "#" > இணைப்பு </a></li> 
  <li><a href = "#" > இணைப்பு </a></li> 
</ul>

கீழ்தோன்றல்களைச் சேர்த்தல்

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

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          வகுப்பு = "கீழே-மாற்று"
          data-toggle = "dropdown" >
          கணக்கு
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

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

அவற்றை ஏன் பயன்படுத்த வேண்டும்

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

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

பல பக்கங்களில் காட்டப்படும் ஒரு எடுத்துக்காட்டு.

• வீடு

• முகப்பு /
• நூலகம்

• முகப்பு /
• நூலகம் /
• தகவல்கள்

மார்க்அப்

HTML என்பது இணைப்புகளுடன் கூடிய உங்கள் நிலையான வரிசைப்படுத்தப்படாத பட்டியல்.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > முகப்பு </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > நூலகம் </a> <span class = "divider" > / </span>   
  </li>
  <li class = "செயலில்" > 
    <a href = "#" > தரவு </a> 
  </li>
</ul>

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

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

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

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

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

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

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

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

மார்க்அப்

<div>ஒரு , pagination ஒரு மூடப்பட்டிருக்கும் <ul>.

<div class = "pagination" > 
  <ul>
    <li><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 = "#" > அடுத்து </a></li> 
  </ul>
</div>

பேஜர் பற்றி

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

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

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

• முந்தைய
• அடுத்தது

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

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

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

• ← பழையது
• புதியது →

<ul class = "பேஜர்" > 
  <li class = "முந்தைய" > 
    <a href = "#" > ← பழையது </a> 
  </li>
  <li class = "அடுத்து" > 
    <a href = "#" > புதியது → </a> 
  </li>
</ul>

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

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

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

கூடுதல் மார்க்அப் மூலம், தலைப்புகள், பத்திகள் அல்லது பொத்தான்கள் போன்ற எந்த வகையான 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—சிறுபட அளவுகளைக் கட்டுப்படுத்த.

மார்க்அப்

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

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> சிறுபட லேபிள் </h5>
      <p> சிறுபட தலைப்பு இங்கே... </p>
    </div>
  </li>
  ...
</ul>

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

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

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

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

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

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

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

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

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

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

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

<div class = "எச்சரிக்கை" > 
  <a class = "close" > × </a> 
  <strong> எச்சரிக்கை! </strong> நீங்களே சரி பார்க்கவும், நீங்கள் நன்றாக இல்லை.
</div>

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

<div class = "alert alert-block" > 
  <a class = "close" > × </a> 
  <h4 class = "alert-heading" > எச்சரிக்கை! </h4> 
  நீங்களே சரி பார்க்கவும், நீங்கள் இல்லை...
</div>

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

<div class = "alert alert-error" > 
  ...
</div>

வெற்றி

<div class = "alert alert-success" > 
  ...
</div>

தகவல்

<div class = "alert alert-info" > 
  ...
</div>

அடிப்படை

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

<div class = "முன்னேற்றம்" > 
  <div class = "bar" 
       style = " அகலம் : 60 %; " ></div> 
</div>

கோடிட்டது

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

<div class = "முன்னேற்றம் முன்னேற்றம்-தகவல் 
     முன்னேற்றம்-கோடுகள்" >
  <div class = "bar" 
       பாணி = " அகலம் : 20 %; " ></div> 
</div>

அனிமேஷன்

கோடிட்ட உதாரணத்தை எடுத்து அதை உயிரூட்டுகிறது.

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

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

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

• .progress-info
• .progress-success
• .progress-danger

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

நடத்தை

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

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

உலாவி ஆதரவு

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

ஓபரா இந்த நேரத்தில் அனிமேஷன்களை ஆதரிக்கவில்லை.

கிணறுகள்

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

<div class = "well" > 
  ...
</div>

பேட்ஜ்கள்

படிக்காத எண்ணிக்கைக்காக அல்லது எளிய குறிகாட்டியாக ஒரு உறுப்பில் பேட்ஜைப் பயன்படுத்தவும்.

<span class = "badge" > 3 </div> 

மூடு ஐகான்

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

×

<a class = "close" > × </a>