Hola a todos:
Estoy implementando un menú (nav pills) mediante bootstrap. Lo he instalado mediante CDN, además, he descargado los archivos al localhost por si hubiere cualquier problema con el servicio de Bootstrap. El problema es que no carga las clases nativas de bootstrap para "nav nav-pills". Podría ser problema en la ruta (localhost) dónde realizo la llamada a los archivos de bootstrap, pero lo dudo porque he creado otro archivo css y me lo aplica sin problemas.
Aquí tengo mi índex.php
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Gestión de apoyo operativo a servicios</title>
<!-- Link a la última versión compilada de bootstrap (versión .min.) [Servidor externo] -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Link a la última versión compilada de bootstrap (versión .min.) [Alojado] -->
<link rel="STYLESHEET" type="text/css" href="bootstrap/dist/css/bootstrap.min.css">
<!-- Link al anexo de estilos propios NO Bootstrap-->
<link rel="STYLESHEET" type="text/css" href="css/estilos.css">
</head>
<body>
<?php
require("header.php");
require("menu_nav.php");
require("app.php");
require("footer.php");
?>
<!-- Link a jQuery, Popper.js, Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Insertamos última versión compilada de JavaScript (versión .min.) [Alojado] -->
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
y aquí menu_nav.php
Código:
<!-- MENÚ DE NAVEGACIÓN-->
<div id="navegacion" class="container">
<div class="row">
<div id="menu_nav" class="col-md-12" ">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Inicio</a></li>
<li><a href="#">Perfil</a></li>
<li><a href="#">Mensajes</a></li>
</ul>
</div>
</div>
</div>
Alguna sugerencia?
Un saludo!