Print bookPrint book

Υποενότητα 2.2: Ξεκινώντας με το Bootstrap

Site: ΕΛ/ΛΑΚ Moodle
Course: WEB II - Προηγμένος σχεδιασμός
Book: Υποενότητα 2.2: Ξεκινώντας με το Bootstrap
Printed by: Guest user
Date: Thursday, 2 May 2024, 5:16 AM

Description

  • Δημιουργία φακέλου έργου
  • Κατέβασμα Bootstrap
  • Προετοιμασία Web σελίδας με Bootstrap 
  • Τυπογραφία Bootstrap 

Table of contents

Δημιουργία του φακέλου έργου

Πηγαίνετε στη θέση του φακέλου σας στην επιφάνεια εργασίας σας και ...

  • δημιουργήστε έναν υποφάκελο με το όνομα yourNameWEB2Bootstrap και...
    • σε αυτό το φάκελο κατεβάστε το αρχείο Bootstrap4-starter.zip και ...
      • αποσυμπιέστε το αρχείο και μετακινήστε το φάκελο leChocolat κάτω από το φάκελο  yourNameWEB2Bootstrap 

Κλικ: Download the file Bootstrap4-starter.zip

Εγκατάσταση 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

Προαπαιτούμενα για αυτήν τη σελίδα:

Insert the appropriate code:

στο <head> του ασρξείου index.html πριν από τον τίτλο. 
Αυτό θα περιλάνει το Bootstrap CSS στην ιστοσελίδα σας.
Σημειώστε την αλλαγή στις γραμματοσειρές του περιεχομένου της ιστοσελίδας. Αυτό είναι η Bootstrap typography. Η προεπιλεγμένη τυπογραφία Bootstrap θέτει τη γραμματοσειρά σε Helvetica Neue και επιλέγει το κατάλληλο μέγεθος γραμματοσειράς με βάση την επιλογή του στυλ κεφαλίδας και του στυλ παραγράφου για το περιεχόμενο.

Στο κάτω μέρος της σελίδας, λίγο πριν το τέλος της ετικέτας </body>,

add the appropriate code

για να συμπεριλάβετε τα αρχεία JS.

Κάντε μια Git commit με το μήνυμα "Intro to Bootstrap".

Συγκρίνετε τις εκδόσεις git.