Jak zainstalować Bootstrap

Bootstrap to platforma internetowa typu open source. Jest używany głównie do programowania front-end. Jest bezpłatny. Bootstrap został opracowany przez Bootstrap Core Team. Bootstrap został pierwotnie stworzony przez Marka Otto i Jacoba Thorntona. Został pierwotnie wydany w 2011 roku. Został napisany w HTML, CSS i JavaScript.

Pakiet Bootstrap

Ten pakiet zawiera następujące elementy:

  1. CSS : Jest nazywany kaskadowym arkuszem stylów używanym do stylizowania elementów HTML.
  2. Komponenty : W pakiecie Bootstrap znajduje się wiele komponentów wielokrotnego użytku do rozwijanych menu, ikonografii, alertów, nawigacji itp.
  3. Dostosuj : w pakiecie Bootstrap można dostosować komponenty, mniej zmienne i wtyczki Jquery, aby uzyskać styl.
  4. Rusztowanie : w pakiecie bootstrap zapewnia podstawową strukturę z systemem siatki, stylem łącza i tłem.
  5. JavaScript : w pakiecie bootstrap pojawią się wtyczki javascript.

Kroki, aby zainstalować Bootstrap

Omówmy kroki wymagane do zainstalowania Bootstrap.

Krok 1: Użyj poniższego linku, aby pobrać bootstrap. Kliknij Pobierz, pakiet bootstrap zostanie pobrany w folderze Zip. Ten folder zawiera folder CSS i JS.

https://getbootstrap.com/docs/4.0/getting-started/download/

Pobrany pakiet bootstrap jest gotowy do użycia skompilowanego kodu, który można łatwo zintegrować z projektem. Składa się ze skompilowanych i zminimalizowanych pakietów CSS i wtyczek Javascript.

Krok 2: Plik źródłowy : Bootstrap można skompilować z własnym potokiem zasobów za pomocą javascript, sass i plików dokumentacji.

Kliknij Pobierz źródło, aby pobrać pliki. Zawiera js, CSS i inne pliki.

Krok 3: Menedżerowie pakietów: Bootstrap można zainstalować w plikach lub aplikacjach opartych na Node.js.

$ npm install bootstrap

Krok 4: W przypadku aplikacji Node.js bootstrap można zainstalować również za pomocą pakietu przędzy.

$ yarn add bootstrap

Krok 5: Jeśli użytkownik chce zainstalować bootstrap dla aplikacji Ruby Gems

  • Korzystanie z bundlera : gem 'bootstrap', '~> 4.0.0'
  • Bez pakietu : $ gem install bootstrap –v 4.0.0

Krok 6: Kompozytora można użyć do zainstalowania i zarządzania skryptami startowymi sass i javascript

$ Composer require twbs/bootstrap: 4.0.0

Krok 7: Korzystając z NuGet, możesz zainstalować i zarządzać bootstrapami CSS oraz aplikacjami sass i javascript for.Net.

  • Bootstrap pakietu instalacyjnego
  • Zainstaluj pakiet bootstrap.sass

Krok 8: Jquery jest również używany z plikami bootstrap lub folderem instalacyjnym. Należy pobrać Jquery i umieścić plik Jquery w folderze głównym Bootstrap, aby uzyskać lepszy interfejs użytkownika, a co najważniejsze, Jquery ulepsza funkcje bootstrap, które zapewniają bardziej atrakcyjny i responsywny wygląd.

Krok 9: Po wykonaniu powyższych kroków deweloper może napisać kod HTML, aby połączyć wszystkie pliki strony HTML, i może otworzyć plik HTML, aby sprawdzić odpowiedź.

Obsługiwane przeglądarki

Bootstrap obsługuje głównie najnowsze i stabilne wydanie wszystkich przeglądarek i platform. Przeglądarka urządzeń mobilnych obsługuje platformy Android i IOS. Przeglądarki stacjonarne dla różnych platform, takich jak Mac i Windows, są również obsługiwane przez bootstrap.

Struktura pliku bootstrap

  • Bootstrap został prekompilowany, pobierana jest skompilowana wersja bootstrap i rozpakuj plik Zip, a zobaczysz następującą strukturę pliku:

Powyższy rysunek obejmuje również pliki folderów czcionek, jeśli programista wymaga dodatkowych czcionek, aby interfejs użytkownika zgodnie z wymaganiami mógł zawierać pliki dostępne w pakiecie źródłowym bootstrap. Kod źródłowy bootstrap będzie miał bardziej szczegółową strukturę plików.

Bootstrap 4

W Bootstrap 4 wprowadzono znaczące zmiany, takie jak głównie przepisywanie kodu, obsługa elastycznego rozmiaru CSS, dodano opcje dostosowywania nawigacji, dodano odstępy między odpowiedziami i narzędzia do zmiany rozmiaru, globalny rozmiar czcionki został zwiększony z 14px do 16px, liczba narzędzi dodawane są klasy, przycisk stylizacji, rozwijane menu, obiekty multimedialne i klasy obrazów. Obsługuje również najnowszą wersję przeglądarek.

Główną funkcją Bootstrap jest uproszczenie tworzenia stron internetowych. Podstawowym powodem używania bootstrap jest wybór koloru, rozmiaru, czcionki i układu do projektu. Zapewnia podstawowe definicje stylów dla elementów HTML. Wtyczki Jquery i komponenty Javascript zapewniają dodatkowe elementy, które mogą być używane w interfejsie użytkownika, takie jak okna dialogowe i podpowiedzi itp. Komponenty bootstrap składają się również z elementów HTML, deklaracji CSS i kodu JavaScript. Ma również funkcję rozszerzania istniejących elementów interfejsu.

Innym głównym składnikiem bootstrap są komponenty układu. Podstawowy komponent układu nazywany jest kontenerem, w którym umieszczany jest każdy element strony. Kontener jest umieszczany na stronie internetowej, a następnie inne komponenty układu, takie jak układ CSS, można zdefiniować za pomocą wierszy i kolumn. Od autora zależy wybór pojemnika o stałej szerokości lub o szerokości płynu do projektowania strony internetowej. Ten pierwszy wykorzystuje cztery predefiniowane szerokości, ale później wykorzystuje wypełnienia, zależy od wielkości ekranu, na którym przeglądana jest strona internetowa.

Zastosowanie bootstrap

Bootstrap jest bardzo łatwy w użyciu i za jego pomocą programiści opracowali responsywne strony internetowe. Bootstrap jest również używany, ponieważ obsługuje wiele przeglądarek, takich jak Google Chrome, Mozilla Firefox, Internet Explorer, safari, opera itp. Bootstrap można łatwo rozpocząć i stworzyć responsywny system grid. Ma dołączone wtyczki javascript i istnieje lista firm do wykorzystania. Ma dobrą dokumentację do uruchomienia i jest w stanie działać szybko. Bootstrap pokazał responsywny design i mobilne pierwsze podejście. Jest to oprogramowanie typu open source i bezpłatne. Oszczędza to dużo wysiłku i czasu. Można go dostosować. Ważnym zastosowaniem bootstrap jest responsywne projektowanie stron internetowych, które pomaga dostosować stronę internetową do rozmiaru ekranu dla wszystkich urządzeń, takich jak laptop, komputer stacjonarny, telefon komórkowy i tablet.

Wniosek - jak zainstalować Bootstrap

Bootstrap jest szeroko stosowany jako front-endowa platforma internetowa. Obsługuje wiele niezależnych języków programowania i platform. Ma świetne wsparcie społeczności online dla początkujących, aby pomóc, a dokumentacja jest również dobra na oficjalnej stronie, na której wszystkie aktualizacje dotyczące wydania nowej wersji i zaawansowanych funkcji zostały poprawnie opublikowane i udokumentowane. Stało się popularnym frameworkiem do budowania różnych narzędzi i integracji z innym językiem skryptowym.

Polecane artykuły

To był przewodnik po instalacji Bootstrap. W tym miejscu omówiliśmy kroki, aby zainstalować bootstrap, a także podstawową koncepcję Bootstrap 4 i korzystanie z Bootstrap. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej -

  1. Jak korzystać z poleceń Bootstrap
  2. Bootstrap Wywiad Pytania z odpowiedziami
  3. Porównanie Bootstrap i WordPress
  4. Instalacja WordPress