README

这个 Bootstrap 主题是一个简单的方式来在您的 Symfony2 应用程序中使用谷歌的新 Material Design 指南。

注意：此主题仍在开发中，它可以用于生产网站，但我不能保证与旧版本的兼容性。

如何安装

将以下行添加到您的 composer.json 文件中："timhovius/bootstrap-material-design": "dev-master"
运行 php composer.phar install，现在可以使用此组件。

### 奖励如果您想与 BraincraftedBootstrapBundle 一起使用此组件，您需要在您的 config.yml 中添加以下行：

# Assetic Confguration
...
assets:
    bootstrap_css:
        inputs:
            - %kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less
            - %kernel.root_dir%/../vendor/timhovius/bootstrap-material-design/less/ripples.less
            - %kernel.root_dir%/../vendor/timhovius/bootstrap-material-design/less/material.less
            - %kernel.root_dir%/../vendor/braincrafted/bootstrap-bundle/Braincrafted/Bundle/BootstrapBundle/Resources/less/form.less
        filters:
            - less
            - cssrewrite
        output: css/material.css
    bootstrap_js:
        inputs:
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/transition.js
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/alert.js
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/button.js
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/carousel.js
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/collapse.js
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/dropdown.js
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/modal.js
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/tooltip.js
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/popover.js
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/scrollspy.js
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/tab.js
            - %kernel.root_dir%/../vendor/twbs/bootstrap/js/affix.js
            - %kernel.root_dir%/../vendor/timhovius/bootstrap-material-design/scripts/ripples.js
            - %kernel.root_dir%/../vendor/timhovius/bootstrap-material-design/scripts/material.js
            - %kernel.root_dir%/../vendor/braincrafted/bootstrap-bundle/Braincrafted/Bundle/BootstrapBundle/Resources/js/bc-bootstrap-collection.js
        output: js/material.js

并在 braincrafted_bootstrap 部分，将 assetic 设置为 false，并将 assets_dir 设置为 bootstrap-material-design 文件夹。

braincrafted_bootstrap:
    ...
    assets_dir: %kernel.root_dir%/../vendor/timhovius/bootstrap-material-design
    ...
    auto_configure:
        assetic: false
        ...

您可以使用 BraincraftedBootstrapBundle 中的基本模板来包含 CSS 和 JavaScript 文件。

<!DOCTYPE html>
<html>
<head>

    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="{{ asset('css/material.css') }}" rel="stylesheet" media="screen">

    <!-- HTML5 Shim and Respond.js add IE8 support of HTML5 elements and media queries -->
    {% include 'BraincraftedBootstrapBundle::ie8-support.html.twig' %}

</head>

<body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstraps JavaScript plugins) -->
    <script src="{{ asset('js/jquery.js') }}"></script>
    <!-- Include all JavaScripts, compiled by Assetic -->
    <script src="{{ asset('js/material.js') }}"></script>
    <!-- Enable Android effects -->
    <script>
        $(function() {
            $.material.init();
        });
    </script>
</body>
</html>

material-wfont.less 或 material.less？

唯一的区别是 material-wfont.less 包含了谷歌网络字体。

文档

Bootstrap 的 Material Design 提供了一些额外的功能，以充分利用 Material Design。

变体

除了经典的 4 种变体外，还有 17 种额外的颜色变体（按钮、输入、复选框、单选按钮、警告、导航栏、标签页、标签、分页、进度条等）。可以通过将类后缀 -material-color 添加到所需元素并将 color 替换为所需的颜色来实现。

示例

<button class="btn btn-material-deep-purple">Deep purple button</button>

以下颜色来自 Material Design 颜色板，如下所示

按钮

将 .btn-flat 添加到按钮以使其扁平，不带阴影。将 .btn-raised 添加到按钮以添加永久阴影。

输入

将 .floating-label 添加到具有 placeholder 的输入字段，将占位符转换为浮动标签。

将 data-hint="some hint" 添加到输入，当用户聚焦时显示提示。

请记住使用适当的 HTML 标记以正确地样式化单选按钮和复选框（在 单选按钮 或 复选框 之间选择）

<div class="radio/checkbox radio-primary">
    <label>
        <input type="radio/checkbox" checked>
        Option one is this
    </label>
</div>

图标

Bootstrap 的 Material Design 包含了 490 个原始 Material Design 图标！这些图标是从原始谷歌来源提取的，并使用 BSD 许可证许可。它们以图标和易于使用的字体提供。

每个图标都提供变体，包括原始的 Bootstrap 图标。

添加 Material 图标的语法是

 <i class="icon icon-material-favorite"></i>

Material.js

Material.js 是一个 jQuery 插件，它为您的标记添加了一些魔法，并允许 Bootstrap 的 Material Design 为输入、复选框、单选按钮等元素添加样式。

函数

$.material.init() - 运行所有以下命令的快捷方式
$.material.ripples() 将应用 ripples.js 到默认元素。
$.material.input() 将启用 MD 样式到文本输入和其他类型的输入（数字、电子邮件、文件等）。
$.material.checkbox(): 将启用复选框的MD样式（请记住遵循输入部分中解释的标记指南）。
$.material.radio(): 将启用复选框的MD样式（请记住遵循输入部分中解释的标记指南）。

仅将Material.js应用于特定元素

每个函数都期望一个可选的值，该值将用作函数的选择器；例如，$.material.ripples("#selector, #foobar") 将仅将 Ripples.js 应用于 #selector 和 #foobar。允许使用可选选择器的函数有 $.material.ripples、$.material.input、$.material.checkbox 和 $.material.radio。

您甚至可以使用 $.material.options 函数覆盖默认值。默认值是

$.material.options = {
    "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
    "inputElements": "input.form-control, textarea.form-control, select.form-control",
    "checkboxElements": ".checkbox > label > input[type=checkbox]",
    "radioElements": ".radio > label > input[type=radio]"
}

Arrive.js 支持

如果您需要动态添加元素到您的 DOM 中，那么您可能需要在 Material.js 之前包含 Arrive.js。这将自动将 Material.js 应用到通过 JavaScript 添加的每个新元素。

插件

Material Design for Bootstrap 包含对各种外部脚本的样式支持

SnackbarJS

使用 SnackbarJS 插件创建 snackbars 和 toasts。默认 toast 样式是方形（snackbar 样式）。如果您喜欢使用圆形样式（toast 样式），请将 toast 类添加到 SnackbarJS 的 style 选项。

RipplesJS

这是 Material Design for Bootstrap 项目的一部分，是一个纯 JavaScript 脚本，在点击指定的元素时创建涟漪效果。目前 RipplesJS 没有自己的仓库，但将来可能会拥有。

您可能想要设置特定元素的涟漪的自定义颜色，要这样做请写入

<button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>

noUiSlider

利用这个主题提供的支持制作跨浏览器的滑块，并使用 Material Design 进行样式化。更多关于 noUiSlider 的信息。

Dropdown.js

最后，这是一个将选择输入转换为漂亮的下拉菜单并让您不会发疯的插件。更多关于 Dropdown.js 的信息。

Selectize.js

将选择和多重选择输入转换为高级文本输入。Material Design for BS 提供了该插件的完整 CSS 替换，因此请勿包含它。更多关于 selectize.js 的信息。

兼容性

目前，Material Design for Bootstrap 支持 Google Chrome（已测试 v37+）、Mozilla Firefox（已测试 30+）和 Internet Explorer（已测试 11+）。移动浏览器尚未进行测试，但它们可能可以工作。

timhovius / bootstrap-material-design

维护者

详细信息