Υποενότητα 3.2: Κουμπιά - Φόρμες
Κουμπιά - Buttons
Σε αυτό το μάθημα, θα εξετάσουμε την εισαγωγή χρηστών για έναν ιστότοπο μέσω της χρήσης της λειτουργίας Υποστήριξη κουμπιών στο Bootstrap - Buttons support in Bootstrap.
Ρύθμιση για το μάθημα
- Download το αρχείο
contactus.htmlκαι μετακινήστε το στο φάκελοleChocolat. Αυτό το αρχείο έχει ήδη διαμορφωθεί με κάποιο περιεχόμενο. - Ρυθμίστε τους συνδέσμους στις γραμμές πλοήγησης για τις τρεις σελίδες, index.html, aboutus.html και contactus.html, ώστε να μπορούμε να πλοηγηθούμε εύκολα από τη μια στην άλλη.
- Επίσης, ορίστε σωστά τους συνδέσμους στο footer για να οδηγούν τις κατάλληλες σελίδες.
Προσθήκη μίας γραμμής κουμπιών - Button Bar
Τώρα θα προσθέσουμε περιεχόμενο στο αρχείο contactus.html για να μάθουμε περισσότερα σχετικά με τα κουμπιά και τις γραμμές κουμπιών. Πηγαίνετε στο div όπου καθορίζουμε "Button group goes here", και αντικαταστήστε το με τον ακόλουθο κώδικα για να δημιουργήσετε μια γραμμή κουμπιών που περιέχει τρία κουμπιά:
Σημειώστε πώς ορίζουμε τη γραμμή κουμπιών χρησιμοποιώντας την κλάση btn-group class, και στη συνέχεια προσθέτουμε τα τρία κουμπιά χρησιμοποιώντας την ετικέτα <a> .
Στην περίπτωση αυτή, τα τρία κουμπιά είναι υπερσύνδεσμοι που προκαλούν μια ενέργεια και έχουν ένα href σχετικό με αυτούς. Έτσι, αποφασίσαμε να χρησιμοποιήσουμε την ετικέτα <a> αντί της ετικέτας <button> . Σημειώστε πώς οι <a> έχουν μορφοποιηθεί χρησιμοποιώντας την btn class .
Κάνετε μια Git commit με το μήνυμα "Buttons"