Απλοί τρόποι εγκατάστασης του Bootstrap: 10 βήματα (με εικόνες)

Πίνακας περιεχομένων:

Απλοί τρόποι εγκατάστασης του Bootstrap: 10 βήματα (με εικόνες)
Απλοί τρόποι εγκατάστασης του Bootstrap: 10 βήματα (με εικόνες)

Βίντεο: Απλοί τρόποι εγκατάστασης του Bootstrap: 10 βήματα (με εικόνες)

Βίντεο: Απλοί τρόποι εγκατάστασης του Bootstrap: 10 βήματα (με εικόνες)
Βίντεο: Kατέβασε βίντεο απο Instagram Facebook Twitter και απο οπουδήποτε αλλού εύκολα & γρήγορα ! 2024, Ενδέχεται
Anonim

Αυτό το wikiHow σας διδάσκει πώς να κατεβάζετε τα αρχεία Bootstrap στον υπολογιστή σας και να τα συνδέετε με τα κείμενα HTML για να χρησιμοποιήσετε στοιχεία Bootstrap στον κώδικά σας. Μόλις κατεβάσετε και συνδέσετε τα αρχεία Bootstrap, μπορείτε να αρχίσετε να χρησιμοποιείτε όλα τα στοιχεία του φύλλου στυλ και JavaScript του Bootstrap στο σχεδιασμό ιστοσελίδων σας.

Βήματα

Εγκατάσταση του Bootstrap Βήμα 1
Εγκατάσταση του Bootstrap Βήμα 1

Βήμα 1. Ανοίξτε τον ιστότοπο Bootstrap στο πρόγραμμα περιήγησής σας στο Διαδίκτυο

Πληκτρολογήστε https://getbootstrap.com στη γραμμή διευθύνσεων και πατήστε ↵ Enter ή ⏎ Return στο πληκτρολόγιό σας.

Εγκατάσταση του Bootstrap Βήμα 2
Εγκατάσταση του Bootstrap Βήμα 2

Βήμα 2. Κάντε κλικ στο κουμπί Λήψη

Αυτό θα ανοίξει τη σελίδα "Λήψη".

Εγκατάσταση του Bootstrap Βήμα 3
Εγκατάσταση του Bootstrap Βήμα 3

Βήμα 3. Κάντε κλικ στο κουμπί Λήψη παρακάτω "Compiled CSS and JS

" Αυτό θα κατεβάσει ολόκληρα τα αρχεία Bootstrap στον υπολογιστή σας ως αρχείο ZIP.

Εάν σας ζητηθεί, επιλέξτε μια τοποθεσία αποθήκευσης για το ZIP Bootstrap

Εγκατάσταση του Bootstrap Βήμα 4
Εγκατάσταση του Bootstrap Βήμα 4

Βήμα 4. Εξαγάγετε τα αρχεία από το αρχείο ZIP

Βρείτε το αρχείο ZIP που μόλις κατεβάσατε και κάντε διπλό κλικ σε αυτό για να εξαγάγετε όλα τα αρχεία σε αυτόν στον ίδιο φάκελο.

  • Αυτό θα εξαγάγει δύο φακέλους με όνομα " css" και " js."
  • Εάν η εφαρμογή αποσυμπίεσης δεν εξάγει αυτόματα τα αρχεία, ανατρέξτε σε αυτό το άρθρο για να δείτε όλους τους τρόπους με τους οποίους μπορείτε να εξάγετε ένα αρχείο ZIP.
Εγκατάσταση του Bootstrap Βήμα 5
Εγκατάσταση του Bootstrap Βήμα 5

Βήμα 5. Μετακινήστε τους εξαγόμενους φακέλους στον ίδιο φάκελο με τα αρχεία HTML του ιστότοπού σας

Ανοίξτε το φάκελο που περιέχει όλα τα αρχεία HTML του ιστότοπού σας και σύρετε το " css" και " js"φακέλους εδώ για να τους μεταφέρετε στον ίδιο φάκελο με τα έγγραφα του ιστότοπού σας.

Τώρα μπορείτε να συνδέσετε τα αρχεία με τα αρχεία HTML και να αρχίσετε να χρησιμοποιείτε το Bootstrap στον κώδικά σας

Εγκατάσταση του Bootstrap Βήμα 6
Εγκατάσταση του Bootstrap Βήμα 6

Βήμα 6. Κάντε δεξί κλικ στο αρχείο HTML που θέλετε να χρησιμοποιήσετε με το Bootstrap

Μπορείτε να χρησιμοποιήσετε το Bootstrap μόνο σε ένα από τα αρχεία HTML σας ή σε όλα αυτά.

Εγκατάσταση του Bootstrap Βήμα 7
Εγκατάσταση του Bootstrap Βήμα 7

Βήμα 7. Τοποθετήστε το δείκτη του ποντικιού πάνω στο Άνοιγμα με το μενού δεξιού κλικ

Θα εμφανιστεί ένα υπομενού με συμβατές εφαρμογές.

Εγκατάσταση του Bootstrap Βήμα 8
Εγκατάσταση του Bootstrap Βήμα 8

Βήμα 8. Επιλέξτε το πρόγραμμα επεξεργασίας κειμένου

Αυτό θα ανοίξει το επιλεγμένο αρχείο HTML στον επεξεργαστή κειμένου.

Μπορείτε να χρησιμοποιήσετε έναν απλό επεξεργαστή κειμένου, όπως Μπλοκ ΣΗΜΕΙΩΣΕΩΝ ή TextEdit καθώς και ένα ειδικό πρόγραμμα επεξεργασίας κώδικα όπως Ατομο (https://atom.io) ή Coda (https://panic.com/coda).

Εγκατάσταση του Bootstrap Βήμα 9
Εγκατάσταση του Bootstrap Βήμα 9

Βήμα 9. Προσθέστε τους συνδέσμους Bootstrap στην κεφαλίδα του αρχείου HTML

Πριν χρησιμοποιήσετε τον κώδικα Bootstrap στο HTML σας, θα πρέπει να πληκτρολογήσετε ή να επικολλήσετε τις παρακάτω γραμμές στην κεφαλίδα του κώδικα:

Εάν θέλετε να συνδέσετε και να χρησιμοποιήσετε μερικά από τα άλλα αρχεία από τους φακέλους css και js, απλώς προσθέστε νέες γραμμές στην κεφαλίδα και αντικαταστήστε τα μέρη css/bootstrap.css και js/bootstrap.js με τα ονόματα των αρχείων που θέλετε για σύνδεση

Εγκατάσταση του Bootstrap Βήμα 10
Εγκατάσταση του Bootstrap Βήμα 10

Βήμα 10. Ελέγξτε τη θέση των συνδέσμων Bootstrap στον κώδικα

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

  • Μόλις προσθέσετε αυτές τις γραμμές στην κεφαλίδα, μπορείτε να αρχίσετε να χρησιμοποιείτε στοιχεία Bootstrap σε αυτό το αρχείο HTML.
  • Μπορείτε να βρείτε μια πλήρη λίστα με όλα τα στοιχεία του Bootstrap στη διεύθυνση https://getbootstrap.com/docs/4.3/getting-started/introduction. Απλώς κάντε κλικ σε οποιαδήποτε κατηγορία, όπως Σχέδιο ή Συστατικά στο αριστερό μενού.
  • Μόλις εγκαταστήσετε το Bootstrap, μπορείτε να εισαγάγετε ή να αντιγράψετε/επικολλήσετε οποιοδήποτε κομμάτι κώδικα από εδώ στον δικό σας κώδικα.

Συνιστάται: