ورود

View Full Version : تب عمودی در بوت استرپ



pary_daryayi
پنج شنبه 24 اردیبهشت 1394, 15:32 عصر
سلام . برای این موضوع جستجو کردم ، اما مثل تب افقی بوت استرپ یا رسپانسیو نیست و یا در مرورگرهای دیگه مثل IE ست نیست .
این کد برای تب افقی در بوت استرپ هست :


<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#red" data-toggle="tab">Red</a></li>
<li><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
</div> <!-- container -->


کد js :


<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>


میخواستم بدونم در کد css و html چه تغییراتی ایجاد کنم که همین تب ، تبدیل به تب عمودی بشه ؟

pary_daryayi
جمعه 25 اردیبهشت 1394, 10:15 صبح
تو این لینک (http://bootsnipp.com/snippets/featured/sidebar-with-tabs) یک نمونه پیدا کردم .