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.