Llevo unos días aprendiendo a emplear Laravel. Poco a poco voy entendiendo su funcionamiento. Estoy preparando un tutoría con la realización de una aplicación bastante completa a modo de aprendizaje propio y para publicarla cuando la acabe y que otros puedan utilizarla como recurso didáctico.
Y bien, expongo un poco el problema. Ya he diseñado las bases de datos y he generado los archivos de las migraciones. Y lo siguiente que me gustaría hacer son las vistas. Dispongo de todo el marco de diseño css y html. Y lo que intento es adaptarlo a Laravel. Voy a simplificar un poco lo que estoy haciendo para que no sea muy denso de leer:
views/
│
│ ├── parent_section/
│ │ ├── header.blade.php
│ │ ├── nav.blade.php
│ │ ├── footer.blade.php
│ │ └── layout.blade.php
│ │
│ ├── section/
│ │ ├── conten_1.blade.php
│ │ ├── content_2.blade.php
Lo que estoy haciendo es dentro de layout dispongo las secciones (header, nav y footer). Digamos que actúa como índex.
Código PHP:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- URL CDN externos -->
<!-- Falta sustituir por archivos nativos -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Muli|Roboto+Condensed:400" rel="stylesheet">
<!-- Main CSS -->
<link rel="stylesheet" href="assets/css/style_.css" type="text/css">
<title> @yield('title')</title>
</head>
<body>
@include ('parent_section/header')
@include ('parent_section/nav')
<main>
<div class="main_container">
@yield('content')
</div>
</main>
@include ('parent_section/footer')
<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://unpkg.com/[email protected]/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
<!-- Font Awesome CDN -->
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
</body>
Código PHP:
@extends('layout')
@section('title', 'content_1 PRUEBA')
@section('content')
<div class="container_tittle">
<h5>PRUEBA</h5>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-3">
<a href="#" class="card-link text-left">Modificar</a><br>
<a href="#" class="card-link text-left">Finalizar</a>
</div>
</div>
@endsection
Por un lado me surge la duda de cómo integran ustedes las secciones que no varían: header, nav y footer. He leído de mil sitios y no llego a ninguna conclusión clara.
Y por otro lado, ¿Cómo le aplican bootstrap? es decir; a parte de incluir las CDN, hacen algo más?. Quizás no lo esté añadiendo en la ubicación correcta. Creo que mi problema de que no funcionen los estilos es debido a la estructura.
Estoy un poco confundido con el tema. Para el que maneje Laravel será una chorrada pero para mí como aprendiz me tiene totalmente confundido. Agradezco toda ayuda. Salu2.
P.D: Los estilos fuera de Laravel me funcionan sin problemas.