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
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.
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
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.
