Question

我第一次学习laravel 5.2大约一周。我试着从youtube学习larevel并记录laravel。但我想知道他们教导并且只是复制templat bootstrap而没有下载bootstrap文件放入文件夹公共它工作，但当我尝试跟随主题它不适合我，但当我下载bootstrap文件并放入公用文件夹并调用它。我的问题我想知道bootstrap在laravel中是如何正常工作的。

Answer 1

您只需要创建刀片模板，然后在模板中输入bootstrap的链接。

示例（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>

Answer 2

    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

Answer 3

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

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

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

如何在laravel 5中正确运行bootstrap？

3 个答案: