Υποενότητα 5.1: Bootstrap και jQuery

Bootstrap and JQuery

Σε αυτήν την υποενότητα, εξετάζουμε τη σύγχρονη χρήση των Bootstrap, JQuery και JavaScript για να ελέγξουμε τις συνιστώσες του Bootstrap που απαιτούν πρόσθετο κώδικα JavaScript. Θα χρησιμοποιήσουμε το Carousel ως παράδειγμα ενός συστατικού που μπορεί να ελεγχθεί.

Δείτε περισσότερα σχετικά με τις μεθόδους JavaScript του καρουσέλ

Δείτε περισσότερα σχετικά με τo jQuery

Δείτε περισσότερα σχετικά με τo jQuery στο w3schools

Προσθήκη νέων χειριστηρίων στο Carousel

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

Carousel HTML:

Προσθέτουμε τα δύο κουμπιά μέσα σε button group with με ID carouselButtons.  Τα δύο κουμπιά περιέχουν τα εικονίδια παύσης και αναπαραγωγής για να υποδείξουν τις αντίστοιχες ενέργειες τους.

Προσθήκη κλάσης CSS για τα κουμπιά

Στη συνέχεια, προσθέτουμε την ακόλουθη κλάση CSS στο αρχείο styles.css  για να τοποθετήσουμε τα κουμπιά στην κάτω δεξιά γωνία του καρουσέλ:

Carousel CSS:

Προσθήκη κώδικα JavaScript

Τέλος, προσθέτουμε κώδικα JavaScript για να ενεργοποιήσουμε τα κουμπιά.

• Δημιουργήστε στο φάκελο leChocolat  τον υποφάκελο js.
• Στον υποφάκελο js, cδημιουργήστε ένα νέο αρχείο scripts.js.
• Συνδέστε ΟΛΑ τα αρχεία HTML με το scripts.js

Ενημερώστε το scripts.js με τον ακόλουθο κώδικα JavaScript:

Carousel JS:

Do a Git commit

Κάντε μαι  Git commit με το μήνυμα "Bootstrap JQuery"

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