Το Bootstrap είναι ένα Πλαίσιο CSS που έχει γίνει πολύ δημοφιλές σε όλο το δίκτυο. Τα στυλ τους ανταποκρίνονται εμφανίζονται στα κοινωνικά δίκτυα Tuenti y Twitter. Η χρήση αυτού μας εξοικονομεί πολύ χρόνο κατά την ανάπτυξη μιας διαδικτυακής εφαρμογής, καθώς μας εξοικονομεί όλη τη δουλειά και την προσπάθεια που απαιτείται για τη δημιουργία ενός καθαρού στυλ σελίδας κατάλληλο για όλες τις συσκευές. Συμβουλευόμενοι τα στυλ που χρησιμοποιούνται σε αυτό το πλαίσιο, θα συνειδητοποιήσουμε ότι είναι γνωστά σε εμάς, καθώς σήμερα πολλοί ιστότοποι το έχουν εφαρμόσει.
Η ΔΟΜΗ
Προκειμένου ο ιστότοπός μας να είναι προσβάσιμος από κινητά και tablet, θα πρέπει να χρησιμοποιήσουμε τη ρευστή δομή που μας προσφέρει το Bootstrap. Η χρήση αυτής της δομής είναι πολύ απλή, όλα βασίζονται σε στοιχεία σπιθαμή αυτό θα μας βοηθήσει διάταξη τον σχεδιασμό ιστοσελίδων μας. Αργότερα, όταν έχουμε πρόσβαση σε αυτό το σχέδιο από ένα smartphone o δισκίο, αυτό θα προσαρμοστεί αυτόματα στην εν λόγω συσκευή βελτιώνοντας σημαντικά την ποιότητα της πλοήγησης. Θα χρησιμοποιήσουμε το σπιθαμή με κλάσεις σε λογικές διαιρέσεις εντός της δομής ρευστού, δηλαδή:
<div class="row-fluid"> <div class="span2">Contenido</div> </div>
Όπου ο αριθμός 2 αντιπροσωπεύει το μέγεθος του εύρους. Κάθε σειρά περιέχει αρκετό χώρο για 12 ανοίγματα μεγέθους 1 ή 2 του μεγέθους 6, αυτό μπορεί να διανεμηθεί όπως θέλετε. Μόλις ξεπεραστεί το διάστημα μιας σειράς, θα μεταβεί αυτόματα στην επόμενη, επιτρέποντάς μας να χρησιμοποιήσουμε ένα σπιθαμή μέγεθος 12 για να δημιουργήσετε μια αλλαγή γραμμής. Αν θέλαμε να παραλείψουμε μερικά σπιθαμή κατά τη δημιουργία ενός, δηλαδή, ξεκινήστε από το 4 σπιθαμήκαι εφαρμόζουμε μέγεθος 3, θα χρησιμοποιούσαμε αυτόν τον κωδικό:
<div class="span2 offset4">Contenido</div>
Αυτό επιτρέπει στο τμήμα να πηδήξει τέσσερα εκτείνεται πριν από την εμφάνιση του περιεχομένου. Μπορούμε να το χρησιμοποιήσουμε ελεύθερα, παρακάμπτοντας ό, τι θέλουμε με τον κωδικό μας.
Διαφορετικός σχεδιασμός για κάθε συσκευή
Για να εφαρμόσουμε διαφορετικό σχεδιασμό για κάθε τύπο συσκευής, θα πούμε σε κάθε λογικό τμήμα για ποια συσκευή είναι προσανατολισμένη, χρησιμοποιώντας τις ακόλουθες κατηγορίες:
Με αυτόν τον τρόπο, μπορούμε να δείξουμε μια εντελώς διαφορετική σχεδίαση για κάθε συσκευή με την ίδια διεύθυνση URL.
κουμπιά
Το Bootstrap μας προσφέρει ένα καθαρό ρεπερτόριο χρωματιστών κουμπιών, η χρήση του είναι πολύ απλή:
<a class="btn btn-success" href="URL"> Nombre del Botón </a>
Όπου btn btn-success
αναφέρεται στο χρώμα του κουμπιού, για να το αλλάξουμε, θα πρέπει να το αντικαταστήσουμε μόνο με τις τάξεις που εμφανίζονται στην προηγούμενη εικόνα.
Εγκατάσταση Bootstrap
Για την εγκατάσταση αυτού του πλαισίου CSS, θα κατεβάσουμε το φερμουάρ από τον σύνδεσμο που θα αφήσω στο τέλος της ανάρτησης και θα γράψουμε τον ακόλουθο κώδικα στην αρχή του αρχείου HTML.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="./css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./js/bootstrap.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script>
Μόλις βεβαιωθούμε ότι τα αρχεία CSS και JS βρίσκονται στον ίδιο φάκελο με το αρχείο HTML, μπορούμε να αρχίσουμε να σχεδιάζουμε τον ιστότοπο που ανταποκρίνεται.
Περισσότερες πληροφορίες - Επικύρωση φόρμας
Κατεβάστε - Bootstrap: CSS Framework
Δεν έχετε περισσότερα σεμινάρια για αυτό το πλαίσιο ;;;