Doc: Updated layouts docs with images and snippets

The images and the corresponding snippets
should help the reader understand the Quick Layouts
better.

Task-number: QTBUG-33799
Change-Id: I0a4831f33d99de87fcd7cb68a36844885509bb06
Sanity-Review: Qt Sanity Bot <qt_sanitybot@qt-project.org>
Reviewed-by: Jerome Pasion <jerome.pasion@digia.com>
Reviewed-by: Jan Arve Sæther <jan-arve.saether@digia.com>