引导程序如何在laravel 5中正确工作？

我第一次学习laravel 5.2约一周。我试图从YouTube和文件laravel学习larevel。但我不知道他们教，只是复制模板bootstrap没有下载引导文件放入文件夹公共它的作品，但当我试图按照主题它不适合我，但是当我下载引导文件并放入公用文件夹，然后调用它。我的问题我想知道bootstrap如何在laravel中正常工作。引导程序如何在laravel 5中正确工作？

来源

2016-01-22 He7nG

您只需创建刀片模板，然后在模板中放置引导程序的链接。

实施例（index.blade.php）CDN链接：

<!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"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Title</title> 
<!-- Bootstrap --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
<!-- Here you can put your content --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</body> 
</html>

实施例（index.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"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Title</title> 
<!-- Bootstrap --> 
    <link href="http://yoursite/public/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
<!-- Here you can put your content--> 
<script src="http://yoursite/public/assets/bootstrap/js/bootstrap.min.js"></script> 
</body> 
</html>

来源

2016-01-22 16:10:33

我不认为使用localhost的绝对URL作为域是一个很好的解决方案。 –

谢谢兄弟好的解释 – He7nG

这是我的荣幸;） –

-1

Laravel是一个服务器端的框架。它应该处理数据库，缓存，日志和验证。 Bootstrap是一个客户端UI框架。它应该处理UI组件，如选项卡，网格，表单和一些排版方面。

每个服务器端框架都支持每个客户端框架，所以随意使用Laravel和Bootstrap。

特别是你应该创建一个基本的布局与一些常见的HTML并扩展它在你的不同视图。在这个基础布局中，您必须包含通过CDN的Bootstrap或使用asset（）助手本地化。该帮助程序可帮助您构建网址（https://laravel.com/docs/5.2/helpers）。

来源

2016-01-22 16:14:26

谢谢兄弟回答 – He7nG

Another way to get that done is to get bootstrap from npm if you prefer working offline, plus laravel 5 comes with gulp and a package.json file by default 

    1. add the following to your package to json 

    { 
     "private": true, 
     "dependencies": { 
     "gulp": "^3.8.8", 
     "laravel-elixir": "^2.0.0", 
     "jquery": "latest", 
     "bootstrap": "latest" 
     } 
    } 

    2. npm install that would get the latest verion of bootstrap and jquery which is required, if you encounter any error if on linux do sudo npm install 

    3. mix the css and javascript file with laravel elixir by have below declarations in your gulpfile.js 


    var elixir = require('laravel-elixir'); 

    var nodeDir = './node_modules/'; 

    /* 
    |-------------------------------------------------------------------------- 
    | Elixir Asset Management 
    |-------------------------------------------------------------------------- 
    | 
    | Elixir provides a clean, fluent API for defining some basic Gulp tasks 
    | for your Laravel application. By default, we are compiling the Sass 
    | file for our application, as well as publishing vendor resources. 
    | 
    */ 
    elixir(function(mix) { 
    //mix css first and copy the needed fonts 

    //mix.css('app.css', 'public/css',) 
     mix.styles([ 
      'bootstrap/dist/css/bootstrap.css', 
      'font-awesome/css/font-awesome.css' 
     ], './public/css/app.css', nodeDir) 
      .copy(nodeDir + 'font-awesome/fonts', 'public/fonts') 
      .copy(nodeDir + 'bootstrap/fonts', 'public/fonts'); 

    //mix javascript 

     mix.scripts([ 
      'jquery/dist/jquery.js', 
      'bootstrap/dist/js/bootstrap.js' 

     ], './public/js/app.js', nodeDir); 


    }); 

    run gulp 

    $ gulp 

    finally a welcome.blade.php 

    <!DOCTYPE html> 
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <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="description" content=""> 
     <meta name="author" content=""> 
     <link rel="icon" href="https://getbootstrap.com/favicon.ico"> 

     <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"> 
     <link rel="stylesheet" href="{{asset('css/app.css')}}"> 

     <title>Fixed Top Navbar Example for Bootstrap</title>   
    </head> 

    <body cz-shortcut-listen="true"> 

    <div id="app"></div> 

    <script src="{{asset('js/app.js')}}"></script> 

    </body> 
    </html> 

    The above reduces number of http request you make to load bootstrap bootstrap and its dependency jquery 

reference : https://laravel.com/docs/5.0/elixir 

    Hope this helps

来源

2016-03-02 00:58:07 osleonard

引导程序如何在laravel 5中正确工作？

回答

相关问题