In der fünften Folge des Symfony Tutorials gestalten wir unsere Views mit Hilfe des Bootstrap CSS-Frameworks. Dafür bauen wir unser eigenes Design auf. Zudem erweitern wir die Anwendung um eine Übersicht über unsere To-Do-Listen, welche in der Datenbank gespeichert sind.
Um die Tabelle darzustellen, habe ich folgendes Coding verwendet:
<table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">To-Do Listenname</th> <th scope="col">Aktionen</th> </tr> </thead> <tbody> {% for toDoList in toDoLists %} <tr> <th scope="row">{{ toDoList.id|e }}</th> <td><a href="/listDetails/{{toDoList.id }}" >{{ toDoList.name|e }}</a></td> <td><div class="btn-group" role="group"><button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Bearbeiten </button> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <a class="dropdown-item" href="/editList/ {{ toDoList.id }}">Ändern</a> <a class="dropdown-item" href="/deleteList/ {{ toDoList.id }}">Löschen</a> </div></div></td> </tr> {% else %} <tr> <th></th> <td>Keinen Eintrag gefunden</td> <td></td> </tr> {% endfor %} </tbody> </table>
Weiterführende Informationen:
Aktuelle Bootstrap Version und Doku: http://getbootstrap.com/
