If you are using the [Bootstrap](http://getbootstrap.com/) framework to create responsive Templates, the *Bootstrap Service of the TemplateTools* is the icing on the cake for you.

The Bootstrap Service support you with some helpful functions:

* [`$template['bootstrap']->alert()`](#alert)
* [`$template['bootstrap']->breadcrumb()`](#breadcrumb)
* [`$template['bootstrap']->locale_navigation()`](#locale_navigation)
* [`$template['bootstrap']->nav()`](#nav)
* [`$template['bootstrap']->pager()`](#pager)
* [`$template['bootstrap']->sitelinks_navigation()`](#sitelinks_navigation)
* [`$template['bootstrap']->social_sharing_buttons()`](#social_sharing_buttons)

###<a name="alert"></a>`alert()`, `bootstrap_alert()`

Parameter

* `string $message` - the message to alert
* `array $options` - optional, default = `array()`
* `boolean $prompt` - optional, default = `true` (`php` only)

Usage `php`

    <?php $template['bootstrap']->alert("I'm a alert!"); ?>
    
Usage `twig` (as [Function](http://twig.sensiolabs.org/doc/templates.html#functions))

    {{ bootstrap_alert("I'm a alert!") }}

Requirements

* `bootstrap.min.css`
* `jquery.min.js`
* `bootstrap.min.js`

This function create a [Bootstrap Alert Component](http://getbootstrap.com/components/#alerts).

You can use the `$options` array to fit the Alert to your needs:

	{{ bootstrap_alert('Hello %guest%', {
		'type' : 'alert-info',
		'parameter' : {
			'%guest%' : CMS_USER_DISPLAYNAME
		},
		'translate' : true,
		'dismissable' : true,
		'template_directory' : '@pattern/bootstrap/function/alert/'
	}) }}

By default `bootstrap_alert()` will try to translate the `$message`, you can submit `'parameter'` for the [translation](Translator-Service) as array. If you set `'translate'` to `false`, the translation service is switched off and `'parameter'` will be ignored.

If `'dismissable'` is `true` (default), Alert will be shown as [Dismissable Alert](http://getbootstrap.com/components/#alerts-dismissable).

By default the Alert will load the needed templates from the `'template_directory'` => `'@pattern/bootstrap/function/alert/'` - you can define any other namespace to load the templates from.

###<a name="breadcrumb"></a>`breadcrumb()`, `bootstrap_breadcrumb()`

Parameter

* `array $options` - optional, default = `array()`
* `boolean $prompt` - optional, default = `true` (`php` only)

Usage `php`

    <?php $template['bootstrap']->breadcrumb(); ?>
    
Usage `twig` (as [Function](http://twig.sensiolabs.org/doc/templates.html#functions))

    {{ bootstrap_breadcrumb() }}

Requirements

* `bootstrap.min.css`
* `jquery.min.js`
* `bootstrap.min.js`

This function create a Breadcrumb Navigation for the current page as [Bootstrap Breadcrumb Component](http://getbootstrap.com/components/#breadcrumbs).

You can use the `$options` array to fit the Breadcrumb to your needs:

    {{ bootstrap_breadcrumb({
        'link_home' : true,
        'menu_level': 0,
        'template_directory' : '@pattern/bootstrap/function/breadcrumb/'
    }) }}

`'link_home'` is by default `true` and will show a linked Home Icon at the first position of the Breadcrumb.

By default the Breadcrumb will load the needed templates from the `'template_directory'` => `'@pattern/bootstrap/function/breadcrumb/'` - you can define any other namespace to load the templates from.

###<a name="locale_navigation"></a>`locale_navigation()`, `bootstrap_locale_navigation()`

Parameter

* `array $options` - optional, default = `array()`
* `boolean $prompt` - optional, default = `true` (`php` only)

Usage `php`

    <?php $template['bootstrap']->locale_navigation(); ?>
    
Usage `twig` (as [Function](http://twig.sensiolabs.org/doc/templates.html#functions))

    {{ bootstrap_locale_navigation() }}

Requirements

* `pattern.min.css`

This function will create a locale navigation which enable the user to switch between different languages.
`locale_navigation()` will parse the CMS page tree and extract the top level entries to build the locale navigation. The function expect a [page structure for multilingual websites](http://www.websitebaker.org/en/help/designer-guide/multilingual-websites.php?lang=EN) as described in the WebsiteBaker documentation.

`locale_navigation()` expect the language codes in [ISO 639-1](http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) and will provide you with the *international language name* and also with the *native language name*. 

If you have set up your page for German and English languages this will return a navigation with two flags:

![](https://github.com/phpManufaktur/kfTemplateTools/wiki/image/locale_navigation_01.png)

which indicate that *German* is active and *English* can be selected.

By default the navigation will switch to the first page of the selected locale. 

It is more user-friendly to switch from the current page to the fitting page in the selected locale. To realize this, `locale_navigation()` must know which pages belong together.

You can use the [`page_option()`](CMS-Service#page_option) feature and set the option `locale_id` with identical values for the fitting pages. For example, you have a page in English language at:

    http://domain.tld/page/en/about-us.php
    
and a page with the same content but in German language at:

    http://domain.tld/page/de/ueber-uns.php
    
Now you can set the option `locale_id` in keyword field of the page settings of both pages to the value `about`:

    [locale_id:about], Keyword 1, Keyword 2
    
Repeat this for all fitting pages in all languages. `locale_navigation()` will use this information to build fitting links in the language selection.    

If you are using [LEPTON CMS](http://lepton-cms.org) or [BlackCat CMS](http://blackcat-cms.org) you can also set the URL of the pages, which belong together, to the same *name* (see: [Mehrsprachige Webseiten mit LEPTON CMS](https://blog.phpmanufaktur.de/de/article/languagemenu-mehrsprachige-webseiten.php)), `locale_navigation()` will detect the fitting pages and create the correct links.

Use the `$options` array to fit `locale_navigation()` to your needs, `twig` example with the *default* values:

    {{ bootstrap_locale_navigation({
        'locales' : null,
        'menu' : 1,
        'visibility' : [
            'public'
        ],
        'template_directory' : '@pattern/bootstrap/function/locale/'
    }) }}

With `locales` you can manually define the languages to use as array `['de','en','fr']`, select another `menu` as the default, change the `visibility` or the `template_directory`.  

###<a name="nav"></a>`nav()`, `bootstrap_nav()`

Parameter

* `string $class` - the classes you want to use for the [Bootstrap Nav Component](http://getbootstrap.com/components/#nav)
* `array $options` - optional, default = `array()`
* `boolean $prompt` - optional, default = `true` (`php` only)

Usage `php`

    <?php $template['bootstrap']->nav('nav nav-pills'); ?>
    
Usage `twig` (as [Function](http://twig.sensiolabs.org/doc/templates.html#functions))

    {{ bootstrap_nav('nav nav-pills') }}

Requirements

* `bootstrap.min.css`
* `pattern.min.css`
* `jquery.min.js`
* `bootstrap.min.js`

This function generate the  page navigation links from the Content Management System and return it as unsorted `<ul>` list, which can be used within the [Bootstrap Nav Components](http://getbootstrap.com/components/#nav):

* [Nav Pills](http://getbootstrap.com/components/#nav-pills) - parameter `$class` => `nav nav-pills`
* [Nav Tabs](http://getbootstrap.com/components/#nav-tabs) - parameter `$class` => `nav nav-tabs`
* [Navbar](http://getbootstrap.com/components/#navbar) - parameter `$class` => `nav navbar-nav`

You can append additional classes to the parameter `$class`, in example [`nav-justified`](http://getbootstrap.com/components/#nav-justified) or [`nav-stacked`](http://getbootstrap.com/components/#nav-pills).

Use the `$options` array to fit the output of the function to your needs, `twig` example with the *default* values:

    {{ bootstrap_nav('nav nav-pills', {
        'menu_id' : 0,
        'menu_level' : 0,
        'menu_level_max' : -1,
        'indicate_parent' : true,
        'dropdown_link' : {
            'add' : true,
            'divider' : true
        },
        'icons' : {
           'page_id' : {},
            'height' : 15
        },
        'visibility' : [
            'public'
        ],
        'template_directory' : '@pattern/bootstrap/function/nav/'
    }) }}
    
 You can set any option you need in any order:

* `integer 'menu_id'` - default = `0`, usage like in [`show_menu2()`](CMS-Service#show_menu2), `0` will show all menus, `1` will show only the menu with the ID `1` ...
* `integer 'menu_level'` - the menu level at which the list will start: `0` = top level, `1` = second level ...
* `integer 'menu_level_max'` - the maximum level to which up the list will be generated, `-1` will show *all* levels, `2` will show up to the third level ...
* `boolen 'indicate_parent'` - set the class `active` if a page child is active. Useful if you have limited the levels with `'menu_level_max'`, is set to `true` by default.  
* `array 'dropdown_link'` - because the Nav and Navbar Components are responsive and open the drop down menu links at click on the top menu item, they will **not** open the associated content. Therefore all top menu items of a drop down menu should be created as [Menu Link](http://www.websitebaker.org/en/help/user-guide/working-with-wb/pages-administration/modify-pages/menu-link.php?lang=EN) to make Nav and Navbar working as expected. 
* `boolean 'dropdown_link' => 'add'` - default `true`. To avoid problems with the linking of the top menu item of a drop down link, `nav()` will add an extra drop down link, which is needed for [WYSIWYG](http://www.websitebaker.org/en/help/user-guide/working-with-wb/pages-administration/modify-pages/wysiwyg.php) pages. Switch the option `add` to `false` if you are using [Menu Links](http://www.websitebaker.org/en/help/user-guide/working-with-wb/pages-administration/modify-pages/menu-link.php?lang=EN) at the top level.
* `boolean 'dropdown_link' => 'divider'` - default `true`. Add a divider below the extra drop down link to distinguish it.

You can add `icons` or images to the menu links, just insert an array as parameter and specify the `PAGE_ID` and the icon or image to use:

    {{ bootstrap_nav('nav navbar-nav', {
        'icons' : {
            'page_id' : {
    		    118 : 'glyphicon-lock',
    	        120 : 'fa-bookmark-o',
    		     79 : '/media/example.jpg',
    			115 : '/public/example.png'
    		},
            'height' => 20		
        })
    }}
    
This will associate:

* the Glyphicon [`glyphicon-lock`](http://getbootstrap.com/components/#glyphicons-glyphs) to the link for the `PAGE_ID 118` and insert the additional HTML code `<i class="glyphicon glyphicon-lock"></i>`. You can use any `glyphicon-` you want.
* the Font Awesome icon [`fa-bookmark-o`](http://fontawesome.io/icon/bookmark-o/) to the link for the `PAGE_ID 120` and insert the additional HTML code `<i class="fa fa-bookmark-o"></i>`. You can use any `fa-` icon you want, but you must enable Font Awesome in your template, i.e. with: `<link href="<?php echo LIBRARY_URL; ?>/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet" />`
* the image `/media/example.jpg` from the `/media` directory of your CMS to the link for the `PAGE_ID 79` and insert the additional HTML code `<img src="http://yourdomain.tld/media/example.jpg" height="20" alt="Page title" />`. You can also use subdirectories. By default `nav()` will use a `height` of 15 pixel, add `height` to the `icons` options array to specify another height (see example above)
* the image `/public/example.png` from the public media directory of the kitFramework in `/kit2/media/public` to the link for the `PAGE_ID 115` and insert the additional HTML code `<img src="http://yourdomain.tld/kit2/media/public/example.jpg" height="20" alt="Page title" />`. You can also use subdirectories. By default `nav()` will use a `height` of 15 pixel, add `height` to the `icons` options array to specify another height (see example above).

By default `nav()` or `bootstrap_nav()` will show all menu items with the visibility `public`, you can also specify another visibility like `hidden`, `private` or `none`.

By default `nav()` or `bootstrap_nav()` will load the needed `twig` templates from the [`@pattern` Namespace](Twig-Service#namespaces): `'template_directory'` => `'@pattern/bootstrap/function/nav/'`, you also use any other namespace.

###<a name="pager"></a>`pager()`, `bootstrap_pager()`

Parameter

* `array $options` - optional, default = `array()`
* `boolean $prompt` - optional, default = `true` (`php` only)

Usage `php`

    <?php $template['bootstrap']->pager(); ?>
    
Usage `twig` (as [Function](http://twig.sensiolabs.org/doc/templates.html#functions))

    {{ bootstrap_pager() }}

Requirements

* `bootstrap.min.css`

This function create a Pager (Previous / Next Pagination) for the current page as [Bootstrap Breadcrumb Component](http://getbootstrap.com/components/#pagination-pager).

By default the Pager will center the both buttons.

Use the `$options` array to fit the output of the function to your needs, `twig` example with the *default* values:

    {{ bootstrap_pager({
        'previous' : true,
        'next' : true,
        'center' : true,
        'visibility' : [
            'public'
        ],
        'template_directory' : '@pattern/bootstrap/function/pager/'
    }) }}
    
Set `'previous'` or `'next'` to `false` to hide one of these buttons. If you set `'center'` to `false` the buttons will be aligned to the left and right side of the parent container. By default the `'visibility'` is set to `'public'` only, you can add other states, i.e. `'hidden'`.

By default the function will load the needed `twig` templates from the [`@pattern` Namespace](Twig-Service#namespaces): `'template_directory'` => `'@pattern/bootstrap/function/pager/'`, you also use any other namespace.    

###<a name="sitelinks_navigation"></a>`sitelinks_navigation()`, `bootstrap_sitelinks_navigation()`

Parameter

* `integer|string $menu` - the menu to use
* `array $options` - optional, default = `array()`
* `boolean $prompt` - optional, default = `true` (`php` only)

Usage `php`

    <?php $template['bootstrap']->sitelinks_navigation('Teaser'); ?>
    
Usage `twig` (as [Function](http://twig.sensiolabs.org/doc/templates.html#functions))

    {{ bootstrap_sitelinks_navigation('Teaser') }}

Requirements

* `bootstrap.min.css`

This function will return a responsive navigation divided in multiple columns (3, 4 or 6). The menu tree should be build like this schema:

`'Sitelinks'` (as [Menulink](http://www.websitebaker.org/en/help/user-guide/working-with-wb/pages-administration/modify-pages/menu-link.php?lang=EN))<br>
&nbsp;&nbsp;&#8627;`'Column 1'` (as [Menulink](http://www.websitebaker.org/en/help/user-guide/working-with-wb/pages-administration/modify-pages/menu-link.php?lang=EN))<br>
&nbsp;&nbsp;&nbsp;&nbsp;&#8627;`'Link 1'` (any content)<br>
&nbsp;&nbsp;&nbsp;&nbsp;&#8627;`'Link 2'` (any content)<br>
&nbsp;&nbsp;&#8627;`'Column 2'` (as [Menulink](http://www.websitebaker.org/en/help/user-guide/working-with-wb/pages-administration/modify-pages/menu-link.php?lang=EN))<br>
&nbsp;&nbsp;&nbsp;&nbsp;&#8627;`'Link 1'` (any content)<br>
&nbsp;&nbsp;&nbsp;&nbsp;&#8627;`'Link 2'` (any content)<br>
...

Use the `$options` array to fit the output of the function to your needs, `twig` example with the *default* values:

    {{ bootstrap_sitelinks_navigation('Teaser', {
        'level': 0,
        'strict': true,
        'visibility': [
            'public'
        ],
        'template_directory': '@pattern/bootstrap/function/sitelinks/'
    }) }}
    
Use `level` to change the menu level. By default `strict` mode is enabled, the function will only return menu items of type `$menu` - otherwise also return other menu types.     

###<a name="social_sharing_buttons"></a>`social_sharing_buttons()`

Parameter

* `array $buttons` - the buttons to use
* `array $options` - optional, default = `array()`
* `boolean $prompt` - optional, default = `true` (`php` only)

Usage `php`

    <?php $template['bootstrap']->social_sharing_buttons(
    	array(
	    	'email' => array(
	    		'to' => 'foo@foobar.tld',
	    		'subject' => 'Any subject'
	    		'body' => 'Any email body content',
	    		'cc' => 'cc@foobar.tld,second@foobar,tld'
	    	),
	    	'facebook' => array(
	    		'url' => PAGE_URL    		
	    	),
	    	'tumblr' => array(
	    		'url' => PAGE_URL,
	    		'title' => PAGE_TITLE
	    	),
	    	'linkedin' => array(
	    		'url' => PAGE_URL,
	    		'title' => PAGE_TITLE,
	    		'description' => PAGE_DESCRIPTION
	    	),
	    	'twitter' =>array(
	    		'url' => PAGE_URL,
	    		'title' => PAGE_TITLE
	    	),
	    	'reddit' => array(
	    		'url' => PAGE_URL
	        ),
	        'google' =>array(
	        	'url' => PAGE_URL
	        ),
	        'pinterest' => array(
	        	'url' => PAGE_URL,
	        	'media' => ''
	        ),
	        'github' => array(
	        	'url' => 'https =>//github.com/owner/repository'
	        )
	    ),
	    array(
	    	'template_directory' => '@pattern/classic/function/socialsharingbuttons/'
	    ),
	    true
    ); ?>
    
Usage `twig` 

* see [`@pattern/bootstrap/social.sharing.buttons.twig`](Bootstrap-Pattern#social-sharing-buttons)

Requirements

* `rrssb.min.css`
* `jquery.min.js`
* `rrssb.min.js`

The example above is showing all available buttons with their individual parameters. Add only the buttons you need. There are only two buttons where the parameters *must* be set:

* `email` - you must set the parameter `to` and `subject` all other parameters are optional
* `github` - you must set the parameter `url` which is linking to the desired repository

All other buttons are using default parameters, so you can be lazy and set `null` or an empty `array()` as parameter, i.e.:

    <?php $template['bootstrap']->social_sharing_buttons(
    	array(
	    	'facebook' => null,
	    	'twitter' => null,
	    	'google' => null	        
	    )	    
    ); ?>

will be working fine and showing the buttons for Facebook, Twitter and Google+.

&lArr; [[Constants]] | [[Classic Service]] &rArr;