在laravel中添加css和js文件5.3

我想在單個頁面中包含一個css所有css和js，並將其加載到所有page.Now如果我想將bootstrap.css和bootstrap.js包含在歡迎頁面中，在welcome.blade.php頁面，如果我想在我已經包含在second.blade.php頁also.I另一頁添加要包括它的母版頁在laravel中添加css和js文件5.3

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

來源

2016-09-30 user3386779

打包一個單獨的header.blade幷包含css和js。然後在每個頁面中擴展 – Komal

我可以在另一個頁面中包含一個blade.php嗎？ – user3386779

是的..下面我分享我的代碼 – Komal

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

來源

2016-09-30 09:55:03 Komal

定義一個共同的佈局，包括所有.js和.css文件，並將此頁面與此佈局綁定。

佈局：

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

其中：@yield指令是用來顯示給定的段的內容。

查看：

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

來源

2016-09-30 09:49:39

您可以定義主佈局視圖文件，然後定義CSS和JS那裏。然後，所有的視圖文件都會擴展該佈局文件。請參閱文件的位置：https://laravel.com/docs/5.3/blade

來源

2016-09-30 09:50:34 aceraven777

這裏的第二部分，你可以遵循的步驟

創建主模板吃佈局
擴展中的所有頁面的主模板並粘貼鏈接到標題部分

要創建一個主模板 //master.blade.php

<html lang="en"> 

     @yield('header') 

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

現在，在擴展這個佈局second.blade.php

來源

2016-09-30 10:05:55

在laravel中添加css和js文件5.3

回答

相關問題