Bootstrap - Konfiguracja środowiska

Konfiguracja i rozpoczęcie korzystania z Bootstrap jest bardzo łatwe. W tym rozdziale wyjaśniono, jak pobrać i skonfigurować Bootstrap. Omówimy również strukturę pliku Bootstrap i zademonstrujemy jej użycie na przykładzie.

Pobierz Bootstrap

Możesz pobrać najnowszą wersję Bootstrap z https://getbootstrap.com/. Po kliknięciu tego linku zobaczysz poniższy ekran -

Tutaj możesz zobaczyć dwa przyciski -

  • Download Bootstrap- Klikając to, możesz pobrać prekompilowane i zminimalizowane wersje Bootstrap CSS, JavaScript i czcionek. Nie zawiera dokumentacji ani oryginalnych plików z kodem źródłowym.

  • Download Source - Klikając to, możesz pobrać najnowszy kod źródłowy Bootstrap LESS i JavaScript bezpośrednio z GitHub.

Jeśli pracujesz z nieskompilowanym kodem źródłowym Bootstrapa, musisz skompilować LESS pliki, aby utworzyć użyteczne pliki CSS. Na kompilacji LESS plików w CSS, Bootstrap oficjalnie obsługuje tylko Wycięcie , czyli Twittera CSS hinter podstawie less.js .

Dla lepszego zrozumienia i ułatwienia użytkowania, będziemy używać prekompilowanej wersji Bootstrap w całym tutorialu. Ponieważ pliki są zgodne i zminimalizowane, nie musisz za każdym razem zawracać sobie głowy dołączaniem oddzielnych plików dla poszczególnych funkcji. W momencie pisania tego samouczka została pobrana najnowsza wersja (Bootstrap 3).

Struktura plików

Prekompilowany plik Bootstrap

Po pobraniu skompilowanej wersji Bootstrap wypakuj plik ZIP, a zobaczysz następującą strukturę plików / katalogów -

Jak widać, są skompilowane CSS i JS (bootstrap. *), A także skompilowane i zminimalizowane CSS i JS (bootstrap.min. *). Dołączone są czcionki z Glyphicons, ponieważ jest to opcjonalny motyw Bootstrap.

Kod źródłowy Bootstrap

Jeśli pobrałeś kod źródłowy Bootstrap, struktura pliku byłaby następująca -

  • Pliki w less / , js / i fonts / są kodem źródłowym czcionek Bootstrap CSS, JS i ikon (odpowiednio).

  • Dist / Folder zawiera wszystkie elementy wymienione w skompilowany pobierania sekcji powyżej.

  • docs-asset / , examples / i wszystkie pliki * .html są dokumentacją Bootstrap.

Szablon HTML

Podstawowy szablon HTML korzystający z Bootstrap wyglądałby następująco -

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

Tutaj możesz zobaczyć jquery.js, bootstrap.min.js i bootstrap.min.csspliki, które są dołączane, aby utworzyć normalny plik HTM do szablonu startowego. Po prostu upewnij się, że dołączasz bibliotekę jQuery przed dołączeniem biblioteki Bootstrap.

Więcej szczegółów na temat każdego z elementów w powyższym fragmencie kodu zostanie omówionych w rozdziale Bootstrap CSS Overview .

Przykład

Teraz wypróbujmy przykład wykorzystujący powyższy szablon. Wypróbuj poniższy przykład, korzystając z opcji Live Demo dostępnej w prawym górnym rogu poniższego przykładowego pola kodu na naszej stronie internetowej -

<h1>Hello, world!</h1>
We wszystkich kolejnych rozdziałach użyliśmy fikcyjnego tekstu ze strony https://www.lipsum.com/.