-

 Invata Bootstrap

             Bootstrap este un framework front-end open-source, utilizat pentru dezvoltarea site-urilor web responsive și a aplicațiilor web. 

             Este unul dintre cele mai populare framework-uri datorită ușurinței de utilizare și a numeroaselor componente și stiluri predefinite.

             Iată o introducere în Bootstrap:

1. Începerea cu Bootstrap:

Instalare:

Există mai multe moduri de a începe cu Bootstrap:

a.CDN: Cel mai rapid mod este să folosești un CDN (Content Delivery Network).

<!doctype html>

<html lang="en">

  <head>

    <!-- Meta tags necesare -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

  </head>

  <body>

    <h1>Hello, world!</h1>


    <!-- Bootstrap JS, Popper.js și jQuery -->

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  </body>

</html>

b.Descărcare: Poți descărca Bootstrap de pe site-ul oficial getbootstrap.com și să adaugi fișierele CSS și JS în proiectul tău.

c.NPM: Dacă folosești un manager de pachete ca NPM, poți instala Bootstrap prin comanda npm install bootstrap.

2. Structura de bază a unui document HTML cu Bootstrap:

Iată un exemplu de structură de bază:

<!doctype html>

<html lang="en">

  <head>

    <!-- Meta tags necesare -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">


    <title>Hello, Bootstrap!</title>

  </head>

  <body>

    <div class="container">

      <h1 class="text-center">Bine ai venit la Bootstrap!</h1>

      <p class="lead text-center">Acesta este un exemplu de bază folosind Bootstrap.</p>

    </div>


    <!-- Bootstrap JS, Popper.js și jQuery -->

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  </body>

</html>

3.Sisteme de grilă:

Bootstrap folosește un sistem de grilă bazat pe flexbox pentru a crea layout-uri responsive. Sistemul de grilă este format din containere, rânduri și coloane.

Exemple de grilă:

<div class="container">
  <div class="row">
    <div class="col-md-4">Coloana 1</div>
    <div class="col-md-4">Coloana 2</div>
    <div class="col-md-4">Coloana 3</div>
  </div>
</div>

4.Componente de bază:

Bootstrap oferă multe componente predefinite care pot fi utilizate pentru a crea interfețe de utilizator atractive și funcționale.

Butoane:

<button type="button" class="btn btn-primary">Primar</button>
<button type="button" class="btn btn-secondary">Secundar</button>
<button type="button" class="btn btn-success">Succes</button>
<button type="button" class="btn btn-danger">Pericol</button>
<button type="button" class="btn btn-warning">Atenționare</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Luminos</button>
<button type="button" class="btn btn-dark">Întunecat</button>

Carduri:

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Titlul cardului</h5>
    <p class="card-text">Acesta este un text exemplu pentru card.</p>
    <a href="#" class="btn btn-primary">Mergi undeva</a>
  </div>
</div>

5.Utilizarea utilităților:

Bootstrap oferă și clase utilitare pentru a ajusta rapid aspectul și comportamentul elementelor.

 De exemplu:

Margini și spațiere:

<div class="mb-3">Margin bottom 3</div>
<div class="p-3">Padding 3</div>

Aliniere text:

<p class="text-center">Text centrat</p>
<p class="text-right">Text aliniat la dreapta</p>
<p class="text-left">Text aliniat la stânga</p>

              Acestea sunt doar câteva dintre conceptele de bază. Bootstrap este foarte puternic și oferă multe alte funcționalități pentru a crea aplicații web moderne și responsive. 
             Cel mai bun mod de a învăța este să explorezi documentația oficială și să experimentezi cu diferite componente și stiluri.


Comentarii

Trimiteți un comentariu

Postări populare de pe acest blog

-
 SGBD SGBD-ul, sau sistemul de gestiune a bazelor de date, este un software specializat care permite utilizatorilor să creeze, să interogheze și să gestioneze baze de date. Acestea sunt utilizate într-o gamă largă de aplicații și domenii, inclusiv în afaceri, cercetare, servicii financiare, sănătate și multe altele. Iată câteva aspecte esențiale legate de SGBD-uri: Structura bazelor de date: SGBD-urile sunt proiectate pentru a gestiona datele într-o structură organizată, cum ar fi tabele într-o bază de date relațională sau documente într-o bază de date NoSQL. Aceste structuri pot fi adaptate la nevoile specifice ale aplicației și pot permite organizarea eficientă a datelor. Crearea și gestionarea datelor: Utilizatorii pot crea, modifica și șterge date într-o bază de date folosind SGBD-ul. Acest lucru poate implica crearea de tabele, adăugarea de înregistrări, actualizarea datelor existente și ștergerea de date care nu mai sunt necesare. Interogarea datelor: Interogarea este o parte...
Read more »

Cod Python pt aplicatie despre Securitate cibernetica

-
  import time import random import threading import os from cryptography.fernet import Fernet # Generăm o cheie pentru criptare (în realitate, aceasta trebuie păstrată în siguranță) def generate_key ():     return Fernet.generate_key () # Criptare și decriptare a parolei def criptare_parola ( parola , key ):     cipher_suite = Fernet ( key )     encrypted_password = cipher_suite.encrypt ( parola.encode ())     return encrypted_password def decriptare_parola ( encrypted_password , key ):     cipher_suite = Fernet ( key )     decrypted_password = cipher_suite.decrypt ( encrypted_password ) .decode ()     return decrypted_password # Înregistrarea datelor într-un fișier def inregistreaza_date ( username , parola , key ):     encrypted_password = criptare_parola ( parola, key )     with open ( " date_utilizator.txt " , " a " ) as file:         file.write...
Read more »

Lucrul cu baza de date în Laravel

-
                                                                           Lucrul cu baza de date în Laravel Laravel folosește Eloquent ORM , care permite interacțiunea cu baza de date într-un mod simplu, folosind modele. Configurarea bazei de date: În fișierul .env , poți configura detaliile conexiunii la baza de date: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nume_baza_date DB_USERNAME=nume_utilizator DB_PASSWORD=parola Asigură-te că serverul bazei de date este pornit și că datele sunt corecte. Migrații în Laravel: Migrațiile sunt un mod de a defini structura bazei de date folosind PHP. Crearea unei migrații : php artisan make:migration create_users_table Acesta va crea un fișier de migrare în directorul database/migrations . Modificarea migrației : Migrațiile conțin două metod...
Read more »