() translation by (you can also view the original English article)
Σήμερα, ας δούμε το σύστημα του πλέγματος (πλαισίου) του Twitter Bootstrap, ρίχνοντας μια ματιά στο πλαίσιο των μέσων ενημέρωσης κατά την διαδικασία. Στο μέλλον θα μπορούμε να κατασκευάσουμε ένα μικρό σχεδιάγραμμα, δηλ. πλαίσιο για μια σελίδα portfolio. (δειγμάτων της δουλειάς μας).
Σημείωση: Το πλαίσιο το οποίο επεξεργαζόμαστε σήμερα συνοδεύεται από τo Bootstrap κατά τον χρόνο της δημοσίευσης: 1.4.0
Λάβετε τον Κωδικό
- Θα αρχίσουμε με αυτούς τους φακέλλους, με βάση το σημείο που τελειώσαμε το Τμήμα 1 αυτής της σειράς.
Βίντεο 3: Σύστημα Πλαισίου Bootstrap
Θα κάνω εισαγωγή στο πλαίσιο Bootstrap, που βασίζεται στο σύστημα πλαισίου (ή πλέγματος) 960. Θα σας ενθαρρύνω να μάθετε παίζοντας με το πλαίσιο, με τη χρήση του hero.html file.
Εναλλακτικά, Κατεβάστε το βίντεο, ή εγγραφείτε ως μέλη στο Webdesigntuts+screencasts (μοντέλα εικόνων) μέσω του iTunes!
Σχετικά Θέματα
- Το clearfix που εφαρμόζεται στο .row, .row: before, και row: after (δηλ. στη παρούσα σειρά στην προηγούμενη σειρά και στην επόμενη σειρά) βασίζεται στο micro clearfix του Nicolas Gallagher.
- Η επιλογή .row> {class*=''span''} είναι ένα είδος επιλογής CSS 2.1 απόδοσης. Εδώ θα βρείτε το W3C spec. Δέστε την εισαγωγή του Chris Coyier που θα σας βοηθήσει.
Βίντεο 4: Σχεδιάζοντας μια Σελίδα Portfolio
Τώρα ας δημιουργήσουμε την δική μας προσωποποιημένη σελίδα portfolio. Θα εισάγουμε δύο βίντεο YouTube και θα τα ρυθμίσουμε σε ένα εναλλακτικό μοντέλο με τη χρήση του συστήματος πλαισίου. (με την χρήση του πλέγματος). Κατά την διάρκεια της παρουσίασης, θα σας δείξω πώς να υπολογίζετε το σχετικό πλάτος για την προσαρμογή μέσων μέσω του πλαισίου.
Σας προτείνουμε εναλλακτικά να Κατεβάσετε το βίντεο, ή να εγγραφείτε ως μέλη στο Weddesigntuts+screencasts μέσω του iTunes!
Βίντεο 5: Τώρα έχουμε ένα Πλαίσιο Media
Ας συνεχίσουμε τη δημιουργία και ανάπτυξη μιας σελίδας portfolio. Θα χρησιμοποιήσουμε τo media-grid για να στήσουμε δύο σειρές βοηθητικών σελίδων. Και θα σας δείξω την ιστοσελίδα placehold-image (εικόνας αρχειοθέτησης) Placehold.it ως εργαλείο, που θα σας βοηθήσει πολύ.
Ως εναλλακτική, Κατεβάστε το βίντεο, ή εγγραφείτε ως μέλος στο Webdeisgntuts+ screencasts του iTunes!
Βίντεο 6: Ώρα για Ένα Προσωποποιημένο CSS
Με το περιεχόμενο σας στην θέση του, μπορούμε να προσθέσουμε κάποιο στυλ της επιλογής σας. Ας συνδέσουμε το δικό σας τύπο φύλλων, εισάγοντας διάφορα είδη.στυλ Bootstrap,μαζί με το δικό σας. Με αυτό το βήμα θα είστε έτοιμοι να ξεκινήσετε και να συνεχίσετε, έτοιμοι να δημιουργήσετε την όμορφη και προσωποποιημένη ιστοσελίδα σας Bootstrap.
Εναλλακτικά, Κατεβάστε το βίντεο, ή εγγραφείτε ως μέλος στο Webdesigntuts+screencasts μέσω του iTunes!
Ποια είναι τα Επόμενα Βήματα?
Συμβαίνουν καταπληκτικά πράγματα στην κοινότητα δημιουργίας, και έχουν διαμορφωθεί σχετικά με το πρότζεκτ. Σε λίγες εβδομάδες (στην τελευταία έκθεση) το Twitter Bootstrap 2.0 θα δημοσιευτεί, και θα περιέχει νέες συναρπαστικές προσεγγίσεις, περικλείοντας, ένα πλαίσιο ανταπόκρισης. Αυτό βέβαια είναι κάτι που ψάχνουμε.
Εν τω μεταξύ, προετοιμαζόμαστε για πλήρη εξοικείωση με τα καλύτερα που μας προσφέρει το Bootstrap.
