TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Pierwsze kroki z Bootstrapem

12

Dekadę temu posiadanie strony internetowej było marzeniem i możliwe tylko dla maniaków technologii. W dzisiejszych czasach każdy zwykły człowiek może założyć stronę lub bloga dzięki popularności darmowych narzędzi do budowania stron i frameworków UI. Ponieważ branża budowlana ma bardzo konkurencyjny charakter, każda firma musi skoncentrować się na oferowaniu lepszych niż inne, aby przyciągnąć użytkowników końcowych. Bootstrap to jeden z popularnych frameworków, a my wyjaśnimy, jak możesz zacząć uczyć się Bootstrapa do budowania swoich stron internetowych.

Istnieją trzy rodzaje narzędzi, dzięki którym użytkownicy i programiści mogą rozpocząć pracę z witryną:

  • Samodzielne systemy zarządzania treścią typu open source, takie jak WordPress.org, Drupal i Joomla.
  • Darmowe platformy hostowane, takie jak WordPress.com, Weebly i Wix.
  • Niezależne struktury interfejsu użytkownika (UI), takie jak Bootstrap i Google Material Design.

Zakres platform samoobsługowych jest ogromny i nie jest odpowiedni dla większości użytkowników końcowych, którzy nie mają czasu na inwestycje. Darmowe platformy hostowane są łatwe w użyciu, ale mają silne zależności, które ograniczają Twoje możliwości tylko do tej platformy. Ostatnią opcją jest połączenie samodzielnego hostowania, programowania i swobody ponownego wykorzystania bloków elementów frontendu. W tym artykule przyjrzyjmy się, jak rozpocząć pracę z frontendowym frameworkiem Bootstrap.

Pierwsze kroki z Bootstrapem

Naucz się Bootstrapa

Co to jest Bootstrap?

Bootstrap to jeden z popularnych frameworków interfejsu użytkownika dostępnych w tym momencie. Jest to framework frontendowy stworzony za pomocą HTML, CSS i JavaScript bez udziału skryptów po stronie serwera, takich jak PHP. Początkowo został opracowany przez Twittera pod nazwą „Twitter Blueprint", aby poprawić spójną widoczność na wielu urządzeniach i narzędziach. Później został przemianowany na Bootstrap i wydany jako projekt open source w sierpniu 2011 roku.

Bootstrap to jeden z popularnych projektów dostępnych na GitHub z ponad 100 000 gwiazdek. Najnowsze informacje o wydaniach i aktualizacjach Bootstrap są dostępne na oficjalnej stronie internetowej getbootstrap.com. Popularność Bootstrap wzrasta z czasem dzięki podejściu mobile first i łatwej konwersji motywów Bootstrap na popularne motywy zarządzania treścią, takie jak WordPress. Istnieją również popularne narzędzia do tworzenia witryn Bootstrap, takie jak Mobirise, które umożliwiają uruchomienie witryny bez umiejętności kodowania.

Wersje Bootstrapa

Poniższa tabela pokazuje aktualizację wersji Bootstrapa, jest to V4 alpha 6, kiedy ten artykuł został napisany.

Wersja Data Główne zmiany
Wersja 1 19 sie 2011 Otwarte źródło
Wersja 2 31 stycznia 2012 Duża aktualizacja z 12-kolumnowym układem siatki i glifami.
Wersja 3 19 sierpnia 2013 Płaska konstrukcja i pierwsze podejście do urządzeń mobilnych.
Wersja 4 19 sie 2015 Duża aktualizacja w klasach CSS, użycie Sass i usunięcie Glyphiconów, porzucenie tether.js i dodanie popper.js.
Wersja 5 05 maja 2021 Bez ikon jQuery, Bootstrap, nowego logo i obsługi RTL.

Ogólne zastosowanie

W tej chwili stabilną wersją jest Bootstrap 5.01 i musisz przeprowadzić migrację do najnowszej wersji, jeśli używasz wcześniejszych wersji 3 lub 4. Więc jeśli tworzysz stronę, która ma zostać wkrótce opublikowana, najlepiej powinieneś użyć wersji 5.01, która jest stabilna. Użytkownicy końcowi mogą bezpośrednio pobrać wstępnie skompilowane pliki CSS/JS i używać ich w swojej witrynie. Pobierz wersję 3.4.1 tutaj, v4.6 tutaj i V5.01 tutaj. Jeśli tworzysz projekty dla klientów lub dla siebie, możesz pobrać kompletny kod źródłowy z plikami Sass z GitHub.

Uwaga: Instalacja Bootstrap na komputerze z systemem Windows lub macOS jest skomplikowanym zadaniem, ponieważ ma wiele zależności. Krótko mówiąc, powinieneś mieć zainstalowane Node.js i NPM na swoim komputerze wraz z Gruntem do kompilacji. Ponadto możesz użyć Harp.js do generowania statycznych plików witryny za pomocą części lub dołączeń.

Licencja

Pliki Bootstrap są dystrybuowane na licencji MIT z jednym wymogiem, ponieważ informacje o prawach autorskich powinny być przechowywane we wszystkich plikach źródłowych Bootstrap.

Zachowaj informacje o licencji i prawach autorskich zawarte w plikach CSS i JavaScript Bootstrap, gdy używasz ich w swoich pracach.

Możesz wyświetlić całą licencję w GitHub.

Uruchamianie witryny

Masz dwa sposoby na rozpoczęcie budowania witryny za pomocą Bootstrap. Jednym z nich jest pobieranie i hostowanie plików CSS i JS na serwerze hostingowym, a drugim jest używanie łączy CDN. Zalecamy zbudowanie szablonu startowego, a następnie rozpoczęcie używania wszystkich komponentów Bootstrap wewnątrz szablonu startowego. Więcej informacji znajdziesz w sekcji szablonu startowego Bootstrap 5.

Poniżej znajdują się linki CDN do wykorzystania w Twojej witrynie:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Upewnij się, że używasz kolejno pliku Popper, a następnie Bootstrap JS, w przeciwnym razie możesz użyć pojedynczego dołączonego pliku skryptu, który zawiera skrypt Popper. Podobnie dodaj dowolne niestandardowe arkusze stylów CSS po Bootstrap CSS, aby nie miały pierwszeństwa przed definicjami frameworka. Bootstrap 5 używa border-box do określania rozmiaru pudełka, co może mieć wpływ na układy. Możesz zmienić to na content-box, jeśli jest to potrzebne tylko dla określonych elementów, deklarując wbudowany CSS.


Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów