Bootstrap 4 to zestaw narzędzi, który zawiera wiele interesujących i nowych funkcji, takich jak Flexbox, SASS dla stylów CSS, mapy, kompatybilność czcionek Awesome itp.

Wszystkie te funkcje pomogą Ci przenieść projekty internetowe na wyższy poziom, wykorzystując najnowsze standardy projektowania i rozwoju stron internetowych. Stworzyliśmy listę najlepszych szablonów opartych na Bootstrap 4 dostępnych dla darmowe pobieraniea także kilka wysokiej jakości szablonów Bootstrap 4.

Istnieje wiele zestawów interfejsów użytkownika Bootstrap 4, które są dostępne do rozpoczęcia projektu internetowego. Ponadto w tym poście przyjrzymy się wielu szablonom zbudowanym przy użyciu Bootstrap 4 w wielu różnych stylach, takich jak szablony stron docelowych, szablony paneli administracyjnych, szablony blogów, szablony portfolio itp.

Jeśli zaczynasz swoją podróż w Bootstrap 4, zalecamy korzystanie z popularnego zestawu. interfejs użytkownikatakich jak Paper Kit 2, który jest oparty na Bootstrap 4 i oferuje profesjonalnie zaprojektowane komponenty oraz wiele gotowych sekcji i przykładowych stron. Zestaw interfejsu użytkownika, taki jak Paper Kit 2, może pomóc Ci na dłuższą metę i będzie cię kosztował mniej, jeśli zamierzasz utworzyć kilka witryn za pomocą Bootstrap 4. Mają także bezpłatną wersję.

Podzieliliśmy kolekcję szablonów opartych na Bootstrap 4 na kilka sekcji, aby uprościć wyszukiwanie potrzebnego szablonu. Możesz przejść do dowolnej sekcji, korzystając z poniższych łączy.

Szablony Bootstrap 4 już wkrótce

Szablon Już wkrótce zostanie użyty przed faktycznym uruchomieniem strony i jest rodzajem „stub”.

Te szablony zazwyczaj zawierają odliczanie czasu i zapewniają użytkownikom możliwość skontaktowania się z właścicielami witryn lub zarejestrowania się w celu powiadomienia o uruchomieniu.

Zobacz poniżej Wkrótce szablon zbudowany przy użyciu Bootstrap 4.

Wkrótce Bootstrap 4 (bezpłatny)

To już wkrótce szablon ładowania początkowego 4 stworzony przez zespół w TemplateFlip. Ma pełnoekranowy obraz tła, a także nowoczesną typografię i ikony symboli społecznych Awesome czcionki.

Szablon ma już wbudowany formularz subskrypcji e-mail. Ten formularz jest wyświetlany po kliknięciu przycisku „Powiadom mnie” (eng. „NOTIFY ME”).

Szablon jest całkowicie darmowy na licencji CCA3 i może być używany zarówno do projektów osobistych, jak i komercyjnych.

Płyn - animowany szablon wkrótce (płatny)

Fluid to wysokiej jakości animowany szablon Już wkrótce stworzony przy użyciu Bootstrap 4. Oferuje cztery różne opcje: obrazy tła, obraz tła, suwak tła i minimalny układ.

Animacje są wyposażone w CSS3, a szablon PSD jest również dostępny do pobrania.

Bootstrap 4 szablony stron docelowych

Szablony stron docelowych są często używane do zademonstrowania funkcji produktu, usługi lub aplikacji. Często mają przyciski Wezwania do działania, aby użytkownicy mogli wypróbować produkt / usługę. Mogą również zawierać sekcje, takie jak recenzje użytkowników i tabele porównania funkcji, ceny.

Poniżej umieszczamy zarówno bezpłatne, jak i płatne szablony stron docelowych utworzone za pomocą Bootstrap 4.

Materiał lądowania (bezpłatny)

Material Landing to szablon strony docelowej zbudowany za pomocą zestawu MDB UI Kit i Bootstrap 4.

Ma przejrzysty wygląd kodu, który idealnie nadaje się do tworzenia strony docelowej z optymalizacjami produktu lub witryny internetowej dla agencji lub firmy.

Szablon ma sekcje opracowane w projekcie szablonu HTML5 do wyświetlania funkcji produktu / firmy, najlepszych projektów, planu cenowego, a także członków zespołu.

Podczas przewijania strony docelowej odtwarzane są ekscytujące animacje.

Rozpocznij prosty (bezpłatny)

Rozpocznij proste to kolejne darmowy szablon Strona docelowa dla start-upów i małych firm, stworzona przez zespół TemplateFlip.com.

Szablon jest oparty na Bootstrap 4 i zawiera przewijanie paralaksy w nagłówku oraz adaptacyjny animowany suwak dla sekcji recenzji użytkowników.

Niesamowita aplikacja (darmowa)

Awesome App to darmowy szablon strony docelowej utworzony za pomocą Bootstrap 4 i PaperKit 2. Nadaje się do tworzenia stron internetowych i stron docelowych. aplikacje mobilnea także oprogramowanie.

Szablon został opracowany przez zespół TemplateFlip.com i ma kreatywnie zaprojektowaną stronę docelową w oszałamiających kolorach.

Szablon zawiera sekcje pokazujące możliwości aplikacji, zrzuty ekranu aplikacji, recenzje użytkowników, łącza do pobierania aplikacji itp.

Można je łatwo dostosowywać i rozszerzać.

Piksele - szablon HTML5 docelowej aplikacji kreatywnej

Jeśli lubisz kreatywność i szukasz niesamowitego projektu strony aplikacji / produktu lub celu biznesowego, ten szablon Premium Bootstrap 4 piksele będzie dla Ciebie najlepszy.

Oferując ponad 15 różnych projektów, ten szablon ma integrację z MailChimp, a także działający formularz opinii.

Bootstrap 4 Szablony uruchamiania / agencji

Szablon Startup / Agency jest odpowiedni dla każdej firmy, która chciałaby zademonstrować swoje usługi.

Poniżej znajdują się niektóre z najlepszych szablonów Bootstrap 4, które są odpowiednie dla startupów i firm.

Agencja (bezpłatny)

Jak sama nazwa wskazuje, jest to darmowy szablon dla agencji i małych firm, który został utworzony za pomocą Bootstrap 4. Zawiera sekcje strony głównej, takie jak siatka portfolio, adaptacyjna oś czasu, lista członków zespołu i wiele innych.

Motyw Bell Bootstrap 4 (bezpłatny)

Bell to jednostronicowy szablon Bootstrap 4 odpowiedni dla każdego rodzaju witryny biznesowej. Zawiera bloki paralaksy z animowanym przewijaniem i jest dostępny za darmo, a także ma wersja płatnaktóry obejmuje obsługę e-mail premium.

Fitness (bezpłatny)

Fitness to darmowy, czysty szablon strony internetowej stworzony przy użyciu HTML5, Sass, jQuery, Bootstrap 4 i Gulp.

Wersja tego szablonu PSD jest również zawarta w wersji bezpłatnej.

Szablony panelu administracyjnego Bootstrap 4

Bootstrap jest domyślnym wyborem dla wielu projektantów i programistów stron internetowych, jeśli chodzi o tworzenie szablonu pulpitu administracyjnego panelu administracyjnego witryny lub aplikacji. Za pomocą Bootstrap można utworzyć adaptacyjny administracyjny panel sterowania z zaawansowanymi kontrolkami i interfejsami użytkownika.

Poniżej znajdziesz płatne i bezpłatne szablony panelu sterowania Bootstrap 4 Admin.

Light Bootstrap Dashboard (bezpłatny)

Jest to szablon administracyjny Bootstrap 4 stworzony przez CreativeTim.

Ma prosty i przejrzysty wygląd i oferuje zestaw gotowych komponentów, wtyczek i przykładowych stron szablonów, dzięki czemu możesz zacząć od utworzenia paneli administracyjnych dla aplikacji internetowych, a także CMS lub CRM.

Jest to darmowy szablon administracji Bootstrap, który można w pełni wykorzystać w swoich projektach. Jeśli potrzebujesz dodatkowych komponentów, wtyczek i przykładowych stron, możesz uaktualnić do wersji PRO.

Wersja PRO zapewnia również dostęp do pełnej dokumentacji, plików SASS, a także plików szkicu dla szablonu.

Modułowy administrator (bezpłatny)

Modular Admin to darmowy i zorientowany na MIT motyw deski rozdzielczej zbudowany na Bootstrap 4. Ten motyw paska narzędzi jest zbudowany w modułowy sposób, który ułatwia skalowanie, modyfikowanie i utrzymanie. Dokumentacja umożliwiająca rozpoczęcie korzystania z tego szablonu znajduje się w repozytorium GitHub.

CoreUI Bootstrap 4 Admin (bezpłatny)

CoreUI to kolejny darmowy szablon Bootstrap (MIT) o otwartym kodzie źródłowym. CoreUI jest oparty na Bootstrap 4 i oferuje 6 wersji: HTML5 AJAX, HTML5 Static, AngularJS, Angular 2+, React.js i Vue.js.

Strony - szablon panelu administracyjnego Bootstrap 4

Strony - To jest pięknie zaprojektowany szablon Bootstrap 4 Admin Dashboard premium, który oferuje kilka układów i gotowych komponentów, a także 6 różnych schematów kolorów.

Witam wszystkich, przyjaciele! W połowie 2013 roku wydano Bootstrap 3, który przez lata stał się wygodną, \u200b\u200brozszerzalną platformą CSS dla szybkie tworzenie układy adaptacyjne. Miliony witryn z powodzeniem korzystają z tego frameworka i już jesteśmy do niego przyzwyczajeni.

Do klasy

Potknąć się

18 stycznia 2018 r. Wydarzyło się ważne wydarzenie - pojawiła się długo oczekiwana wersja beta wersja Bootstrap 4na podstawie modelu Flexbox dla znaczników, które obecnie obsługują wszystkie nowoczesne przeglądarki i są dla programistów wygodniejsze i bardziej elastyczne niż klasyczny model układu oparty na Float. Teraz, z pełnym przekonaniem, możemy powiedzieć, że nie jest to możliwe na Flexach, ale MUSI się uzupełnić!

Dodatkowe zasoby do lekcji Bootstrap 4

1. Możesz samodzielnie przetestować wszystkie przykłady lekcji: Pobierz archiwum
2. Możesz zapoznać się z dokumentacją Bootstrap 4 bardziej szczegółowo w biurze. stronie internetowej;
3. Najnowszy starter, w tym Bootstrap 4: Zoptymalizowany HTML 5.

Dzisiaj szczegółowo przeanalizujemy pracę z siatką Bootstrap 4, a także porównamy ją stara wersja. Ta lekcja będzie przydatna nie tylko dla Ciebie, jeśli dopiero zaczynasz pracę z Bootstrap, ale także jeśli jesteś doświadczonym programistą i chcesz poznać wszystkie zasady i niuanse układu za pomocą siatki Bootstrap 4 i zawartych w niej narzędzi Flexbox.

1. Główne parametry siatki domyślnie

Domyślnie siatka Bootstrap 4 jest bardzo podobna do siatki trzeciej wersji, ale są pewne ważne różnice.

Z tabeli głównych opcji możemy zauważyć oczywiste różnice w stosunku do siatki trzeciej wersji. Teraz nie ma przedrostka klasy „.col-xs-”, który odpowiada za najmniejsze uprawnienia, zamiast niego wskazany jest uproszczony przedrostek „.col-”. Możesz błędnie pomyśleć, że przedrostek „.col-” odpowiada za minimalne uprawnienia. urządzenia mobilneNie jest to jednak do końca prawda. Przedrostek „.col-” jest jedną z najważniejszych innowacji Bootstrap 4. Jest to klasa odpowiedzialna za automatyczne oznaczanie kolumn w dowolnej rozdzielczości. Ale o tym później.

W przypadku małych rozdzielczości (małych) przedrostek „.col-sm-” z żądaniem mediów od 576 pikseli jest odpowiedzialny. Szerokość pojemnika wynosi 540 pikseli. Średnie rozdzielczości są opracowywane z 768 pikseli. Szerokość pojemnika wynosi 720 pikseli. Duże rozdzielczości działają z rozdzielczością urządzeń od 992 pikseli. Szerokość pojemnika wynosi 960 pikseli. I największy - z 1200 pikseli. Szerokość pojemnika jest ustalona na 1140 pikseli.

Należy pamiętać, że maksymalne wartości zapytań o media mają niedokładne wartości z ułamkiem „.98” w pikselach. Jest to zauważalne przy wyborze metody pierwszego pulpitu, w której maksymalna szerokość żądania multimediów jest ograniczona. Na przykład podczas kompilacji Sassa „+ media-breakpoint-down (lg)” otrzymujemy „@media (max-width: 1199,98px)”. Tutaj uwalniane jest 0,02 pikseli, aby rozpocząć następne żądanie mediów. Miej to w pamięci. W przyszłych edycjach Jedi Layout 8 przyjrzymy się tej i wielu innym punktom tej lekcji na prawdziwym przykładzie.

2. Automatyczny układ kolumn

2.1 Kolumny o tej samej szerokości

Korzystając z nowej uniwersalnej klasy „.col”, możesz określić do 12 kolumn z rzędu (nadrzędny „.row”), których szerokość zostanie automatycznie obliczona w zależności od liczby elementów i będzie równa.

Na przykład:

2.2 Ustawianie szerokości jednej kolumny

Możesz także jawnie ustawić szerokość jednej kolumny, a resztę pozostawić automatycznie.

W tym przykładzie drugi element w trzecim rzędzie ma klasę „.col-6”, a drugi element w drugim rzędzie ma klasę „.col-5”, które zajmują odpowiednią liczbę kolumn przy wszystkich rozdzielczościach ekranu. Szerokość pozostałych kolumn jest responsywna i jest obliczana automatycznie, zajmując całą pozostałą przestrzeń.

2.3 Zawartość o zmiennej szerokości

Możesz użyć klasy col- (breakpoint) -auto do zdefiniowania treści o zmiennej szerokości, w zależności od miejsca zajmowanego przez zawartość kolumny. Gdzie punktem przerwania jest rozmiar ekranu (XL, LG, MD lub SM).

Widzimy tutaj, że dwie środkowe kolumny zajmują szerokość odpowiadającą szerokości treści, jednak w pierwszym rzędzie, dzięki klasie .justify-content-sm-center w .row, cały wiersz jest wyśrodkowany, a całkowita szerokość zależy tylko od szerokości środkowej kolumny, w podczas gdy drugi rząd rozciąga się na całą dostępną szerokość, ale druga kolumna pozostaje stała na całej szerokości treści.

2.4 Wielorzędowe

Dzięki Bootstrap 4 możesz utworzyć kilka linii (łączników) w jednym rzędzie. Można to osiągnąć za pomocą klasy „.w-100”, która jest bardzo podobna do znacznika „br” i faktycznie powoduje, że kolumny są zawijane do nowej linii.

Należy pamiętać, że ta klasa jest częścią dodatkowych funkcji Bootstrap 4, które łączą się z projektem oddzielnie, jeśli używasz wersji Sass projektu Bootstrap i znajdują się w folderze scss / utilities. W razie potrzeby możesz również podłączyć inne wtyczki z tego folderu do swojego projektu.

3. Klasy adaptacyjne

3.1 Punkty przerwania

Bardzo interesującą funkcją Bootstrap 4 jest możliwość określenia uniwersalnych kolumn, które będą wyświetlane we wszystkich rozdzielczościach. To wspomniana wcześniej klasa „.col”. Ponadto można zdefiniować klasę wskazującą określoną liczbę kolumn zajmowanych przez treść - są to klasy z przedrostkiem „.col- (liczba kolumn)”, na przykład „.col-6” mówi nam, że zawartość zajmie 6 kolumn z 12. B w przypadku, gdy nie jest konieczne określenie konkretnej ilości, można bezpiecznie użyć klasy uniwersalnej „.col”.

3.2 Na urządzeniach mobilnych

Możesz użyć przedrostka klasy „.col-sm- (liczba zajętych kolumn)”, aby ustawić siatkę bazową dla wszystkich rozdzielczości oprócz najmniejszej. Na małych ekranach kolumny takiej siatki złożą się pod sobą. Przy większej liczbie uprawnień zajmą tyle miejsca, ile zdefiniowano w klasach.

Widzimy tutaj, że pierwszy wiersz na urządzeniach o rozdzielczości większej niż „sm”, czyli ponad 576 pikseli. Jest podzielony na 2 kolumny - odpowiednio 8 i 4 z 12 szerokości. Szerokość kolumn w drugim rzędzie jest obliczana automatycznie, ale przy najmniejszych rozdzielczościach kolumny te również układają się pod sobą, dzięki klasie „.col-sm”.

3.3 Tworzenie złożonej siatki kombinacji

Za pomocą Bootstrap możesz utworzyć dowolną kombinację kolumn podczas tworzenia siatki. Dla każdej kolumny można określić dowolne zachowanie w różnych rozdzielczościach przy użyciu klas adaptacyjnych. Tutaj różnice w stosunku do trzeciej wersji dotyczą tylko nazw klas.

4. Wyrównanie

Bootstrap 4 oparty jest na „flexach” i daje nam wszystkie funkcje tego modelu, które są dostępne w prostych, gotowych klasach. Wśród funkcji - wyrównanie w pionie i poziomie.

4.1 Wyrównanie w pionie

Oprócz kontrolowania wyrównania za pomocą nadrzędnego „.row”, możesz wyrównać kolumny, ustawiając dla nich odpowiednie klasy:

4.2 Wyrównanie w poziomie

Ponadto Bootstrap 4 ma w swoim arsenale narzędzia do poziomego wyrównywania kolumn za pomocą przedrostka „.justify-content-” w „.row”.

4.3 Usuwanie pól między kolumnami

Bardzo często zdarzają się sytuacje, w których konieczne jest usunięcie pól między kolumnami. Na przykład, jeśli tworzysz galerię, a elementy powinny być blisko siebie rozmieszczone, na przykład tak:

Aby to zrobić, wystarczy, aby element „.row” ustawił dodatkową klasę „.no-rynny”.

4.4 Przenoszenie kolumn do nowej linii

Jeśli wiersz (.row) jest wypełniony łączną liczbą kolumn większą niż 12, następna kolumna zostanie przeniesiona do nowej linii.

Tutaj wszystko jest takie samo, jak w trzeciej wersji Bootstrap.

5. Kolejność elementów

5.1 Klasy zamówień elementów

Możesz użyć specjalnych klas z przedrostkiem „.order-”, aby określić kolejność elementów. Jeśli znasz układ Flex, zasady te będą ci znane. Bootstrap 4 pozwala ustawić kolejność elementów za pomocą klas. Możesz ustawić kolejność bezpośrednio (.order-1.order-md-2):

Lub możesz użyć specjalnych klas, które określają kolejność pierwszego i ostatniego elementu (.order-first, .order-last):

5.2 Przesunięcie kolumny

Analogicznie do Bootstrap 3, czwarta wersja ma również możliwość poziomego przesuwania kolumn, ale jest implementowana w nieco inny sposób i istnieją specjalne klasy do tego z prefiksem „.offset-”.

5.2.1 Klasy offsetowe

Możesz przesunąć kolumnę w prawo za pomocą klas „.offset-md- *”, które zwiększają lewy margines o * liczbę elementów. W poniższym przykładzie klasa „.offset-md-2” przesunie kolumnę „.col-md-4” o 2 kolumny w prawo, pozostałe przykłady działają analogicznie:

Wcięcie można zresetować we wszystkich rozdzielczościach dzięki klasie „.offset - * - 0”, gdzie * to sm, md, lg lub xl.

6. Zagnieżdżanie

Oczekuje się, że Bootstrap 4 obsługuje zagnieżdżanie elementów. Wszystko działa tutaj tak samo, jak w trzeciej wersji - aby zagnieżdżać kolumny w innych, musisz utworzyć klasę potomną „.row” i już w niej zagnieżdżać kolumny.

Przeanalizowaliśmy główne funkcje pracy z siatką Bootstrap 4. Jeśli chcesz dowiedzieć się więcej o wszystkich funkcjach frameworka bardziej szczegółowo, zalecamy zapoznanie się z dokumentacją na oficjalnej stronie internetowej.

W następnej lekcji rozważymy skonfigurowanie siatki Bootstrap dla konkretnego projektu na przykładzie OptimizedHTML 4. Jako szablonu początkowego, mianowicie konfigurowanie, praca ze zmiennymi wcięciami, punktami przerwania, liczbą kolumn i innymi rzeczami.

W tej lekcji nauczymy się, jak pobrać platformę Bootstrap (wersja 3 lub 4) z witryną.

Bootstrap Learning Toolkit

Minimalny zestaw narzędzi (programów) do tworzenia projektów internetowych w ramach Bootstrap:

• edytor tekstu do pracy z kodem (Notepad, Brackets, Notepad ++ itp.);
• przeglądarka ( Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer lub inne).

Pobieranie Framework Bootstrap

Tworzenie projektu internetowego w oparciu o framework Bootstrap zawsze zaczyna się od pobrania. Możesz pobrać środowisko Bootstrap różne sposoby . Na przykład poprzez link znajdujący się na getbootstrap.com lub za pomocą menedżera pakietów npm, Composer, Bower itp. Sposób, w jaki to zrobić, zależy od z twojego doświadczenia lub konkretnej sytuacji.

Jak zainstalować framework Bootstrap za pomocą menedżerów pakietów, a także jak zbudować go za pomocą Grunta, możesz przeczytać w tym artykule.

Najprostszym sposobem na pobranie jest użyj tego linku. Na stronie Bootstrap znajdują się 2 linki.

Pierwszy link zawiera gotowe do użycia pliki CSS i JavaScript. Ten zespół jest używany głównie do badania frameworka lub do użytku w projektach, których projekt może być domyślnie wykonany w stylach określonych przez autorów.

Pobierz Bootstrap 3.4.1 Pobierz Bootstrap 4.3.1

Drugi link zawiera strukturę w kod źródłowy . Ta wersja jest wygodniejsza w tworzeniu stron internetowych, as bardzo łatwo zmienia style, kolory komponentów, konfiguruje je itp. Ale te pliki źródłowe będą musiały zostać skompilowane i zminimalizowane przed użyciem na stronie. Ten proces jest zwykle zautomatyzowany, na przykład za pomocą Gulp.

Kody źródłowe Bootstrap 3.4.1 Kody źródłowe Bootstrap 4.3.1

Rozpakowywanie archiwum Bootstrap

Po pobraniu archiwum (z gotowymi do użycia plikami CSS i JavaScript), musisz rozpakować je do katalogu swojego projektu internetowego.

Jeśli spojrzysz na archiwum, zauważysz, że ma ono następującą zawartość (na przykład Bootstrap 3.4.1):

Bootstrap / ├── css / │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js / │ ├ ── bootstrap.js │ └── bootstrap.min.js └── czcionki / ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └ ── glyphicons-halflings-regular.woff

Katalog css zawiera style frameworku Bootstrap, a js zawiera wtyczki do obsługi niektórych składników. Wtyczki są pisane przy użyciu funkcji biblioteki jQuery. Dlatego przed Bootstrap JS należy podłączyć bibliotekę jQuery.

Jak widać, archiwum zawiera 2 wersje plików CSS i JavaScript, tj. z sufiksem min i bez niego. Wersja pliku z min nie różni się od bez min, jest po prostu zminimalizowane (skompresowane).

W produkcji (na stronie produkcyjnej) lepiej jest używać zminimalizowanych wersji plików. Te pliki są mniejsze i dlatego zapewniają więcej szybki rozruch strony witryny.

Nie zminimalizowane wersje są wygodniejsze w użyciu podczas programowania, a także do nauki.

Oprócz tych plików to archiwum zawiera także kultową czcionkę „Glyphicons”. Czcionka Glyphicons zawiera ponad 250 ikon z zestawu Glyphicon Halflings. Czcionka jest reprezentowana za pomocą 4 plików: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff).

Taka różnorodność formatów tej samej czcionki jest konieczna, aby zapewnić jej wyświetlanie we wszystkich przeglądarkach.

O ikonach w formacie czcionki, a także o ich zaletach i wadach, możesz przeczytać w tym artykule.

Archiwum frameworku Bootstrap 4 praktycznie nie różni się od Bootstrap 3. Jego główna różnica polega na tym, że on nie zawiera czcionki „Glyphicons”. Jeśli potrzebujesz ikon czcionek, musisz je podłączyć samodzielnie. Na przykład, używając jednego z następujących zestawów: FontAwesome, Octicons, Glyphicons, IcoMoon itp. Jeśli nie chcesz używać gotowej czcionki, ale utwórz własną, która będzie się składać tylko z niezbędnych ikon, skorzystaj z tych informacji.

Ponadto zawiera archiwum Bootstrap 4 więcej plików bootstrap-grid.css i bootstrap-reboot.css. Te pliki są niezbędne tylko dla tych, którzy tego potrzebują nie cała struktura, ale tylko jej część.

Pierwszy plik (bootstrap-grid.css) zawiera siatkę Bootstrap, a drugi (bootstrap-reboot.css) zawiera normalizator, który ustawia podstawowe style tak, aby były takie same dla wszystkich elementów HTML we wszystkich przeglądarkach.

Połącz Bootstrap ze stroną HTML

Proces instalacji struktury Bootstrap 3 polega na połączeniu następujących plików ze stroną HTML 5:

1. Bootstrap CSS (bootstrap.min.css);
2. Najnowsza wersja biblioteki jQuery (niezbędna do działania wtyczek JS Bootstrap);
3. Bootstrap JavaScript (bootstrap.min.js).

Uwaga: Pliki JavaScript powinny zostać dołączone przed tagiem zamykającym ciało (), ponieważ zapewni to szybsze ładowanie i wyświetlanie głównej zawartości strony internetowej.

...

Podłączenie frameworka Bootstrap 4 wygląda następująco:

...

Bootstrap 4 można również podłączyć za pomocą Cd (nie musisz pobierać Bootstrap do projektu):

Skopiowano

...

CDN Bootstrap 3.4.1:

Skopiowano

Aby przetestować funkcjonalność frameworka, utwórz przycisk, gdy zostanie mu przedstawiony, wyświetli się okienko wyskakujące.

Przesuń kursor do mnie

Wydanie nowej wersji Bootstrap4 skłoniło mnie do napisania tego przewodnika, ponieważ nowa wersja różni się znacznie. Zajmie to trochę czasu, ale warto. Ten przewodnik Nie jest to kompletny przewodnik po Bootstrap4 i bez wątpienia będziesz musiał przejrzeć dokumentację więcej niż jeden raz, ale tutaj omówimy podstawowe rzeczy związane z tworzeniem układu strony na bootstrap4 na dwa różne sposoby

Instalacja

W naszym przypadku użyjemy SASS i dlatego wykorzystamy pełną instalację.

Jeśli potrzebujesz tylko Bootstrap do szybkiego prototypowania, warto zastosować metodę CDN. Po prostu łączysz pliki znajdujące się w innych zasobach w Internecie, bez instalacji (pobierania). W ten sposób dodajesz je do swojego projektu jako łącza.

Możesz po prostu dodać kod z poniższego przykładu do pliku projektu - index.html

dzień dobry< /h1>

Ten kod pochodzi bezpośrednio ze strony rozruchowej Bootstrap 4.

Za pomocą tego szablonu możesz od razu zacząć korzystać z Bootstrap. Zaletą jest to, że łatwo jest zacząć, ale wadą jest to, że brakuje ustawień, które oferuje Sass.

Zainstaluj Bootstrap 4 przez NPM

Na tym etapie zaczniemy nasz projekt tutaj. Będzie to wymagało użycia Node.js i jego menedżera pakietów do zainstalowania samego urządzenia rozruchowego wraz z kilkoma innymi pakietami. To da nam dostęp do Sassa, restartu w czasie rzeczywistym itp.

Najpierw upewnij się, że zainstalowałeś Nodejs, otwierając konsolę lub wiersz poleceń:

Jeśli otrzymasz wartość bieżącej wersji, wszystko jest w porządku i możesz kontynuować, ale jeśli nie, pobierz odpowiedni instalator oparty na systemie operacyjnym i postępuj zgodnie z procedurą instalacji z ustawieniami domyślnymi.

Możesz przeczytać kilka przydatnych informacji o tuningu w moim poście - NPM Konfigurowanie Gulp i kompilacji SASS

Po zakończeniu instalacji uruchom ponownie konsolę lub wiersz poleceń, aby uzyskać dostęp do Node.js.

Utwórzmy folder dla naszego projektu i przejdźmy do niego:

Mkdir bs4 && cd bs4

Następnie uruchamiamy npm init, aby utworzyć plik package.json, który po prostu przechowuje nasze zależności.

(Uwaga: Flaga -y pozwala nam po prostu pomijać odpowiedzi na różne żądania i zamiast tego zapewnia im wartości domyślne)

Następnie ponownie użyjemy npm do zainstalowania kilku różnych pakietów w zależności od zależności programistycznych:

Npm zainstaluj gulp browser-sync gulp-sass --save-dev

1. ŁykJest menedżerem zadań dla automatyczne wykonanie często używane zadania. Zobaczysz, jak to działa, jeśli jesteś początkującym.
2. Synchronizacja przeglądarki automatycznie aktualizuje dla nas Twoją przeglądarkę po zmianie pliku.
3. łyk pozwala zbudować nasz projekt, integrując go z sass.
4. --save-dev - Ustawić osobny folder. W naszym przypadku w folderze projektu, tj. - lokalnie.

Następnie użyjemy npm po raz ostatni, aby zainstalować kilka pakietów jako regularne zależności projektu:

Npm zainstaluj bootstrap jquery popper.js --save

1. bootstrap - oczywiście jest to pakiet bootstrap.
2. jquery - biblioteka skryptów Java używana bezpośrednio przez sam szablon bootstrap
3. popper.js używany również przez bootstrap. Umożliwia umieszczanie wyskakujących okienek, podpowiedzi itp.

Teraz nadszedł czas, aby otworzyć nasz projekt w edytorze kodu. Użyję Sublime 3.

Musimy utworzyć folder src dla naszego projektu i kilku zawartych w nim folderów. Drzewo wygląda następująco:

/ src / asset / css / js / scss

Wewnątrz / src utwórz również 4 foldery, jak pokazano powyżej.

Następnie utwórz plik index.html w katalogu / src / o następującej treści: