Book
Υποενότητα 2.3: Προσαρμόσιμος Σχεδιασμός και Πλέγμα Bootstrap
Υποενότητα 2.3: Προσαρμόσιμος Σχεδιασμός και Πλέγμα Bootstrap
- Προσαρμόσιμος Σχεδιασμός - Responsive WEB design
- Πλέγμα Bootstrap- Bootstrap grid system. δοχείο - container, σειρά - row, στήλη - column
- Mobile first - media queries - viewport meta tag
- Εξατομίκευση των κλάσεων CSS - Εξωτερικό αρχείο (external style sheet) - style attribute σε στοιχεία HTML (inline CSS)
- Flex order - position
Responsive Design and Bootstrap Grid System Part 2
Χρήση Flex Order
Χρησιμοποιώντας Flex ordering, μπορούμε να εναλλάξουμε τον τίτλο και την περιγραφή που δίνει μια ενδιαφέρουσα ματιά στην ιστοσελίδα.
Για να γίνει αυτό, μπορείτε να ενημερώσετε την πρώτη και την τρίτη σειρά row of content classes ως:
<div class=" row flex-row-reverse "> ... </div>
List styles
Μπορείτε να χρησιμοποιήσετε πολλά στυλ λίστας για την εμφάνιση λιστών σε διαφορετικές μορφές. Θα χρησιμοποιήσουμε το unordered list style list-unstyled
για να εμφανιστούν οι σύνδεσμοι στο κάτω μέρος της σελίδας χωρίς τις σφαίρες. Για να το κάνετε αυτό, μεταβείτε στις συνδέσεις στο υποσέλιδο και ενημερώστε την ul ως εξής
<ul class="list-unstyled"> ... </ul>