Integrare Bootstrap in sabloane - Tutorial Symfony

Postat la Sun 19 July 2015 in tutoriale, symfony 2

Cei mai multi dezvoltatori nu au talente extraordinare in scrierea de CSS si cel mai des utilizeaza librarii CSS existe ce ofera cam tot ce e necesar pentru realizarea de interfete corespunzatoare pentru utilizatori. Dintre cele mai utilzate sunt Bootstrap si Foundation

Vom vorbi despre integrarea Bootstrap intr-un proiect Symfony 2 prin Composer.

Pentru asta vom include ca dependinte ale proiectului in fisierul composer.json:

1
2
3
4
5
"require": {
    ...
    "twitter/bootstrap": "3.*",
    "components/jquery": "1.11.1"
}

Adaugam de asemenea in fisierul app\config\config.yml pentru ca aceste librarii sa fie accesibile prin functia Assetic:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# Assetic Configuration
assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ '*Place your bundle names here*' ]

    filters:
        cssrewrite: ~
    assets:
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/js/bootstrap.js
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/css/bootstrap.css
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/css/bootstrap-theme.css
            filters: [cssrewrite]

        bootstrap_glyphicons_ttf:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
            output: "fonts/glyphicons-halflings-regular.ttf"
        bootstrap_glyphicons_eot:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
            output: "fonts/glyphicons-halflings-regular.eot"
        bootstrap_glyphicons_svg:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
            output: "fonts/glyphicons-halflings-regular.svg"
        bootstrap_glyphicons_woff:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
            output: "fonts/glyphicons-halflings-regular.woff"

        jquery:
            inputs:
                - %kernel.root_dir%/../vendor/components/jquery/jquery.js

Acum putem include aceste librarii in sablonul principal

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        ...
        {% stylesheets '@bootstrap_css' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
        {% endstylesheets %}
        ...
    </head>
    <body>
        ...
        {% javascripts '@jquery' '@bootstrap_js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}
    </body>
</html>

Mai recomand sa modificati si fisierul app\config\security.yml in cazul cand folositi reguli de access a paginilor, incluzand fonts in lista celor ce sunt accesibile:

1
2
3
4
5
firewalls:
        # disables authentication for assets and the profiler, adapt it according to your needs
        dev:
            pattern:  ^/(_(profiler|wdt)|css|images|js|fonts)/
            security: false

Mai multe despre gestionare asset-urilor gasiti aici.

Anterior - Utilizare sabloane

tutoriale symfony symfony 2