Υποενότητα 2.2: Ξεκινώντας με το Bootstrap
Site: | ΕΛ/ΛΑΚ Moodle |
Course: | WEB II - Προηγμένος σχεδιασμός |
Book: | Υποενότητα 2.2: Ξεκινώντας με το Bootstrap |
Printed by: | Guest user |
Date: | Friday, 13 December 2024, 8:11 AM |
Description
- Δημιουργία φακέλου έργου
- Κατέβασμα Bootstrap
- Προετοιμασία Web σελίδας με Bootstrap
- Τυπογραφία Bootstrap
Δημιουργία του φακέλου έργου
Πηγαίνετε στη θέση του φακέλου σας στην επιφάνεια εργασίας σας και ...
- δημιουργήστε έναν υποφάκελο με το όνομα
yourNameWEB2Bootstrap
και...- σε αυτό το φάκελο κατεβάστε το αρχείο
Bootstrap4-starter.zip
και ...- αποσυμπιέστε το αρχείο και μετακινήστε το φάκελο
leChocolat
κάτω από το φάκελοyourNameWEB2Bootstrap
- αποσυμπιέστε το αρχείο και μετακινήστε το φάκελο
- σε αυτό το φάκελο κατεβάστε το αρχείο
Εγκατάσταση node modules
- Μεταβείτε στο φάκελο
leChocolat folder
και αντιγράψτε τη διεύθυνση. - Ανοίξτε ένα cmd window/terminal και μεταβείτε στο φάκελο
leChocolat folder
επικολλώντας τη διεύθυνση. - Στη γραμμή εντολών πληκτρολογήστε "
npm install
". Αυτό θα εγκαταστήσει το node module lite-server στο έργο σας. - Παρατηρήστε ότι ο νέος φάκελος "node-modules" έχει δημιουργηθεί.
Initialize a Git repository
- Στη συνέχεια, αρχικοποιήστε ένα αποθετήριο Git στο φάκελο του έργου πληκτρολογώντας"
git init
". - Στη συνέχεια, ανοίξτε το φάκελο leChocolat στο πρόγραμμα επεξεργασίας και δημιουργήστε ένα αρχείο "
.gitignore
" με τα περιεχόμενα: : "node_modules" - Ελέγξτε την Git repository "
git status
". - Προσθέστε τα αρχεία στην περιοχή staging "
git add .
" - Commit την τρέχουσα περιοχή staging στο αποθετήριο Git '
git commit -m "Initial Setup"
'.
Λήψη Bootstrap
Ανοίξτε ένα παράθυρο cmd window/terminal και μεταβείτε στο φάκελοleChocolat
.
Χρησιμοποιήστε npm για να ανακτήσετε τα αρχεία Bootstrap για χρήση στο έργο σας:
npm install bootstrap
Ο φάκελος bootstrap-> dist περιέχει τα αρχεία CSS και JS Bootstrap για χρήση στο έργο σας
npm install jquery
Ο φάκελος jqery> dist περιέχει τα αρχεία JS για χρήση στο έργο σας
npm install tether
Ο φάκελος tether> dist> js περιέχει τα αρχεία JS για χρήση στο έργο σας
npm install popper.js --save
Ο φάκελος popper> dist> js περιέχει τα αρχεία JS για χρήση στο έργο σας
Ανοίξτε το φάκελο leChocolat
στον επεξεργαστή σας και στη συνέχεια ανοίξτε το αρχείο index.html στο φάκελο leChocolat.
Αυτή είναι η αρχική ιστοσελίδα σας για το έργο. Έχω ήδη δημιουργήσει την ιστοσελίδα με κάποιο περιεχόμενο για να ξεκινήσετε. Θα χρησιμοποιήσουμε το Bootstrap για τη μορφοποίηση αυτής της ιστοσελίδας και θα μάθουμε τις λειτουργίες Bootstrap.
Ξεκινήστε το lite-server πληκτρολογώντας
npm start
στην prompt. Το αρχείο index.html θα πρέπει τώρα να φορτωθεί στο προεπιλεγμένο πρόγραμμα περιήγησης.
Getting your Web page Bootstrap ready
στο <head>
του ασρξείου index.html
πριν από τον τίτλο.
Αυτό θα περιλάνει το Bootstrap CSS στην ιστοσελίδα σας.
Σημειώστε την αλλαγή στις γραμματοσειρές του περιεχομένου της ιστοσελίδας. Αυτό είναι η Bootstrap typography. Η προεπιλεγμένη τυπογραφία Bootstrap θέτει τη γραμματοσειρά σε Helvetica Neue και επιλέγει το κατάλληλο μέγεθος γραμματοσειράς με βάση την επιλογή του στυλ κεφαλίδας και του στυλ παραγράφου για το περιεχόμενο.
Στο κάτω μέρος της σελίδας, λίγο πριν το τέλος της ετικέτας </body>
,
για να συμπεριλάβετε τα αρχεία JS.
Κάντε μια Git commit με το μήνυμα "Intro to Bootstrap".
Συγκρίνετε τις εκδόσεις git.