Tip:
Highlight text to annotate it
X
>> Neel MEHTA: Λοιπόν γεια σε ο καθένας που παρακολουθεί εδώ,
ή παρακολουθώντας σε απευθείας σύνδεση, είτε εξ αποστάσεως.
Το όνομά μου είναι Neel, αυτό είναι CS50.
Και σημερινού σεμιναρίου είναι Responsive Web Design με Bootstrap.
Είναι ένα θέμα που είναι πολύ κοντά στην καρδιά μου.
Ας ελπίσουμε ότι θα είναι κοντά στην καρδιά σας
καθώς και από το τέλος του σημερινού σεμιναρίου.
Έτσι Bootstrap.
Πόσοι από εσάς έχετε κάνει οποιαδήποτε το είδος της ανάπτυξης ιστοσελίδων πριν;
Ένα καλό ποσό;
Λίγο.
>> Έτσι Bootstrap είναι η πιο δημοφιλής, front-end πλαίσιο.
Είναι που χρησιμοποιούνται by-- έχω επιλέξει ένα ζευγάρι των τυχαίων websites--
Lyft, Newsweek, και Vogue.
Είναι που χρησιμοποιούνται από έναν αριθμό από ιστοσελίδες.
Είναι ένα πλαίσιο σχεδιασμού ιστοσελίδων που θα σας αφήσει να κάνετε τις ιστοσελίδες σας
τόσο όμορφη και ευαίσθητη.
Και θα πάει πέρα από αυτές δύο έννοιες εδώ.
Όμορφος.
Έτσι έχετε κανονική ιστοσελίδα για το αριστερά, η οποία γίνεται μόνο από HTML.
Έχετε μάθει HTML στην κατηγορία και στο τμήμα σε μήκος.
Bootstrap είναι ένας τρόπος για να βγάλουν ιστοσελίδες σας όμορφο.
Μπορείτε να πάρετε ό, τι είναι για το αριστερή πλευρά της οθόνης σας
και να το μετατρέψει σε ό, τι είναι για το δεξιά πλευρά της οθόνης σας με πολύ,
πολύ, πολύ μικρό κώδικα.
>> Μπορείτε να πάρετε το μπλε κουμπί καλός, μπορείτε να πάρετε το φανταχτερό, στρογγυλεμένες άκρες στην οθόνη,
μπορείτε να πάρετε την προβολή λίστας, μπορείτε να πάρετε το κάρτες, και ούτω καθεξής με πολύ λίγο κώδικα.
Δεν υπάρχει στην πραγματικότητα κανένα CSS που έχετε να γράψετε από τον εαυτό σας.
Έτσι Bootstrap σας επιτρέπει να έχουν αυτά τα προ-χτισμένα CSS
εξαρτήματα μπορείτε να βάλετε στο εσωτερικό της ιστοσελίδας σας
για να φανεί όμορφη χωρίς πάρα πολύ δουλειά για τη δική σας.
Είναι πραγματικά μια εκκίνησης, ένα σημείο εκκίνησης,
για περιπέτειες ανάπτυξης ιστοσελίδων σας.
Και έτσι όταν είσαι απλά κοροϊδεύοντας μια ιστοσελίδα,
είναι ένα πολύ καλό μέρος για να ξεκινήσετε.
Μπορείτε να πάρετε μια καλή αναζητούν ιστοσελίδα με πολύ, πολύ λίγη δουλειά.
Και πράγματι, θα πάμε για να γίνει αυτό οι ίδιοι
κατά τη διάρκεια της σαν πέντε minutes-- μέσα σε 10 λεπτά.
Έτσι είναι πολύ εύκολο να κάνει μερικές μεγάλες ιστοσελίδες.
Έτσι, αυτό είναι το πρώτο μέρος.
>> Η δεύτερη part-- ανταποκρίνεται.
Οι άνθρωποι, στις μέρες μας, το κάνουμε όχι μόνο πρόσβαση στο διαδίκτυο στους φορητούς υπολογιστές τους.
Στην πραγματικότητα, από το 2014, περισσότεροι άνθρωποι πρόσβαση στο διαδίκτυο μέσω κινητών συσκευών,
όπως κινητά τηλέφωνα ή ταμπλέτες, ή υπηρεσίες, ή έτσι από ιστοσελίδες.
Και ιστοσελίδες έχουν παραδοσιακά σχεδιαστεί με φορητούς υπολογιστές ή επιτραπέζιους υπολογιστές
στο μυαλό.
Και έτσι οι ιστοσελίδες δεν είναι συχνά πολύ καλά προσαρμοσμένη στο τηλέφωνό σας.
Αν έχετε επισκεφθεί ποτέ harvard.edu στο τηλέφωνό σας,
αυτό είναι το είδος της μια ενοχλητική εμπειρία, έτσι δεν είναι;
Αυτό συμβαίνει γιατί δεν είναι ανταποκρίνεται.
Προσπαθούμε να κάνουν ιστοσελίδες που ανταποκρίνονται,
ότι ανταποκρίνονται σε μεγέθη οθόνης ανθρώπων.
>> Έτσι, αν είναι ένα τηλέφωνο, είναι πρόκειται να πάει στο τηλέφωνο.
Αν είναι ένα δισκίο, είναι πρόκειται να πάει στο tablet.
Προσαρμόζεται για να ταιριάζει με το οθόνης που χρησιμοποιείται.
Και έτσι Bootstrap παρέχει επίσης κάποια πολύ, πολύ χρήσιμα utilities για αυτό.
Και θα πάμε να συζητήσουμε και αυτό.
Έτσι και πάλι, υπάρχουν δύο μέρη να Bootstrap-- όμορφη και υπεύθυνη.
Εμείς πάμε για να μιλήσω γι 'αυτούς.
Πρώτον, όμορφη.
Και στη συνέχεια να ανταποκρίνεται.
>> Έτσι, όλος ο κώδικας που είμαστε πρόκειται να μιλήσουμε για today--
θα πάμε να έχουν πολλά παραδείγματα, πολλές προκλήσεις, και έτσι να on--
όλες ζει σε αυτή την ιστοσελίδα εδώ.
Αυτή η διαφάνεια είναι αυτό που στείλαμε.
Έτσι, αν είστε εδώ, μπορείτε να αισθάνονται ελεύθερος να μην χρειάζεται να γράψω για αυτά.
Και αν βλέπετε από μακριά, αισθάνονται ελεύθερος να τραβήξει αυτό επάνω στον υπολογιστή σας
επισης.
Θα χρειαστεί κατά πάσα πιθανότητα κατά τη διάρκεια της Η πορεία αυτού του σεμιναρίου.
>> Έτσι θα πάμε να χρησιμοποιήσετε ένα ιστοσελίδα που ονομάζεται CodePen,
η οποία είναι μια συλλογική κωδικοποίηση περιβάλλον, κατά τη διάρκεια αυτού του σεμιναρίου.
Και CodePen-- και θα σας δείξω εδώ πραγματικό fast--
σας επιτρέπει να γράψετε HTML συνεργατικά.
Μπορώ να το γράψω, μπορώ να το στείλω σε εσείς, εσείς μπορείτε να το επεξεργαστείτε.
Ακόμα και αν είστε τηλεχειριστήριο, εξακολουθεί να μπορεί να έχει πρόσβαση με αυτόν τον τρόπο.
Μπορείτε να πληκτρολογήσετε κώδικα HTML στο ο κορυφή και αυτό θα αυτόματα
να μετατραπεί σε η ιστοσελίδας στο κάτω μέρος.
Γι 'αυτό είναι ένας τρόπος για σας να δοκιμάσουν γρήγορα κώδικα
χωρίς να χρειάζεται να κάνει οποιοδήποτε είδος της ουσίας για IDE σας, ή τη δική σας ιστοσελίδα,
ή οτιδήποτε άλλο.
>> Έτσι προχωρήστε και να τραβήξει μέχρι αυτό το ιστοσελίδα, αν είστε απομακρυσμένο
ή αν είστε εδώ, ειδικά εάν είστε τηλεχειριστήριο.
is.gd/cs50boostrap.
Δεν καπάκια, χωρίς υπογραμμίσεις, ούτε τίποτα.
Έτσι, όσοι από εσάς είναι εδώ, απλά να μου δώσει ένα μπράβο
όταν έχετε τραβήξει μέχρι εκείνη την ιστοσελίδα.
Καλός?
>> Κοινό: Ναι.
>> Neel MEHTA: Έτσι θα φτάσουμε με ότι μέσα σε μόλις ένα δευτερόλεπτο.
Έτσι, η πρώτη, θα πάμε για να φτάσουμε στο, πώς κάνετε τις ιστοσελίδες σας όμορφο;
Εμείς πάμε για να μάθετε πώς να πάρει βαρετό, παλιά HTML, όπως σας έδειξα πριν,
και να μετατρέψει αυτό σε πραγματικά ωραίο συστατικά,
σαν μια ωραία widgets, ωραία, χρωματιστά κουμπιά και ετικέτες, και τραπέζια,
και όλοι, χρησιμοποιώντας Bootstrap.
Έτσι, αν θα μπορούσαμε όλοι να πάει πέρα από το να CodePen που μόλις τράβηξε επάνω.
Θα πρέπει να κοιτάξουμε λίγο σαν αυτό.
Μήπως μοιάζει με αυτό για τον καθένα;
>> Κοινό: Ναι.
>> Neel MEHTA: Αν είστε απομακρυσμένη, το θα πρέπει να μοιάζει με αυτό, καθώς και.
Αν όχι, εγώ θα σας δείξει πώς σύντομα μπορείτε να πάρετε το βλέμμα σαν αυτό
σε μια μελλοντική τμήμα του βίντεο.
Έτσι, εδώ έχουμε γράψει μια πολύ βασική HTML,
όπως το είδος που έχετε χρησιμοποιήσει στην τάξη.
Είναι πολύ βασικό.
Δεν frills.
Και έχουμε κάποια πράγματα.
Έχουμε σχεδιάσει ένα πολύ, πολύ βασικό εκκίνηση
καλέστε Yalp! με το οποίο μπορείτε να βρείτε εστιατόρια της περιοχής,
και να βρουν σχόλια, και κατευθύνσεις για όλα αυτά.
Είναι μια πολύ καλή ιδέα.
Είναι δεν έχει γίνει ποτέ πριν.
Είναι ένα πολύ μοναδικό όνομα, πάρα πολύ.
>> Λοιπόν, τι θα πάμε να προσπαθήσουμε να κάνετε είναι να βοηθήσει τον ιδιοκτήτη
της Yalp! κάνουν την ιστοσελίδα του φαίνονται πραγματικά, πραγματικά δροσερό.
Έτσι για να αρχίσει με, ο ιδιοκτήτης του Yalp! έχει κάνει μια μικρή αναζήτηση
κουτί, και ένα μικρό κουμπί, και, στη συνέχεια, ίσως λίγο
επιλεγμένη περιοχή για ένα επισημασμένο εστιατόριο, και στη συνέχεια
μια λίστα με άλλα εστιατόρια που βρίσκονται στην περιοχή.
Οπότε μπορούμε απλά να περάσουν από ο κώδικας HTML πραγματικά γρήγορα.
Πόσο άνετα είναι ρε παιδιά με την HTML;
Έχουμε κάνει ένα μικρό κομμάτι τμήμα και επίσης στην τάξη.
Κόσμιος?
>> Έτσι ακριβώς όπως μια ανακεφαλαίωση, HTML είναι όλα σχετικά με
ετικέτες ή στοιχεία που μαρτυρούν την υπολογιστή πώς να σχεδιάσει την ιστοσελίδα.
Έτσι, αυτό το h1 here-- ξεκινήσει h1, Καλώς ήρθατε να Yalp !, τέλος h1-- λέει στον υπολογιστή,
σχεδιάσετε μια μεγάλη κεφαλίδα αυτό λέει, Καλώς ήλθατε στο Yalp!
εκεί μέσα.
Έχουμε επίσης μορφές.
Μπορούμε να εισάγει σαν αυτό, εισόδους κείμενο, πράγμα που θα καταστήσει τα πλαίσια κειμένου
γράφετε σε.
Μπορείτε επίσης να έχουν κουμπιά.
Μπορείτε να πάρετε ένα ωραίο, clickable κουμπί.
Δεν κάνει τίποτα σωστά τώρα, αλλά μπορείτε να πάρετε ένα κουμπί.
Μπορείτε να έχετε divs, ή διαιρέτες, να διαλύσει τη σελίδα σας σε διάφορες ομάδες.
>> Μπορείτε να έχετε τις σκέψεις, Έχετε κουμπιά.
Εάν έχετε σκέψεις, στη συνέχεια, Έχετε μη ταξινομημένες λίστες, UL,
και τους καταλόγους εσωτερικό της, Λι.
Έτσι, αυτά είναι τα πολύ βασικά δομικά στοιχεία μιας ιστοσελίδας.
Και πράγματι, λίγο πολύ κάθε ιστοσελίδα που βλέπετε
πρόκειται να κατασκευαστεί χρησιμοποιώντας τα ίδια εργαλεία.
Φυσικά, δεν έχουν όλοι δείτε αυτό το κακό γιατί είμαστε
πρόκειται να μπαχαρικό μέχρι λίγο.
Ας αυτή τη βαρετή παλιά HTML και έναρξη μετατρέποντάς την σε όμορφη τοποθεσία
ότι μόλις είδαμε πριν μερικά λεπτά.
>> Ας ξεκινήσουμε πολύ απλό.
Έτσι, έχουμε αυτό το κουμπί εδώ.
Σε Bootstrap, όπως είδαμε, μπορούμε έχουν μια ωραία, όμορφη, μπλε κουμπί.
Και αυτό δεν γίνεται κάνοντας έθιμο CSS.
Δεν υπάρχει έθιμο CSS εδώ.
Αυτό κάνει με την προσθήκη κατηγοριών σε στοιχεία HTML σας.
Εάν έχετε δοκιμάσει τις κατηγορίες, ή hrefs, ή άγκυρες, ή type = "text" για inputs--
Στοιχεία HTML μπορούν να έχουν αυτά τα χαρακτηριστικά.
Μπορούν να έχουν επιπλέον πληροφορίες ότι μπορεί να τους δώσει.
>> Και έτσι, στην περίπτωση αυτή, τάξεις είναι το χαρακτηριστικό.
Έτσι θα γράφετε, τάξη κουμπί = κάτι μέσα του χορδές.
Και αυτό το χαρακτηριστικό θα πει ο υπολογιστή, αυτό δεν είναι καθόλου, παλιά κουμπί.
Είναι ένα κουμπί που βρίσκεται σε Η κατηγορία αυτή των κουμπιών.
Και έτσι Bootstrap, αν του δώσετε ένα συγκεκριμένο στυλ στο στοιχείο σας,
αυτό θα συντάξει έναν ορισμένο τρόπο.
Έτσι γράφω "btn btn-πρωτεύον.
btn είναι μια συντομογραφία για το κουμπί.
Θα παρατηρήσετε ότι τώρα άσχημο κουμπί μου γύρισε
σε ένα όμορφο, όμορφο, μπλε κουμπί.
Φαίνεται πολύ ωραίο όταν το κλικ.
>> Και έτσι αυτό που συμβαίνει είναι ότι έχουμε το btn τάξη και η btn-πρωτοβάθμια τάξη
σχετικά με το στοιχείο μας.
Και Bootstrap θα πάει και να πει, εντάξει, εγώ Γνωρίζουμε ότι υπάρχουν αυτές οι δύο τάξεις.
Κάθε στοιχείο που έχει αυτές τις δύο πρέπει να γίνει μαθήματα όπως αυτό.
Έτσι, αυτό είναι ο πυρήνας για το πώς μπορείτε να επισυνάψετε στυλ με στοιχεία Bootstrap.
Απλά συνδέστε τάξεις τους και θα το βάρος έξω κατά το δοκούν.
Έτσι, εδώ είναι ένα άλλο παράδειγμα.
Στην είσοδο, μπορούμε να προσθέσουμε μια class = "μορφή ελέγχου".
Και θα σας δείξω σύντομα, όπου μπορείτε να μάθετε τι μαθήματα
είναι διαθέσιμα από κάθε είδος στοιχείου.
Όμως, η τάξη που μόλις Προστέθηκε έχει ωραία, στρογγυλεμένες γωνίες,
έχει ωραίο υλικό παραγεμίσματος, έχει ένα ωραίο, μπλε λάμψη σε αυτό.
>> Μπορούμε επίσης να μπω σε αυτή τη μορφή.
Και class = "μορφή-inline", η οποία θα καταστήσει φόρμα μας, όπως μπορείτε να φανταστείτε, inline.
Γι 'αυτό ψάχνει λίγο περισσότερο όπως αυτό που είχαμε πριν από την ήδη.
Έτσι, πριν πάμε για να το ύφος του υπόλοιπου η σελίδα, οποιεσδήποτε ερωτήσεις σχετικά με το τι θα
έκανε;
Εμείς απλά συνημμένο κατηγορίες σε διάφορα στοιχεία μας.
Και θα σας δείξω αργότερα πώς μπορείτε να καταλάβω τι μαθήματα είναι διαθέσιμα.
Σας επισυνάπτεται τάξεις που έχουν ορισμένες μορφές.
Και αυτό λέει το πρόγραμμα περιήγησης πώς να σχεδιάσει τη σελίδα χρησιμοποιώντας
Υπό την προϋπόθεση στυλ Bootstrap του.
Όλες οι ερωτήσεις από το ακροατήριο;
>> Καλή μέχρι τώρα;
Δροσερός.
Πολλές από τις προκλήσεις με Bootstrap είναι μόνο
γνωρίζοντας τι είναι τα συστατικά διαθέσιμες και πώς μπορείτε να τα χρησιμοποιήσετε.
Και αυτό είναι όλο μάθει με την εμπειρία και επίσης
μέσα από την ανάγνωση της τεκμηρίωσης, η οποία θα μιλήσουμε για σύντομα.
Έτσι έχουμε αυτή div.
Είναι απλά ένα βαρετό, παλιό πράγμα.
Θέλουμε να τονίσουμε ότι με κάποιο τρόπο.
Έτσι, στην Bootstrap, υπάρχουν πολλά στοιχεία που είναι διαθέσιμα.
Και αυτό είναι getbootstrap.com.
Είναι μια πολύ χρήσιμη αναφορά.
Περιέχει τα πράγματα like-- εδώ είναι το πώς να κάνετε ένα κουμπί.
Και μπορείτε να το κάνετε nav μπαρ, μπορείτε να ετικέτες, μπορείτε να προχωρήσει μπαρ,
μπορείτε να κάνετε λίστα ομάδων.
Βασικά, είναι όλα τα είδη της μπορεί να δείτε μια ιστοσελίδα.
>> Εδώ είναι αυτό που θα προσπαθήσουμε τώρα.
Αυτό λέγεται πίνακα.
Αν χρησιμοποιείτε ποτέ το Google Τώρα, έχουν χαρτιά.
Ή οποιαδήποτε συσκευή Android έχει χαρτιά.
Έχουν μικρή λευκή κουτιά που έχουν πράγματα μέσα από αυτό.
Και έτσι θα πάμε για να προσπαθήσουμε και να κάνουμε ότι οι ίδιοι εδώ χρησιμοποιώντας ένα πράγμα
ονομάζεται ένα πάνελ.
Έτσι, αν δίνουμε class = "πάνελ panel-default "στο εξωτερικό div μας,
Στη συνέχεια δίνουμε μια τάξη div = - ας απλά ελέγξτε το φάκελο αυτό.
div class = "πάνελ-επικεφαλίδα" και Στη συνέχεια div class = "πάνελ-σώμα".
Και πάλι, μην ανησυχείτε για απομνημόνευση αυτόν τον κωδικό.
Θα είναι διαθέσιμα στο διαδίκτυο.
>> Έτσι κάναμε αυτό και τώρα βαρετό μας, παλιά div μετατράπηκε σε αυτό το ωραίο, μικρό κάρτα.
Έχει ωραίο να γεμίσει αυτό, έχει σύνορα, ξεχωρίζει
από το υπόλοιπο μέρος της σελίδας, το οποίο είναι αρκετά δροσερό.
Ας πάμε και να αλλάξετε αυτό Get κουμπί οδηγίες για να δούμε ωραίο.
Ποιος στο κοινό θέλει να πει μου τι μπορώ να κάνω για να το κουμπί
για να κάνει το βλέμμα συμπαθητικό χρησιμοποιώντας Bootstrap;
Ναί?
>> Κοινό: Θα μπορούσαμε να προσθέσουμε μια τάξη.
Και θα μπορούσαμε να κάνουμε class = "btn btn-πρωτεύον".
Neel MEHTA: Ναι.
Υπάρχει ένα σωρό άλλα χρώματα διαθέσιμα για buttons--
ή για οτιδήποτε άλλο, για εκείνο το θέμα.
Μπορούμε να κάνουμε btn-κινδύνου και να είναι κόκκινο.
Εκεί πάμε.
Μπορούμε να κάνουμε btn-επιτυχία για να γίνει πράσινο.
Μπορούμε να κάνουμε btn-info-- υπάρχει μια δέσμη από τα πράγματα που είναι στη διάθεσή σας.
Γι 'αυτό και έχουν μικρή πρόκληση για εσάς τώρα.
Έτσι υπάρχει ένα πράγμα ότι έχω αφήσει un-στυλ.
Αυτή η κορυφαία εστιατόρια.
>> Και θέλουμε να χρησιμοποιήσουμε ένα πράγμα που ονομάζεται μια ομάδα λίστα για να το στυλ.
Έτσι, η πρόκλησή μου προς εσάς είναι πήγαινε για να getbootstrap.com--
Θα το τραβήξει μέχρι εδώ.
getboostrap.com.
Πηγαίνετε στο getbootstrap.com, βρείτε το τμήμα όπου πηγαίνουν πέρα λίστα ομάδων.
Και θα δείτε εδώ μια παράδειγμα και τα σωστά μαθήματα
που μπορείτε να χρησιμοποιήσετε για να κάνετε σας λίστες σε αυτές τις ομάδες ωραία λίστα.
Αυτά είναι παραδείγματα εκπονηθεί παραδείγματα κώδικα, ό, τι
κώδικα που χρησιμοποιείτε, τι κώδικα HTML μπορείτε να χρησιμοποιήσετε και τι εξάγει αυτό.
>> Έτσι, η πρόκλησή μου σε you-- πάμε για getbootstrap.com,
αν είστε εδώ ή στο σπίτι, και να προσπαθήσουμε και να προσθέσει στυλ σε αυτό ul
για να κάνει το βλέμμα συμπαθητικό.
Και χρησιμοποιήστε ένα στυλ λίστας ομάδα.
Θέλετε να διαρκέσει μερικά λεπτά, και αναζητήστε την τεκμηρίωση,
δοκιμάστε αυτό τον εαυτό σας;
Επειδή όπως κάνετε web development, θα συνειδητοποιήσετε πολλή δουλειά σας
πρόκειται να διαβάσετε η εν λόγω τεκμηρίωση.
Έτσι, νομίζω ότι είναι καλό να εξοικειωθείτε με το πώς να διαβάσετε τα έγγραφα,
πώς να καταλάβω τι είναι όπου, Ποιος είναι ο κωδικός παραδείγματα που μπορείτε να χρησιμοποιήσετε,
ό, τι μπορείτε να αξιοποιήσετε.
>> Έτσι και πάλι, getbootstrap.com, μεταβείτε στην καρτέλα Components,
και, στη συνέχεια, μετακινηθείτε προς τα κάτω στη λίστα του Ομίλου.
Και θα δείτε παραδείγματα κώδικα που που μπορείτε να χρησιμοποιήσετε για να κάνει HTML σας ταιριάζει αυτό.
Έτσι πάρτε μερικά λεπτά και δοκιμάστε και να εξερευνήσετε μόνοι σας,
αν είστε εδώ ή στο σπίτι.
Εάν είστε στο σπίτι, παύση του βίντεο, ίσως και να το δοκιμάσετε μόνοι σας.
Αν είστε εδώ, αν πάτε σε μας website-- αν ανανεώσετε τη σελίδα,
θα το δείτε εκεί.
Αυτή η ίδια κωδικός είναι ακριβώς προσθέτοντας νέα στυλ εκεί.
Έτσι, αφιερώστε λίγα λεπτά.
Επιτρέψτε μου να ξέρω πότε αισθάνεστε καλά γι 'αυτό ή όταν είστε χάσει εντελώς.
Ήχος καλό;
Δροσερός.
Γρήγορη άκρη για όσους από εσάς στο σπίτι, ενώ είμαστε σε αναμονή,
αν πάτε στο site GitHub ότι έβαλα ένα ζευγάρι διαφάνειες πριν,
προς την αρχή του βίντεο, Έχω ένα repo GitHub, αποθήκη,
για αυτή τη συζήτηση.
Όλα αυτά τα παραδείγματα κώδικα που θα είμαστε μιλάμε για αποθηκεύονται εδώ.
Έτσι, αν πάτε να αμφισβητήσει-1.html, αυτό είναι όλος ο κώδικας που έχουμε αυτή τη στιγμή
για CodePen μας.
Έτσι, μπορείτε απλά να προχωρήσει και να αντιγράψετε αυτό, και να το επικολλήσετε στο δικό σας CodePen.
Και με αυτόν τον τρόπο, μπορείτε να συμβαδίσει με ό, τι κάνουμε εδώ.
Έτσι έχουν αυτή τη σελίδα ανοιχτή, καθώς και εμείς περάσουν το υπόλοιπο του σεμιναρίου.
Και πάλι, θέλετε να μοιάζουν με ό, τι δείτε τα κάτω στο κάτω μέρος της οθόνης σας
εκεί.
Αισθάνομαι καλά?
Στερεός.
Ας περιμένουμε για όλους τους άλλους να τελειώσουμε με αυτό που κάνουν.
>> Ναί?
>> Κοινό: Ας υποθέσουμε ότι ήθελα να χρησιμοποιήσει Bootstrap σε home--
Neel MEHTA: Ναι.
Κοινό: Βλέπω, στην ιστοσελίδα της, η σελίδα Ξεκινώντας.
Θα μου δώσει τις επιλογές Bootstrap, πηγαίου κώδικα, ή Sass.
Ποια από αυτά θέλω;
>> Neel MEHTA: Ναι.
Το ερώτημα λοιπόν είναι, πώς μπορείτε να πάρετε άρχισαν να χρησιμοποιούν Bootstrap από τους εαυτούς μας;
Συμβαίνει ακριβώς να μαγικά εργαστεί εδώ.
Έτσι, αν έχουμε χρόνο σε το τέλος του σεμιναρίου,
Θα σου δείξω πώς μπορείτε να πάρετε τη δική σας ιστοσελίδα.
Όπως και εδώ, έχω πραγματικά θέσει σε ορισμένες ρυθμίσεις που
θα έχουν αυτόματα φορτωμένο, αλλά θα
δείχνουν να το κάνετε από μηδέν στις δικές σας ιστοσελίδες.
>> Κοινό: Σας ευχαριστώ.
>> Neel MEHTA: Ναι.
Καλή ερώτηση.
Αισθάνομαι καλά?
Αισθάνομαι καλά?
Δροσερός.
Έτσι, ο οποίος θέλει να μου πώς έκαναν πω αυτό το πράγμα φανείτε συμπαθητικοί και Boostrappy;
Ποια είναι η πρώτη τάξη σε αυτό προσθέσουμε την ul;
ΚΟΙΝΟ: class = "list-ομάδα".
Neel MEHTA: Ναι. Λίστα-ομάδα.
Και τότε τι θα αποδίδουν στο εκκρεμοδικίας;
Κάποιος άλλος?
Κοινό: Και στη συνέχεια, μετά από ότι, class = "list-ομάδα-σημείο".
>> Neel MEHTA: Ναι.
>> Κοινό: Και αυτό είναι το ίδιο για το επόμενο.
>> Neel MEHTA: κλάση li = "list-ομάδα-σημείο".
Ορίστε.
Έχουμε καλή ομάδα, λίστα μας, ακριβώς όπως περιμέναμε.
Έτσι, θα πάτε εκεί.
Σε 10 λεπτά, έχουμε κάνει Αυτό το βαρετό, παλιά Yalp! σελίδα
φανείτε συμπαθητικοί και επαγγελματική.
Και αυτό είναι μόνο η αρχή.
Έτσι τώρα που αισθάνεστε καλά γι 'αυτό, ας
απλά να προχωρήσει και να μιλήσουμε για ένα ζευγάρι περισσότερα στοιχεία που
μπορεί να έρθει σε πρακτικό όπως σας πηγαίνετε σε όλη την περιπέτειά σας.
>> Φυσικά, υπάρχει πολύς αυτοί εδώ.
Και τώρα που έχετε μάθει πώς να το κάνουμε λίστα ομάδων,
μπορείτε λίγο πολύ να διδάξουν τον εαυτό σας πώς να κάνει οποιαδήποτε από αυτές.
Αλλά, φυσικά, ας προσπαθήσουμε και να κάνει ένα ζευγάρι περισσότερο τον εαυτό μας,
ακριβώς έτσι μπορείτε να πάρετε μια ιδέα για πώς μπορείτε να τα χρησιμοποιήσετε.
Είμαι ακριβώς πρόκειται να πάει σε αυτό το παράδειγμα.
Και πάλι, ο κώδικας που μόλις επικολληθεί εδώ είναι διαθέσιμο εδώ.
Έτσι, μη διστάσετε να το σηκώσει.
>> Έτσι, έχουμε ήδη περάσει ένα ζευγάρι από αυτά τα παραδείγματα.
Έτσι έχουμε τα κουμπιά, το οποίο θα έχουν ήδη δει πώς να το κάνουμε.
Μπορούμε να κάνουμε τα κουμπιά μεγαλύτερα.
Με το πλήκτρο class-- πηγαίνει, btn BTN-lg και btn-default καθιστά λευκό.
Έτσι, αυτό το κάνει το κουμπί μας μεγαλύτερη από ό, τι θα μπορούσε αλλιώς να είναι.
Θα μπορούσε να έρθει σε πρακτικό, εάν έχετε μεγάλο υποβάλει button ή κάτι.
Είδαμε το παράδειγμα λίστα ομάδων, είδαμε τη φόρμα παράδειγμα.
>> Ένα πολύ σημαντικό είναι τα εικονίδια.
Και εικονίδια είναι ένας τρόπος για να μπορείτε να προσθέσετε ενδιαφέροντα πράγματα, όπως έλεγχος έλεγχος
σημάδια, ή τα συν, ή φίλο εικονίδια, ή εικονίδια επανεκκίνηση,
ή οτιδήποτε άλλο για να το web app σας.
Έτσι και πάλι, αν είμαστε στο εδώ, τα συστατικά, glyphicons,
είναι τα εικονίδια που είναι διαθέσιμα για Bootstrap.
Υπάρχει μια εξαντλητική κατάλογο όλων αυτά εδώ.
Έτσι ακριβώς ως ένα παράδειγμα, Ας προσπαθήσουμε και να προσθέσετε ένα.
>> Έτσι όπως το Facebook, είμαστε στην προσπάθεια να έχουν ένα κουμπί Add φίλο.
Ας πρώτα να προσθέσετε κάποιο στυλ.
class = το κουμπί "btn btn-επιτυχίας".
Και εκεί θα πάμε.
Ας προσθέσουμε εδώ ένα εικονίδιο.
Αν κάτι με το εικονίδιο, νομίζετε, μπορούσε να έχει νόημα να τεθεί εδώ;
Έχετε δει πιθανώς σε Ορισμένες ιστοσελίδες ή οτιδήποτε άλλο,
αλλά αυτό είναι ένα παράδειγμα ένα εικονίδιο που μπορεί να πάει καλά μέσα σε αυτό το κουμπί;
Μη διστάσετε να περιηγηθείτε σε αυτή την άποψη, αν χρειάζεστε έμπνευση.
Υπάρχουν πολλά χρήσιμα αυτά διατίθενται εδώ.
Ναί?
>> Κοινό: Ίσως ο ένας χρήστης glyphicon;
Neel MEHTA: OK.
Αυτό.
Αυτό είναι πολύ καλό.
Ναί.
Στο Facebook, θεωρώ ότι είναι Θα δούμε λίγο σαν αυτό.
Έτσι, εδώ είναι το πώς θα πάει για προσθέτοντας εικόνες στις σελίδες μας.
Εμείς απλά έχουμε ένα span-- ένα άνοιγμα είναι ένα ουδέτερη δοχείο για κάτι.
Ένα div είναι ένας περιέκτης για κάτι, ένα άνοιγμα είναι ένα άλλο δοχείο.
divs έχουν αλλαγές γραμμής γύρω τους, δεν το κάνουν ανοίγματα.
Έτσι, υπάρχει διαφορετικούς τρόπους έχοντας γενικές δοχεία.
Όπως δεν έχει νόημα να το θέσω μέσα σε μια παράγραφο ή οτιδήποτε.
Έχουμε να το βάλετε στο εσωτερικό κάτι όμως,
έτσι απλά βάλτε μέσα από ένα διάστημα.
Έτσι span class = glyphicon glyphicon χρήστης "κλείσιμο διάρκεια.
Και τώρα έχουμε το icon μέσα στο κουμπί.
>> Έτσι, δεν φαίνεται εντελώς αντίθετα ό, τι μπορείτε να δείτε στο facebook.com.
Και γι 'αυτό είναι ωραίο ότι αυτά μπορούν πραγματικά να τοποθετηθεί οπουδήποτε θέλετε.
Στο μπαρ κεφαλίδα σας, σε ομάδες λίστα σας.
Οτιδήποτε.
Δεν πρέπει να είναι στο εσωτερικό ενός κουμπιού.
Έτσι, για παράδειγμα, μπορώ να θέσει την ίδια τάξη εδώ.
"glyphicon glyphicon-χρήστη".
Και φαίνεται ακριβώς το ίδιο.
Έτσι, αυτά icons-- μπορείτε να χρησιμοποιήσετε τη διάρκεια class = "glyphicon glyphicon-ανεξάρτητα».
Και αυτό θα σας επιτρέψει να προσθέσετε εικονίδια όπου θέλετε.
Και τα εικονίδια είναι ένα πολύ σημαντικό μέρος του κάνοντας μια ιστοσελίδα ματιά
επαγγελματική και καλά κάνει.
Γι 'αυτό μην το παρακάνετε, αλλά είναι Συχνά ένα καλό πράγμα να γνωρίζει.
>> Πάνελ, και πάλι.
Θα κάνω ακριβώς αυτό και πάλι ως μια ανακεφαλαίωση επειδή είναι είδος που εμπλέκονται.
Θα παρατηρήσετε ότι σε μετατρέποντας την κανονική HTML σας
site σε ένα Bootstrap-afied χώρο, θα έχετε
να προσθέσετε επιπλέον δομή στην ιστοσελίδα.
Για παράδειγμα, έχουμε επιπλέον divs εδώ μόνο και μόνο επειδή εκείνοι
απαιτούνται για να κάνει μια ομάδα.
Έτσι απλά να το έχουμε κατά νου ότι θα πρέπει να έχουν επιπλέον τη δομή.
Έτσι, το "panel-default πίνακα".
Ίσως είναι πίνακας-header.
Νομίζω πάνελ τίτλο αυτό είναι.
Ναί.
Εκεί πάμε.
Έτσι, και πάλι, δεν υπάρχει πάνελ μας.
>> Ένα ακόμα πράγμα που δεν καλύπτουν ακόμη, πίνακες.
Πίνακες, από προεπιλογή είδος βλέμμα άσχημο.
Σαν αυτό.
Αλλά πίνακες είναι, φυσικά, ένα πολύ σημαντικό μέρος
τι θα κάνετε στην ανάπτυξη ιστοσελίδων.
Σε Pset7, για παράδειγμα, CS50 Οικονομικών, η οποία θα βγει σύντομα,
θα χρησιμοποιούν πολλά τραπέζια.
Και πολλά web dev χρησιμοποιούν πολλή των πινάκων για να εμφανίσετε πληροφορίες,
όπως τα αποθέματα, ή βαθμολογίες, ή οτιδήποτε άλλο.
>> Έτσι styling πίνακες είναι πραγματικά πολύ εύκολο.
Μπορείτε να προσθέσετε την κλάση τραπέζι σε τραπέζι σας.
Και τολμώ να πω, φαίνεται πολύ ωραίο.
Μπορείτε να κάνετε επιπλέον πράγματα, όπως «τραπέζι πινγκ-ριγέ".
Και θα δείτε τα αποτελέσματα εδώ.
Μπορείτε να κάνετε τραπέζι περίγραμμα.
Υπάρχουν πολλές επιλογές που μπορείτε.
Αλλά βασικά, την προσθήκη ενός τραπέζι, η τάξη τραπέζι,
θα κάνει τους πίνακες σας φαίνονται πολύ ωραία.
Έτσι, αυτό είναι μια σύντομη περιγραφή της μερικές από τις πιο σημαντικές μορφές
και τα συστατικά εσείς θα πρέπει να χρησιμοποιήσετε για Bootstrap.
Πιστεύω λοιπόν ότι αναδιπλώνεται up όμορφο μέρος μας.
Οποιεσδήποτε ερωτήσεις τώρα σχετικά με το πώς για να κάνουν ιστοσελίδες σας όμορφο;
Πώς μπορείτε να χρησιμοποιήσετε αυτά συστατικά για να σας πλεονέκτημα;
Αισθάνομαι καλά?
Ναί?
Κοινό: Ίσως αυτό είναι μια ανόητη ερώτηση,
αλλά μπορείτε να χρησιμοποιήσετε Bootstrap στη Wikipedia;
Αν επεξεργάζεστε μια σελίδα της Wikipedia;
Neel MEHTA: Ναι.
Έτσι, το ερώτημα ήταν, είμαι επεξεργάζεστε μια σελίδα της Wikipedia,
μπορώ να συμπεριλάβω στυλ Bootstrap εκεί;
>> Κοινό: Ναι.
>> Neel MEHTA: Και έτσι είναι Bootstrap ουσιαστικά ένα μεγάλο φύλλο στυλ CSS.
Ένα φύλλο στυλ CSS, λέει απλά, όποτε Έχω αυτή την κατηγορία, αποδίδουν αυτά τα στυλ.
Έτσι, το φύλλο στυλ CSS για Bootstrap πρόκειται να είναι κάτι σαν .btn,
η τάξη κουμπί, θα πάρει σαν ένα στρογγυλεμένη ακριτική γωνιά ή οτιδήποτε άλλο.
Έτσι, βασικά, είναι απλά ένα bootstrap δέσμη των κατηγοριών και ένα σωρό στυλ
ορίζονται για τις τάξεις.
Έτσι, εφ 'όσον έχουν αυτό το CSS, Αυτός ο κατάλογος των κανόνων στη σελίδα σας,
θα πάρετε το στυλ Bootstrap.
Αυτό είναι, φυσικά, εξαρτάται από την έχοντας τα στυλ Bootstrap στη σελίδα σας
για αρχή.
>> Και έτσι στη Wikipedia, τότε μάλλον δεν θα μπορούσε
το κάνουμε, διότι η Wikipedia δεν έχει Bootstrap σε αυτό.
Αλλά αν είχε Bootstrap, θα μπορούσε πιθανώς να το κάνουμε αυτό.
Και αν ήθελε, θα μπορούσατε περιλαμβάνουν, αλλά ότι θα μπορούσε
σπάσει την υπάρχουσα μορφή της σελίδας.
Αλλά πολύ καλή ερώτηση.
Μπορείτε να χρησιμοποιήσετε Bootstrap όπου περιλαμβάνεται,
αλλά δεν είναι ενσωματωμένη στο από προεπιλογή.
>> Κοινό: Σας ευχαριστώ.
>> Neel MEHTA: Ναι.
Οποιεσδήποτε άλλες ερωτήσεις;
Ναί.
Έτσι, αν είστε εδώ ή στο σπίτι, απλά να θυμάστε getboostrap.com-- και πάλι,
getboostrap.com-- είναι φίλος σου.
Κάθε φορά που χρησιμοποιείτε Bootstrap, αυτό θα σας δώσει
οδηγίες για το πώς να πάρει ξεκίνησε, πώς να χρησιμοποιούν εξαρτήματα.
Υπάρχει κάποιο δροσερό JavaScript plug-ins που δεν θα πάει πέρα από εδώ,
αλλά είναι αξίζει τον έλεγχο έξω επίσης.
Έτσι, αυτό είναι ο φίλος σας.
Είναι απλά σημαντικό να πάρετε που χρησιμοποιούνται για το πώς να χρησιμοποιήσετε αυτό.
>> Ας κουβέντα λίγο για καθιστώντας ανταποκρίνεται ιστοσελίδες.
Έτσι, όπως είπα και πριν, οι άνθρωποι που χρησιμοποιούνται τους φορητούς υπολογιστές, που χρησιμοποιούν τα τηλέφωνά τους.
Και όπως μπορείτε να φανταστείτε καλά, αυτό είναι ένα πολύ διαφορετικό μέγεθος οθόνης από αυτό.
Και έτσι η ίδια ιστοσελίδα ότι φαίνεται καλό στο τηλέφωνό μου
δεν πρόκειται να δείχνουν καλά, αναγκαστικά, σε έναν υπολογιστή.
Έτσι, αυτό που έχετε να κάνετε είναι να κάνετε την ιστοσελίδα σας να προσαρμοστούν.
Πρέπει να προσαρμοστούν σε διάφορες μεγέθη οθόνης που είναι σχετικά.
>> Έχει να πω, ξέρω ότι είμαι σε μια υπολογιστή, ένα μεγάλο φορητό υπολογιστή, θα πρέπει να επεκταθεί.
Ξέρω ότι είμαι σε ένα τηλέφωνο, θα πρέπει να συρρικνωθεί.
Και έτσι Bootstrap παρέχει κάποια πολύ, πολύ χρήσιμα εργαλεία για να το κάνουμε αυτό.
Έτσι Bootstrap ας διάλειμμα σας μια ιστοσελίδα σε 12 στήλες.
Μπορείτε να κάνετε τις γραμμές και έχουν 12 στήλες.
Και μπορείτε να δημιουργήσετε διαμερίσματα όμως και εκείνοι που θέλετε.
Μπορείτε να έχετε ένα μεγάλο πράγμα, η οποία είναι 12 στήλες μεγάλη.
Μπορείτε να έχετε δύο πράγματα που είναι από έξι.
Μπορείτε να κάνετε ένα πράγμα που είναι τέσσερις, αυτό που είναι δύο, ή ένα που είναι έξι.
Μπορείτε να κάνετε τρία, τρία, τρία, τρία.
Μπορείτε να κάνετε ό, ανάλυση που θέλετε.
>> Έτσι ίσως την ιστοσελίδα σας πρέπει να έχει ένα αριστερή στήλη που είναι το ένα τρίτο του πλάτους.
Έτσι, ότι θα είναι τέσσερις στήλες πλάτος και το υπόλοιπο της σελίδας
θα είναι οκτώ κίονες μεγάλη.
Έτσι, αυτό είναι ένα παράδειγμα.
Ας σηκώσει ένα άλλο παράδειγμα.
>> Κοινό: κάνει πάντα πρέπει να είναι μια ακόμη διάσπαση;
Θα μπορούσε να είναι ένα επτά, πέντε διάσπαση;
>> Neel MEHTA: Ναι.
Θα μπορούσε να είναι επτά, πέντε.
Ναί.
Εφ 'όσον προσθέτει στο 12, είναι μια χαρά.
Ας πάμε πίσω εδώ.
Και πάλι, ο κώδικας που είναι εδώ είναι επίσης διαθέσιμη εδώ,
υπό ανταποκρίνεται παράδειγμα.
Γι 'αυτό ακριβώς τράβηξε επάνω μερικά παράδειγμα ανταποκρίνεται κωδικό εδώ.
Έτσι, μπορείτε να το κάνετε αυτό, χρησιμοποιώντας ένα πράγμα που ονομάζεται σειρά.
Σειρά είναι απλά μια άλλη κατηγορία.
Είναι ένα άλλο στυλ που προσθέτουν επάνω σας divs για να τους κάνουν τις δικές τους συστατικά.
>> Έτσι που λέτε, div class = "γραμμή" για να κάνει μια σειρά,
για να δώσετε στον εαυτό σας 12 στήλες του χώρου.
Και μετά βάζεις στήλες μέσα από αυτό.
Έτσι, εδώ έχουμε COL-XS-6.
Μην ανησυχείτε για το XS.
Θα μιλήσουμε για ένα λεπτό.
Αλλά βασικά, έχουμε ένα πράγμα που είναι έξι ευρύ.
Καλούμε την αριστερά.
Και έτσι αυτή είναι η αριστερή θέση εδώ.
Έχουμε ένα πράγμα που είναι έξι από τα 12 στήλες ευρύ.
Και ότι το ένα είναι στα δεξιά.
>> καθώς δίνει ακριβώς τις μάρκες div σας το γεμίσουν γκρι.
Έτσι, αυτό είναι ακριβώς έτσι μπορούμε δείτε ότι είναι διακριτή.
Και έτσι αυτό το πρώτο παράδειγμα.
Είναι ένα πολύ απλό παράδειγμα για το πώς θα θα χρησιμοποιούν γραμμές και στήλες σας εδώ.
Μπορείτε να ορίσετε ένα συνεχόμενα χρησιμοποιώντας class = "γραμμή".
Και τότε θα κάνουμε class = "col-XS-6" κάνουμε ήμισυ, "col-XS-6" για να κάνετε το άλλο μισό.
Εδώ είναι ένα πιο περίπλοκο παράδειγμα.
Ας δούμε τα μικροσκοπικά, Τεράστια, Το υπόλοιπο ένα.
>> Μπορούμε να κάνουμε Tiny δύο στήλες πλάτος, μπορούμε να κάνουμε Τεράστια έξι κίονες μεγάλη,
Και το υπόλοιπο τέσσερις στήλες ευρύ.
Αυτό ισοδυναμεί με 12.
Και έτσι αυτά καταλήγουν να εκτείνονται το πλάτος της σελίδας.
Και πάλι, έχουμε μια σειρά έξω.
Στη συνέχεια έχουμε div class = "col-XS-2" και στη συνέχεια 6, και στη συνέχεια 4.
Και αυτό θα παρέχει η δομή για εμάς.
Και έτσι μπορούμε να βάλουμε ανεξαρτήτως το καλό που θέλουμε εδώ μέσα.
Αντί Tiny, μπορούμε να βάλουμε ένα κουμπί.
class = το κουμπί "btn btn-πρωτεύον".
Και έτσι παρατηρήσετε ότι το κουμπί μας δεν καταλαμβάνουν όλο το πλάτος,
αλλά τουλάχιστον είναι περιορισμένη σε αυτό το πολύ χώρο.
>> Έτσι ώστε να είναι όλα ωραία και καλά.
Έτσι, μπορούμε τώρα να χωρίσει την ιστοσελίδα μας σελίδα σε κομμάτια, πλάτος σοφός.
Μπορούμε να πούμε ότι θέλουμε να έχουμε μια αριστερά στήλη, και μια δεξιά στήλη, και ούτω καθεξής.
Αλλά δεν έχουν περάσει πάνω πώς να κάνετε αυτό ανταποκρίνεται.
Και έτσι Bootstrap ας το κάνουμε και αυτό.
Έχει αυτά τα πράγματα που ονομάζεται σημεία διακοπής.
Γι 'αυτό έχει έναν τρόπο να γνωρίζει αν βρίσκεστε σε ένα φορητό υπολογιστή, είστε σε ένα δισκίο,
είστε σε ένα τηλέφωνο οριζόντια, ή είστε σε ένα τηλέφωνο κατακόρυφο.
Γνωρίζει το μέγεθος της οθόνης.
Και αυτό σπάει σε τέσσερις κατηγορίες-- μεγάλα ή LG, η οποία είναι φορητοί υπολογιστές, συνήθως.
md ή μέσο, το οποίο είναι δισκία.
τ.μ., μικρό.
Ή XS, πολύ μικρό.
Και έτσι όταν καθορίζετε μια στήλη, που λέτε,
θα πρέπει να είναι έξι κίονες ευρύ σε μια επιπλέον μικρή συσκευή.
Γι 'αυτό κάναμε COL-XS-6.
Εμείς λέμε ότι θα έπρεπε είναι έξι από τα 12 στήλες ευρύ
σε μια επιπλέον μικρή συσκευή.
Και αν είναι κάτι μεγαλύτερο, απλά θα προεπιλογή να χρησιμοποιούν το επιπλέον μικρό μέγεθος.
Αν είναι κάτι μεγαλύτερο από Πολύ μικρή, θα είναι έξι ευρύ.
Και έτσι μπορούμε να αξιοποιήσουν αυτά να κάνουν στηλών μας
καταλαμβάνουν διαφορετικό ποσό των στήλες με βάση το μέγεθος της οθόνης.
Ας πάμε σε αυτό ανταποκρίνεται αλλαγή μεγέθους.
Έτσι έχουμε στήλες μας.
Και λέει, "col-lg-6 col-XS-12".
Έτσι, δίνεται ό, τι ξέρετε Μέχρι στιγμής, αυτό που κάνετε
ότι πρόκειται να να συμβεί σε μια μεγάλη οθόνη;
Λοιπόν, αυτό είναι το είδος του δώσει τη θέση της, αλλά τι κάνουμε
νομίζετε ότι θα δούμε αρέσει σε μια μεγάλη οθόνη;
Και γιατί συμβαίνει αυτό;
>> Κοινό: είναι αυτό που σε μια μεγάλη οθόνη, είναι
Θα πάρει μόνο ένα τμήμα του πλήρους χώρου;
Όπως και το μισό από αυτό, υποθέτω;
>> Neel MEHTA: Ναι.
>> Κοινό: Και σε μικρότερα οθόνη, πρόκειται
να καταλαμβάνουν ολόκληρη την οθόνη, το 12.
Neel MEHTA: Ναι.
Δικαίωμα.
Έτσι για παράδειγμα, ας απλά κοιτάξτε εδώ κάτω.
Ναί.
Έτσι, σε ό, τι είναι ή LG bigger-- ώστε ο υπολογιστής μου συμβαίνει
να lg γιατί είναι όμορφη wide-- θα κάνει
το πλευρό επειδή είναι col-lg-6.
Έτσι, επειδή είναι σχετικά μεγάλο, αυτό καθιστά έξι κίονες πλάτος και έξι κίονες μεγάλη.
Ας δούμε τι θα συμβεί αν κάνουν αυτό σε ένα μικρότερο.
Είμαι ακριβώς πρόκειται να un-πλήρη οθόνη αυτή.
Και Πάω να συρρικνωθεί την οθόνη.
Πάω να συρρικνωθεί της οθόνης, έτσι ώστε να Μοιάζει Είμαι σε μια μικρότερη συσκευή.
Έτσι, Πάω να συρρικνωθεί σαν αυτό.
>> Και ιδού.
Είναι τώρα στοιβάζονται γιατί τώρα έχουμε πάει
από μεγάλα to-- αυτό είναι πιθανώς ένα επιπλέον μικρό μέγεθος της οθόνης.
Και έτσι τώρα λέει, εντάξει, δεν είμαστε σε μεγάλες, είμαστε σε πολύ μικρό οικόπεδο.
Έτσι θα πάμε να χρησιμοποιήσετε το επιπλέον μικρό μέγεθος.
Και θα πάμε να XS-12, XS-12.
Έτσι πρόκειται να στοιβάζονται.
Και μόλις παρατηρήσετε ότι υπάρχει ένα πράγμα που ονομάζεται ένα σημείο διακοπής.
Ένα σημείο διακοπής, όπου είναι έχετε κάνει τη μετάβαση
από πολύ μικρά σε μικρές, μικρές και μεγάλες, και ούτω καθεξής.
>> Έτσι ακριβώς όπως παρατηρήσετε ότι έχω γλιστρήσει αυτό έξω, τελικά, θα φτάσουμε στο σημείο
όπου θα πηδήξει για να είναι δίπλα-δίπλα.
Ορίστε.
Έτσι υπάρχει το σημείο διακοπής εκεί.
Έτσι, μπορούμε να την κάνουμε ακόμη πιο περίπλοκη.
Τώρα μπορούμε να πούμε, αυτά τα πράγματα θα πρέπει να είναι τέσσερα ευρεία.
Δηλαδή, θα έπρεπε καταλαμβάνουν περίπου το ένα τρίτο
της ομιλίας σε πολύ μεγάλες συσκευές.
Σε ένα μέσο της συσκευής, θα πρέπει να λάβει το ήμισυ της οθόνης γιατί είναι MD-6.
Σε μια πολύ μικρή συσκευή, θα πρέπει να διαρκέσει έως 12.
Και έτσι αυτό φαίνεται αρκετά φυσικό.
Ας προσπαθήσουμε αυτό έξω για τον εαυτό μας.
>> Έτσι, σε μια μεγάλη οθόνη, είναι τέσσερις ευρύ.
Συρρικνωθεί λίγο.
Και είναι τώρα έξι ευρύ.
Έτσι, αυτό είναι έξι, έξι, έξι.
Συρρικνωθεί ακόμη περισσότερο στη συνέχεια, θα στοιβάζονται εντελώς.
Έτσι, αυτό, για παράδειγμα, έχει νόημα αν είστε έχοντας κάρτες, κάρτες, όπως ειδήσεις,
Για παράδειγμα, όπου εάν Είναι σε μια πολύ μεγάλη οθόνη,
είναι εντάξει εάν έχετε πολλές δίπλα-δίπλα επειδή θα πάρετε όλα αρκετός χώρος.
Αλλά πρέπει να έχουν αρκετό χώρο.
Έτσι, σε μια μικρότερη οθόνη, θα θέλατε να τους δώσει
περισσότερο χώρο, αναλογικά, μέρος της σελίδας.
>> Έτσι, ως ένα πραγματικό παράδειγμα κόσμο, Ας πούμε ότι έχουμε Twitter.
Και έχουμε το πλαίσιο κειμένου, έτσι μπορείτε να τιτίβισμα στο πλάι.
Και έχουμε μια λίστα τείνοντας θέματα σχετικά με τη δεξιά πλευρά.
Έτσι, σε μια μεγάλη οθόνη, θα πρέπει να έχουν τους είναι δίπλα-δίπλα,
ώστε να μπορείτε να δείτε σε ένα ποτήρι.
Αλλά σε μια μικρότερη οθόνη, θα πρέπει να κάνουμε 12 και 12,
έτσι ώστε τα trending θέματα είναι κάτω από την περιοχή tweet.
Επειδή η περιοχή είναι το τιτίβισμα κύριο πράγμα και σε μια μικρή οθόνη,
τα trending θέματα δεν έχει σημασία τόσο πολύ.
Και έτσι μπορούμε να τα διορθώσουμε στη συνέχεια, έτσι ότι μπορούν να πάρουν τόσο αρκετό χώρο.
Νόημα μέχρι στιγμής;
>> Κοινό: Ναι.
>> Neel MEHTA: Στερεά.
Έτσι ώστε να είναι όλα τα παραδείγματα που έχω εδώ.
Ας προσπαθήσουμε και να κάνουμε μια πρόκληση.
Έτσι και πάλι, αυτό είναι πρόκληση, για 2.html Όσοι από εσάς μετά μαζί στο σπίτι.
Έτσι φίλε μου, Mark Zuckerberg, ήρθε σε μένα τις προάλλες.
Και αυτός είναι όπως, Neel, έχω πάρει αρκετά καλός στο web design.
Μπορώ να κάνω την HTML.
Έχω κάνει αυτό το μικρό, νέα επεξεργασία στο Facebook.
Έχω μια νέα ιδέα για το πώς θα πρέπει να το στυλ του Facebook.
Και εδώ είναι.
Ακριβώς εδώ.
Εδώ είναι μερικά παράδειγμα κώδικα.
Γι 'αυτό λέγεται Fancybook.
>> Έχουμε κάποιες ενημερώσεις κατάστασης.
Έχουμε τον Νέμο, ο Mike Kosowski, ***-- τρεις ενημερώσεις κατάστασης.
Και τότε θα έχουμε έναν κατάλογο φίλους σε απευθείας σύνδεση ακριβώς από κάτω.
Έτσι, έχει κάνει την εργασία του.
Ξέρει λίγο για Bootstrap, έχει κάνει την προβολή λίστας,
έχει κάνει ένα μικρό κομμάτι της HTML.
Έτσι έχει την ιστοσελίδα.
Αλλά αυτός είναι όπως, Neel, δεν το κάνω κατανοήσουν ανταποκρίνεται σχεδιασμού καθόλου.
Έχετε κάποιες εμπειρογνώμονες οι οποίοι θα μπορούσε να με βοηθήσει με αυτό;
Και ευτυχώς, είστε τώρα εμπειρογνώμονες σε ανταποκρίνεται σχεδιασμού.
>> Έτσι, αυτό που μου είπε ήταν ότι θέλει Fancybook να μοιάζει με αυτό.
Σε μια πολύ μικρή συσκευή, όπως ένα τηλέφωνο, τα πάντα
Θα πρέπει να στοιβάζονται, όπως εδώ.
Έτσι έχετε το χρονοδιάγραμμα εκ των προτέρων, επάνω στην κορυφή, και στη συνέχεια
θα πρέπει να έχετε το συνομιλία γραμμή στο κάτω μέρος.
Αλλά σε ένα δισκίο ή ένα μέσο της συσκευής, θα πρέπει να είναι ένα δεύτερο και ένα δεύτερο,
όπως και στο χρονοδιάγραμμα θα πρέπει να είναι το ήμισυ και η λίστα των φίλων συνομιλίας
θα πρέπει να είναι στο άλλο μισό.
>> Στη συνέχεια, σε ένα φορητό υπολογιστή, το χρονοδιάγραμμα θα πρέπει να αναλάβουν τα τρία τέταρτα
και στη συνέχεια η συζήτηση της σχέσης αντιστάθμισης πρέπει καταλαμβάνουν ένα άλλο ένα τέταρτο.
Και έτσι είναι όπως, Neel, έχω αυτό κώδικα εδώ, αλλά δεν είναι ανταποκρίνεται.
Πρέπει να συμπεριφέρονται σαν αυτό.
Έτσι, η πρόκλησή μου σε σας δίνεται αυτόν τον κώδικα here--
αν ανανεώσετε σας CodePens, θα το δείτε αυτό.
Ή αν απλά επικολλήστε τον κωδικό σχετικά με πρόκληση-2, θα το δείτε αυτό.
>> Εδώ είναι αυτό το παράδειγμα κώδικα.
Θα δείτε μερικά xxxs.
Θέλω να αλλάξετε τις xxxs, έτσι ώστε το χρονοδιάγραμμα και ο κατάλογος των φίλων
Επομένως, αυτά τα specs εδώ.
Μην ανησυχείτε για το τι είναι μέσα στο χρονοδιάγραμμα για τώρα.
Θα πάρετε ότι στο επόμενο βήμα.
Αλλά για τώρα, ας δούμε αν θα πάρουμε Αυτά τα πράγματα για να χωρίσουν σαν αυτό.
Έτσι Μήπως αυτό έχει νόημα;
Έτσι, αν είστε στο σπίτι, παύση του βίντεο και προσπαθήστε
για να κάνουν την ιστοσελίδα σας φαίνονται να ανταποκρίνονται σαν αυτό.
Αν είστε εδώ, πάρτε σαν δύο, τρία λεπτά.
Μη διστάσετε να συνομιλήσετε με έναν γείτονα, και να προσπαθήσουμε και να διορθώσετε κ του Zuckerberg
ανταποκρίνεται πρόβλημα σχεδιασμού.
Εάν έχετε οποιεσδήποτε ερωτήσεις, διστάσετε να επιτρέψτε μου να ξέρω.
Αισθάνομαι καλά?
Έγινε?
Όμορφη.
>> Κοινό: [δεν ακούγεται].
Neel MEHTA: Τι;
>> Κοινό: Είμαι καλός.
>> Neel MEHTA: Ωραία.
Όμορφη.
Κοινό: Το πράγμα για το 12, είναι ότι Bootstrap
αντιμετωπίζει ένα συγκεκριμένο χώρο στην οθόνη ως 12 μονάδες και στη συνέχεια σε όλη την χωρίζει ότι μέχρι;
Πώς ακριβώς λειτουργεί η αναλογιών εργασία γι 'αυτό;
>> Neel MEHTA: Ναι.
Το ερώτημα λοιπόν είναι, πώς κάνει το αναλογιών
εργάζονται για Bootstrap, σωστά;
>> Κοινό: Ναι.
Neel MEHTA: Έτσι, κάθε φορά έχετε μια τάξη div = "γραμμή",
δεν έχει σημασία πόσο μεγάλη είναι η οθόνη, Bootstrap θα σας δώσει 12 μονάδες
του ίδιου μεγέθους για αναλαμβάνει τα πολύ μέγεθος.
Έτσι, στην στήλη 1, είναι πάντα 8,33% το μέγεθος της οθόνης,
αν αυτό είναι το μεγάλο αυτό ή ότι είναι αυτός ο ευρύς.
Και έτσι, φυσικά, σε μια μικρότερη οθόνη, κάθε στήλη είναι μικρότερη.
Έχετε ακόμα 12 κολώνες πλάτος, είναι ένα μικρότερο.
Γι 'αυτό είναι στο χέρι σας για να βεβαιωθείτε ότι ότι τα πράγματα καταλαμβάνουν περισσότερο στήλη,
αναλογικά, για την αντιστάθμιση για την εν λόγω έλλειψης χώρου.
Βγάζει νόημα αυτό?
>> Κοινό: Ναι.
Ευχαριστώ.
Neel MEHTA: Καλή ερώτηση.
Κοινό: Σε ένα μεγάλο οθόνη, μπορεί να έχετε
το χρονοδιάγραμμα διαρκέσει έως τρία τέταρτα;
>> Neel MEHTA: Ναι.
Neel MEHTA: Πώς οι άντρες αισθάνονται;
Καλός?
Δροσερός.
Ας επανέλθουμε.
Και ας προσπαθήσουμε και να διορθώσετε αυτό το μέρος της ιστοσελίδας του κ Zuckerberg.
Έτσι, τα χρονοδιαγράμματα είναι εδώ, στο η κορυφή, και η λίστα των φίλων
βρίσκεται στο κάτω μέρος.
Και γι 'αυτό ακριβώς πρέπει να αναθέσετε στήλες, με μέγεθος ανάλογο,
σε κάθε μία από αυτές.
Έτσι, αυτή η πρώτη *** είναι το χρονοδιάγραμμα.
Ποια μαθήματα θα βάλουμε εδώ;
Τι έκανες ρε παιδιά βάλετε εδώ μέσα;
Έτσι θυμηθείτε, σε μια μεγάλη οθόνη, θα πρέπει να αναλάβουν τα τρία τέταρτα του πλάτους.
Και ναι, ποια στυλ θα σας δώσει αυτό;
Σε μια μεγάλη οθόνη, τρεις τέταρτα του πλάτους.
Ποια τάξη χρησιμοποιούμε εκεί;
Κοινό: Γι 'αυτό ακριβώς πρόκειται να είναι επεξεργασία της συγκεκριμένης Πρωτοδικείου της κατηγορίας.
Neel MEHTA: Για τώρα.
Ναί.
>> Κοινό: Δεν είμαστε επεξεργασία η κάθε μία, επιμέρους χαρακτηριστικό του χρονοδιαγράμματος;
Neel MEHTA: Οχι τώρα, τουλάχιστον.
Έτσι, όλο αυτό το πράγμα είναι ένα μπλοκ.
Είμαστε ακριβώς την αλλαγή του σχεδιασμός του μπλοκ.
Έτσι, εδώ κάνουμε COL-lg-9 γιατί είναι εννέα από τα 12 ευρεία σε μια μεγάλη οθόνη.
Και στη συνέχεια σε ένα μέσο οθόνη, πόσες στήλες θα πρέπει να πάρω;
Κοινό: Υποτίθεται να είναι μισό και μισό.
Neel MEHTA: Δεξιά.
Έτσι, πόσα είναι αυτό;
>> Κοινό: Μέχρι έξι.
Neel MEHTA: Έξι.
Και τότε θα πρέπει επιπλέον μικρό be-- αν καταλαμβάνει όλο το πλάτος της σειράς,
πόσοι θα έπρεπε να είναι;
Κοινό: 12.
Neel MEHTA: 12.
Ναί.
Και τώρα έχουμε να αλλάξετε αυτό άλλες,
έτσι ώστε να καταλαμβάνει τον υπόλοιπο χώρο.
Έτσι COL-lg--
Κοινό: Δεν πρόκειται να καταλαμβάνουν ολόκληρη την οθόνη;
Neel MEHTA: Παίρνει το ένα τέταρτο της οθόνης σε μια μεγάλη συσκευή,
όπως δείξαμε εδώ.
>> Κοινό: Τρία.
>> Neel MEHTA: Τρία.
Και τότε COL-md-6 να λάβει πάνω στο υπόλοιπο του χώρου.
COL-XS-12.
Έτσι τώρα έχουμε το χρονοδιάγραμμα ανάληψη τρία τέταρτα
της σελίδας στην μεγάλη οθόνη και, στη συνέχεια, το ένα τέταρτο από την πλευρά του.
Και στη συνέχεια, αν το μέγεθος της οθόνης προς τα κάτω, θα πρέπει να αλλάξετε το μέγεθος αναλόγως.
Έτσι είναι τώρα στοιβάζονται, σε μια πολύ μικρή οθόνη.
Και αν το μέγεθος μέχρι και λίγο, θα πρέπει να είναι ακριβώς το μισό και μισό.
Έτσι κάναμε ότι μέχρι στιγμής.
Πολύ κουλ.
Και γι 'αυτό δεν θα το κάνουμε το άλλο μέρος της πρόκλησης.
Μπορείτε να το κάνετε αυτό στον εαυτό σας.
Αλλά βασικά, θα πρέπει να προσπαθήσουμε και να κάνουμε αυτά ανταποκρίνονται
όπως well-- κάνουν το χρονοδιάγραμμα στοιχεία, οι ίδιοι, που να ανταποκρίνεται.
Έτσι τώρα έχουμε περάσει Όλα όσα πρέπει να ξέρετε
σχετικά με την ανταπόκριση πλευρά του Bootstrap.
Οποιεσδήποτε ερωτήσεις σχετικά με την ανταπόκριση σχεδίαση με Bootstrap
και πώς μπορείτε να πάτε για να κάνει αυτό;
Ναί?
>> Κοινό: Είναι παρόμοια περίπτωση είχαμε ένα ενσωματωμένο βίντεο
και θέλαμε να ελέγξει το κλίμακα στην οποία η was-- βίντεο
το μέγεθος του βίντεο πηγαίνοντας από το φορητό υπολογιστή στο τηλέφωνο.
Neel MEHTA: Ναι.
Περισσότερο ή λιγότερο.
Θα έπρεπε να πει το βίντεο για να καταλαμβάνουν πολύς χώρος είναι δεδομένη,
το οποίο είναι λίγο ενοχλητικό μερικές φορές.
Αλλά η βασική ιδέα είναι η ίδια.
Ένα βίντεο, όπως και κάθε άλλο αντικείμενο στο η σελίδα, όπως ένα κουμπί ή οτιδήποτε άλλο,
εφ 'όσον μπορείτε να χρησιμοποιήσετε το στήλες και οι γραμμές,
μπορείτε να δώσετε ένα ορισμένο ποσό του χώρου.
Και έτσι να πάρει αυτό για να τιμήσει ότι είναι ένα διαφορετική ερώτηση, διότι όπως το YouTube
ενσωματώνει έχουν ένα συγκεκριμένο, προτιμώμενο μέγεθος.
Αλλά θεωρητικά Τουλάχιστον, αυτό θα μπορούσε να λειτουργήσει.
Δροσερός?
>> Κοινό: Υποθέτω λοιπόν, για μια εικόνα, να κάνετε πραγματικότητα
πρέπει να έχουν διαφορετικές εκδόσεις του η ίδια εικόνα σε διαφορετικά μεγέθη
για το laptop σε σχέση με το iPhone;
Ναι Το ερώτημα είναι, εμείς πρέπει να έχουν εικόνες, οι οποίες ανταποκρίνονται, καθώς και.
Και πράγματι, μπορείτε να το κάνετε αυτό.
Νομίζω ότι είναι σε CSS.
Αλλά Bootstrap επιτρέπει μπορείτε να το κάνετε και αυτό.
Μπορείτε να έχετε ανταποκρίνονται εικόνες.
Μπορείτε να έχετε το μέγεθος των εικόνων σας ανάλογα με το μέγεθος της σελίδας.
Και υπάρχει ένα πολύ νέο πράγμα HTML5, η νεότερη έκδοση της HTML,
και CSS3, το νεότερο έκδοση του CSS, η οποία
θα σας αφήσει να ζητήσετε διαφορετικές εικόνες με βάση το μέγεθος της οθόνης είστε.
Συνήθως, είναι αρκετά καλό για απλά έχουν την εικόνα σας ακριβώς συρρικνωθεί ή να αυξηθεί σε
Ωστόσο, μεγάλο πρέπει να είναι.
Αλλά μπορείτε, αν θέλετε να έχουν ένα 32 από 32
για τις πολύ μικρές οθόνες, και 64 από 64 για μια μεγάλη οθόνη,
και, στη συνέχεια, για να εξυπηρετήσει όσους επιλεκτικά.
Μπορείς να το κάνεις.
Είναι γίνει από κάποιους ανθρώπους.
Είναι ακόμα αρκετά αιχμής.
Αλλά σύντομη απάντηση, που να ανταποκρίνεται images-- Bootstrap μπορεί να σώσει την ημέρα εκεί.
Δροσερός?
>> Κοινό: Σας ευχαριστώ.
>> Neel MEHTA: Ας μιλήσουμε πραγματικά γρήγορα για το πώς
για να πάρει αυτό στη δική σας ιστοσελίδα.
Ας πούμε ότι θέλετε να σας δική του ιστοσελίδα χρησιμοποιώντας Bootstrap.
Και έτσι ας μόνο περπατάς με τα πόδια μαζί.
Ας πούμε ότι έχετε κάνει μόνο μια κανονική σελίδα HTML.
Μη διστάσετε να παρακολουθήσει μαζί σε ανεξάρτητα από το αγαπημένο σας επεξεργαστή είναι.
Γι 'αυτό ακριβώς έχουμε κάποια σελίδα HTML.
Μπορούμε να το κάνουμε! DOCTYPE HTML.
Αυτό είναι, επίσης, HTML, σελίδα μας.
Τίποτα καινούργιο.
Έχουμε κάνει πριν από αυτό.
Έτσι, εδώ έχουμε HTML μας και μπορούμε να βάλουμε τα πράγματα εδώ μέσα.
Μπορούμε να έχουμε το κουμπί μας.
Και όπως είπα και πριν, αυτό δεν είναι απαραίτητα πρόκειται να λειτουργήσει.
Γιατί αυτό δεν λειτουργήσει;
Γιατί δεν θα έχουμε μας ωραίο, πολύχρωμο κουμπί;
>> Κοινό: Επειδή εμείς δεν το συνδέουν για το έργο Μπουτστράπ ή το αρχείο;
Neel MEHTA: Ναι.
Σωστός.
Επειδή είναι Bootstrap-- μόνο ένα φανταχτερό αρχείο CSS.
Είναι μια σειρά από στυλ που συνδέονται με τα στοιχεία σας.
Εδώ τον έχουμε πει ότι εμείς θέλετε να χρησιμοποιήσετε αυτά τα στυλ.
Εγώ θα το μέγεθος αυτό επάνω λίγο.
Έχουμε πει ότι θέλουμε χρησιμοποιήσετε αυτά τα στυλ, αλλά ποτέ δεν
είπε ότι ποιες είναι οι μορφές.
Και αυτό είναι που σας ερώτηση νωρίτερα ήταν.
Αυτή είναι η απάντηση σε αυτό.
Πρέπει να βρούμε έναν τρόπο για να πάρει το στυλ και να τους συμπεριλάβει στην σελίδα μας με κάποιο τρόπο.
Και έτσι Bootstrap βούληση να μας δείξει πώς να το κάνουμε αυτό.
>> Έτσι, αν πάτε στην κορυφή Εδώ, Ξεκινώντας.
Υπάρχουν διάφοροι τρόποι για να το κατεβάσετε.
Αυτό δεν μπορούσε να έχει νόημα απαραίτητα.
Bootstrap-- αυτό θα αφήσει αρπάξει το ίδιο το αρχείο CSS.
Και μπορείτε να συμπεριληφθούν στη δική σας σελίδα.
Πηγαίου κώδικα είναι, αν θέλετε να χαράξει πάνω από τον εαυτό σας.
Δεν χρειάζεται αυτό πραγματικά.
Sass είναι μια γλώσσα που συγκεντρώνει σε CSS.
Σκεφτείτε το σαν ένα προεπεξεργαστή.
Μοιάζει πολύ με PHP είναι ένα προεπεξεργαστή της HTML, Sass είναι ένα προεπεξεργαστή για CSS.
Έτσι, εάν θέλετε να το κάνετε Με αυτόν τον τρόπο, μπορείτε να το κάνετε αυτό.
>> Ο ευκολότερος τρόπος είναι χρησιμοποιώντας ένα CDN, ή το περιεχόμενο του δικτύου διανομής.
Είναι μια ιστοσελίδα που μόλις εξυπηρετεί ένα αντίγραφο του Bootstrap
πολύ γρήγορα για να περιλαμβάνονται στη δική σας σελίδα.
Έτσι, εδώ είναι ένα παράδειγμα.
Θα σας δώσει αυτό το στοιχείο link.
Ένα στοιχείο συνδέσμου λέει το πρόγραμμα περιήγησής σας, λάβει όλα τα αρχεία αποθηκεύονται εδώ
και περιλαμβάνουν στην ιστοσελίδα μας.
Και σε αυτή την περίπτωση, είναι το αρχείο CSS Bootstrap.
Έτσι θα αντιγράψει ακριβώς αυτό το URL, ή ότι το κείμενο, και θα το ρίξει μέσα
από το κεφάλι μας.
>> Και εγώ δεν θα ξεκινήσει τη σελίδα για αυτό, αλλά μπορείτε να εμπιστευθείτε ότι αυτό λειτουργεί.
Ο σύνδεσμος θα σας πάρει το CSS.
Συμπεριλάβετε αυτό που σου σελίδα και, στη συνέχεια, θα είναι
μπορέσετε να χρησιμοποιήσετε όλες του Bootstrap τάξεις που γνωρίζετε και αγαπάτε.
Αν θέλετε να το κρατήσετε σε τοπικό επίπεδο και έχουν το στο δικό σας σύστημα αρχείων
αντί να πρέπει να πάει στο το διαδίκτυο για να το αρπάξει,
όπως και αν θέλετε να χρησιμοποιήσετε το site offline,
μπορείτε να χρησιμοποιήσετε την επιλογή Λήψη.
Αλλά για το μεγαλύτερο μέρος, χρησιμοποιώντας την CDN είναι αρκετά γρήγορα, γιατί αυτόν τον τρόπο,
αυτό είναι ενημερώνεται συνεχώς για εσάς.
Θα πρέπει να ενημερώσετε με μη αυτόματο τρόπο.
Βγάζει νόημα?
>> Έτσι, πολλά από τα εργαλεία θα έχουν αυτό το ενσωματωμένο στην από προεπιλογή. Σε Pset7 και Pset8 σας,
Πιστεύω ότι είναι Bootstrap συμπεριλαμβάνονται αυτόματα.
Και σε CodePen, για παράδειγμα, είναι ήδη
περιλαμβάνονται γιατί πρόσθεσε προσθέσετε αυτήν τη ρύθμιση.
Έτσι, αν ποτέ θέλετε να παίξετε γύρω με αυτό, μπορείτε απλά να πάτε στο CodePen,
ή πηγαίνετε στο ID σας, ή οτιδήποτε άλλο.
Και ίσως να είναι σε θέση να Πρόσβαση Bootstrap εκεί,
αλλά δεν είναι πάντα χτισμένη στην, από προεπιλογή, στο διαδίκτυο.
Βγάζει νόημα?
>> Ναί.
ακριβώς όπως ένα recap-- έχουμε όπως πέντε λεπτά.
Αλλά ως μια ανακεφαλαίωση, σε νέες ιστοσελίδες, μπορείτε να συμπεριλάβετε Bootstrap σαν αυτό.
Και μόλις έχετε συμπεριλάβει, μπορείτε να κάνετε όλη τη διασκέδαση πράγματα εδώ.
Μπορείτε να πάτε για, και μπορείτε να μελετήσετε μόνο το CSS, μπορείτε να προσθέσετε μερικά δροσερά στυλ,
μπορείτε να έχετε τα συστατικά όπως τα κουμπιά,
και οι πίνακες, και η λίστα τα στοιχεία που αναφέραμε.
Υπάρχουν μερικά δροσερά plugins JavaScript, που ίσως να θέλετε να εξερευνήσετε.
Προσθέτουν κάποιο δροσερό διαδραστικότητα στην ιστοσελίδα.
Σας αρέσει αυτή η κάποιος κάνει ένα αποκλειστικό διάλογο.
>> Έτσι, υπάρχει κάποια διασκεδαστικά πράγματα μπορείτε να κάνετε με Bootstrap.
Έτσι, η συμβουλή μου προς εσάς είναι να πάτε μπροστά και να το χρησιμοποιήσετε σε δικά σας έργα,
ακολουθήστε τις οδηγίες που ακριβώς έκανε για το πώς να το πάρει,
και μόλις διαβάσει την διαδικασία εκκίνησης, διότι θα μάθετε περισσότερα για το τι πρέπει να κάνουμε.
Και έτσι έχουμε πάει πάνω, σήμερα, πώς να χρησιμοποιούν
η τεκμηρίωση, τι το κτίριο μπλοκ είναι, και πώς είναι εννοιολογικά.
Έτσι τώρα πρόκληση μου προς εσάς είναι κάνει μια ιστοσελίδα που χρησιμοποιούν Bootstrap.
Πηγαίνετε στα docs.
Και να χρησιμοποιήσετε τα εργαλεία που έχουμε μάθει μέχρι τώρα να προσπαθήσουμε και να αναλύσει τους
και να τους καταλάβει.
Και να χρησιμοποιούν αυτά τα στυλ και τα εργαλεία σας δούμε εκεί στην ιστοσελίδα σας.
Και αυτό είναι μόνο ένα μεγάλο, πειραματική διαδικασία.
>> Δοκιμάστε ένα συγκεκριμένο στυλ.
Λειτουργεί?
Μήπως δεν είναι;
Δοκιμάστε να βάλετε τα πράγματα μαζί.
Δείτε τι συμβαίνει.
Είναι πάρα πολύ μια αυτο καθοδηγούμενη, διαδικασία ανακάλυψης.
Αλλά σήμερα, έχουμε μάθει το πολύ βασικά για το τι είναι Bootstrap;
Γιατί γίνεται αυτό;
Πώς δουλεύει?
Πώς μπορούμε να αρχίσετε να χρησιμοποιείτε αυτό, στην πρώτη θέση;
Και έτσι τώρα που είστε πάνω από το εξόγκωμα, που
θα πρέπει να είναι σε θέση να το κάνει αρκετά ομαλά από τον εαυτό σας.
>> Έτσι, για άλλη μια φορά, όλα τα Κωδικός κάναμε είναι εδώ.
Έτσι, εάν θέλετε πάντα για να πάρετε μια βούρτσα επάνω,
όπως, τι είναι μια γρήγορη εξαπατήσει φύλλο για όλα τα στυλ;
Μπορείτε να πάτε σε αυτό το δείγμα εδώ.
Έχουμε κάποιες μορφές παράδειγμα εδώ.
Αν θέλετε να δοκιμάσετε το προκλήσεις και πάλι από τον εαυτό σας,
μπορείτε να τα δοκιμάσετε εδώ και ενημερωθείτε για τις λύσεις.
Έτσι, αυτή η σύνδεση θα είναι περιλαμβάνονται στις διαφάνειες, το οποίο
θα σταλεί σε σας φυσικά.
Αλλά είναι επίσης εδώ.
Μπορείτε να διακόψετε προσωρινά το βίντεο, αν θέλετε.
Όλες οι πληροφορίες που χρειάζεστε είναι πρόκειται να είναι ακριβώς εδώ, σε αυτό το site.
Έτσι, αν κάποιος έχει οποιεσδήποτε ερωτήσεις, μπορούμε να τους για τα επόμενα δυο λεπτά.
Σε αντίθετη περίπτωση, σας ευχαριστώ όλους πάρα πολύ για την προσοχή.