无法将主刀片链接到引导 css答案

【问题标题】：Cant link master blade to bootstrap css无法将主刀片链接到引导 css
【发布时间】：2014-05-03 02:30:06
【问题描述】：

我在将主刀片文件与引导文件作为 css 和 js 链接时遇到问题。我无法格式化类 jumbotron 以查看它现在是否正确链接，它只是显示为文本。这是刀片文件和引导文件：

default.blade 中的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>NIH</title>

    <!-- Bootstrap core CSS -->
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
    <!-- Add custom CSS here -->
  <link type="text/css" rel="stylesheet" href="css/main.css">

    <title>{{ $title }}</title>
</head>
<body>
    <table>
        <tr>
            <td>
                {{ Form::open(array('url' => 'bassengweb/hvertime', 'method' => 'GET')) }}
                {{ Form::submit('Hver Time') }}
                {{ Form::close() }}
            </td>

            <td>
                {{ Form::open(array('url' => 'bassengweb/hvertredjetime', 'method' => 'GET')) }}
                {{ Form::submit('Hver Tredje Time') }}
                {{ Form::close() }}
            </td>

            <td>
                {{ Form::open(array('url' => 'bassengweb/gjoremal', 'method' => 'GET')) }}
                {{ Form::submit('Gjøremål') }}
                {{ Form::close() }}
            </td>

            <td>
                {{ Form::open(array('url' => 'bassengweb/dagvakt', 'method' => 'GET')) }}
                {{ Form::submit('Dagvakt') }}
                {{ Form::close() }}
            </td>

            <td>
                {{ Form::open(array('url' => 'bassengweb/kveldsvakt', 'method' => 'GET')) }}
                {{ Form::submit('Kveldsvakt') }}
                {{ Form::close() }}
            </td>

            <td>
                {{ Form::open(array('url' => 'bassengweb/kontrollcm', 'method' => 'GET')) }}
                {{ Form::submit('Kontroll CM') }}
                {{ Form::close() }}
            </td>

            <td>
                {{ Form::open(array('url' => 'bassengweb/sok', 'method' => 'GET')) }}
                {{ Form::submit('Søk') }}
                {{ Form::close() }}
            </td>

            <td>
                {{ Form::open(array('url' => 'bassengweb/diagram', 'method' => 'GET')) }}
                {{ Form::submit('Diagrammer') }}
                {{ Form::close() }}
            </td>

            <td>
                {{ Form::open(array('url' => 'bassengweb/rapport', 'method' => 'GET')) }}
                {{ Form::submit('Rapport') }}
                {{ Form::close() }}


                {{ HTML::linkRoute('kveldsvakt', 'kveldsvakt') }}
            </td>
        </tr>
    </table>

    @if(Session::has('message'))
        <p style="color: green;">{{ Session::get('message') }}</p>
    @endif
    <div id="test"> @yield('content')


         <div class="container">

      <!-- Main component for a primary marketing message or call to action -->


      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>

    </div> <!-- /container -->



        </div><!--/.nav-collapse -->
      </div>
    </div>




    </div>


    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    <!-- JavaScript -->
    <script src="js/bootstrap.js"></script>
</body>
</html>

【问题讨论】：

我建议在打开 body 后直接加载 jquery 和 boosttrap.js 文件，而不是在页面底部。另外，打开 chrome 检查器，看看它是否产生任何错误。如果它找不到您包含的文件，它将在错误消息中说明。
项目中的 js 和 css 文件夹在哪里。将它们放在公共文件夹和视图中的刀片文件中

标签： html css twitter-bootstrap laravel laravel-4

【解决方案1】：

你的视图文件应该在路径下的视图文件夹中：

/app/views/

阅读this链接了解laravel文件结构

无论如何你都可以这样做。如果您的 css 和 js 在 public 文件夹中：

 //js
  <script src="{{URL::to('/')}}/js/bootstrap.js"></script>
         'or'
   <script src="{{ URL::asset('js/bootstrap.js') }}"></script>
 //css
 <script src="{{URL::to('/')}}/css/bootstrap.css"></script>

【讨论】：

这好多了：<script src="{{ URL::asset('js/bootstrap.js') }}"></script>
还有<link type="text/css" rel="stylesheet" href="{{ URL::asset('css/bootstrap.css') }}">
其实更好的是HTML::style('css/bootstrap.css');和HTML::script('js/bootstrap.js')
为什么不用 CDN？ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

【解决方案2】：

你应该这样做

<title>NIH</title>

<!-- Bootstrap core CSS -->
{{ HTML::style('css/bootstrap.min.css') }}
<!-- Add custom CSS here -->
{{ HTML::style('css/main.css')}}

<title>{{ $title }}</title>

【讨论】：

js 脚本 {{ HTML::script('js/jquery.min.js') }} {{ HTML::script('js/bootstrap.min.js') }} 也是如此。但这次是HTML::script 而不是HTML::style。