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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ஒரு கீழ்தோன்றும் மெனுவைத் தூண்டுவதற்கு எந்த பட்டனையும் பயன்படுத்தவும், அதை ஒரு க்குள் வைத்து .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>

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

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

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

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

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

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

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

அளவுகள்

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

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

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

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

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

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

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

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- கீழ்தோன்றும் மெனு இணைப்புகள் -->
  </ul>
</div>

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

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

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

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

கூறு சீரமைப்பு

nav இணைப்புகளை சீரமைக்க, .pull-leftஅல்லது .pull-rightபயன்பாட்டு வகுப்புகளைப் பயன்படுத்தவும். இரண்டு வகுப்புகளும் குறிப்பிட்ட திசையில் CSS மிதவையைச் சேர்க்கும்.

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

வழக்கமான <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 செருகுநிரல் மட்டுமே தேவைப்படும்.

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

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

• வீடு
• உதவி
• கீழே போடு
  • Action
  • Another action
  • Something else here
  • Separated link

<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>

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

• வீடு
• உதவி
• கீழே போடு
  • Action
  • Another action
  • Something else here
  • Separated link

<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>குறிச்சொல்லைச் சேர்க்கவும், நீங்கள் அமைத்துவிட்டீர்கள்.

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

வகுப்புடன் வெற்று பட்டியல் உருப்படியை உருவாக்குவதன் மூலம் கிடைமட்ட வகுப்பியைச் சேர்க்கவும் .divider, இது போன்றது:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

உதாரணம் 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>

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

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

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

தாவல்களில் மங்காது

தாவல்களை மங்கச் செய்ய, .fadeஒவ்வொன்றிலும் சேர்க்கவும் .tab-pane.

jQuery சொருகி தேவை

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

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

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

தாவல்களை டேப் செய்யக்கூடியதாக மாற்ற, .tab-paneஒவ்வொரு தாவலுக்கும் தனித்துவமான ஐடியை உருவாக்கி அவற்றை ல் மடிக்கவும் .tab-content.

வலப்புறம் அல்லது இடப்புறம் சீரமைக்கப்பட்ட தாவல்களுக்கு, .nav-tabsமற்றும் .tab-contentஉள்ளிடவும் .tabbable.

நேரான மார்க்அப்

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

<div class = "tabable" > <-- இடது/வலது தாவல்களுக்கு மட்டுமே தேவை --> 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > பிரிவு 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > பிரிவு 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> நான் பிரிவு 1 இல் இருக்கிறேன். </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> வணக்கம், நான் பிரிவு 2 இல் இருக்கிறேன். </p>
    </div>
  </div>
</div>

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

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

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

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

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

நேவ்பாரினை இணைக்கும் போது, ​​கீழே மறைந்துள்ள பகுதியைக் கணக்கிட நினைவில் கொள்ளுங்கள். 40px அல்லது அதற்கு மேற்பட்ட திணிப்புகளைச் சேர்க்கவும் <body>. கோர் பூட்ஸ்டார்ப் CSS க்குப் பிறகு மற்றும் விருப்பமான பதிலளிக்கக்கூடிய CSS க்கு முன் இதைச் சேர்க்க மறக்காதீர்கள்.

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

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

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

நவ்பாரில் படிவங்கள்

நேவ்பாருக்குள் ஒரு படிவத்தை ஒழுங்காக வடிவமைக்க மற்றும் நிலைநிறுத்த, கீழே காட்டப்பட்டுள்ளபடி பொருத்தமான வகுப்புகளைச் சேர்க்கவும். இயல்புநிலை படிவத்திற்கு, அதைச் சேர்க்கவும் .navbar-formஅல்லது .pull-leftஅதைச் .pull-rightசரியாகச் சீரமைக்கவும்.

<form class = "navbar-form pull-left" > 
  <உள்ளீடு வகை = "உரை" வகுப்பு = "span2" >  
</form>

மேலும் தனிப்பயனாக்கப்பட்ட தேடல் படிவத்திற்கு, navbar இல் உள்ள சிறப்பு பாணிகளுக்கான உள்ளீட்டில் சேர்க்கவும் .navbar-search.form.search-query

<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 = "divider-vertical" ></li> 
  ...
</ul>

கூறு சீரமைப்பு

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

கீழ்தோன்றும் மெனுவைச் சேர்த்தல்

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

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

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

navbar இல் உரை

உரையின் சரங்களை a இல் மடிக்கவும் <.navbar-text>, வழக்கமாக <p>சரியான முன்னணி மற்றும் வண்ணத்திற்கான குறிச்சொல்லில்.

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

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

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

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

• வீடு

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

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

மார்க்அப்

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

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

பேஜர் பற்றி

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

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

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

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

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

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

<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>

பற்றி

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

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

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

மார்க்அப்

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

<div class = "hero-unit" > 
  <h1> தலைப்பு </h1>
  <p> டேக்லைன் </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      மேலும் அறிக
    </a>
  </p>
</div>

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

<div class = "page-header" > 
  <h1> எடுத்துக்காட்டு பக்க தலைப்பு </h1>
</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—சிறுபட அளவுகளைக் கட்டுப்படுத்த.

மார்க்அப்

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

<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 class = "எச்சரிக்கை" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> எச்சரிக்கை! </strong> நீங்களே சரி பார்க்கவும், நீங்கள் நன்றாக இல்லை.
</div>

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

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

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </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" 
       பாணி = " அகலம் : 60 %; " ></div> 
</div>

கோடிட்ட

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

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

அனிமேஷன்

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

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

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

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

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

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

நடத்தை

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

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

உலாவி ஆதரவு

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

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

கிணறுகள்

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

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

மூடு ஐகான்

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

×

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

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

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