1 Δεκεμβρίου, 2024

Ανάπτυξη Front-end

Bootstrap: είναι ένα δημοφιλές πλαίσιο ανάπτυξης front-end

20 Μαΐου, 2023

Επιτρέπει στους προγραμματιστές να δημιουργούν γρήγορα και εύκολα ιστοτόπους…

bootstrap

Το Bootstrap είναι ένα δημοφιλές πλαίσιο ανάπτυξης front-end που επιτρέπει στους προγραμματιστές να δημιουργούν γρήγορα και εύκολα ιστότοπους με απόκριση και προτεραιότητα για κινητά. Παρέχει μια συλλογή στοιχείων CSS και JavaScript που μπορούν να χρησιμοποιηθούν για τη δημιουργία ελκυστικών και λειτουργικών διεπαφών χρήστη. Το Bootstrap περιλαμβάνει επίσης ένα σύστημα πλέγματος για τη δημιουργία διατάξεων και μια ποικιλία από κατηγορίες χρησιμότητας για στοιχεία στυλ.

Ακολουθεί ένα παράδειγμα αποσπάσματος κώδικα που δείχνει πώς να χρησιμοποιήσετε το Bootstrap για να δημιουργήσετε μια βασική διάταξη με γραμμή πλοήγησης, κεφαλίδα και κύρια περιοχή περιεχομένου:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">My Website</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="jumbotron">
      <h1 class="display-4">Welcome to My Website</h1>
      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <hr class="my-4">
      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </div>
    <div class="container">
      <div class="row">
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

Στον παραπάνω κώδικα, ξεκινάμε συμπεριλαμβάνοντας το αρχείο Bootstrap CSS στην ενότητα head του εγγράφου HTML μας. Στη συνέχεια, δημιουργούμε μια γραμμή πλοήγησης χρησιμοποιώντας την κλάση navbar και προσθέτουμε ένα λογότυπο και συνδέσμους στο στοιχείο ul μέσα στο navbar-collapse div. Προσθέτουμε επίσης μια κεφαλίδα χρησιμοποιώντας την κλάση jumbotron και δημιουργούμε μια κύρια περιοχή περιεχομένου χρησιμοποιώντας τις κλάσεις κοντέινερ και σειράς .

Αφήστε το σχόλιο σας

Geo

Όλες οι αναρτήσεις του συντάκτη