Bootstrap-Material-Design-Eingabefeld nicht animieren nicht

Ich bin mit Material Design für Bootstrap 3: http://fezvrasta.github.io/bootstrap-material-design/Bootstrap-Material-Design-Eingabefeld nicht animieren nicht

Bisher habe ich nur die navbar und es sieht gut aus, aber die „Search“ Eingabefeld animieren nicht, wenn Ich klicke drinnen.

Noch gibt es mir den Splash-Effekt, wenn ich auf das Dropdown-Menü klicke.

Irgendeine Idee, was ich vermisse?

<!-- Fonts --> 
<link rel="stylesheet" href="{{ asset('assets/css/font-awesome.min.css') }}"> 

<!-- Styles --> 
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}"> 
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap-material-design.min.css') }}"> 
<link rel="stylesheet" href="{{ asset('assets/css/ripples.min.css') }}"> 

<body id="app-layout"> 
<div class="bs-component"> 
    <div class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="{{ route('home') }}">APP</a> 
      </div> 
      <div class="navbar-collapse collapse navbar-responsive-collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="{{ route('home') }}">Home</a></li> 
        <li class="dropdown"> 
         <a href="javascript:void(0)" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 
          <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="javascript:void(0)">Action</a></li> 
          <li><a href="javascript:void(0)">Another action</a></li> 
          <li><a href="javascript:void(0)">Something else here</a></li> 
          <li class="divider"></li> 
          <li class="dropdown-header">Dropdown header</li> 
          <li><a href="javascript:void(0)">Separated link</a></li> 
          <li><a href="javascript:void(0)">One more separated link</a></li> 
         </ul> 
        </li> 
       </ul> 
       <form class="navbar-form navbar-left"> 
        <div class="form-group"> 
         <input type="text" class="form-control col-md-8" placeholder="Search"> 
        </div> 
       </form> 
       <ul class="nav navbar-nav navbar-right"> 
        @if (Auth::guest()) 
         <li><a href="{{ url('/login') }}">Login</a></li> 
         <li><a href="{{ url('/register') }}">Register</a></li> 
        @else 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> 
           {{ Auth::user()->name }} <span class="caret"></span> 
          </a> 

          <ul class="dropdown-menu" role="menu"> 
           <li><a href="{{ url('/profile/settings') }}"><i class="fa fa-btn fa-cog"></i>Settings</a></li> 
           <li><a href="{{ url('/profile/password') }}"><i class="fa fa-btn fa-cog"></i>Change Password</a></li> 
           <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li> 
          </ul> 
         </li> 
        @endif 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

@yield('content') 

<!-- JavaScripts --> 
<script src="{{ asset('assets/js/jquery-2.2.4.min.js') }}"></script> 
<script src="{{ asset('assets/js/bootstrap.min.js') }}"></script> 
<script src="{{ asset('assets/js/ripples.min.js') }}"></script> 
<script src="{{ asset('assets/js/material.min.js') }}"></script>

Quelle

2016-06-01 Halnex

Die Ripples CSS und JS fehlen, das ist, warum Sie nicht die „Welligkeit“ Animation auf dem Click-Ereignisse sehen.

Docs: Getting Started

Arbeitsbeispiel:

$.material.init()

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/material.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/ripples.min.js"></script> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">APP</a> 
 
    </div> 
 

 
    <div class="navbar-collapse collapse navbar-responsive-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="javascript:void(0)" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 
 
      <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="javascript:void(0)">Action</a> 
 
      </li> 
 
      <li><a href="javascript:void(0)">Another action</a> 
 
      </li> 
 
      <li><a href="javascript:void(0)">Something else here</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li class="dropdown-header">Dropdown header</li> 
 
      <li><a href="javascript:void(0)">Separated link</a> 
 
      </li> 
 
      <li><a href="javascript:void(0)">One more separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 

 
     <form class="navbar-form navbar-left"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control col-md-8" placeholder="Search"> 
 
     </div> 
 
     </form> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> 
 
      NAME <span class="caret"></span> 
 
      </a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="#"><i class="fa fa-btn fa-cog"></i> Settings</a> 
 
      </li> 
 
      <li><a href="#"><i class="fa fa-btn fa-cog"></i> Change Password</a> 
 
      </li> 
 
      <li><a href="#"><i class="fa fa-btn fa-sign-out"></i> Logout</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Quelle

2016-06-01 20:55:14 vanburen

Bootstrap-Material-Design-Eingabefeld nicht animieren nicht

Antwort

Verwandte Themen