Typo3 BootStrap 3 navbar (typoscript) - twitter-bootstrap-3

Question

Hi I am new to typoscript and I need help in getting the menu working. The following typoscript will render the Bootstrap navbar, yet the menu is thrown out of the navbar completely without css styles.
topnavigation = HMENU
topnavigation.wrap (
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="http://www.example.com">Brand</a></div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
)
topnavigation.entryLevel = 0
topnavigation {
1= TMENU
1 {
expAll = 1
maxItems = 4
NO.wrapItemAndSub = <li>|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="active">|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub= <li class="active dropdown">|</li>
}
2= TMENU
2 {
wrap = <ul class="dropdown-menu">|</ul>
NO.wrapItemAndSub = <li>|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="active">|</li>
}
}
Please help

Answer 1

You haven't pipe symbol in your topnavigation.wrap anywhere...
Each wrap should use pipe symbol | in the place where the wrapped content should be placed, as i.e. in your TMENU:
NO.wrapItemAndSub = <li>|</li>
Anyway your general wrap with this whole Bootstrap markup doesn't have it, most probably that's the reason of wrong rendering...
Most probably it should be somewhere there:
...
<ul class="nav navbar-nav">|</ul>
...
BTW, use browser's inspector tools to check what's missing, we can only guess.

Answer 2

Biesior, thanks for pipe suggestions, it did set me in the right direction. After a load of research and hacking (not being a coder and alien to typoscript), I managed to get the bootstrap 3 inverse navbar working correctly with in typo3.
The following code works out of the box.
topnavigation = HMENU
topnavigation.wrap (
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.example.com">Your Company Name or Logo</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">|</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
)
topnavigation.entryLevel = 0
topnavigation {
1 = TMENU
1 {
expAll = 1
NO.allWrap = <li>|</li>
NO.ATagTitle.field = abstract // description // title
ACT = 1
ACT.wrapItemAndSub = <li class="active">|</li>
ACT.ATagTitle.field = abstract // description // title
IFSUB = 1
IFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
IFSUB.after = <b class="caret"></b></a>
IFSUB.doNotLinkIt = 1
IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
IFSUB.ATagTitle.field = abstract // description // title
ACTIFSUB = 1
ACTIFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
ACTIFSUB.after = <b class="caret"></b></a>
ACTIFSUB.doNotLinkIt = 1
ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
ACTIFSUB.ATagTitle.field = abstract // description // title
}
2 = TMENU
2 {
expAll = 1
ACT = 1
ACT.wrapItemAndSub = <li class="active">|</li>
ACT.ATagTitle.field = abstract // description // title
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub = |
ACTIFSUB.before = <li class="divider"></li><li class="nav-header">
ACTIFSUB.after = </li>
ACTIFSUB.doNotLinkIt = 1
ACTIFSUB.ATagTitle.field = abstract // description // title
NO.allWrap = <li>|</li>
NO.ATagTitle.field = abstract // description // title
IFSUB = 1
IFSUB.before = <li class="divider"></li><li class="nav-header">
IFSUB.after = </li>
IFSUB.doNotLinkIt = 1
IFSUB.ATagTitle.field = abstract // description // title
SPC = 1
SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li>
wrap = <ul class="dropdown-menu">|</ul>
}
3 = TMENU
3 {
NO.allWrap = <li>|</li>
NO.ATagTitle.field = abstract // description // title
ACT = 1
ACT.wrapItemAndSub = <li class="active">|</li>
ACT.ATagTitle.field = abstract // description // title
}
}
Remember to refer to the extension in the main page (fileadmin/your_template/layouts/your_main_page.html)
<f:cObject typoscriptObjectPath="topnavigation" />