Bootstrap 2.3.2: Οδηγός έναρξης

Λογότυπο Twitter Bootstrap

Το Bootstrap είναι ένα Πλαίσιο CSS που έχει γίνει πολύ δημοφιλές σε όλο το δίκτυο. Τα στυλ τους ανταποκρίνονται εμφανίζονται στα κοινωνικά δίκτυα Tuenti y Twitter. Η χρήση αυτού μας εξοικονομεί πολύ χρόνο κατά την ανάπτυξη μιας διαδικτυακής εφαρμογής, καθώς μας εξοικονομεί όλη τη δουλειά και την προσπάθεια που απαιτείται για τη δημιουργία ενός καθαρού στυλ σελίδας κατάλληλο για όλες τις συσκευές. Συμβουλευόμενοι τα στυλ που χρησιμοποιούνται σε αυτό το πλαίσιο, θα συνειδητοποιήσουμε ότι είναι γνωστά σε εμάς, καθώς σήμερα πολλοί ιστότοποι το έχουν εφαρμόσει.

Η ΔΟΜΗ

Εικόνα δομής Bootstrap

Δομή ρευστού Bootstrap

Προκειμένου ο ιστότοπός μας να είναι προσβάσιμος από κινητά και 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>

Αυτό επιτρέπει στο τμήμα να πηδήξει τέσσερα εκτείνεται πριν από την εμφάνιση του περιεχομένου. Μπορούμε να το χρησιμοποιήσουμε ελεύθερα, παρακάμπτοντας ό, τι θέλουμε με τον κωδικό μας.

Η παράλειψη εκτείνεται με την κατηγορία offset

Η παράλειψη εκτείνεται με την κατηγορία offset

Διαφορετικός σχεδιασμός για κάθε συσκευή

Εικόνα με τάξεις αποκλειστικότητας για συσκευές Bootstrap

Κατηγορίες CSS για διαφοροποίηση κάθε συσκευής

Για να εφαρμόσουμε διαφορετικό σχεδιασμό για κάθε τύπο συσκευής, θα πούμε σε κάθε λογικό τμήμα για ποια συσκευή είναι προσανατολισμένη, χρησιμοποιώντας τις ακόλουθες κατηγορίες:

Με αυτόν τον τρόπο, μπορούμε να δείξουμε μια εντελώς διαφορετική σχεδίαση για κάθε συσκευή με την ίδια διεύθυνση URL.

κουμπιά

Κουμπιά χρώματος

Λίστα κουμπιών που προσφέρονται από το Bootstrap

Το 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


Ένα σχόλιο, αφήστε το δικό σας

Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.

  1.   alejandra dijo

    Δεν έχετε περισσότερα σεμινάρια για αυτό το πλαίσιο ;;;