jcvb/bootstrap-material

Bootstrap 3 的材料设计主题

维护者

详细信息

github.com/jcvb/bootstrap-material-design

主页

源代码

问题

安装: 33

依赖: 0

建议: 0

安全: 0

星级: 0

观察者: 2

Forks: 3,447

语言：CSS

dev-master / 0.3.x-dev 2015-09-14 16:24 UTC

Replaces

MIT 605e329d0b80879abbc4ec2630d16742e36fab13

  • JC Valerio <jc.valerio.b.woop@gmail.com>

frameworkbootstrapwebdesignresponsivefront-endmobile-firstmaterial

This package is not auto-updated.

Last update: 2022-01-08 02:59:38 UTC

README

build status gratipay Bower version

banner

这个 Bootstrap 主题是使用 Google 的新 材料设计指南 在基于 Bootstrap 3 的应用程序中的简单方法。只需包含主题，在 Bootstrap CSS 之后，在文档末尾（在 </body> 标签之前）包含 JavaScript，一切都将转换为材料设计（纸张）风格。

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

查看此链接中的 演示。

如何安装

您可以使用 Bower 或 Meteor 安装此主题

  • Bower: bower install bootstrap-material-design
  • Meteor: meteor add fezvrasta:bootstrap-material-design

如果您愿意，可以使用我们官方的 CDN 在项目中包含此框架

入门

导航到此存储库中的 dist/ 文件夹，您将看到 test.html 文件，该文件在 head 部分包含 CSS 包含语句，在 body 部分关闭之前包含 JS 包含语句。您需要将 dist/ 文件夹复制到项目的根目录，确保项目中的所有文件都可以通过 CSS 和 JS 包含语句中提供的相对 URL 访问这些文件。

material-fullpalette.css 或 material.css？

唯一的区别是 material-fullpalette.css 具有完整的颜色调色板，另一个只有主要颜色。

使用自定义颜色作为主要颜色

经常有人询问如何在不直接编辑 bower 包的情况下更改此主题的主要颜色。

您可以通过在项目中创建一个 less 文件来实现这一点

@import "../bower_components/bootstrap-material-design/less/material.less";

// Override @primary color with one took from _colors.less
@primary: @deep-purple;

然后，编译此文件，整个主题将使用您选择的颜色进行编译。

开发

我们使用 Grunt来自动化工作流程和构建过程。请确保您已安装 nodejs 和全局安装了 grunt-cli。在克隆存储库后，运行 npm install 以确保您具有所有开发依赖项。

运行 grunt build 命令以运行测试并编译 less/sass。有关目标的详细信息，请参阅 Gruntfile.js。

运行 grunt test 命令以运行基于浏览器的 Jasmine 单元测试。

运行 grunt serve 命令以构建并启动一个带有实时重新加载和开发目的的观察者的 http 服务器。

LESS & SASS

目前仅维护LESS版本。SASS版本不再有维护者（#256）。SASS文件保留在源代码中，以防有人想从SASS更新源代码并使用这些文件作为基础。

支持我

如果您喜欢这个项目，您可以通过在Gittip上捐赠、star此存储库或在问题部分报告错误和想法来支持我。

gittip issues

贡献

请参阅CONTRIBUTING.md文件。

文档

Bootstrap Material Design为Material Design提供了一些额外的功能，以便更好地利用Material Design。

变体

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

示例

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

这些颜色来自Material Design调色板，如下所示

palette

要利用所有这些色调，请使用material-fullpalette.css，注意其巨大的大小。

按钮

向按钮添加.btn-flat以使其扁平，无阴影。向按钮添加.btn-raised以添加永久阴影。

输入

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

向输入添加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图标！这些图标是从原始Google来源提取的，并许可在BSD许可下。它们作为图标和易于使用的字体提供。

每个图标都有变体，包括原始Bootstrap图标。

添加Material图标的语法是

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

卡片

卡片将扩展以填充所有可用宽度（例如，列的宽度）。卡片的高度将自动调整以匹配宽度。

以下是如何使用它的示例

<div class="card">

    <div class="card-height-indicator"></div>

    <div class="card-content">

        <div class="card-image">
            <img src="./image.jpg" alt="Loading image...">
            <h3 class="card-image-headline">Lorem Ipsum Dolor</h3>
        </div>

        <div class="card-body">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>

        <footer class="card-footer">
            <button class="btn btn-flat">Share</button>
            <button class="btn btn-flat btn-warning">Learn More</button>
        </footer>

    </div>

</div>

卡片将适应列的宽度。下面的卡片将具有等于col-lg-6的宽度

<div class="row">
    <div class="col-lg-3"></div>

    <div class="col-lg-6">
        <div class="card">
            ...
        </div>
    </div>

    <div class="col-lg-3"></div>
</div>

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 的信息。

Bootstrap Material Datepicker

这是一个为与 Material Design for Bootstrap 一起使用而创建的 Material Design 日期选择器。
了解更多关于 Bootstrap Material Datepicker 的信息。

兼容性

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