Εισαγωγή στο Bootstrap 5

Τι είναι το Bootstrap;

  • Το Bootstrap είναι ένα δωρεάν frontend framework, για γρηγορότερη και πιο εύκολη ανάπτυξη ιστοσελίδων
  • Το Bootstrap περιλαμβάνει σχεδιαστικές προτύπες βασισμένες στο HTML και το CSS, για τύπωση, φόρμες, κουμπιά, πίνακες,導航, modal, εικόνες προβολής κ.λπ.
  • Το Bootstrap παρέχει πλούσια JavaScript插件
  • Το Bootstrap σας επιτρέπει να δημιουργήσετε εύκολα αντανακλαστικές σχεδίες

Τι είναι η αντανακλαστική σχεδίαση ιστοσελίδων;

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

Παράδειγμα Bootstrap 5

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Η πρώτη μου σελίδα Bootstrap</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Στήλη 1: Άνοιξη</h3>
      <p>Σε καλές ημέρες αναζητώ τα λουλούδια στη γέφυρα του Σασουάι, η ατέλεια της οπτικής είναι νέα για μια στιγμή.</p>
      <p>Εύκολα αναγνωρίζω το πρόσωπο του Ανατολικού Αετού, τα χρώματα είναι πλούσια και ποικίλα, πάντα η άνοιξη.</p>
    </div>
    <div class="col-sm-4">
      <h3>Στήλη 2: Αφιέρωμα της άνοιξης</h3>
      <p>Οι κόκκινες και οι μωβ φleurs έχουν γίνει σκόνη, και η άνοιξη της καλοκαιρινής εποχής είναι νέα με τον ήχο του βουήματος.</p>
      <p>Η σύννεφα από τις σανίδες και τα σιτάρια δεν τελειώνει, και αρχίζω να καταλαβαίνω ότι είμαι ένας άνθρωπος της ειρήνης.</p>
    </div>
    <div class="col-sm-4">
      <h3>Στήλη 3: Στήλη</h3>
      <p>Από την κρύα κορυφή του βουνού, η οδός από το πέτρινο δρόμο είναι κλίση, και υπάρχει ένα σπίτι στο μέρος των λευκών σύννεφων.</p>
      <p>Κατά την ηλιοβασίλεία στα φύλλα του κερασιού, η στέρηση του χιονιού είναι πιο κόκκινη από τα λουλούδια του Φεβρουαρίου.</p>
    </div>
  </div>
</div>

Δοκιμάστε το προσωπικά

Έκδοση Bootstrap

Το Bootstrap 5 (έκδοση 2021) είναι η πιο πρόσφατη έκδοση του Bootstrap (έκδοση 2013); χρησιμοποιώντας νέες�件, ταχύτερες φόρμες, παρέχει ταχύτερη απόκριση.

Το Bootstrap 5 υποστηρίζει τις πιο πρόσφατες σταθερές εκδόσεις όλων των κύριων περιηγητών και πλατφορμών. Ωστόσο, δεν υποστηρίζει τον Internet Explorer 11 και τις προηγούμενες εκδόσεις.

Η κύρια διαφορά μεταξύ του Bootstrap 5 και του Bootstrap 3 & 4 είναι ότι το Bootstrap 5 έχει切换到 Vanilla JavaScript αντί για jQuery.

Σημειώσεις:Η ομάδα εξακολουθεί να υποστηρίζει τις κρίσιμες διορθώσεις σφαλμάτων και τις αλλαγές τεκμηρίωσης για το Bootstrap 3 και Bootstrap 4, οπότε η χρήση τους είναι πλήρως ασφαλής. Ωστόσο, δεν θα προσθέσει νέες λειτουργίες.

Γιατί να χρησιμοποιήσετε το Bootstrap;

Πλεονεκτήματα του Bootstrap:

  • Εύκολη χρήση:Κάθε πρόσωπο που έχει βασική κατανόηση του HTML και του CSS μπορεί να ξεκινήσει να χρησιμοποιεί το Bootstrap αμέσως.
  • Προσαρμοστικές ιδιότητες:Η προσαρμοστική CSS του Bootstrap μπορεί να προσαρμοστεί για κινητά, τάμπλετ και προσωπικά υπολογιστές.
  • Μέθοδος κινήτου:Στο Bootstrap, οι στυλ κινήτου είναι μέρος του κύριου πλαισίου.
  • Συμβατότητα περιηγητή:Το Bootstrap 5 είναι συμβατό με όλους τους σύγχρονους περιηγητές (Chrome, Firefox, Edge, Safari και Opera).

Σημείωση:Αν χρειάζεστε υποστήριξη για το IE11 και τις προηγούμενες εκδόσεις, θα πρέπει να χρησιμοποιήσετε το BS4 ή το BS3.

Πού μπορώ να βρω το Bootstrap 5;

Υπάρχουν δύο τρόποι για να χρησιμοποιήσετε το Bootstrap 5 στο δικό σας ιστότοπο.

Μπορείτε να:

  • Contains Bootstrap 5 from CDN
  • Download Bootstrap 5 from getbootstrap.com

Bootstrap 5 CDN

If you do not want to download and host Bootstrap 5 yourself, you can reference it from CDN (Content Delivery Network).

CodeW3C.com provides CDN support for Bootstrap's CSS and JavaScript:

MaxCDN:

/* Latest compiled and compressed CSS */
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
/* Latest compiled JavaScript */
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

One of the advantages of using Bootstrap 5 CDN:

Many users have already downloaded Bootstrap 5 from jsDelivr when visiting another site. Therefore, when they visit your website, it will be loaded from the cache, thus shortening the loading time. In addition, most CDNs will ensure that once a user requests a file from them, it will be served from the server closest to them, which also leads to faster loading times.

JavaScript?

Bootstrap 5 uses JavaScript for different components (such as modals, tooltips, pop-ups, etc.). However, if you only use the CSS part of Bootstrap, you do not need them.

Download Bootstrap 5

If you want to download and host Bootstrap 5 yourself, please visit https://getbootstrap.com/, and then follow the instructions there.

Use Bootstrap 5 to create your first web page

1. Add HTML5 Document Type

Bootstrap 5 uses HTML elements and CSS properties that require the HTML5 doctype.

Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct title, charset:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 Mobile-First

The design goal of Bootstrap 5 is responsive to mobile devices. Mobile-first styles are part of the core framework.

To ensure correct rendering and touch zoom, please <head> Add the following within the element <meta> Tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width Sets the page width to follow the device's screen-width (which varies from device to device).

initial-scale=1 Sets the initial zoom level when the browser first loads the page.

3. Container

Bootstrap 5 still needs an element to wrap the site content.

Υπάρχουν δύο κλάσεις κουτιών διαθέσιμες για χρήση:

  1. .container Η κλάση παρέχει κουτί με προσαρμοσμένη πλάτος
  2. .container-fluid Η κλάση παρέχει κουτί πλήρους πλάτους, που διανύει ολόκληρη την πλάτος της οθόνης

Δύο βασικές σελίδες Bootstrap 5

Παράδειγμα Κουτί

Το παρακάτω παράδειγμα δείχνει τον κώδικα μιας βασικής σελίδας Bootstrap 5 (με κουτί με σταθερή πλάτος):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Παράδειγμα Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>Η πρώτη μου σελίδα Bootstrap</h1>
  <p>Αυτό το τμήμα βρίσκεται στην κλάση .container.</p>
  <p>Η κλάση .container παρέχει κουτί με σταθερή πλάτος.</p>
</div>
</body>
</html>

Δοκιμάστε το προσωπικά

Παράδειγμα Κουτί Πλήρους Πλάτους

Το παρακάτω παράδειγμα δείχνει τον κώδικα μιας βασικής σελίδας Bootstrap 5 (με κουτί πλήρους πλάτους):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Παράδειγμα Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Η πρώτη μου σελίδα Bootstrap</h1>
  <p>Αυτό το τμήμα βρίσκεται στην κλάση .container-fluid.</p>
  <p>Η κλάση .container-fluid παρέχει κουτί πλήρους πλάτους, που διανύει ολόκληρη την πλάτος της οθόνης.</p>
</div>
</body>
</html>

Δοκιμάστε το προσωπικά