Bueno, no me funciona el plugin. La verdad ya no se que probar, porque en todos los tutoriales que he visto ponen todo igual y les funciona pero a mi no. Incluso he copiado el código de esos tutoriales a un proyecto nuevo y ha funcionado, por lo tanto hay algo que no estoy teniendo en cuenta. Les dejo mi index.html
y mi hoja de estilos donde defino todo.
index.html:
<!DOCTYPE html>
<html ng-app="missingDog2">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Missing Dog 2</title>
<script src="resources/dependencies/angular.min.js"></script>
<script src="resources/dependencies/angular-route.min.js"></script>
<script src="resources/dependencies/angular-resource.min.js"></script>
<script src="resources/app/js/app.js"></script>
<script src="resources/app/js/Services/MascotaService.js"></script>
<script src="resources/app/js/Controllers/MainController.js"></script>
<script src="resources/app/js/Controllers/FormController.js"></script>
<link href="resources/dependencies/bootstrap.min.css" rel="stylesheet">
<link href="resources/dependencies/bootstrap-theme.min.css" rel="stylesheet">
<link href="resources/app/css/mystyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<header class="page-header row-header">
<div class="container-fluid row-header">
<div class="row row-header well">
<!-- HEADER IMAGE -->
<div class="col-xs-1">
<img ng-src="resources/app/images/beagles.png" id="imgHeader" alt="Missing Dog 2" class="img-rounded img-responsive"/>
</div>
<!-- HEADER TITLE AND TEXT -->
<div class="col-xs-11">
<h1><a href="#home">Missing Dog</a></h1>
<p>
Missing Dog is a community that ensures support and charity towards stray dogs.
It's a pleasure to help you find your lost pet!
</p>
</div>
</div>
</div>
<nav class="navbar navbar-default row-header" role="navigation" data-spy="affix" data-offset-top="104.97">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 navbar-header">
<a class="navbar-brand" href="#home">Missing Dog</a>
</div>
<ul class="col-lg-10 navbar-nav nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#form">Report a Missing Dog</a></li>
<li><a href="#view">View the Missing Dogs</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- MAIN CONTENT -->
<div id="mainContent" class="container-fluid">
<!-- HOME -->
<section id="home" class="row row-content">
<div class="col-xs-offset-3 col-xs-7 well">
<div class="col-xs-6">
<img alt="Missing Dog 2" ng-src="resources/app/images/dog-brown.jpg" class="img-thumbnail img-responsive">
</div>
<div class="col-xs-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, repellendus.
Quae enim, aspernatur odit beatae illo, placeat earum impedit magni veniam.
Laboriosam aperiam esse eum dolorem amet ipsum sapiente odit. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Mollitia soluta eaque velit? Quam quasi, at voluptate dicta dignissimos,
quibusdam reiciendis, rem aut amet quos ut dolore blanditiis, doloremque velit mollitia! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Animi minus inventore corporis quasi! Nam eius quos aut dolore
quibusdam quis placeat, quia, inventore dolor amet, soluta molestiae mollitia dicta praesentium. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Alias et impedit, natus fuga sit earum hic reiciendis
cupiditate atque dignissimos aperiam magnam esse eum, quibusdam id illum facilis optio! Eaque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus veritatis natus sed ipsa, recusandae
doloribus cupiditate, incidunt. Impedit nam rerum sed doloremque nisi quasi non dolores eius. Odit ad,
repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores odit, veniam magnam quia
dignissimos itaque eos reiciendis labore quasi, architecto facere amet nobis blanditiis eveniet.
Earum temporibus non doloribus ex.
</p>
</div>
</div>
</section>
<!-- FORM FOR REPORTING MISSING DOGS -->
<section id="form" class="row row-content" ng-controller="FormController">
<div class="well col-xs-offset-3 col-xs-7">
<div class="col-xs-offset-4 col-xs-8">
<h1>Report a Missing Dog</h1>
</div>
<div class="col-xs-offset-1 col-xs-11"> <!-- col-xs-offset-1 -->
<form class="form-horizontal" name="mascotasForm" ng-submit="guardar()">
<div class="form-group">
<label class="control-label col-xs-2" for="name">Name: </label>
<div class="col-xs-8">
<input class="form-control" name="name" type="text" required placeholder="Name of the dog" ng-model="mascota.nombre" /> <br/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="race">Race: </label>
<div class="col-xs-8">
<input class="form-control" name="race" type="text" required placeholder="Race of the dog" ng-model="mascota.raza" /> <br/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="description">Description: </label>
<div class="col-xs-8">
<input class="form-control" name="description" type="text" required placeholder="A little description" ng-model="mascota.descripcion" /> <br/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="lostPlace">Place where pet has lost: </label>
<div class="col-xs-8">
<input class="form-control" name="lostPlace" type="text" required placeholder="Place where you lost your dog" ng-model="mascota.lugar" /> <br/>
</div>
</div>
<div class="form-group">
<div class="col-xs-2 col-xs-offset-3">
<input class="form-control" type="submit" value="Report" />
</div>
<div class="col-xs-2">
<input class="form-control" type="reset" value="Cancel" />
</div>
</div>
</form>
</div>
</div>
</section>
<!-- LIST OF MISSING DOGS -->
<section id="view" class="row row-content" ng-controller="MainController">
<div class="col-xs-offset-3 col-xs-7 well">
<div class="col-xs-offset-3 col-xs-9">
<h1>View the list of Missing Dogs</h1>
</div>
<div class="col-xs-offset-2 col-xs-10">
<div class="form-group">
<label for="race" class="control-label col-xs-11 col-xs-offset-1">Search by race: </label>
<div class="col-xs-8 col-xs-offset-1">
<input class="form-control" name="race" type="text" required placeholder="Race of the dogs you are looking for" ng-model="query"/>
</div>
</div>
<div class="col-xs-10">
<table class="table table-striped table-responsive" ng-show="mascotas.length > 0 && mascotas != null">
<thead>
<tr>
<th>Name</th>
<th>Race</th>
<th>Description</th>
<th>Place</th>
<th>¿Found?</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mascota in mascotas | filter: {raza : query}">
<td>{{ mascota.nombre }}</td>
<td>{{ mascota.raza }}</td>
<td>{{ mascota.descripcion }}</td>
<td>{{ mascota.lugar }}</td>
<td><button class="btn btn-danger btn-block" ng-click="encontrado(mascota.id)">Lost</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</div>
<!-- FOOTER -->
<footer class="row-footer">
<div class="container">
<div class="row">
<p class="text-center">© Copyrigth 2016 Missing Dog</p>
</div>
</div>
</footer>
<script scr="resources/dependencies/jquery-3.1.0.min.js"></script>
<script scr="resources/dependencies/bootstrap.min.js"></script>
</body>
</html>
mystyles.css:
body {
position: relative;
color: #0ee6f1;
font-family: "Ubuntu", sans-serif;
}
h1 a:link {
text-decoration: none;
}
#mainContent {
background-image: url("../images/dogs-greenfield2.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
#imgHeader {
max-width: 126.91px;
max-height: 95px;
margin: 15px 15px;
}
.row-header {
margin: 0 auto;
padding: 0;
}
.row-content {
margin: 0 auto;
padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height: 400px;
}
.row-footer {
background-color: #b1cbbb;
color: floralwhite;
margin: 0 auto;
padding: 20px 0px 20px 0px;
}
.well {
background: #b1cbbb;
color: floralwhite;
}
.table-striped > tbody > tr:nth-child(odd){
background-color: #b5d2b9;
}
.affix {
top: 0;
width: 100%;
}
<nav>
no tuvierarole="navigation"
,data-spy="affix"
ydata-offset-top="104.97"
. Simplemente es como si no hubiera indicado que se use el plugin. No hace nada, se comporta como si no estuviera el plugin, y en la consola del navegador tampoco tengo errores ni nada por el estilo, es como si todo estuviera normal.