बूटस्ट्रैप 3 में स्टैक्ड टैब

Question

मैं बूटस्ट्रैप 3 में टैब jquery प्लगइन का उपयोग करके बाएं-संरेखित स्टैक्ड टैब को लागू करने का प्रयास कर रहा हूं, जहां टैब शीर्ष के बजाय टैब सामग्री के बाईं ओर लंबवत रूप से प्रस्तुत किए जाते हैं। जब मैं निम्नलिखित कोशिश करता हूं;

   <ul class="nav nav-tabs nav-stacked">
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    </ul>


    <div class="tab-content">
        <div class="tab-pane fade" id="tab1">
            Tab 1 content
        </div>
        <div class="tab-pane fade" id="tab2">
            Tab 2 content              
        </div>
        <div class="tab-pane fade" id="tab3">
            Tab 3 content
        </div>
    </div>

टैब एक-दूसरे के शीर्ष पर स्टैक्ड होते हैं, लेकिन ठीक से बाईं ओर मुड़ने के रूप में प्रस्तुत नहीं किए जाते हैं, इसके बजाय वे एक दूसरे के शीर्ष पर बस क्षैतिज टैब हैं। टैब कंटेंट को कंटेंट डिव में ठीक से दिखाया / छिपाया गया है।

यह टैब-लेफ्ट और टैब-राइट क्लासेस का उपयोग करके बूटस्ट्रैप 2.x में संभाला गया था , लेकिन यह बूटस्ट्रैप 3 में चित्रित किया गया है और वास्तव में इसे किसी भी चीज़ से प्रतिस्थापित नहीं किया गया है। क्या किसी को पता है कि बूटस्ट्रैप 3 टैब प्लगइन में उचित बाएँ-दाएँ टैब रेंडरिंग संभव है?

Comments

आप .navअकेले कक्षा का उपयोग कर सकते हैं, फिर ग्रिड के साथ नौसेना और आपकी सामग्री की चौड़ाई निर्धारित करें। 'स्टैक्ड नेवी' की कोई आवश्यकता नहीं है क्योंकि .navडिफ़ॉल्ट रूप से स्टैक किया गया है।

— पैट्रिक बर्कले

Answer 1

बूटस्ट्रैप 3 से बाएँ, दाएँ और नीचे टैब निकाले गए थे, लेकिन आप इसे प्राप्त करने के लिए कस्टम CSS जोड़ सकते हैं।

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}

काम करने का उदाहरण: http://bootply.com/74926

अपडेट करें

यदि आपको टैब के सटीक रूप की आवश्यकता नहीं है (प्रत्येक टैब के सक्रिय होने पर बाईं या दाईं ओर बॉर्डर किया गया है), तो आप nav-stackedबूटस्ट्रैप के साथ-साथ col-*टैब या बाईं ओर दाईं ओर तैरने के लिए सरल उपयोग कर सकते हैं ...

nav-stackedडेमो: http://codeply.com/go/rv3Cvr0lZ4

<ul class="nav nav-pills nav-stacked col-md-3">
    <li><a href="#a" data-toggle="tab">1</a></li>
    <li><a href="#b" data-toggle="tab">2</a></li>
    <li><a href="#c" data-toggle="tab">3</a></li>
</ul>

Comments

यह पूरी तरह से इस मुद्दे को हल करता है। फिर भी सोच रहा था कि उन्होंने इसे बूटस्ट्रैप 3 से बाहर क्यों निकाला।

— ऑसबर्ग्स

इसे क्यों हटाया गया? oO

— रूजवेल्ट

हां, .nav अकेले स्टैक किया गया है, लेकिन जब यह चयनित / सक्रिय होता है, तो यह टैब (उपयुक्त बाएं, दाएं बॉर्डर) की तरह नहीं दिखता है। यह टैब का उद्देश्य है।

— झिम

आपको इसे वापस जोड़ने की आवश्यकता नहीं है। इसे उद्देश्यपूर्ण तरीके से हटा दिया गया था। जावास्क्रिप्ट / टैब के तहत अब आप इसे कैसे संभालना चाहिए, इसके बारे में आधिकारिक बूटस्ट्रैप प्रलेखन देखें। यह भी देखें, वर्टिकल टैब करने के लिए बूटस्ट्रैप 3 सेटअप का सही तरीके से उपयोग करने के बारे में यह ट्यूटोरियल। tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills

— नील मुनरो

सरल पाठ सामग्री के लिए, या तो समाधान ठीक है। अगर किसी और को उस मुद्दे का सामना करना पड़ रहा है, जिसके बारे में मैं बात कर रहा हूं: @ dbtek के समाधान ने सबसे अच्छा काम किया: बूटस्ट्रैप-वर्टिकल-टैब्स मुझे सिर्फ CSS फ़ाइल को शामिल करना था ... धन्यवाद @dbtek!

— एमएसंजय

Answer 2

बूटस्ट्रैप टीम ने इसे हटा दिया है। यहाँ देखें: https://github.com/twbs/bootstrap/issues/8922 । @ स्केली के उत्तर में कस्टम सीएसएस शामिल है जो मैं नहीं करना चाहता था इसलिए मैंने ग्रिड प्रणाली और नव-गोलियों का उपयोग किया। यह ठीक काम किया और बहुत अच्छा लगा। कोड ऐसा दिखता है:

<div class="row">

  <!-- Navigation Buttons -->
  <div class="col-md-3">
    <ul class="nav nav-pills nav-stacked" id="myTabs">
      <li class="active"><a href="#home" data-toggle="pill">Home</a></li>
      <li><a href="#profile" data-toggle="pill">Profile</a></li>
      <li><a href="#messages" data-toggle="pill">Messages</a></li>
    </ul>
  </div>

  <!-- Content -->
  <div class="col-md-9">
    <div class="tab-content">
      <div class="tab-pane active" id="home">Home</div>
      <div class="tab-pane" id="profile">Profile</div>
      <div class="tab-pane" id="messages">Messages</div>
    </div>
  </div>

</div>

आप इसे यहां क्रिया में देख सकते हैं: http://bootply.com/81948

[अद्यतन] @ सीन, जावास्क्रिप्ट के माध्यम से और इसके बजाय उपयोग करने के लिए नव-गोलियों को सक्षम नहीं करने का विकल्प देता है data-toggle="pill"। यहाँ देखें: http://bootply.com/96067 । धन्यवाद शॉन।

Comments

आपको जावास्क्रिप्ट को शामिल करने की आवश्यकता नहीं है। यदि आप प्रत्येक टैग में डेटा-टॉगल = "पिल" जोड़ते हैं तो यह बूटस्ट्रैप का उपयोग करके स्वचालित रूप से काम करेगा। आप यहां देख सकते हैं: bootply.com/96067

— SeanK

धन्यवाद @ सीन। इसे उत्तर में जोड़ दिया है।

— डेविड लेमायियन

यह अच्छा था और मैंने इसे कस्टम सीएसएस के बिना पसंद किया होगा, लेकिन @ Skelly के टैब में सक्रिय टैब और सामग्री के बीच अधिक 'निरंतरता' और संबंध हैं। अच्छा होगा यदि उसी तरह किसी तरह यहां हासिल किया जा सकता है लेकिन मैं यह पता नहीं लगा सकता कि कैसे। मैंने सरलता के लिए सिर्फ एक उदाहरण के लिए एक कांटा को छोटा किया: bootply.com/QZfrLF0XjD

— msanjay

दूसरी ओर, मैंने कुछ रंगीन सामग्री डाल दी और यह स्वीकार किए गए दृष्टिकोण की तुलना में बहुत बेहतर था। bootply.com/SeQ6z7fhbQ और bootply.com/cre9NpmXpA

— msanjay

Answer 3

बूटस्ट्रैप 3 के लिए बाएँ और दाएँ टैब (अब बग़ल में भी) समर्थन पाने के लिए, बूटस्ट्रैप-वर्टिकल-टैब घटक का उपयोग किया जा सकता है।

https://github.com/dbtek/bootstrap-vertical-tabs

Answer 4

आपको इसे वापस जोड़ने की आवश्यकता नहीं है। इसे उद्देश्यपूर्ण तरीके से हटा दिया गया था। प्रलेखन कुछ हद तक बदल गया है और सीएसएस वर्ग जो आवश्यक है ("नौसेना-स्टैक्ड") केवल गोलियां घटक के तहत उल्लिखित है, लेकिन टैब के लिए भी काम करना चाहिए।

यह ट्यूटोरियल दिखाता है कि वर्टिकल टैब करने के लिए बूटस्ट्रैप 3 सेटअप का ठीक से उपयोग कैसे करें:
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills

Comments

उन्होंने इसे अब पूरी तरह से हटा दिया है। प्रक्रिया के लिए उपरोक्त लिंक देखें।

— नील मुनरो

आपका बहुत बहुत धन्यवाद। आपके द्वारा जोड़ा गया लेख व्यावहारिक, काम करने के उदाहरण और बहुत सारी व्याख्या प्रदान करता है। यह ठीक वही है जिसकी तलाश मुझे थी।

— एलुआन हदद

इसके लायक क्या है, यह केवल नव-गोलियों के लिए सही लगता है। नेवी-टैब्स को स्टैक्ड किया जाएगा लेकिन स्टाइल शीर्ष पर क्षैतिज टैब की तरह दिखता है। चूंकि ओपी ने विशेष रूप से नव-टैब के बारे में पूछा था, मुझे नहीं लगता कि इसे स्वीकार्य उत्तर माना जा सकता है।

— Jay Mathis

URL अब काम नहीं करता है! यह उत्तर तब व्यर्थ हो जाता है!

— बोबोर्ट