Δημιουργία ιστότοπου με Bootstrap

Σε αυτό το post θα ξεκινήσουμε φτιάχνοντας έναν ιστότοπο με Bootstrap, το πλαίσιο ανοιχτού κώδικα που μας διευκολύνει να το κάνουμε αποκριτικό και να του παρέχουμε κάποια διαδραστικότητα. Είναι ένα βασικό πρότυπο που δημιουργείται αυτόματα από μια προσθήκη περιβάλλοντος ανάπτυξης που προτείναμε πριν και που θα πρέπει να τροποποιήσουμε.

Στην προηγούμενο άρθρο Θα βρείτε τις οδηγίες για να εγκαταστήσετε το VS Codium, να μεταφράσετε το περιβάλλον χρήστη του στα Ισπανικά και να εγκαταστήσετε το πρόσθετο Bootstrap.

Δύο πράγματα που πρέπει να έχετε κατά νου:

1. Οι εντολές που χρησιμοποιούμε είναι συντομεύσεις πληκτρολογίου, πρέπει να τις πληκτρολογήσετε. Η αντιγραφή/επικόλληση δεν λειτουργεί.
2. Ο διαχειριστής περιεχομένου μας δεν μου επιτρέπει να εμφανίσω τον κώδικα HTML, επομένως πρέπει να χρησιμοποιήσω στιγμιότυπα οθόνης. Για να έχετε πρόσβαση στον κώδικα των παραδειγμάτων που τα ανέβασα στο GitHub.

Πώς να κλωνοποιήσετε ένα αποθετήριο GitHub

Αυτό που διαχωρίζει τους μεγάλους από εμάς τους υπόλοιπους είναι ο τρόπος που αντιδρούν στα προβλήματα. Ο Richard Stallman δεν του άρεσε το πρόγραμμα οδήγησης του εκτυπωτή του και αφού δεν τον άφηναν να τον αλλάξει, ξεκίνησε το κίνημα του ελεύθερου λογισμικού. Ο Linus Torvalds δεν πείστηκε από καμία από τις πλατφόρμες κοινής χρήσης κώδικα και δημιούργησε τη δική του. git.

Σε αντίθεση με τα παραδοσιακά συστήματα διανομής λογισμικού στα οποία η μόνη αλληλεπίδραση χρήστη που επιτρέπεται είναι η λήψη, με το Git μπορείτε να παρακολουθήσετε την εξέλιξη του έργου με την πάροδο του χρόνου. Άλλα άτομα μπορούν να κλωνοποιήσουν το αποθετήριο, να κάνουν τροποποιήσεις και να προτείνουν να τα ενσωματώσουν οι προγραμματιστές του αρχικού έργου. Εάν γίνει αποδεκτό, οι προγραμματιστές μπορούν να το κάνουν εύκολα χωρίς να χρειάζεται να κατεβάσουν και να ανεβάσουν ξανά τα αρχεία.

Υπάρχουν αρκετές υπηρεσίες που βασίζονται στο Git, επέλεξα το GitHub απλά επειδή ενσωματώνεται με το VS Codium.

Για να κατεβάσετε τα δείγματα αρχείων στον υπολογιστή σας, χρειάζεται απλώς να εγκαταστήσετε το πακέτο git ακολουθώντας τις οδηγίες της διανομής σας για την εγκατάσταση πακέτων στο τερματικό.

Στη συνέχεια πληκτρολογείτε τις παρακάτω εντολές.

Προτιμώ να αποθηκεύω τα αρχεία στο φάκελο Documents οπότε αλλάζω τον κατάλογο με

cd Documentos

Στη συνέχεια, κλωνοποιώ τα αρχεία με:

git clone https://github.com/dggonzalez1971/bootstrap.git

Θα σας υπενθυμίσω αυτά τα βήματα σε κάθε ένα από τα υπόλοιπα άρθρα, καθώς με αυτόν τον τρόπο θα ενημερώνετε τα παραδείγματα των αρχείων καθώς ανεβαίνουν.

Για να δείτε τα αρχεία, απλώς ανοίξτε τον εξερευνητή αρχείων και αναζητήστε τον φάκελο bootstrap.

Δημιουργία ιστότοπου με Bootstrap

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

Στη συνέχεια ακολουθούμε τα παρακάτω βήματα:

1. Ας πάμε στο μενού Αρχείο.
2. Κάντε κλικ στο Νέο αρχείο κειμένου.
3. Κάντε κλικ στο Αποθήκευση
4. Ψάχνουμε τον φάκελο που δημιουργήσαμε και βάζουμε το όνομα του αρχείου example1.html.
5. Κάντε κλικ στο Αποθήκευση

Μερικές φορές το παράθυρο της Εξερεύνησης αρχείων μπορεί να είναι κρυφό από το VSCodium.

Ας αφήσουμε την επέκταση να δημιουργήσει το βασικό πρότυπο για εμάς. Για αυτό πληκτρολογούμε !b5-$

Αυτό θα δημιουργήσει τον κώδικα που θα βρείτε στο φάκελο παραδείγματα ως example1.html

Θα δούμε τα εξής:

Θα κάνουμε κάποιες αλλαγές σε αυτό το αρχείο. Θα βρείτε τις τροποποιήσεις κάτω από το όνομα example2.html

• Στη γραμμή 2 αλλάζουμε τη γλώσσα αντικαθιστώντας το eng με το es. Αυτό υποδεικνύει στις μηχανές αναζήτησης ότι η γλώσσα του ιστότοπου είναι τα ισπανικά.
• Στη γραμμή 6 αλλάζουμε το κείμενο που βρίσκεται κάτω από τις ετικέτες τίτλος. Βάζουμε Ο πρώτος μου ιστότοπος Bootstrap.
• Στη γραμμή 12 αλλάζουμε το περιεχόμενο μεταξύ των ετικετών h1 με Αυτός είναι ένας ιστότοπος που δημιουργήθηκε με Bootstrap.

Στη συνέχεια, θα κάνουμε μερικές σημαντικές τροποποιήσεις. Αυτές οι τροποποιήσεις έχουν να κάνουν με:

1. Ο προγραμματιστής των προσθηκών δεν μπορεί να συμβαδίσει με τις εκδόσεις του Bootstrap και υπάρχουν πιο πρόσφατες.
2. Υπάρχουν πολλές επιλογές για εξαρτήματα bootstrap και με ενδιαφέρει μια άλλη.
3. Σύμφωνα με την επίσημη τεκμηρίωση, οι κλήσεις προς τις βιβλιοθήκες Javascript πρέπει να βρίσκονται μέσα στις ετικέτες σώματος.

Για παράδειγμα 2 τροποποιήσαμε το περιεχόμενο της γραμμής 7, διαγράψαμε τις γραμμές 8 και 9 και ανεβάσαμε το υπόλοιπο περιεχόμενο για να διατηρήσουμε τη συμβατότητα αρίθμησης. Στη συνέχεια κάνουμε κλικ στο τέλος της γραμμής 10 για να δημιουργήσουμε μια νέα γραμμή 11 και βάζουμε τον σύνδεσμο προς τις βιβλιοθήκες Javascript.

Μην ανησυχείτε αν δεν καταλαβαίνετε τον κώδικα. Θα εξηγήσω τη λειτουργία κάθε γραμμής στο επόμενο άρθρο.