Skip to content

Jak dodawać i używać komponentów Bootstrap na stronie lub w aplikacji internetowej

20 de listopad de 2022

Jeśli robisz coś związanego z Internetem, prawdopodobnie słyszałeś o Bootstrap. W tym możemy nauczyć się korzystać z CSS i JavaScript. Celem jest ułatwienie organizacji treści, stosowania stylów i tworzenia stron internetowych dostosowanych do urządzeń mobilnych. Dlatego wyjaśnimy, jak to zrobić dodawać i używać różnych komponentów Bootstrap.

Jak dołączyć komponenty Bootstrap do strony lub aplikacji internetowej?

Pierwszą rzeczą do zrobienia przed rozpoczęciem korzystania z Bootstrap i korzystania z jego komponentów jest to, że jest to bardzo ważne zacznijmy każdy HTML od deklaracji HTML 5 Doctype, aby przeglądarki wiedziały, jakiego typu dokumentu się spodziewać, a następnie przystąpić do pobierania aplikacji. A dzięki Bootstrap Validator możemy nawet zweryfikować formularz za pomocą Java Script

Nagłówek zawiera trzy ważne znaczniki , które należy zadeklarować jako pierwsze, a po nich należy dodać wszystkie dodatkowe znaczniki nagłówka. Podstawowy szablon HTML Bootstrap powinno to wyglądać następująco i postępuj zgodnie z tymi samymi zasadami, aby móc poprawnie dodawać swoje komponenty:

<! DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Stronę można pobrać jako plik zamek błyskawiczny z Github i Bitbucket lub można sklonować z terminala. Spowoduje to utworzenie katalogu ze wszystkimi stronami i obrazami witryny. Celem jest użyj Bootstrap do uporządkowania treścipoprawiaj typografię i obrazy oraz stosuj style do wszystkich stron witryny.

Pobierz i zainstaluj Bootstrapa

Następny, musisz pobrać i zainstalować Bootstrap. W tym celu przechodzimy do oficjalnej strony pobierania Bootstrap.Pod koniec pobierania uzyskamy plik bootstrap-3.3.6-dist.zip które zamierzamy rozpakować. Powstały katalog ma następującą strukturę:

bootstrap-3.3.6-dist/
CSS/
fonts/
JS/

Kopiujemy katalogi CSS/, czcionki/ i JS, do katalogu, w którym znajduje się strona internetowa, do której zamierzamy dodać komponenty. Aby zakończyć instalację, jest to konieczne dołącz pliki CSS z Bootstrapa.

Te znajdziemy w Sekcja każdego z plików HTML Znajdują się one w statycznym katalogu witryny. Musimy również dołączyć plik Bootstrap JavaScript na końcu każdego pliku HTML, przed tagiem zamykającym.

Szablony Bootstrap i komponenty interfejsu użytkownika

W zestawie Bootstrap podstawowe szablony układu HTML i CSS które zawierają wiele typowych komponentów interfejsu użytkownika. Należą do nich typografia, tabele, formularze, przyciski, glify, listy rozwijane, przyciski i grupy wprowadzania.

Inne niż to zawiera również komponenty nawigacyjne, paginacja, etykiety i plakietki, alerty, paski postępu, moduły, zakładki, akordeony, karuzele i wiele innych. Wiele z nich korzysta z rozszerzeń JavaScript i wtyczek jQuery.

logo bootstrap z niebieskim tłem

Obrazy, ikony, przyciski, grupy przycisków i menu rozwijane

W zestawie Bootstrap ponad 260 glifów w formacie czcionki, co jest niesamowite. Ikony czcionek mają wiele zalet w porównaniu ze zwykłymi obrazami bitmapowymi, z których jedną jest skalowalność. Można je również łatwo dostosować za pomocą CSS, więc manipulowanie rozmiarem lub kolorem, a nawet dodanie cienia, to pestka.

Przyciski to jedna z rzeczy, które każda przeglądarka prezentuje w zupełnie inny sposób. Jeśli chcesz mieć spójny układ we wszystkich przeglądarkach, jest to potencjalnie duży problem. Chociaż na szczęście Bootstrap ma eleganckie rozwiązanie za guziki też.

A poza tym, aby były spójne, przynosi wiele odmian do gry. Możesz zastosować klasę .btn do elementów i . Możesz zgrupować serię przycisków w jednym wierszu za pomocą klasy .btn-grupa w poważny.

Z niewielką pomocą JavaScript możesz utworzyć plik zachowanie w stylu radia i pola wyboru sprawdź przyciski. Możesz też zamienić przyciski w listy rozwijane, umieszczając je w grupie .btn oraz zapewnienie odpowiedniego znacznika menu nieuporządkowanej listy.

dołącz do naszego kanału telegram