2016-09-30 7 views
4

私はcss all cssとjsを単一のページに入れて、すべてのpage.Nowにロードしたいと思うのですが、私はwelcomeページにbootstrap.cssとbootstrap.jsを含めたいと思っています。私はsecond.blade.phpページalso.Iに含まれている別のページに追加したい場合はwelcome.blade.phpページに及びlaravel 5.3のCSSとjsファイルを追加する

<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet"> 
+1

別のheader.bladeを作成し、cssとjsを含めます。その後、各ページに拡張 – Komal

+0

別のページにblade.phpを1つ含めることはできますか? – user3386779

+0

はい。以下私のコードを共有します – Komal

答えて

9

クレート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> 

をそしてこの まずように使用があなたのコンテンツここ

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

が共通のレイアウトを定義し、すべてを含むマスターページに含めたいです.jsファイルと.cssファイルをこのレイアウトでバインドするよりも、

レイアウト:@yieldディレクティブは所与のセクションの内容を表示するために使用される:

<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> 

ビュー:

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

あなたがそこにあなたのCSSやJSを定義し、マスターレイアウトビューファイルを定義することができます。その後、すべてのビューファイルがそのレイアウトファイルを拡張します。ここではドキュメントを参照してください:あなたが続くことができるの手順https://laravel.com/docs/5.3/blade

4

の 第二部ヘッダを拡張しています

  1. マスターテンプレートを作成するレイアウト
  2. 今すぐにこのレイアウトを拡張するすべてのページでマスターテンプレートを拡張し、マスターテンプレート //master.blade.php

    <html lang="en"> 
    
         @yield('header') 
    
    <body> 
         @yield('page-body') 
    </body> 
    </html> 
    

    を作成するには、ヘッダ部

にあなたのリンクを貼り付ける食べましたsecond.blade.php

関連する問題