Integracja z innymi biblioteki

Bootstrap 5 jest biblioteką CSS, która może być używana wraz z innymi bibliotekami, frameworkami lub technologiami internetowymi. Poniżej przedstawiam kilka przykładów integracji Bootstrap 5 z innymi bibliotekami:

jQuery - Bootstrap 5 jest zintegrowany z jQuery, co umożliwia używanie funkcji jQuery do manipulowania elementami strony internetowej wraz z klasami Bootstrapa. Można użyć metod jQuery, takich jak .addClass(), .removeClass() i .toggleClass() do manipulowania klasami Bootstrapa.

							
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
							
					

							
<script>
$(document).ready(function() {
    $('button').addClass('btn btn-primary');
  });
</script>
							
					

							
<button>Przycisk</button>
							
					

React - Bootstrap 5 może być używany z React przy użyciu bibliotek takich jak react-bootstrap lub reactstrap. Te biblioteki umożliwiają używanie komponentów Bootstrapa w React, co ułatwia tworzenie interfejsów użytkownika w React.

							
import React from 'react';
import { Button } from 'react-bootstrap';

function App() {
  return (
    <div>
      <Button variant="primary">Przycisk</Button>
    </div>
  );
}

export default App;
							
					

Angular - Bootstrap 5 może być używany z Angular przy użyciu bibliotek takich jak ng-bootstrap lub ngx-bootstrap. Te biblioteki umożliwiają używanie komponentów Bootstrapa w Angular, co ułatwia tworzenie interfejsów użytkownika w Angular.

							
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="open()">Otwórz okno modalne</button>
  `
})
export class AppComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(MyModalComponent);
    modalRef.componentInstance.name = 'Świat';
  }
}
							
					

Font Awesome - Można zaimportować pliki źródłowe Font Awesome i używać klas ikon Font Awesome wraz z klasami Bootstrapa.

							
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
							
					

							
<button><i class="fas fa-check mr-2"></i> Zapisz</button>
							
					

Notatka

Oczywiście istnieje wiele innych bibliotek i technologii, z którymi można zintegrować Bootstrapa 5. Powyższe przykłady stanowią jedynie namiastkę możliwości integracji z innymi narzędziami i technologiami internetowymi.