Samouczek Bootstrap
Twitter Bootstrap to najpopularniejszy framework frontendowy w ostatnim czasie. Jest to elegancka, intuicyjna i potężna mobilna platforma front-endowa do szybszego i łatwiejszego tworzenia stron internetowych. Wykorzystuje HTML, CSS i Javascript. Ten samouczek nauczy Cię podstaw Bootstrap Framework, za pomocą którego możesz z łatwością tworzyć projekty internetowe. Samouczek jest podzielony na sekcje, takie jak Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components i Bootstrap Plugins. Każda z tych sekcji zawiera powiązane tematy z prostymi i przydatnymi przykładami.
Dlaczego warto się uczyć Bootstrap?
Mobile first approach - Bootstrap 3, framework składa się ze stylów Mobile First w całej bibliotece, a nie z osobnych plików.
Browser Support - Obsługiwany przez wszystkie popularne przeglądarki.
Easy to get started- Znając tylko HTML i CSS, każdy może zacząć korzystać z Bootstrap. Również oficjalna strona Bootstrap ma dobrą dokumentację.
Responsive design- Responsywny CSS Bootstrap dostosowuje się do komputerów stacjonarnych, tabletów i telefonów komórkowych. Więcej o projektowaniu responsywnym znajdziesz w rozdziale Projektowanie responsywne Bootstrap.
Zapewnia czyste i jednolite rozwiązanie do tworzenia interfejsu dla programistów.
Zawiera piękne i funkcjonalne wbudowane komponenty, które można łatwo dostosować.
Zapewnia również dostosowywanie przez Internet.
A co najważniejsze, jest to oprogramowanie typu open source.
Hello World przy użyciu Bootstrap.
Żeby trochę podekscytować Bootstrap, podam mały, konwencjonalny program Hello World Bootstrap. Możesz go wypróbować za pomocą linku Demo.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<!-- Bootstrap -->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src = "https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "js/bootstrap.min.js"></script>
</body>
</html>
Zastosowania Bootstrap
Scaffolding- Bootstrap zapewnia podstawową strukturę z systemem siatki, stylami łączy i tłem. Jest to szczegółowo omówione w sekcjiBootstrap Basic Structure
CSS- Bootstrap zawiera funkcję globalnych ustawień CSS, podstawowe elementy HTML stylizowane i ulepszane za pomocą rozszerzalnych klas oraz zaawansowany system siatki. Jest to szczegółowo omówione w sekcjiBootstrap with CSS.
Components- Bootstrap zawiera kilkanaście komponentów wielokrotnego użytku, stworzonych w celu zapewnienia ikonografii, menu rozwijanych, nawigacji, alertów, pop-overów i wielu innych. Jest to szczegółowo omówione w sekcjiLayout Components.
JavaScript Plugins- Bootstrap zawiera kilkanaście niestandardowych wtyczek jQuery. Możesz łatwo dołączyć je wszystkie lub pojedynczo. Jest to szczegółowo omówione w sekcjiBootstrap Plugins.
Customize - Możesz dostosować komponenty Bootstrapa, LESS zmienne i wtyczki jQuery, aby uzyskać swoją własną wersję.
Publiczność
Ten poradnik został przygotowany dla każdego, kto ma podstawową wiedzę na temat HTML i CSS i ma ochotę tworzyć strony internetowe. Po ukończeniu tego samouczka osiągniesz średni poziom doświadczenia w tworzeniu projektów internetowych przy użyciu Twitter Bootstrap.
Wymagania wstępne
Zanim zaczniesz kontynuować ten samouczek, zakładamy, że znasz już podstawy HTML i CSS. Jeśli nie jesteś dobrze świadomy tych koncepcji, zasugerujemy, abyś zapoznał się z naszym krótkim samouczkiem dotyczącym HTML Tutorial i CSS Tutorial.