简体   繁体   中英

Bootstrap 3 not working in Symfony3

I've just started to learn Symfony3, and I'm trying to theme my form using bootstrap3. According to the documentation , bootstrap_3_layout.html.twig is built-in and can be activated globally by altering the Twig settings in config.yml :

# Twig Configuration
twig:
    debug:            "%kernel.debug%"
    strict_variables: "%kernel.debug%"
    form_themes: 
        - "bootstrap_3_layout.html.twig"

When I reload the page, the page loads without CSS, the twig file and page source are as follows:

{# app/Resources/views/experiment/new.html.twig #}

{{ form_start(form) }}
{{ form_widget(form) }}
{{ form_end(form) }}


<form name="form" method="post">
<div id="form"><div class="form-group"><label class="control-label required" for="form_title">Title</label><input type="text" id="form_title" name="form[title]" required="required" class="form-control" /></div><div class="form-group"><button type="submit" id="form_save" name="form[save]" class="btn-default btn">Create Task</button></div><input type="hidden" id="form__token" name="form[_token]" class="form-control" value="O7tN2AUjyLByEz2tkNf675jqixxjev0p4ivzs5Bn4VA" /></div>
</form>

Which shows the bootstrap3 classes have been injected correctly. The site itself looks like this:

在此输入图像描述

What step(s) have I missed to get the CSS to work correctly?

You still have to add the bootstrap files, CSS and JS, to your application and templates. The form theme only ensures that the markup is well formed according to bootstrap.

As an alternativ way you could include the bundle

https://github.com/phiamo/MopaBootstrapBundle

Into your Project and get the Bootstrap files (sass/less) Into your Project.

Documentation on Installation is also available on that Page. I'm using an self written integration that uses quite similar methods to.

Advantage is, that you can include custom sass into your project and compile into one single css file that you include in the template header.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM