Παραδείγματα γρήγορης εκκίνησης

Χρειάζεστε κάποια γρήγορα πρότυπα; Δείτε αυτά τα βασικά παραδείγματα που έχουμε συγκεντρώσει:

Προεπιλεγμένο πλέγμα

Το προεπιλεγμένο σύστημα πλέγματος που παρέχεται ως μέρος του Bootstrap είναι ένα πλέγμα 16 στηλών πλάτους 940 εικονοστοιχείων. Είναι μια γεύση του δημοφιλούς συστήματος πλέγματος 960, αλλά χωρίς το πρόσθετο περιθώριο/γεμίσματος στην αριστερή και τη δεξιά πλευρά.

Παράδειγμα σήμανσης πλέγματος

Όπως φαίνεται εδώ, μια βασική διάταξη μπορεί να δημιουργηθεί με δύο "στήλες", η καθεμία που καλύπτει έναν αριθμό από τις 16 θεμελιώδεις στήλες που ορίσαμε ως μέρος του συστήματος πλέγματος μας. Δείτε τα παρακάτω παραδείγματα για περισσότερες παραλλαγές.

<div class = "σειρά" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Φωλιασμένες στήλες

Φωλιάστε το περιεχόμενό σας, εάν χρειάζεται, δημιουργώντας ένα .rowσε μια υπάρχουσα στήλη.

Παράδειγμα ένθετων στηλών

<div class = "σειρά" > 
  <div class = "span12" > 
    Επίπεδο 1 στήλης
    <div class = "σειρά" > 
      <div class = "span6" > 
        Επίπεδο 2
      </div>
      <div class = "span6" > 
        Επίπεδο 2
      </div>
    </div>
  </div>
</div>

Κυλήστε το δικό σας πλέγμα

Ενσωματωμένα στο Bootstrap είναι μια χούφτα μεταβλητών για την προσαρμογή του προεπιλεγμένου συστήματος πλέγματος 940 px. Με λίγη προσαρμογή, μπορείτε να τροποποιήσετε το μέγεθος των στηλών, τις υδρορροές τους και το δοχείο στο οποίο βρίσκονται.

Μέσα στο πλέγμα

Οι μεταβλητές που απαιτούνται για την τροποποίηση του συστήματος πλέγματος επί του παρόντος βρίσκονται όλες στο preboot.less.

Τώρα για προσαρμογή

Η τροποποίηση του πλέγματος σημαίνει αλλαγή των τριών @grid-*μεταβλητών και εκ νέου μεταγλώττιση των αρχείων Less.

Το Bootstrap είναι εξοπλισμένο για να χειρίζεται ένα σύστημα πλέγματος με έως και 24 στήλες. Η προεπιλογή είναι μόλις 16. Δείτε πώς θα φαίνονται οι μεταβλητές πλέγματος προσαρμοσμένες σε ένα πλέγμα 24 στηλών.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20 px ;   

Μόλις γίνει εκ νέου μεταγλώττιση, θα είστε έτοιμοι!

Σταθερή διάταξη

Η προεπιλεγμένη και απλή διάταξη πλάτους 940 εικονοστοιχείων, κεντραρισμένη για σχεδόν οποιονδήποτε ιστότοπο ή σελίδα παρέχεται από ένα μόνο <div.container>.

<σώμα>
  <div class = "container" > 
    ...
  </div>
</body>

Ρευστή διάταξη

Μια εναλλακτική, ευέλικτη ρευστή δομή σελίδας με ελάχιστα και μέγιστα πλάτη και αριστερή πλαϊνή γραμμή. Ιδανικό για εφαρμογές και έγγραφα.

<σώμα>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "περιεχόμενο" > 
      ...
    </div>
  </div>
</body>

Επικεφαλίδες & αντίγραφο

Μια τυπική τυπογραφική ιεραρχία για τη δόμηση των ιστοσελίδων σας.

Ολόκληρο το τυπογραφικό πλέγμα βασίζεται σε δύο μεταβλητές Less στο αρχείο μας preboot.less: @basefontκαι @baseline. Το πρώτο είναι το βασικό μέγεθος γραμματοσειράς που χρησιμοποιείται παντού και το δεύτερο είναι το ύψος γραμμής βάσης.

Χρησιμοποιούμε αυτές τις μεταβλητές, και μερικά μαθηματικά, για να δημιουργήσουμε τα περιθώρια, τα paddings και τα ύψη γραμμής όλων των τύπων μας και πολλά άλλα.

h1. Επικεφαλίδα 1

h2. Επικεφαλίδα 2

h3. Κεφάλαιο 3

h4. Κεφάλαιο 4

h5. Κεφάλαιο 5

h6. Κεφάλαιο 6

Παράδειγμα παραγράφου

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Παράδειγμα επικεφαλίδας Έχει υποεπικεφαλίδα…

Διάφορα. στοιχεία

Χρησιμοποιώντας έμφαση, διευθύνσεις και συντομογραφίες

<strong> <em> <address> <abbr>

Πότε να χρησιμοποιείται

Οι ετικέτες έμφασης ( <strong>και <em>) θα πρέπει να χρησιμοποιούνται για να υποδεικνύουν την πρόσθετη σημασία ή έμφαση μιας λέξης ή φράσης σε σχέση με το περιβάλλον αντίγραφό της. Χρησιμοποιήστε <strong>το για σημασία και έμφαση <em>στο άγχος .

Έμφαση σε μια παράγραφο

Fusce dapibus , telus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, μια pharetra augue.

Σημείωση: Είναι ακόμα εντάξει να χρησιμοποιείτε <b>και <i>ετικέτες σε HTML5 και δεν χρειάζεται να είναι έντονες και πλάγιες, αντίστοιχα (αν και αν υπάρχει πιο σημασιολογικό στοιχείο, χρησιμοποιήστε το). <b>προορίζεται για την επισήμανση λέξεων ή φράσεων χωρίς να αποδίδει πρόσθετη σημασία, ενώ <i>είναι κυρίως για φωνή, τεχνικούς όρους κ.λπ.

Διευθύνσεις

Το <address>στοιχείο χρησιμοποιείται για πληροφορίες επικοινωνίας για τον πλησιέστερο πρόγονό του ή ολόκληρο το έργο. Ακολουθούν δύο παραδείγματα για το πώς θα μπορούσε να χρησιμοποιηθεί:

Σημείωση: Κάθε γραμμή σε ένα <address>πρέπει να τελειώνει με μια αλλαγή γραμμής ( <br />) ή να είναι τυλιγμένη σε μια ετικέτα σε επίπεδο μπλοκ (π.χ., <p>) για τη σωστή δομή του περιεχομένου.

Συντομογραφίες

Για συντομογραφίες και ακρωνύμια, χρησιμοποιήστε την <abbr>ετικέτα ( <acronym>έχει καταργηθεί στην HTML5 ). Βάλτε τη φόρμα στενογραφίας μέσα στην ετικέτα και ορίστε έναν τίτλο για το πλήρες όνομα.

Μπλοκ εισαγωγικά

<blockquote> <p> <small>

Πώς να παραθέσω

Για να συμπεριλάβετε ένα μπλοκ απόσπασμα , τυλίξτε <blockquote>και προσθέστε ετικέτες. Χρησιμοποιήστε το στοιχείο για να αναφέρετε την πηγή σας και θα λάβετε μια παύλα em πριν από αυτό.<p><small><small>&mdash;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante venenatis dapibus posuere velit aliquet.

Δρ Τζούλιους Χίμπερτ

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Δρ. Julius Hibbert </small>
</blockquote>

Χωρίς παραγγελία<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Ακέραιος μολυσματικός lorem at massa
• Διευκόλυνση σε pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Αστυλ<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Ακέραιος μολυσματικός lorem at massa
• Διευκόλυνση σε pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Διέταξε<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Ακέραιος μολυσματικός lorem at massa
4. Διευκόλυνση σε pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Περιγραφήdl

Λίστες περιγραφής

Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Κώδικας

<code> <pre>

Προσθέστε τον κώδικά σας με στυλ με δύο απλές ετικέτες. Για ακόμη μεγαλύτερη εκπληκτικότητα μέσω της javascript, ρίξτε τη βιβλιοθήκη καλυτέρευσης κώδικα της Google και είστε έτοιμοι.

Παρουσίαση κωδικού

Ο κώδικας, τα μπλοκ ή απλώς τα αποσπάσματα ενσωματωμένα, μπορούν να εμφανιστούν με στυλ απλώς αναδιπλώνοντας τη σωστή ετικέτα. Για μπλοκ κώδικα που εκτείνονται σε πολλές γραμμές, χρησιμοποιήστε το <pre>στοιχείο. Για ενσωματωμένο κώδικα, χρησιμοποιήστε το <code>στοιχείο.

<div>
  <h1>Επικεφαλίδα</h1>
  <p>Κάτι εδώ...</p>
</div>

<div> <h1> Επικεφαλίδα </h1> <p> Κάτι εδώ... </p> </div>
  
  

Ενσωματωμένες ετικέτες

<span class="label">

Τραβήξτε την προσοχή ή επισημάνετε οποιαδήποτε φράση στο σώμα σας.

Επισημάνετε οτιδήποτε

Χρειάστηκε ποτέ ένα από αυτά τα φανταχτερά καινούργια! ή Σημαντικές σημαίες κατά τη σύνταξη κώδικα; Λοιπόν, τώρα τα έχετε. Δείτε τι περιλαμβάνεται από προεπιλογή:

Πλέγμα πολυμέσων

Εμφάνιση μικρογραφιών διαφορετικών μεγεθών σε σελίδες με χαμηλό αποτύπωμα HTML και ελάχιστα στυλ.

Παραδείγματα μικρογραφιών

Οι μικρογραφίες στο .media-gridμπορεί να έχουν οποιοδήποτε μέγεθος, αλλά λειτουργούν καλύτερα όταν αντιστοιχίζονται απευθείας στο ενσωματωμένο σύστημα πλέγματος Bootstrap. Πλάτη εικόνας όπως 90, 210 και 330 συνδυάζονται με μερικά εικονοστοιχεία συμπλήρωσης για να ισούται με τα μεγέθη .span2, .span4, και .span6στηλών.

Μεγάλο

Μεσαίο

Μικρό

Κωδικοποίησή τους

Τα πλέγματα πολυμέσων είναι εύκολα στη χρήση και μάλλον απλά στην πλευρά της σήμανσης. Οι διαστάσεις τους βασίζονται καθαρά στο μέγεθος των εικόνων που περιλαμβάνονται.

<ul class = "πλέγμα πολυμέσων" > 
  <li>
    <a href = "#" > 
      <img class = "μικρογραφία" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "μικρογραφία" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Τραπέζια δόμησης

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Τα τραπέζια είναι υπέροχα—για πολλά πράγματα. Οι υπέροχοι πίνακες, ωστόσο, χρειάζονται λίγη αγάπη σήμανσης για να είναι χρήσιμοι, επεκτάσιμοι και ευανάγνωστοι (σε ​​επίπεδο κώδικα). Ακολουθούν μερικές συμβουλές για να βοηθήσετε.

Πάντα να τυλίγετε τις κεφαλίδες των στηλών σας <thead>έτσι ώστε η ιεραρχία να είναι <thead>> <tr>> <th>.

Παρόμοια με τις κεφαλίδες στηλών, όλο το περιεχόμενο του σώματος του πίνακα σας θα πρέπει να είναι τυλιγμένο σε ένα <tbody>, ώστε η ιεραρχία σας να είναι <tbody>> <tr>> <td>.

Παράδειγμα: Προεπιλεγμένα στυλ πίνακα

Όλοι οι πίνακες θα διαμορφωθούν αυτόματα με μόνο τα βασικά περιγράμματα για να διασφαλιστεί η αναγνωσιμότητα και η διατήρηση της δομής. Δεν χρειάζεται να προσθέσετε επιπλέον κλάσεις ή χαρακτηριστικά.

<πίνακας>
  ...
</table>

Παράδειγμα: Ζέβρα-ριγέ

Διασκεδάστε λίγο με τα τραπέζια σας προσθέτοντας ζέβρα-απλώς προσθέστε την .zebra-stripedτάξη.

Σημείωση: Το Zebra-striping είναι μια προοδευτική βελτίωση που δεν είναι διαθέσιμη για παλαιότερα προγράμματα περιήγησης όπως το IE8 και νεότερη έκδοση.

<table class = "ζέβρα-ριγέ" > 
...
</table>

Παράδειγμα: Zebra-striped w/ TableSorter.js

Λαμβάνοντας το προηγούμενο παράδειγμα, βελτιώνουμε τη χρησιμότητα των πινάκων μας παρέχοντας λειτουργικότητα ταξινόμησης μέσω του jQuery και της προσθήκης Tablesorter . Κάντε κλικ στην κεφαλίδα οποιασδήποτε στήλης για να αλλάξετε την ταξινόμηση.

<script src = "js/jquery/jquery.tablesorter.min.js" </script> 
<σενάριο > 
  $ ( συνάρτηση () { 
    $ ( "table# sortTableExample" ). πίνακας ταξινόμησης ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "ζέβρα-ριγέ" > 
  ...
</table>

Προεπιλεγμένα στυλ

Σε όλες τις φόρμες δίνονται προεπιλεγμένα στυλ για να παρουσιάζονται με ευανάγνωστο και κλιμακωτό τρόπο. Παρέχονται στυλ για εισαγωγή κειμένου, επιλεγμένες λίστες, περιοχές κειμένου, κουμπιά επιλογής και πλαίσια ελέγχου και κουμπιά.

Στοιβαγμένες φόρμες

Προσθέστε .form-stackedστο HTML της φόρμας σας και θα έχετε ετικέτες πάνω από τα πεδία τους αντί στα αριστερά τους. Αυτό λειτουργεί εξαιρετικά εάν οι φόρμες σας είναι σύντομες ή έχετε δύο στήλες εισόδων για πιο βαριές φόρμες.

Μεγέθη πεδίων φόρμας

Προσαρμόστε οποιαδήποτε φόρμα input, selectή textareaπλάτος προσθέτοντας μερικές μόνο κατηγορίες στη σήμανση.

Από την έκδοση 1.3.0, έχουμε προσθέσει τις κατηγορίες μεγέθους βάσει πλέγματος για στοιχεία φόρμας. Χρησιμοποιήστε αυτά πάνω από τις υπάρχουσες κλάσεις .mini, .small, κλπ.

Κουμπιά

Κατά κανόνα, τα κουμπιά χρησιμοποιούνται για ενέργειες ενώ οι σύνδεσμοι για αντικείμενα. Για παράδειγμα, η "Λήψη" θα μπορούσε να είναι ένα κουμπί και η "πρόσφατη δραστηριότητα" θα μπορούσε να είναι ένας σύνδεσμος.

Όλα τα κουμπιά έχουν προεπιλεγμένο στυλ ανοιχτό γκρι, αλλά μπορεί να εφαρμοστεί ένας αριθμός λειτουργικών κατηγοριών για διαφορετικά στυλ χρώματος. Αυτές οι τάξεις περιλαμβάνουν μια .primaryκατηγορία μπλε, μια κατηγορία ανοιχτό μπλε .info, μια πράσινη .successτάξη και μια .dangerτάξη κόκκινου.

Παράδειγμα κουμπιά

Τα στυλ κουμπιών μπορούν να εφαρμοστούν σε οτιδήποτε με το .btnεφαρμοσμένο. Συνήθως, θα θέλετε να τα εφαρμόσετε μόνο σε στοιχεία <a>, <button>, και επιλέξτε <input>. Δείτε πώς φαίνεται:

Εναλλακτικά μεγέθη

Θέλετε μεγαλύτερα ή μικρότερα κουμπιά; Να το έχετε!

Κατάσταση αναπηρίας

Για κουμπιά που δεν είναι ενεργά ή είναι απενεργοποιημένα από την εφαρμογή για τον ένα ή τον άλλο λόγο, χρησιμοποιήστε την κατάσταση απενεργοποίησης. Αυτό είναι .disabledγια συνδέσμους και :disabledγια <button>στοιχεία.

Συνδέσεις

Κουμπιά

Τι είναι αυτό

Η επάνω γραμμή μας είναι μια σταθερή γραμμή που φιλοξενεί το λογότυπο ή το όνομα ενός ιστότοπου, την κύρια πλοήγηση και τη φόρμα αναζήτησης.

Προσαρμόσιμο

Όλα τα στοιχεία μέσα, καθώς και ολόκληρη η επάνω γραμμή, είναι προαιρετικά. Μπορείτε να επιλέξετε να συμπεριλάβετε ένα λογότυπο/όνομα, μια πλοήγηση, μια αναζήτηση και μια δευτερεύουσα πλοήγηση—ή οποιονδήποτε συνδυασμό αυτών.

Περιλαμβάνονται αναπτυσσόμενα

Ως μέρος της κύριας πλοήγησης, έχουμε συμπεριλάβει τη δυνατότητα να προσθέτετε αναπτυσσόμενα μενού στην περιήγησή σας. Ελέγξτε τη δευτερεύουσα πλοήγηση παραπάνω (δεξιά στοίχιση) για να δείτε πώς γίνεται. Οι αναπτυσσόμενες liετικέτες υποστηρίζουν επίσης .activeτην εμφάνιση της τρέχουσας επιλογής σελίδας.

Ταμπλέτες και χάπια

Δημιουργήστε απλή δευτερεύουσα πλοήγηση με ένα <ul>. Εναλλάξτε μεταξύ καρτελών ή χαπιών προσθέτοντας την κατάλληλη κατηγορία.

Ιδανικό για υποενότητες περιεχομένου, όπως οι σελίδες ρυθμίσεων λογαριασμού και τα χρονοδιαγράμματα χρήστη για εναλλαγή μεταξύ σελίδων παρόμοιου περιεχομένου. Διατίθεται σε στυλ με καρτέλες ή χάπι.

• Σπίτι
• Προφίλ
• Μηνύματα
• Ρυθμίσεις
• Επικοινωνία
• Αναπτυσσόμενο
  • Δευτερεύων σύνδεσμος
  • Κάτι άλλο εδώ
  • Άλλος ένας σύνδεσμος

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Αρχική σελίδα </a></li>  
  <li><a href = "#" > Προφίλ </a></li> 
  <li><a href = "#" > Μηνύματα </a></li> 
  <li><a href = "#" > Ρυθμίσεις </a></li> 
  <li><a href = "#" > Επικοινωνία </a></li> 
</ul>

• Σπίτι
• Προφίλ
• Μηνύματα
• Ρυθμίσεις
• Επικοινωνία

<ul class = "χάπια" > 
  <li class = "active" ><a href = "#" > Αρχική σελίδα </a></li>  
  <li><a href = "#" > Προφίλ </a></li> 
  <li><a href = "#" > Μηνύματα </a></li> 
  <li><a href = "#" > Ρυθμίσεις </a></li> 
  <li><a href = "#" > Επικοινωνία </a></li> 
</ul>

Τριμμένη φρυγανιά

Η πλοήγηση Breadcrumb χρησιμοποιείται ως τρόπος για να δείξει στους χρήστες πού βρίσκονται μέσα σε μια εφαρμογή ή έναν ιστότοπο, αλλά όχι για την κύρια πλοήγηση.

• Σπίτι

• Αρχική σελίδα /
• Μέση σελίδα

• Αρχική σελίδα /
• μεσαία σελίδα /
• Αλλο ένα

• Αρχική σελίδα /
• μεσαία σελίδα /
• άλλο ένα /
• Είστε εδώ

<ul class = "ψωμάκι" > 
  <li><a href = "#" > Αρχική σελίδα </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Μέση σελίδα </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Άλλο ένα </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Είστε εδώ </li> 
</ul>

Σελιδοποίηση

Εξαιρετικά απλοϊκή και μινιμαλιστική σελιδοποίηση εμπνευσμένη από το Rdio. Το μεγάλο μπλοκ είναι δύσκολο να το χάσετε, εύκολα κλιμακώνεται και παρέχει μεγάλες περιοχές κλικ.

<div class = "σελιδοποίηση" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Προηγούμενο </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Επόμενο → </a></li>  
  </ul>
</div>

Βασικές ειδοποιήσεις

.alert-message

Μηνύματα μιας γραμμής για την επισήμανση της αποτυχίας, πιθανής αποτυχίας ή επιτυχίας μιας ενέργειας. Ιδιαίτερα χρήσιμο για φόρμες.

Λάβετε το javascript »

Παράδειγμα κώδικα

<div class = "προειδοποίηση μηνύματος ειδοποίησης" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Ιερό γουακαμόλε! </strong> Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά. </p>
</div>

Αποκλεισμός μηνυμάτων

.alert-message.block-message

Για μηνύματα που απαιτούν λίγη εξήγηση, έχουμε ειδοποιήσεις στυλ παραγράφου. Αυτά είναι ιδανικά για τη δημιουργία φυσαλίδων μεγαλύτερης διάρκειας μηνυμάτων σφάλματος, την προειδοποίηση ενός χρήστη για μια ενέργεια σε εκκρεμότητα ή απλώς την παρουσίαση πληροφοριών για μεγαλύτερη έμφαση στη σελίδα.

Λάβετε το javascript »

Παράδειγμα κώδικα

<div class = "προειδοποίηση αποκλεισμού μηνύματος ειδοποίησης" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Ιερό γουακαμόλε! Αυτή είναι μια προειδοποίηση! </strong> Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά. Nulla vitae elit libero, μια pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Κάντε αυτήν την ενέργεια </a> <a class = "btn small" href = "#" > Ή κάντε αυτό </a>     
  </div>
</div>

Modals

Τα Modals—διάλογοι ή lightbox—είναι ιδανικά για ενέργειες με βάση τα συμφραζόμενα σε καταστάσεις όπου είναι σημαντικό να διατηρηθεί το περιβάλλον φόντου.

Λάβετε το javascript »

Συμβουλές εργαλείων

Τα Twipsies είναι εξαιρετικά χρήσιμα για να βοηθήσετε έναν μπερδεμένο χρήστη και να τον κατευθύνετε προς τη σωστή κατεύθυνση.

Λάβετε το javascript »

Popovers

Χρησιμοποιήστε popover για να παρέχετε υποκειμενικές πληροφορίες σε μια σελίδα χωρίς να επηρεάζετε τη διάταξη.

Λάβετε το javascript »

Ξεκινώντας

Η ενσωμάτωση της javascript με τη βιβλιοθήκη Bootstrap είναι εξαιρετικά εύκολη. Παρακάτω εξετάζουμε τα βασικά και σας παρέχουμε μερικές καταπληκτικές προσθήκες για να ξεκινήσετε!

Προβολή εγγράφων javascript »

Τι περιλαμβάνεται

Δώστε ζωή σε μερικά από τα κύρια στοιχεία του Bootstrap με νέες προσαρμοσμένες προσθήκες που λειτουργούν με το jQuery και το Ender . Σας ενθαρρύνουμε να τις επεκτείνετε και να τις τροποποιήσετε ώστε να ταιριάζουν στις συγκεκριμένες αναπτυξιακές σας ανάγκες.

Είναι απαραίτητο το javascript;

Οχι! Το Bootstrap έχει σχεδιαστεί πρώτα και κύρια για να είναι μια βιβλιοθήκη CSS. Αυτό το javascript παρέχει ένα βασικό διαδραστικό επίπεδο πάνω από τα στυλ που περιλαμβάνονται.

Ωστόσο, για όσους χρειάζονται javascript, παρέχουμε τα πρόσθετα παραπάνω για να σας βοηθήσουμε να κατανοήσετε πώς να ενσωματώσετε το Bootstrap με το javascript και να σας δώσουμε μια γρήγορη, ελαφριά επιλογή για τη βασική λειτουργικότητα αμέσως.

Για περισσότερες πληροφορίες και για να δείτε μερικές ζωντανές επιδείξεις, ανατρέξτε στη σελίδα τεκμηρίωσης των προσθηκών .