*Bootstrap-Pattern* are helpful if you are using the [Bootstrap CSS Framework](http://getbootstrap.com), the pattern spend you an easy access to some standard solutions which fit to the Content Management System and the Bootstrap Framework. If you are not using [Bootstrap](http://getbootstrap.com) you should use the [Classic Pattern](Classsic-Pattern) instead. A *Pattern* is a [Twig Template](Twig-Service.md) you can include or extend within your Template `php` or `twig` file, the *Bootstrap Pattern* complete the [Bootstrap Service](Bootstrap-Service). ## Bootstrap Pattern Templates * [`@pattern/bootstrap/browser.check.twig`](#browser-check) * [`@pattern/bootstrap/head.open.graph.twig`](#head-open-graph) * [`@pattern/bootstrap/head.simple.twig`](#head-simple) * [`@pattern/bootstrap/html.simple.twig`](html-simple) * [`@pattern/bootstrap/login.inline.twig`](#login-inline) * [`@pattern/bootstrap/login.twig`](#login) * [`@pattern/bootstrap/maintenance.twig`](#maintenance) * [`@pattern/bootstrap/search.div.twig`](#search-div) * [`@pattern/bootstrap/search.form.twig`](#search-form) * [`@pattern/bootstrap/social.sharing.buttons.twig`](#social-sharing-buttons) ###`@pattern/bootstrap/browser.check.twig` Usage `php` display('@pattern/bootstrap/browser.check.twig'); ?> Usage `twig`, [including the pattern](http://twig.sensiolabs.org/doc/tags/include.html) {% include '@pattern/bootstrap/browser.check.twig' %} Require * `pattern.min.css` * `/image/warning.gif` This pattern is using the [Browser Service](Browser-Service) to detect browsers which are out of date and to show a small warning in the style of [Browser-Update.org](http://browser-update.org). In different to the origin Browser-Update.org script this pattern does not need any JavaScript and can be easy adapted and changed by you. If the pattern detect an outdated browser it will show a small hint which can be placed at the top of the website and link to the [update page of Browser-Update.org](http://www.browser-update.org/en/update.html), you can change this too. ###`@pattern/bootstrap/head.open.graph.twig` Usage `php` display('@pattern/bootstrap/head.open.graph.twig'); ?> Usage `twig`, [including the pattern](http://twig.sensiolabs.org/doc/tags/include.html) {% include '@pattern/bootstrap/head.open.graph.twig' %} This `` segment provide you with the Facebook Open Graph Meta Tags: {% set image = page_image() %} {% if image|length > 0 %} {% endif %} these tags grant, that the page will be linked correct and use the in `og:image` specified image. The function [`page_image()`](CMS-Service#page_image) will grab the first image from a WYSIWYG, NEWS, TOPICS or flexContent article and can also fallback to an default image. ###`@pattern/bootstrap/head.simple.twig` Usage `php` display('@pattern/bootstrap/head.simple.twig'); ?> Usage `twig`, [including the pattern](http://twig.sensiolabs.org/doc/tags/include.html) {% include '@pattern/bootstrap/head.simple.twig' %} Usage `twig`, [extending the pattern](http://twig.sensiolabs.org/doc/tags/extends.html) {% extends '@pattern/bootstrap/head.simple.twig' %} The `head.simple.twig` return a complete ` ... ` section with all needed `` tags, setting page title, description and keywords and loading standard `css` files (also a `/css/screen.css` if it exists in your template directory) and `jQuery` files for the installed add-ons. **This pattern will also load all needed `css` and `js` files for the *latest* Bootstrap Version from the local [kitFramework Library](https://github.com/phpManufaktur/kfLibrary).** You can display the pattern using `php` or [include](http://twig.sensiolabs.org/doc/tags/include.html) it with `twig` without any changes. You can also use the pattern as base and [extend it](http://twig.sensiolabs.org/doc/tags/extends.html) within your template, keeping the original code. The pattern `head.simple.twig` enable you to extend the following blocks: * `meta` - block for the `` tags * `css` - block for the `css` files * `jquery` - block for the jQuery files use the function `parent()` to keep the original block content and then to add your own content. Example: {% extends '@pattern/bootstrap/head.simple.twig' %} {% block css %} {{ parent() }} {% endblock css %} will keep the pattern intact and load `/css/print.css` below all other `css` files. ###`@pattern/bootstrap/html.simple.twig` Usage `twig`, [extending the pattern](http://twig.sensiolabs.org/doc/tags/extends.html) {% extends '@pattern/bootstrap/html.simple.twig' %} This pattern contain a `` skeleton, a complete `` section (see also [`head.simple.twig`](#head-simple)) and a empty block `body` to enable you to fill in your own body content. {% extends '@pattern/bootstrap/html.simple.twig' %} {% block body %}
{{ bootstrap_nav('nav nav-tabs') }}
{{ page_content() }}
{% endblock %} will generate a complete template for a simple website with [Bootstrap Navigation Tabs](http://getbootstrap.com/components/#nav-tabs) at the top. ###`@pattern/bootstrap/login.inline.twig` Usage `php` display('@pattern/bootstrap/login.inline.twig'); ?> Usage `twig`, [including the pattern](http://twig.sensiolabs.org/doc/tags/include.html) {% include '@pattern/bootstrap/login.inline.twig' %} This pattern will return a ready to use login dialog with all checks and features you normally will need. **This pattern will be created as [Bootstrap Inline Form](http://getbootstrap.com/css/#forms-inline).** Have look into the source, you will see that it is easy to format and adapt the dialog(s) to your needs. ###`@pattern/bootstrap/login.twig` Usage `php` display('@pattern/bootstrap/login.twig'); ?> Usage `twig`, [including the pattern](http://twig.sensiolabs.org/doc/tags/include.html) {% include '@pattern/bootstrap/login.twig' %} This pattern will return a ready to use login dialog with all checks and features you normally will need. **This pattern will be created as [Bootstrap Basic Form](http://getbootstrap.com/css/#forms-example).** Have look into the source, you will see that it is easy to format and adapt the dialog(s) to your needs. ###`@pattern/bootstrap/maintenance.twig` Usage `php` display('@pattern/bootstrap/maintenance.twig'); ?> Usage `twig`, [include the pattern](http://twig.sensiolabs.org/doc/tags/include.html) {% include '@pattern/bootstrap/maintenance.twig' %} This pattern will show a simple hint that the website is currently offline due service operations. The `robots` meta tag is set to `noindex,nofollow`. ###`@pattern/bootstrap/search.div.twig` Usage `php` display('@pattern/bootstrap/search.div.twig'); ?> Usage `twig`, [including the pattern](http://twig.sensiolabs.org/doc/tags/include.html) {% include '@pattern/bootstrap/search.div.twig' %} This pattern will return a complete responsive search dialog in Bootstrap Style as `
` container you can use everywhere within your template. Have look into the source, you will see that it is easy to format and adapt the dialog(s) to your needs. ###`@pattern/bootstrap/search.form.twig` Usage `php` display('@pattern/bootstrap/search.form.twig'); ?> Usage `twig`, [including the pattern](http://twig.sensiolabs.org/doc/tags/include.html) {% include '@pattern/bootstrap/search.form.twig' %} This pattern will return only the naked search form in Bootstrap Basic Style without any formatting container around, you can use this pattern to create your own search dialog. ###`@pattern/bootstrap/social.sharing.buttons.twig` Usage `php` display('@pattern/bootstrap/social.sharing.buttons.twig'); ?> Usage `twig`, [including the pattern](http://twig.sensiolabs.org/doc/tags/include.html) {% include '@pattern/bootstrap/social.sharing.buttons.twig' with { 'buttons': { 'email': { 'to': 'foo@foobar.tld', 'subject': 'Any subject' 'body': 'Any email body content', 'cc': 'cc@foobar.tld,second@foobar,tld' }, 'facebook': { 'url': PAGE_URL }, 'tumblr': { 'url': PAGE_URL, 'title': PAGE_TITLE }, 'linkedin': { 'url': PAGE_URL, 'title': PAGE_TITLE, 'description': PAGE_DESCRIPTION }, 'twitter': { 'url': PAGE_URL, 'title': PAGE_TITLE }, 'reddit': { 'url': PAGE_URL }, 'google': { 'url': PAGE_URL }, 'pinterest': { 'url': PAGE_URL, 'media': '' }, 'github': { 'url': 'https://github.com/owner/repository' } }}' %} 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 an empty array as parameter, i.e.: {% include '@pattern/bootstrap/social.sharing.buttons.twig' with { 'buttons': { 'facebook': {}, 'twitter': {}, 'google': {} }} %} will be working fine and showing the buttons for Facebook, Twitter and Google+. ⇐ [[Pattern Overview|Pattern]] | [[Classic Pattern]] ⇒