web-dev-qa-db-fra.com

ajout du fichier css et js dans laravel 5.3

Je veux inclure un css tous les css et js dans une seule page et le charger dans toutes les pages. Maintenant, si je veux inclure bootstrap.css et bootstrap.js dans la page d'accueil, j'ai inclus dans la page welcome.blade.php et si je le souhaite ajouter dans une autre page que j'ai incluse dans la page second.blade.php aussi.Je veux l'inclure dans la page maître

<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
javascriptphpcsslaravel
5
user3386779

Crate header.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name="description" content="">
    <meta name="author" content="">

    <title>dhinchakwale</title>
    <!-- Bootstrap Core CSS -->
    <link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet">

    <link href="{{ asset('/css/datepicker.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/bootstrap-timepicker.min.css') }}" rel="stylesheet" type="text/css">

    <link href="{{ asset('/css/dataTables.bootstrap.css') }}" rel="stylesheet">    
    <!-- Custom CSS -->  
    <link href="{{ asset('/css/admin.css') }}" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery -->
    <script src="{{ asset('/js/jquery.min.js') }}"></script>    
  </head>

  <body id="page-top">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->        
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/"><img alt="Brand" src="{{asset('/images/logo.png')}}" class="img-brand"></a>
        </div>      
      </div>
    </nav>
    <div class="content-div">
      @yield('content')
    </div>
    <div class="clearfix"></div>  

    <!-- Bootstrap Core JavaScript -->
    <script src="{{ asset('/js/bootstrap.min.js') }}"></script> 
    <script src="{{ asset('/js/bootstrap-datepicker.js') }}"></script>
    <script src="{{ asset('/js/bootstrap-timepicker.min.js') }}"></script>
  </body>
</html>

Et utilisez comme ceci First étend l'en-tête Seconde section de votre contenu

@extends('layouts.header')
@section('content')
  <section class="content-header">
    <h1>
      Hello
    </h1>
  </section>
@stop
10
Komal

Voici les étapes à suivre

  1. Créer une disposition de modèle principal
  2. Étendez le modèle principal dans toutes les pages et collez votre lien dans la section d'en-tête.

Pour créer un modèle maître//Master.blade.php

<html lang="en">

      @yield('header')

<body>
      @yield('page-body')
</body>
</html>

Maintenant, étendez cette mise en page dans second.blade.php

@extend('master.blade')
@section('header')
   <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
@endsection
@section('page-body')
   {{!-- content of body --}}
@endsection
4
Amit Kumar

Définissez une présentation commune et incluez tous les fichiers .js et .css dans cette présentation, puis liez votre page à cette présentation. 

Disposition: 

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Où: La directive @yield est utilisée pour afficher le contenu d'une section donnée.

Vue: 

@extends('layouts.default')
@section('content')
    i am the home page
@endsection
3
Mayank Pandeyz

Vous pouvez définir un fichier de vue de mise en page principale, puis définir votre CSS et votre JS. Ensuite, tout votre fichier de vue étendra ce fichier de disposition. Voir la documentation ici: https://laravel.com/docs/5.3/blade

1
aceraven777