标签: bootstrap-material-design

我在我的页面上使用自举材料套件,但是我的标签没有在自动填充中出现问题.我已经四处搜索,看到这是一个已知的问题,并尝试使用此处建议的解决方案.但它仍然不适合我.不知道该怎么解决？

这就是我调用样式表的方式:

<link href="/css/material-kit/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/material-kit/css/material-kit.css" rel="stylesheet"/>
<link href="/css/landing-page.css" rel="stylesheet"/>

HTML:

<div class="form-group label-floating">
    <label class="control-label">Password</label>
    <input type="password" name="password" class="form-control" required/>
    @if ($errors->has('password'))
        <span class="help-block">
            <strong>{{ $errors->first('password') }}</strong>
        </span>
    @endif
</div>

和脚本:

<!--   Core JS Files   -->
<script src="/js/landing-page/jquery.min.js" type="text/javascript"></script>
<script src="/js/landing-page/bootstrap.min.js" type="text/javascript"></script>
<script src="/js/landing-page/material.min.js"></script>
<script>
    $(document).ready(function() {
            $.material.options.autofill = true;
            $.material.init();
    });
</script>

我正在使用Bootstrap 3.3和Bootstrap Material Design框架构建应用程序.我正在尝试制作一个浮动动作按钮,单击它时会打开.

为了做到这一点,我创建了这个Bootply,它具有以下代码:

<div class="btn-group dropup floating-action-button">
    <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i></button>
    <ul class="dropdown-menu dropdown-menu-right" style="min-width:0; background-color:transparent;">
        <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a></li>
    </ul>
</div>

按钮工作,但它看起来不正确.有两个问题让我疯狂.首先,弹出菜单不透明.有一种border我似乎无法摆脱的阴影.

其次,我无法使用Bootstrap Material Design框架页面的浮动操作按钮部分中显示的小版本按钮.我不确定我做错了什么.

我将材质引导脚本包含在我的Angular项目的index.html中,但是需要手动将它们重新包含在视图中才能工作.

这很奇怪,因为插入Angular的所有其他脚本都不会发生这种情况.

的index.html

<script src="bower_components/bootstrap-material-design/scripts/material.js"></script>
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"></script>

我还注意到材料引导程序与Grunt和Bower不能很好地兼容,并且在构建时往往会自行删除(因此手册包含在页面底部).

这些已知的错误有Material-boostrap和Angular/Bower/Grunt还是我做错了什么？

如果您还有其他要求,请告诉我!

编辑:

bower.json中的依赖项

"dependencies": {
    "angular": "~1.3.0",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "bootstrap": "~3.2.0",
    "angular-resource": "~1.3.0",
    "angular-cookies": "~1.3.0",
    "angular-sanitize": "~1.3.0",
    "angular-animate": "~1.3.0",
    "angular-touch": "~1.3.0",
    "angular-route": "~1.3.0",
    "bootstrap-material-design": "*",
    "jsjws": "~3.0.2",
    "angular-ui-router": "0.2.11"
  }

我想将twitter bootstrap和角度材料结合起来.我找到了bootstrap材料设计https://github.com/FezVrasta/bootstrap-material-design

Angular材料使用以下声明;

<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-aria/angular-aria.min.js"></script>
<script src="../bower_components/angular-material/angular-material.min.js"></script>

对于bootstrap材料,文档中的声明是这样的;

  <!-- Material Design fonts -->
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- Bootstrap Material Design -->
  <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
  <link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">

如果我包含所有链接会有冲突吗？关于如何组合角度材料和自举,我很困惑.

我决定使用Material Design创建一个新的Angular 6应用程序。问题是要使用哪个材料库？

• 角材料（https://material.angular.io/）
• Bootstrap的材料设计（https://fezvrasta.github.io/bootstrap-material-design/）

如我所见，其他Bootstrap材质库都有自己的Angular版本，以避免使用JQuery。（https://mdbootstrap.com/angular/）

为什么需要避免这种情况？是越野车还是很难开发？

MDBootstrap for Angular有免费和付费版本。我不喜欢免费版本，不能使用付费版本。

我真的应该在新的Angular应用中将Material Design for Bootstrap与JQuery一起使用吗？

我想使用Bootstrap Material设计,github页面说我可以从jsdelivr.com获取它.但是入门页面说:

复制后,您需要通过将以下javascript添加到您的网站来初始化材料javascript,

$.material.init()

Run Code Online (Sandbox Code Playgroud)

jsdelivr的集成页面说使用它:

<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material-wfont.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/ripples.min.css">
<script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/material.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/ripples.min.js"></script>

但看起来材料-wfont.min.css正在返回404.很难验证一切是否正常,因为我不知道新的外观和感觉会是什么.

如果我使用cdn链接,那么我需要使用$.material.init()？

我一直在研究这个问题,我不能让这个工作,我准备把电脑扔出窗外!

使用Aurelia的skeleton-nav安装bootstrap-material- desing,使用jspm install bootstrap-material.然后在app.js中将其添加为bootstrap下面的导入

import 'bootstrap';
import 'bootstrap/css/bootstrap.css!';
import 'bootstrap-material';

@inject(Router)
export class App {

css和js导入很好,但初始化js是问题所在的地方.你通过调用$ .material.init()来初始化它,这段代码会增加涟漪效果,所以当你点击一个按钮时你会得到一个波纹或像波浪一样动画,这就是问题所在,让$ .material.init()正确地在Aurelia中工作

1)在gitter上有一些帮助之后你可以使用attach()回调来运行这段代码,但这只适用于每个类,所以每个页面/类我都要添加

//attached() {
//    $.material.init();
//}

作为一个替代上面的人gitter建议使用路由器管道调用它,我试过这个,仍然无法在每个页面上加载它,当我添加像这样的文档添加到管道

config.addPipelineStep('modelbind', BSMaterial);

然后

class BSMaterial {
    run(routingContext, next) {
        $.material.init();
      console.log('bsmaterial fired');
        return next();
        //
    } }

这部分工作,如果你点击导航链接,然后你得到涟漪效果,但尝试点击提交按钮没有涟漪效果,所以它似乎不适用于每个类,但只是路由器,我猜

另一个问题是bs材质的另一个影响,你可以将css类添加到一个名为的输入控件

floating-label

,然后当您单击输入控件时,占位符文本向上移动然后在失去焦点时向下移动,但是使用Aurelia,您可以看到占位符文本已经向上移动.如果你删除了value.bind,即删除value.bind="firstName"那么占位符动画就像它应该在onfocus和lostfocus上一样动画,所以有一些东西正在发生,值得干扰.

得到像这个材料设计jquery插件一样简单的东西不是很难,我甚至都没有尝试与Aurelia交互,我只是希望它能像你通过脚本将它添加到普通的html页面一样工作标签.我知道我只是不了解Aurelia.

任何帮助这项工作都会很棒.

当前app.js尝试使用管道方法

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

import 'bootstrap';
import 'bootstrap/css/bootstrap.css!';
import 'bootstrap-material';

@inject(Router)
export class App {

    constructor(router) {
        this.router = router;
        this.router.configure(config => { …