Bootstrap

Bootstrap

Γενικά
Δημιουργοί	Mark Otto, Jacob Thornton
Ημερ. Δημιουργίας	19 Αύγουστος 2011
Είδος	CSS framework, ελεύθερο και ανοιχτού κώδικα λογισμικό
Διανομή
Έκδοση	5.3.3 (20 Φεβρουάριος 2024)
Δοκιμαστική έκδοση	5.0.0-beta1 (7 Δεκέμβριος 2020) 5.0.0-beta2 (10 Φεβρουάριος 2021)
Λειτουργικά	Ανεξάρτητο πλατφόρμας
Αρχιτεκτονική	διαδικτυακή πλατφόρμα
Ανάπτυξη
Γραμμένο σε	CSS, HTML
Άδεια χρήσης	Άδεια MIT
Σύνδεσμοι
Επίσημος ιστότοπος
https://getbootstrap.com
Αποθετήριο κώδικα
https://github.com/twbs/bootstrap

Το Bootstrap είναι μια συλλογή εργαλείων ανοιχτού κώδικα (ελεύθερο λογισμικό) για τη δημιουργία ιστοσελίδων και διαδικτυακών εφαρμογών. Περιέχει HTML και CSS για τις μορφές τυπογραφίας, κουμπιά πλοήγησης και άλλων στοιχείων του περιβάλλοντος, καθώς και προαιρετικές επεκτάσεις JavaScript. Είναι το πιο δημοφιλές πρόγραμμα στο GitHub και έχει χρησιμοποιηθεί από τη NASA και το MSNBC, μεταξύ άλλων.

Προέλευση

Το Bootstrap αναπτύχθηκε από τον Mark Otto και τον Jacob Thornton στο Twitter ως ένα πλαίσιο για την ενθάρρυνση της συνέπειας στα εσωτερικά εργαλεία. Πριν το Bootstrap, διάφορες βιβλιοθήκες χρησιμοποιήθηκαν για την ανάπτυξη της διεπαφής, η οποία οδήγησε σε αντιφάσεις και υψηλή φορολογική επιβάρυνση συντήρησης. Σύμφωνα με τον Twitter developer Mark Otto, για την αντιμετώπιση αυτών των προκλήσεων : "... πήρα μαζί μία σούπερ μικρή ομάδα προγραμματιστών για να σχεδιάσει και να κατασκευάσει ένα νέο εργαλείο εσωτερικής και είδα μια ευκαιρία να κάνουμε κάτι περισσότερο. Μέσω αυτής της διαδικασίας, είδαμε τους εαυτούς μας να χτίζουν κάτι πολύ πιο σημαντικό από οποιοδήποτε άλλο εσωτερικό εργαλείο. Μήνες αργότερα, καταλήξαμε σε μια πρώιμη έκδοση του Bootstrap ως έναν τρόπο για να καταγράψουμε και να μοιραστούμε κοινά πρότυπα σχεδιασμού και περιουσιακών στοιχείων εντός της εταιρείας ».

Η πρώτη εγκατάσταση υπό πραγματικές συνθήκες συνέβη κατά τη διάρκεια της πρώτης Hackweek του Twitter ». Ο Mark Otto έδειξε σε κάποιους συναδέλφους πώς να επιταχύνουν την ανάπτυξη του έργου τους με τη βοήθεια της εργαλειοθήκης. Ως αποτέλεσμα, δεκάδες ομάδες έχουν μετακινηθεί στο πλαίσιο.

Τον Αύγουστο του 2011 κυκλοφόρησε Twitter Bootstrap ως λογισμικό ανοιχτού κώδικα. Τον Φεβρουάριο του 2012, ήταν το πιο δημοφιλές έργο ανάπτυξης στο GitHub.

Χαρακτηριστικά

Το Bootstrap έχει σχετικά ελλιπή υποστήριξη για HTML5 και CSS, αλλά είναι συμβατό με όλους τους φυλλομετρητές (browsers). Βασικές πληροφορίες συμβατότητας των ιστοσελίδων ή εφαρμογές είναι διαθέσιμες για όλες τις συσκευές και τα προγράμματα περιήγησης. Υπάρχει μια έννοια της μερικής συμβατότητας που κάνει τα βασικά στοιχεία μιας ιστοσελίδας που διατίθενται για όλες τις συσκευές και τα προγράμματα περιήγησης. Για παράδειγμα, οι ιδιότητες πάνω στις οποίες θεσπίστηκε το CSS3 για στρογγυλεμένες γωνίες, κλίσεις και σκιές, χρησιμοποιούνται από το Bootstrap παρά την έλλειψη υποστήριξης από μεγάλα προγράμματα περιήγησης στο Web. Αυτά επεκτείνουν τη λειτουργικότητα του πακέτου εργαλείων, αλλά δεν απαιτούνται για τη χρήση του.

Από την έκδοση 2.0 υποστηρίζει επίσης ανταποκρίσιμο σχεδιασμό (responsive design). Αυτό σημαίνει ότι η διάταξη των ιστοσελίδων προσαρμόζεται δυναμικά, λαμβάνοντας υπόψη τα χαρακτηριστικά της συσκευής που χρησιμοποιείται (PC, tablet, κινητό τηλέφωνο).

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

Δομή και λειτουργία

Το Bootstrap είναι σπονδυλωτό και αποτελείται ουσιαστικά από μια σειρά στυλ(stylsheets) που εφαρμόζουν τα διάφορα συστατικά του πακέτου εργαλείων. Ένα στυλ που ονομάζεται bootstrap.less περιλαμβάνει τα συστατικά stylesheets. Οι προγραμματιστές μπορούν να προσαρμόσουν το αρχείο Bootstrap, επιλέγοντας τα στοιχεία που θέλουν να χρησιμοποιήσουν στο έργο τους.

Προσαρμογές είναι δυνατές σε περιορισμένη έκταση μέσω ενός κεντρικού στυλ διαμόρφωσης. Η χρήση γλώσσας στυλ επιτρέπει τη χρήση για μεταβλητές, λειτουργίες και φορείς (operators), ένθετους επιλογείς, γνωστά και ως μείγματα mixin.

Από την έκδοση 2.0, η διαμόρφωση του Bootstrap έχει επίσης μία ειδική επιλογή "Προσαρμογή " στην τεκμηρίωση (documentation). Επιπλέον, ο σχεδιαστής του έργου επιλέγει σε μια φόρμα τα επιθυμητά συστατικά και τα προσαρμόζει, εάν είναι αναγκαίο, σε τιμές διαφόρων εναλλακτικών λύσεων για τις ανάγκες του. Στη συνέχεια δημιουργείται ένα πακέτο που περιλαμβάνει ήδη το προ-χτισμένο CSS στυλ.

Σύστημα πλέγματος(Grid System) και ανταποκρίσιμος σχεδιασμός (responsive design)

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

Η κατανόηση του CSS στυλ

Το Bootstrap παρέχει ένα σύνολο στυλ που παρέχουν βασικούς ορισμούς στυλ για όλα τα βασικά στοιχεία HTML. Αυτά παρέχουν ενιαία, σύγχρονη εμφάνιση για πίνακες, μορφοποίηση κειμένου, καθώς και στοιχεία μιας φόρμας.

Επαναχρησιμοποιήσιμα συστατικά

Εκτός από τα βασικά HTML στοιχεία, το Bootstrap περιέχει και άλλα στοιχεία περιβάλλοντος που χρησιμοποιούνται συχνά. Αυτά περιλαμβάνουν κουμπιά με προηγμένα χαρακτηριστικά ( π.χ. ομαδοποίηση κουμπιών ή drop -down επιλογή, οριζόντιες και κάθετες καρτέλες, πλοήγηση, σελιδοποίηση, κ.λπ. ), ετικέτες, προηγμένες τυπογραφικές δυνατότητες, εικονίδια, προειδοποιητικά μηνύματα και μια γραμμή προόδου.

JavaScript στοιχεία

Το Bootstrap έρχεται με πολλά συστατικά JavaScript σε μια μορφή jQuery plugin. Παρέχουν πρόσθετη διεπαφή χρήστη με στοιχεία όπως παράθυρα διαλόγου, επεξηγήσεις, και καρουσέλ. Μπορούν επίσης να επεκτείνουν τη λειτουργικότητα ορισμένων υφιστάμενων στοιχείων της διασύνδεσης, όπως για παράδειγμα μια αυτόματη πλήρη λειτουργία για πεδία εισαγωγής. Στην έκδοση 2.0, υποστηρίζονται τα ακόλουθα JavaScript plugins: Modal, Αναπτυσσόμενο, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel και Typeahead.

Διατίθεται επίσης μια υλοποίηση του Bootstrap Twitter που χρησιμοποιεί το Dojo Toolkit. Λέγεται Dojo Bootstrap και είναι στα plugins του Bootstrap Twitter. Χρησιμοποιεί 100% κώδικα Dojo και έχει υποστήριξη για AMD (Asynchronous Module Definition).

Χρήση

Για να χρησιμοποιηθεί το Bootstrap σε μια σελίδα HTML, ο σχεδιαστής του έργου κάνει λήψη του στυλ CSS Bootstrap και περιλαμβάνει μια σύνδεση στο αρχείο HTML.

Αν ο προγραμματιστής θέλει να χρησιμοποιήσει τα στοιχεία JavaScript, θα πρέπει να αναφέρονται μαζί με τη βιβλιοθήκη jQuery στο HTML έγγραφο.

Το ακόλουθο παράδειγμα δείχνει πώς λειτουργεί αυτό. Ο κώδικας HTML ορίζει μια απλή μορφή αναζήτησης και μια λίστα των αποτελεσμάτων σε μορφή πίνακα. Η σελίδα αποτελείται από στοιχεία πληροφοριών HTML 5 και CSS σύμφωνα με την τεκμηρίωση του Bootstrap. Το σχήμα δείχνει την αναπαράσταση του εγγράφου στον Mozilla Firefox 10.

Το παράδειγμα αφορά την έκδοση 2.3.2 του Bootstrap η οποία δεν υποστηρίζεται πλέον.

<!DOCTYPE html>
<html>
  <head>
    <title>Example of Twitter Bootstrap</title>
    <!-- Include the bootstrap stylesheets -->
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  </head>
 
  <body>
    <div class="container">
      <h1>Search</h1>
      <label>Example for a simple search form.</label>

      <!-- Search form with input field and button -->
      <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Search</button>
      </form>
 
      <h2>Results</h2>
 
      <!-- Table with alternating cell background color and outer frame -->
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Lorem ipsum dolor...</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Ut enim ad minim veniam,...</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Duis aute irure dolor...</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- JavaScript placed at the end of the document so the pages load faster -->
    <!-- Optional: Include the jQuery library -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <!-- Optional: Incorporate the Bootstrap Javascript plugins -->
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

Δημιουργώντας ένα σταθερό πλέγμα διάταξης

    <div class="row">
      <div class="span4">...</div>
      <div class="span8">...</div>
    </div>

Δημιουργώντας ένα σταθερό πλέγμα διάταξης με ρευστό πλέγμα διάταξης(nested)

    <div class="row">
      <div class="span4">
        <div class="row-fluid">
          <div class="4">...</div>
          <div class="4">...</div>
          <div class="4">...</div>
        </div>
      </div>
      <div class="span8">...</div>
    </div>

Δείτε ακόμα

• CSS
• HTML
• JavaScript
• jQuery
• CSS frameworks

Βιβλιογραφία

• Spurlock, Jake (2013). Bootstrap (1. ed. έκδοση). Sebastopol, CA: O'Reilly Media. σελίδες 1. ISBN 978-1-449-34391-0. 
• Cochran, David (12 Νοεμβρίου 2012). Twitter Bootstrap Web Development (1st έκδοση). Packt Publishing. σελ. 100. ISBN 978-1849518826. Αρχειοθετήθηκε από το πρωτότυπο στις 25 Οκτωβρίου 2013. Ανακτήθηκε στις 1 Σεπτεμβρίου 2013. 

Εξωτερικοί Σύνδεσμοι

• Bootstrap - Η επίσημη σελίδα, περιλαμβάνει τεκμηρίωση και επιλογή κατεβάσματος των εργαλείων
• Bootstrap Blog - Το επίσημο blog του Bootstrap, από τον προγραμματιστή Mark Otto