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