Header and Brandbar
Basic:
To add an additional bar in the header with the kaba brand you just
have to prepend an additional div before the .navbar of bootstrap.
For the markup of the navigation bar go to bootstrap navbar.
<div class="header">
<div class="brandbar brandbar-xsmall">
<a href="/" class="brand"></a>
<div class="statusbar pull-right">
<strong>Welcome</strong> Hans Mustermann
<span class="label label-warning">Admin Status</span>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
...
</div>
</div>
</div>
Collapsible:
To have the brandbar collapsible you just need to add some additional classes plus add a toggle button to the navbar.
To have this working you will have to add the kesign.js to your page!
<div class="header">
<div class="brandbar brandbar-xsmall collapse in">
<a href="/" class="brand"></a>
<div class="statusbar pull-right">
<strong>Welcome</strong> Hans Mustermann
<span class="label label-warning">Admin Status</span>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-small pull-right">
<li>
<a href="#" class="toggleBrandbar"
data-toggle="collapse" data-target=".brandbar">
<i class="icon-chevron-up></i>
</a>
</li>
</ul>
</div>
</div>
</div>
fixed at top:
While the regular header will move on page scroll you can fix the header to the top by
just adding the class .header-fixed-top to the container of the brand- and navbar.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<div class="header header-fixed-top">
<div class="brandbar brandbar-xsmall">
<a href="/" class="brand"></a>
<div class="statusbar pull-right">
<strong>Welcome</strong> Hans Mustermann
<span class="label label-warning">Admin Status</span>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
...
</div>
</div>
</div>
Page / Main Content Area
Basic:
To add the page to the site just add another div with class .page after your header.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<div class="header">
...
</div>
<div class="main">
<div class="page"></div>
</div>
to have the page centered wrap a div with class `.container` (bootstrap layout class) around the page:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Sidebar
Basic:
To add the sidebar to the site just add another div with class .sidebar before your page.
For the markup of the navigation list go to bootstrap nav list.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<div class="header">
...
</div>
<div class="main">
<div class="sidebar">
<ul class="nav nav-list">
<li><a href="#">link 1</a></li>
</ul>
</div>
<div class="page"></div>
</div>
to have the __sidebar__ fixed you could:
- add the class `.sidebar-fixed` to the sidebar (if the header is fixed, too)
- or use the affix javascript extension of twitter bootstrap
Responsive:
Change the markup like in given example. To see the effect change screen width to under 480px
<div class="sidebar">
<a class="btn btn-sidebar" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="sidebar-collapse">
<ul class="nav nav-list">
<li><a href="#">link 1</a></li>
</ul>
</div>
</div>
Adding Accordion to the sidebar:
For the markup of the navigation list go to bootstrap nav list.
For the futher information on collapsible go tobootstrap collapse js.
<div class="sidebar">
<a class="btn btn-sidebar" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="sidebar-collapse">
<ul id="accordion1" class="nav nav-list">
<li class="accordion-group" data-toggle="collapse"
data-target="#acc-group1" data-parent="#accordion1">
<div class="accordion-header">accordion group 1</div>
<ul id="acc-group1" class="nav nav-list collapse in">
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
</ul>
</li>
<li class="accordion-group" data-toggle="collapse"
data-target="#acc-group2" data-parent="#accordion1">
<div class="accordion-header">accordion group 2</div>
<ul id="acc-group2" class="nav nav-list collapse in">
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
Widget container
Basic:
The widget container separates different parts of the application on one page.
Widget title without icon
content...
<div class="widget">
<div class="widget-header">
<h3>Title</h3>
</div>
<div class="widget-content">content...</div>
</div>
Add a footer:
Widget title with icon
content...
<div class="widget">
<div class="widget-header">
<i class="icon-envelope-alt"></i>
<h3>Title</h3>
</div>
<div class="widget-content">content...</div>
<div class="widget-footer">
<div class="pull-right">
<button class="btn">a button</button>
</div>
</div>
</div>
Add an icon:
Widget title with icon
content...
<div class="widget">
<div class="widget-header">
<i class="icon-envelope-alt"></i>
<h3>Title</h3>
</div>
<div class="widget-content">content...</div>
</div>
Adding some action-links:
<div class="widget">
<div class="widget-header">
<i class="icon-envelope-alt"></i>
<h3>Title</h3>
<ul class="commands pull-right">
<li><a href="#"><i class="icon-copy"></i>copy</a></li>
<li><a href="#"><i class="icon-paste"></i>paste</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-save"></i>save</a></li>
</ul>
</div>
<div class="widget-content">content...</div>
</div>
only action-links:
<div class="widget">
<div class="widget-header">
<ul class="commands">
<li><a href="#"><i class="icon-copy"></i>copy</a></li>
<li><a href="#"><i class="icon-paste"></i>paste</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-save"></i>save</a></li>
</ul>
</div>
<div class="widget-content">content...</div>
</div>
Tabs with action-links:
For the markup of the tab bar go to bootstrap tabs.
<div class="widget">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div id="tab1" class="tab-pane active">
<div class="widget-header">
<ul class="commands pull-right">
<li><a href="#"><i class="icon-copy"></i>copy</a></li>
<li><a href="#"><i class="icon-paste"></i>paste</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-save"></i>save</a></li>
</ul>
</div>
<div class="widget-content">content...</div>
</div>
<div id="tab2" class="tab-pane">
<div class="widget-header">
<ul class="commands pull-right">
<li><a href="#"><i class="icon-save"></i>save</a></li>
</ul>
</div>
<div class="widget-content">content...</div>
</div>
</div>
widget data grid:
For the markup of tables go to bootstrap table.
For an extended datatable sample with paging, sorting and filtering go to the datatable sample.
<div class="widget">
<div class="widget-header">
<i class="icon-table"></i>
<h3>Title</h3>
<ul class="commands pull-right">
<li><a href="#"><i class="icon-copy"></i>copy</a></li>
<li><a href="#"><i class="icon-paste"></i>paste</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-save"></i>save</a></li>
</ul>
</div>
<div class="widget-table">
<div class="widget-content">
<table class="table">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
</div>
</div>
Footer
Basic:
To add an optional footer bar to the application add a div with
class .footer to the end of the body tag.
Alternatively you can add a navigation bar bootstrap navbar.
Hello Mr. Footer
<div class="footer"></div>to fix the footer at the bottom just add the class `.footer-fixed-bottom`:
<div class="footer footer-fixed-bottom"></div>