Less is not required, but is extremely helpful when using bootstrap3 variables, or mixins, If you want to have a easier life, have a look into:
Sass is not required, but is extremely helpful when using bootstrap3 variables, or mixins, If you want to have an easier life, have a look into:
Have a look at the provided base.html.twig its a fully working bootstrap layout for usage without less or sass, and might explain howto use it by itself.
There is also a base_less.html.twig its layout is less.
There is also a base_sass.html.twig its layout is sass.
- (If you are using Bootstrap 3.2+ for SASS please use base_sass_3.2.html.twig)
There is also a base_lessjs.html.twig with clientside less.js. This is currently not recommended, because you need to setup bootstrap and the less files to use it yourself.
To make use of the supplied base.html.twig template just use it, or defining a new template:
app/Resources/MopaBootstrapBundle/views/layout.html.twig
{% extends '@MopaBootstrap/base.html.twig' %}
{% block title %}Yourapp{% endblock %}
{# and define more blocks ... #}
You are free to overwrite any defined blocks. Have a look into the sandbox too:
- http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/layout
- https://github.com/phiamo/symfony-bootstrap-sandbox/blob/master/app/Resources/MopaBootstrapBundle/views/layout.html.twig
If you are using less just include the your.less:
{% stylesheets filter='less,cssrewrite,?yui_css'
'@YourNiceBundle/Resources/public/less/your.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}If you are using Sass just include your.scss instead
{% stylesheets filter='?yui_css'
'@YourNiceBundle/Resources/public/sass/your.scss*'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}Depending on where your bundle exacly resides (e.g. Your\Smthbundle or Your\Bundle\SmthBundle) you need to adapt the path ( ../ ):
// Getting the whole mopabootstrapbundle.less
@import "../../../../../../../vendor/mopa/bootstrap-bundle/Mopa/Bundle/BootstrapBundle/Resources/public/less/mopabootstrapbundle.less";
// same for scss files
@import "../../../../../../../vendor/mopa/bootstrap-bundle/Mopa/Bundle/BootstrapBundle/Resources/public/sass/mopabootstrapbundle.scss";
// if you are using Bootstrap 3.2+ for SASS
@import "../../../../../../../vendor/mopa/bootstrap-bundle/Mopa/Bundle/BootstrapBundle/Resources/public/sass/mopabootstrapbundle-3.2.scss";If you would like to use the css try this:
cd vendor/mopa/bootstrap-bundle/Mopa/Bundle/BootstrapBundle/Resources/public/bootstrap
make{% block head_style %}
{% stylesheets filter='cssrewrite,?yui_css'
'@MopaBootstrapBundle/Resources/public/bootstrap/bootstrap.css'
'@YourNiceBundle/Resources/public/css/*'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet"
media="screen" />
{% endstylesheets %}
{% endblock %}if it doesnt work, why not use the less or sass way?
<< Installation | Form Extensions >>