質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • PHP

    20255questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • Laravel 5

    1872questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Bootstrap

    955questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Laravel5.6 blade @sectionについてうまくbootstrapが読み込めない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 148

yoshipu

score 74

次のディレクトリ構成とファイル名、@sectionをおいてみたのですが、bootstrapが読み込まれないのかうまくbootstrapが効きません。

ファイルの場所が違うか、@section内の名前が違うかだと思い試行錯誤しているのですが、うまくいきませんでした。

アドバイスをいただけないでしょうか。
よろしくお願いいたします。

Laravl5.6

\resources\views\layouts\common.blade.php

@section('content')
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
@endsection

\resources\views\article\index.blade.php

@extends('layouts.common')
@yield('content')

<div class="mx-auto" style="width: 600px; background-color: #2ff1d4; margin: 10px 10px">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <form method="POST" action="/article">
                    <div class="form-group">
                        {{ csrf_field() }}
                        <p class="ext-monospace">タイトル</p><input type="text" name="title" class="form-control"><br>
                        <p class="ext-monospace">本文</p><input type="text" name="body" class="form-control"><br>
                        <input type="submit" value="投稿" class="btn btn-default">
                    </div>
                </form>
                <br><br>
            </div>
        </div>
        <div class="mx-auto" style="width: 450px;">
            <div class="row">
                <div class="col-sm-12">
                    @foreach($articles as $article)
                        <div class="card border-primary mb-4" style="max-width: 30rem;">
                        <div class="card-header">投稿者 {{$article->user->name}}</div>
                        <div class="card-body text-primary">
                            <h5 class="card-title">{{$article->title}}</h5>
                            <p class="card-text">{{$article->body}} </p>
                        </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

Chromeのディベロッパーのconsole上は、エラーなし。

生成されたhtml

<html><head></head><body><div class="mx-auto" style="width: 600px; background-color: #2ff1d4; margin: 10px 10px">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <form method="POST" action="/article">
                    <div class="form-group">
                        <input type="hidden" name="_token" value="bWV0n4sCgGqdPusei6i7ZsRDWCeIFjg8kwd80KQk">
                        <p class="ext-monospace">タイトル</p><input type="text" name="title" class="form-control"><br>
                        <p class="ext-monospace">本文</p><input type="text" name="body" class="form-control"><br>
                        <input type="submit" value="投稿" class="btn btn-default">
                    </div>
                </form>
                <br><br>
            </div>
        </div>
        <div class="mx-auto" style="width: 450px;">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card border-primary mb-4" style="max-width: 30rem;">
                        <div class="card-header">投稿者 まどか</div>
                            <div class="card-body text-primary">
                                <h5 class="card-title">hoge</h5>
                                <p class="card-text">test </p>
                            </div>
                        </div>
                    </div>
               </div>
        </div>
    </div>
</body></html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/28 21:35

    ブラウザ開発ツールのコンソールに何か表示されていませんでしょうか?また、ブラウザ「ソースを表示」ではどのようになっていますか?想定通りの情報が挿入されているか確認してください。結果を質問に追記してください。

    キャンセル

  • yoshipu

    2018/07/28 22:12

    ありがとうございます。おっしゃっていただいたことをヒントにデベロッパーツールでデバックしながら公式ドキュメントを読んだらできました。

    キャンセル

回答 1

check解決した方法

+1

こちらでできました。

ここでベースを定義する
\resources\views\layouts\common.blade.php

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
        <title>アプリ名 - @yield('title')</title>
    </head>
    <body>
        <div class="mx-auto" style="width: 600px; background-color: #2ff1d4; margin: 10px 10px">
            <div class="container-fluid">
                @yield('content')
            </div>
        </div>
    </body>
</html>

ここでパーツを定義
\resources\views\article\child.blade.php

@extends('layouts.common')

@section('content')
    <div class="row">
        <div class="col-sm-12">
            <form method="POST" action="/article">
                <div class="form-group">
                    {{ csrf_field() }}
                    <p class="ext-monospace">タイトル</p><input type="text" name="title" class="form-control"><br>
                    <p class="ext-monospace">本文</p><input type="text" name="body" class="form-control"><br>
                    <input type="submit" value="投稿" class="btn btn-default">
                </div>
            </form>
            <br><br>
        </div>
    </div>
    <div class="mx-auto" style="width: 450px;">
        <div class="row">
            <div class="col-sm-12">
                @foreach($articles as $article)
                    <div class="card border-primary mb-4" style="max-width: 30rem;">
                    <div class="card-header">投稿者 {{$article->user->name}}</div>
                    <div class="card-body text-primary">
                        <h5 class="card-title">{{$article->title}}</h5>
                        <p class="card-text">{{$article->body}} </p>
                    </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection

参考

Laravel 5.6 Bladeテンプレート

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20255questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • Laravel 5

    1872questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Bootstrap

    955questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。