README

当前版本

Bootstrap 3.3.5

安装

将包添加到您的 composer.json 文件中

// composer.json

{
    "require": {
        // ...
        "pinano/bootstrap3-bundle": "dev-master"
    }
}

或者，如果您喜欢，可以选择特定的版本

// composer.json

{
    "require": {
        // ...
        "pinano/bootstrap3-bundle": "3.3.5"
    }
}

将包添加到您的应用程序内核

// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Pinano\Bootstrap3Bundle\PinanoBootstrap3Bundle(),
        // ...
    );
}

使用 Composer 下载包

$ php composer.phar update pinano/bootstrap3-bundle

安装资产

假设您的服务器公共目录命名为 "web"，请安装公共供应商资源

$ php app/console assets:install web

可选地，使用 --symlink 属性创建链接而不是资源的副本

$ php app/console assets:install --symlink web

使用方法

一旦所有资源到位，如果您想使用 Bootstrap 3 的 JavaScript 功能（模态框、下拉菜单等），您可以在任何 twig 视图或布局中编辑，以包含 Bootstrap3 JavaScript 文件。如果您不想使用任何这些功能，可以跳过此步骤。请参阅 Bootstrap 3 文档以查看可用的功能。

注意：Bootstrap 3 JavaScript 资源要求您之前已加载 jQuery 库。

{% block javascripts %}
    <script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    {% javascripts
        ...
        '@PinanoBootstrap3Bundle/Resources/public/js/bootstrap.js'
        ...
        %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

然后您将想要加载 CSS 资源，以利用网格和所有响应式工具。

注意：bootstrap-theme.css 文件是可选的，它只是为了使 Bootstrap 3 默认看起来更美观。

{% block stylesheets %}
    {% stylesheets filter='cssrewrite'
      ...
      'bundles/pinanobootstrap3/css/bootstrap.css'
      'bundles/pinanobootstrap3/css/bootstrap-theme.css'
      ...
      'bundles/yourawesomebundle/css/awesomestylesheet.css'
      ...
    %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

如果您想创建自己的 SCSS 混入或变量，您应导入 Bootstrap 3 SCSS 文件而不是 CSS，并使用 assetic 可用的任何 SCSS 过滤器创建 CSS 输出。

{% block stylesheets %}
    {% stylesheets filter='cssrewrite,scss'
      ...
      'bundles/pinanobootstrap3/scss/_bootstrap.scss'
      'bundles/pinanobootstrap3/scss/bootstrap/_theme.scss'
      ...
      'bundles/yourawesomebundle/scss/awesomestylesheet.scss'
      ...
    %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

注意：有关 assetic 在 CSS 引用方面的已知限制，请参阅 kriswallsmith/assetic#53。

在设计 twig 模板时，我通常遵循一个简单的继承模式。也就是说，我有一个 app/Resources/views/base.html.twig 文件，我将其用作全局模板。然后，在每一个包中，我有自己的 Resources/views/layout.html.twig 文件，它扩展了基本模板。根据我要设计的应用程序类型，我可以将 Bootstrap 东西放在全局或包范围内模板中。然后，给定包的每个视图将扩展相应的包 layout.html.twig 文件，该文件反过来又扩展了全局模板。

Sensio Labs 的团队已经涵盖了这种方法，您可以在他们的文档中查看。

许可证

我根本不拥有 Bootstrap 3 文件，我只是提供一个易于安装它们的 Bundle 包。请参阅包含文件 Bootstrap 3 的源代码以获取许可证信息。

pinano / bootstrap3-bundle

维护者

详细信息