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
... Part 2 ...
Χρησιμοποιώντας προσαρμοσμένες κλάσεις CSS
Μπορούμε να ορίσουμε τις δικές μας προσαρμοσμένες κλάσεις CSS σε ένα ξεχωριστό αρχείο CSS και επίσης να προσαρμόσουμε μερικές από τις ενσωματωμένες τάξεις CSS.
- Στον υποφάκελο με το όνομα
leChocolat
, δημιουργήστε ένα φάκελο με όνομαcss
. - Στη συνέχεια, δημιουργήστε ένα αρχείο που ονομάζεται
styles.css
στο φάκελοcss
. - Ανοίξτε αυτό το αρχείο για να επεξεργαστείτε τα περιεχόμενα.
Add the following CSS code to the file:
- Προσθέστε το αρχείο
styles.css
στοhead
τουindex.html
ως:
<link href="css/styles.css" rel="stylesheet">
- Στη συνέχεια, προσθέστε αυτές τις κλάσεις στις αντίστοιχες σειρές στο αρχείο index.html ως εξής. Δείτε τη διαφορά στο αρχείο index.html στο πρόγραμμα περιήγησης. Το πρώτο είναι για τη σειρά στην <header>, τα επόμενα τρία για τις σειρές στο περιεχόμενο και η τελευταία για την ετικέτα <footer>.
<div class="row row-header"> ... </div>
<div class="row row-content"> ... </div>
<div class="row row-content"> ... </div>
<div class="row row-content"> ... </div>
<footer class="footer"> ... </footer>