Solved thread

This post is marked as solved. If you think the information contained on this thread must be part of the official documentation, please contribute submitting a pull request to its repository.

how to use bootstrap (get from composer) in phalcon

hello everyone, in my project i need use bootstrap, so i download it by composer, then its in vendor dir, and now i will how to use bootstrap css and js, hope you answer for me soon ,thank a lot



34.6k

I think bad idea, but you can add css via assets Phalcon

venodr /
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

as Thien said.

Also make sure you put them in the public directory of your application, otherwise won't be found when you access your application. Or minify them with the asset manager and set the output on public directory.

https://docs.phalconphp.com/en/latest/reference/assets.html



12.1k
edited Jul '15

so in my index.volt. like this? <!-- bootstrap 框架 --> {{ stylesheet_link('/vendor/twbs/bootstrap/dist/css/materialize.css') }}



12.1k

how to do a good methed?



34.6k
Accepted
answer

Hi

If you want to assets, you can follow example below:

  • Step 1: Defined a layout such as:
<!DOCTYPE html>
<html lang="en" class="app">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content=" TEAM">
        <link rel="shortcut icon" href="{{ url('images/favicon.png') }}">
        <meta property="og:title" content="">
        <meta property="og:type" content="website">
        <meta property="og:image" content="">
        <meta property="og:url" content="h">
        <title></title>

        {{ this.assets.outputCss() }}
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="js/ie/html5shiv.js"></script>
        <script src="js/ie/respond.min.js"></script>
        <script src="js/ie/excanvas.js"></script>
        <![endif]-->
    </head>

    <body>
        <section class="home">
            {% block content %}{% endblock %}
        </section><!-- end section class vbox -->
        {{ this.assets.outputJs() }}
        {% block scripts %}{% endblock %}
    </body>
</html>
  • Step 2: Create a controllerBase such as:
    class ControllerBase extends Controller
    {
    [...]
    /**
     *
     */
    public function initialize()
    {
        $this->loadDefaultAssets();
    }

    /**
     * loadDefaultAssets function.
     *
     * @access private
     * @return void
     */
    private function loadDefaultAssets()
    {
        $this->assets
            ->addCss(
                '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css',
                false
            )//rollback from 3.2.0 - changes on tables
            ->addCss('//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css', false)
            ->addCss('css/animate.css')
            ->addCss('css/icon.css')
            ->addCss('css/font.css')
            ->addCss('css/app.v1.css')
            ->addCss('js/growl/jquery.growl.css')
            ->addCss('css/jquery.taginput.css')
            ->addCss('css/app-custom.css');

        $this->assets
            ->addJs('//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', false)
            ->addJs('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js', false)
            ->addJs('//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js', false)
            ->addJs('js/growl/jquery.growl.js')
            ->addJs('js/jquery.taginput.src.js')
            ->addJs('js/app.js')
            ->addJs('js/app.plugin-custom.js');
    }

I'm use it for my project