Which class i need to use for tabbed panel? Is there one?
i do the following and looks bad :-(
A tabbed navigation + a panel with and 0 padding between them-
<div id="dashboardheader" class="container" style="padding-top: 20px;">
<ul class="nav nav-tabs tab-pane">
<li class="active"><a href="#">Dashboard</a></li>
</ul>
</div>
<div id="dashboardpanel " style="padding-top: 0px">
<div class="panel panel-primary container" style="padding-top: 30px;">
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-offset-2">
<div class="row">
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" onclick="OpenDialog()" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-offset-2">
<div class="row">
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
</div>
</div>
</div>
</div>
</div>
whats the alternate?
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class . tab-content .
You can activate a tab or pill navigation without writing any JavaScript code — simply specify the data-bs-toggle="tab" on each tab, or data-bs-toggle="pill" on each pill, as well as create a . tab-pane with unique ID for every tab and wrap them in . tab-content .
Tabs are used to separate content into different panes where each pane is viewable one at a time. For a tutorial about Tabs, read our Bootstrap Tabs/Pills Tutorial.
Bootstrap tabs separate data in the same wrappers but different panes. Pills are components placed in pages to speed up browsing. Also, the first step of adding links inside navbar is to apply <ul> element together with class="navbar-nav".
I think what you want is just the regular bootstrap tabs
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
With a little bit of styling, you can get it to look how you want:
For V4, you'll want to style with the .nav-tabs
class and also invoke the tab JavaScript plugin
Here's some simple less you can add that allows you to include .nav.nav-tabs
inside a .panel .panel-heading
An example codepen : http://codepen.io/anon/pen/utGaK
IMHO it doesn't quite look as "clean" as the components are when used independently w/o additional styles..
I've tested it with .panel-title
too using .pull-right
on the .nav
. While it worked I found it best to add .clearfix
to the header as the tabs are 1/2px too tall ATM. Should be simple to resolve it.
Here's the code I use in the above example.
For example :
<div class="panel panel-default">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
</div>
<!-- Tab panes + Panel body -->
<div class="panel-body 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 class="tab-pane" id="settings">SET</div>
</div>
</div>
This is the less :
// Need to compensatve for padding in panel-heading
// Must be a way to invert this
// variable - @panel-heading-padding.
@panel-heading-padding-negate: -10px -15px;
.panel {
.panel-heading {
.nav-tabs {
margin:@panel-heading-padding-negate;
border-bottom-width:0;
> li {
> a {
// re-apply the original padding
padding:@panel-heading-padding;
margin-bottom:1px;
border:solid 0 transparent;
&:hover {
border-color: transparent;
}
}
&.active > a {
&,
&:hover,
&:focused {
border:solid 0 transparent;
}
}
}
}
}
}
I've added the following to the li
definition and removed the margin-right
& border-radius
on the > li > a
so that when I pull the nav to the right of the header it fits & looks cleaner.
&:first-child > a {
border-top-left-radius:@panel-border-radius;
}
&:last-child > a {
border-top-right-radius:@panel-border-radius;
}
Here's an updated codepen : http://codepen.io/anon/pen/hJsEC
There's a Bootsnipp snippet that does this: http://bootsnipp.com/snippets/MaA0A
It contains CSS to allow embedding tabs in the panel header like this:
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<!--...-->
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<!--...-->
</div>
</div>
</div>
Result:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With