We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.
  1. Home
  2. MVC

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



58.4k

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


16.0k

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.phalcon.io/en/latest/reference/assets.html



27.0k
in reply to Thien Tran

thanks a lot



27.0k
in reply to Stefan Chiriac
edited Jul '15

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



27.0k
in reply to Thien Tran

how to do a good methed?



58.4k
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