To build nav tabs via Bootstrap, it's simple, I just add code:
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>Tab1</li>
<li>Tab2</li>
</ul>
http://jsfiddle.net/M4YZ6/
but it's only top part of the tabs, who knows how to build bottom part using bootstrap like on picture below:
Thanks a lot!
try this
http://jsfiddle.net/M4YZ6/5/
HTML
<div class="tabbable">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-original-title="" rel="tooltip" href="#tab1" data-toggle="tab">Home</a>
</li>
<li><a data-original-title="" rel="tooltip" href="#tab2" data-toggle="tab">Profile</a></li>
<li><a data-original-title="" rel="tooltip" href="#tab3" data-toggle="tab">Message</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
Home
</div>
<div class="tab-pane" id="tab2">
Profile
</div>
<div class="tab-pane" id="tab3">
Message
</div>
</div>
</div>
I believe Tabbable nav is what you are looking for,
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
Markup taken from the nav component documentation
===Edit===
Js fiddle
Related
My drop down menu is not aligning. Also, it is constantly showing dark yellow, the color it's only supposed to show when I am hovering on it.
Would be great if someone could point me in the right direction
<div class="top">
</div>
<div class="white_line"></div>
<div id="navi li">
<ul id="navi">
<li id="navi01">
<div class="dropdown">
STARTSEITE
<div class="dropdown-content">
<ul>
<li>HOMÖOPATHIE</li>
<li><a href="wirbelsaeulentherapie.html">WIRBELSÄULEN-</b>BEHANDLUNG</li>
</ul>
</div>
</div>
</li>
<li id="navi02">ÜBER MICH</li>
</ul>
</div>
Thanks
Anu
I'm trying to organize the way Sonata Admin shows sonata_type_collection.
It looks like this now:
In the source html code I see that all of that is meant to be tabs
<div class="sonata-ba-tabs">
<div>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#s5860de8a43681_1_1" data-toggle="tab">
<i class="icon-exclamation-sign has-errors hide"></i> -
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="s5860de8a43681_1_1">
<fieldset>
<!--some field here-->
</fieldset>
</div>
</div>
</div>
</div>
<div>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#s5860de8a43681_2_1" data-toggle="tab">
<i class="icon-exclamation-sign has-errors hide"></i> -
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="s5860de8a43681_2_1">
<fieldset>
<!--some field here-->
</fieldset>
</div>
</div>
</div>
</div>
</div>
(I omitted some code to make it shorter)
We can definitely see that it is meant to be some kind of jquery tabs, but I can't really find any information how to make that work like a tabs. Is there anyway to configure the form to implement that?
I have a Foundation 5 based site with a nav bar at the top.
Because my menu choices are larger text they overlap the left "Name" section when the screen is made narrower.
Is there a way to control when the nav menu slips into mobile style?
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<div class="logo">
<a href="#">
<img src="mylogo.png"/>
</a>
</div>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">
<span></span>
</a>
</li>
</ul>
<section class="top-bar-section hide-for-medium-down ">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">
<a href="/home/index" class="menuMix">
#*<span class="menuMinor">Home Page</span>*#
<span class="menuMain allCaps">Home</span>
</a>
</li>
<li class="">
<a href="/home/about" class="menuMix">
#*<span class="menuMinor">Who We Are</span>*#
<span class="menuMain allCaps">About</span>
</a>
</li>
<li class="">
<a href="/home/contact" class="menuMix">
#*<span class="menuMinor">Get In Touch</span>*#
<span class="menuMain allCaps">Contact</span>
</a>
</li>
</ul>
</section>
</nav>
If you use SCSS you can try to decrease
$topbar-link-weight: $font-weight-normal;
$topbar-link-font-size: rem-calc(13);
I am using Bootstrap v3 for a layout and have added a dropdown to the navbar but when I add btn-primary the text is black so cannot be seen, if I remove the btn-primary then the corner radius seems to overlap the menu.
Any help is appreciated.
<div class="container">
<div class="col-md-12 column">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="Javascript:void(0);">Title Information </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown btn-primary">
<a class="dropdown-toggle btn-primary" href="Javascript:void(0);" data-toggle="dropdown">Actions<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
Action 1
</li>
<li>
Action 2
</li>
<li>
Action 3
</li>
<li class="divider"></li>
<li>
Close
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div role="tabpanel" class="col-md-12 column">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
</div>
</div>
</div>
some images:
https://www.dropbox.com/s/fuirgtcfc0obl04/Image1.JPG?dl=0
https://www.dropbox.com/s/en0vooc1z99hbkh/Image2.JPG?dl=0
Take out the "btn-primary" but change it to "btn" only, that should fix it.
Remove both btn-primary classes, as these aren't required.
You also have </div> and </nav> closing in the wrong order, and two extra </div> at the bottom of your code.
With the btn-primary removed, and the above fixed, then you get the following:
https://jsfiddle.net/9jym0k8r/
You can customize the style of bootstrap button.
I just added this to change the color of text :
.navbar-default .navbar-nav>li>a {
color: #FFF;
}
Link Demo : http://www.bootply.com/Ukp9KCUuFP
You can also give an "unique id" then customize the style for this button.
<a id="test" class="dropdown-toggle btn-primary" href="Javascript:void(0);" data-toggle="dropdown">Actions<strong class="caret"></strong></a>
css:
#test {
color:white;
}
#test:hover{
color:black;
}
Link : http://www.bootply.com/XWF4x6uhmz
I created nav-pills with Twitter bootstrap 3.
Everything is fine except dropdowns.
Documentation shows the layout for tab links, but not for the content: http://getbootstrap.com/components/#nav-dropdowns
I want to show content when user selects one of the dropdown links.
Fiddle is like this: http://jsfiddle.net/mavent/skL5H/3/
<div class="tabbable">
<ul class="nav nav-tabs nav-pills" id="myTab">
<li class="active"> Part 1
</li>
<li class=""> Part 2
</li>
<li class="dropdown"> Activity <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
</ul>
</li>
</ul>
<br>
<div class="tab-content">
<div class="tab-pane active" id="tab1">aaaaaaaaaaaa</div>
<div class="tab-pane" id="tab2">bbbbbbbbbbbb</div>
<div class="tab-pane" id="tab3">cccccccccccccc</div>
<div class="tab-pane" id="tab4">dddddddddddddd</div>
</div>
</div>
Add data-toggle="dropdown" to the links in the .dropdown-menu.
http://jsfiddle.net/skL5H/5/