it-swarm.com.de

Verwenden Sie Bootstrap mit Composer

Ich bin ein Web-Neuling-Programmierer. 
Ich versuche von zu Hause aus zu lernen, mein eigenes Web zu erstellen. Ich habe Vorstellungen von PHP, HTML, JS und CSS. 
Aber ich habe etwas gefunden, das nicht zu lösen ist. Ich versuche, Composer zum Verwalten von Bootstrap zu verwenden. Ich habe Composer installiert und habe diese Codezeile ausgeführt 

composer require twbs/bootstrap

das hat einen Ordner mit Dateien abgelegt.

Ich verstehe nicht, wie ich HTML-Links mache, um die Js- und CSS-Dateien zu finden, sollten Sie den vollständigen Pfad angeben?

vendor / twbs / bootstrap / dist / js / bootstrap.js

Entschuldigen Sie bitte, wenn die Frage dumm ist, aber ich weiß nicht, wie ich fortfahren soll. 
AMD entschuldigen mein Englisch, ich lerne auch, aber mittlerweile benutze ich google translate

16
James Ryan

Ja, Composer lädt die Abhängigkeiten standardmäßig in den Ordner vendor. Daher landet Bootstrap auch im Herstellerordner, der nicht der richtige Ort ist, um darauf zu verweisen oder ihn einzuschließen.

composer require twbs/bootstrapvendor/twbs/bootstrap/dist/js/bootstrap.js


Als nächsten Schritt schreiben Sie ein kleines Hilfeskript, um die benötigten Boostrap-Dateien in Ihren public/assets-Ordner zu kopieren. Sie können den vollständigen dist-Ordner einschließlich der Unterordner (vendor\twbs\bootstrap\dist) in public oder public\assets kopieren. 

Bitte überschreiben Sie vorhandene Dateien, z. Wenn eine Datei vorhanden ist, entfernen Sie sie und kopieren Sie sie. Dadurch können Sie die Dateien problemlos aktualisieren, wenn Sie das Bootstrap-Herstellerpaket erneut aktualisieren müssen.

Sie können die Dateien natürlich auch manuell kopieren oder einen Symlink erstellen. Es hängt davon ab, ob. 

Das gibt Ihnen die folgende Verzeichnisstruktur:

public
 \- assets
    |- css
    |- js
    \- fonts
 \- index.html

Wenn die Boostrap-Assets kopiert werden, können Sie sie in Ihren index.html oder Ihre Vorlage (assets\js\bootstrap.min.js usw.) aufnehmen.


Referenzieren: https://stackoverflow.com/a/34423601/1163786 , das auch andere Lösungen für dieses Problem zeigt, z. fxp/composer-asset-plugin, laube, grunzen.

13
Jens A. Koch

Sofern Sie keine Anpassung von inside bootstrap (z. B. Building scss) benötigen, ist die einfachste Lösung ein CDN (als Bonus erhalten Sie superschnelles Caching von Assets).

Rufen Sie Ihr Vermögen einfach so an:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Composer ist ein hervorragendes Werkzeug für BackendAbhängigkeiten, aber nicht das beste für Frontend.

8

Sie können ein Post-Update-Skript in die Datei composer.json schreiben

"scripts": {
        "post-update-cmd": [
            "rm -rf public/bootstrap",
            "cp -R vendor/twbs/bootstrap/dist public/bootstrap"
        ]
    }

und Sie können das Javascript und das CSS einschließen

<script type="text/javascript" src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"</script>
<link href="{{ ROOT_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet">
3
Rahul Shinde

Wenn Sie die Dateien auf Ihrem Server haben möchten und nicht npm, grunt oder einen anderen Frontend-Bibliotheksmanager verwenden möchten, können Sie einfach die in Massimilianos Antwort aufgeführten Dateien herunterladen und sie in Ihre js/css-Datei einfügen Ordner:

Laden Sie zuerst diese Dateien herunter (aktualisiert auf die neueste Version von Bootstrap 3):

http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
http://code.jquery.com/jquery-2.2.4.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Und legen Sie sie in diese Ordner (beginnend mit dem Stamm Ihres Projekts):

public/css/bootstrap.min.css
public/js/jquery-2.2.4.min.js
public/js/bootstrap.min.js

Jetzt möchten Sie sie in den Blade-Vorlagen für Ihre Ansichten aufrufen können. Es ist ganz einfach: Fügen Sie wie gewohnt <link>- und <script>-Tags für jede css/js-Datei hinzu, und fügen Sie der Blade-Vorlage Folgendes hinzu:

<link href="{{ url('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url('js/jquery-2.2.4.min.js')}}"></script>
<script src="{{ url('js/bootstrap.min.js')}}"></script>

Ps .: Wenn Sie die Konsole sehen, wird folgende Fehlermeldung angezeigt:

Source map error: request failed with status 404
Resource URL: http://localhost:8000/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map

Dies hat keinen Einfluss auf den Stil Ihrer Seite. Sie können diese Nachricht einfach ignorieren oder eine Zeile aus der Bootstrap-Datei als Antworten auf diese Frage Suggest entfernen. Diese Antwort erkläre etwas mehr.

0
Brian Hellekin