বুটস্ট্র্যাপ 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>

ট্যাবগুলি একে অপরের উপরে সজ্জিত থাকে, তবে বাম দিকে ঘুরানো হিসাবে যথাযথভাবে রেন্ডার করা হয় না, পরিবর্তে এগুলি একে অপরের উপরে আটকে থাকা অনুভূমিক ট্যাবগুলি। ট্যাব বিষয়বস্তু সঠিকভাবে দেখানো হয়েছে / সামগ্রী ডিভিডিতে লুকানো আছে।

এটি ট্যাব-বাম এবং ট্যাব-ডান ক্লাসগুলি ব্যবহার করে বুটস্ট্র্যাপ ২.x এ পরিচালনা করা হয়েছিল , তবে এটি বুটস্ট্র্যাপ 3-এ অবহিত এবং সত্যিই কোনও কিছুর সাথে প্রতিস্থাপিত হয়েছে বলে মনে হয় না। বুটস্ট্র্যাপ 3 ট্যাব প্লাগইনে সঠিক বাম-ডান ট্যাব রেন্ডারিং সম্ভব কিনা তা কি কেউ জানেন?

Comments

আপনি .navএকা ক্লাসটি ব্যবহার করতে পারেন , তারপরে গ্রিডের সাথে এনএভি এবং আপনার সামগ্রীর প্রস্থ নির্ধারণ করা হবে। .navডিফল্টরূপে স্ট্যাক করা থেকে কোনও 'স্ট্যাকড এনএভি' লাগবে না।

— প্যাট্রিক বার্কলে 0

Answer 1

বাম, ডান এবং নীচে ট্যাবগুলি বুটস্ট্র্যাপ 3 থেকে সরানো হয়েছিল, তবে এটি অর্জনের জন্য আপনি কাস্টম সিএসএস যুক্ত করতে পারেন ..

.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 এর বাইরে এনেছে।

— ওসবার্গস

কেন এটি সরানো হয়েছে? ও

— রোজভেল্ট

হ্যাঁ, একা। নাভ স্ট্যাক করা থাকে, তবে এটি যখন সক্রিয় / সক্রিয় থাকে তখন এটি কোনও ট্যাবের (উপযুক্ত বাম, ডান সীমানা) মতো লাগে না। এটি ট্যাবগুলির উদ্দেশ্য।

— জিম

আপনার এটি আর যুক্ত করার দরকার নেই This এটি উদ্দেশ্যমূলকভাবে সরানো হয়েছিল। আপনার এখন কীভাবে জাভাস্ক্রিপ্ট / ট্যাবগুলির আওতায় এটি পরিচালনা করা উচিত সে সম্পর্কে অফিসিয়াল বুটস্ট্র্যাপ ডকুমেন্টেশন দেখুন। আরও দেখুন, উল্লম্ব ট্যাবগুলি করতে কীভাবে বুটস্ট্র্যাপ 3 সেটআপটি সঠিকভাবে ব্যবহার করতে হয় তার এই টিউটোরিয়ালটি। tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills

— নীল মনরো

সাধারণ পাঠ্য সামগ্রীর জন্য, উভয়ই সমাধান ঠিক আছে। যদি আমি যে সমস্যার বিষয়ে কথা বলছি অন্য কেউ যদি মুখোমুখি হন: @ ডিবিটেকের সমাধানটি সবচেয়ে ভাল কাজ করেছে: বুটস্ট্র্যাপ-উল্লম্ব-ট্যাবগুলি আমাকে কেবল সিএসএস ফাইল অন্তর্ভুক্ত করতে হয়েছিল ... ধন্যবাদ @ ডিবিটেক!

— মিশনজয়

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

— সানকে

ধন্যবাদ @ সানকে উত্তরে এটি যুক্ত করেছে।

— ডেভিড লেমায়িয়ান

এটি দুর্দান্ত ছিল এবং আমি কাস্টম সিএসএস ছাড়াই এটিকে পছন্দ করতাম, তবে @ স্কেলির ট্যাবগুলিতে সক্রিয় ট্যাব এবং সামগ্রীর মধ্যে আরও 'ধারাবাহিকতা' চেহারা এবং সম্পর্ক রয়েছে। এখানে যদি একরকমভাবে অর্জন করা যায় তবে ভাল হবে তবে আমি কীভাবে তা বুঝতে পারি না। আমি সরলতার জন্য কেবল একটি উদাহরণ সংকীর্ণ করার জন্য একটি কাঁটাচামচ তৈরি করেছি: bootply.com/QZfrLF0XjD

— msanjay

অন্যদিকে, আমি কিছু রঙিন সামগ্রী রেখেছি এবং এটি এটি গ্রহণযোগ্য পদ্ধতির চেয়ে অনেক ভাল পরিচালনা করেছে। দেখতে bootply.com/SeQ6z7fhbQ এবং bootply.com/cre9NpmXpA

— msanjay

Answer 3

বাম এবং ডান ট্যাবগুলি পেতে (এখন পাশাপাশি পাশাপাশি) বুটস্ট্র্যাপ 3 এর জন্য বুটস্ট্র্যাপ-উল্লম্ব-ট্যাব উপাদান ব্যবহার করা যেতে পারে।

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

Answer 4

আপনার এটি আর যুক্ত করার দরকার নেই This এটি উদ্দেশ্যমূলকভাবে সরানো হয়েছিল। ডকুমেন্টেশন কিছুটা বদলেছে এবং প্রয়োজনীয় সিএসএস ক্লাসটি ("ন্যাভ-স্ট্যাকড") কেবলমাত্র পিলস উপাদানগুলির অধীনে উল্লেখ করা হয়েছে, তবে এটি ট্যাবগুলির জন্যও কাজ করা উচিত।

এই টিউটোরিয়ালটি উল্লম্ব ট্যাবগুলি করতে কীভাবে বুটস্ট্র্যাপ 3 সেটআপটি সঠিকভাবে ব্যবহার করতে হবে তা দেখায়:
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills

Comments

তারা এখন এটি পুরোপুরি সরিয়ে দিয়েছে। প্রক্রিয়াটির জন্য উপরের লিঙ্কটি দেখুন।

— নিল মনরো

আপনাকে অনেক ধন্যবাদ. আপনি যে নিবন্ধটির সাথে লিঙ্ক করেছেন তা ব্যবহারিক, কার্যকারী উদাহরণ এবং প্রচুর ব্যাখ্যা সরবরাহ করে। এটিই আমি যা খুঁজছিলাম।

— আলুয়ান হাদাদ

এর মূল্য কী, এটি কেবল নাভি-পিলগুলির জন্য সঠিক দেখাচ্ছে। নাভ-ট্যাবগুলি স্ট্যাক করা হবে তবে স্টাইলিংটি উপরে অনুভূমিক ট্যাবগুলির মতো দেখাচ্ছে looks যেহেতু ওপি বিশেষত ন্যাব-ট্যাব সম্পর্কে জিজ্ঞাসা করেছিল, তাই আমি মনে করি না এটি গ্রহণযোগ্য উত্তর হিসাবে বিবেচনা করা যেতে পারে।

— জে ম্যাথিস

ইউআরএল আর কাজ করে না! এই উত্তরটি তখন অর্থহীন হয়ে যায়!

— বোবার্ট