Tutaj jest wiele pytań związanych z Bootstrap. Widzę, że wiele osób z niego korzysta. Próbowałem to zbadać i znalazłem oficjalną stronę Bootstrap , ale była tam tylko sekcja pobierania i kilka słów później. Nic, co wyjaśnia, po co to jest ... Właśnie zrozumiałem, że jest to pomocnik front-end. Próbowałem znaleźć coś przez Googling, ale nie znalazłem nic konkretnego. Wszystko, co znalazłem, jest związane z definicją informatyki.

Tak więc moje pytania to:

• Czym w ogóle jest Bootstrap?
• Do czego służy i jak pomaga w tworzeniu front-endów?
• Chciałbym też wyjaśnić więcej szczegółów.

Jest to platforma open source HTML, CSS i JavaScript (początkowo utworzona przez Twittera), której można użyć jako podstawy do tworzenia witryn internetowych lub aplikacji internetowych.

• Więcej informacji i linki do pobrania

• Pierwsze kroki

• Przykłady

• Tematy

• Bootply - Edytor i konstruktor Bootstrap

Aktualizacja

Oficjalna strona bootstrap została zaktualizowana i zawiera jasną definicję.

„Bootstrap to najpopularniejszy framework HTML, CSS i JS do tworzenia responsywnych, mobilnych projektów w Internecie”.

„Zaprojektowane i zbudowane z całą miłością na świecie przez @mdo i @fat ”.

Bootstrap to platforma JavaScript typu open source opracowana przez zespół na Twitterze. Jest to kombinacja kodu HTML, CSS i JavaScript zaprojektowanego, aby pomóc w budowaniu komponentów interfejsu użytkownika. Bootstrap został również zaprogramowany do obsługi HTML5 i CSS3.

Nazywa się to także Front-end-framework.

Bootstrap to darmowy zestaw narzędzi do tworzenia stron internetowych i aplikacji internetowych.

Zawiera szablony projektowania oparte na HTML i CSS dla typografii, formularzy, przycisków, nawigacji i innych komponentów interfejsu, a także opcjonalne rozszerzenia JavaScript.

Niektóre powody dla programistów preferowały Framework Bootstrap

1. Łatwo zacząć

2. Świetny system siatki

3. Podstawowe style dla większości elementów HTML (typografia, kod, tabele, formularze, przyciski, obrazy, ikony)

4. Obszerna lista komponentów

5. Dołączone wtyczki JavaScript

Zaczerpnięte z About Bootstrap Framework

Bootstrap, jak wiem, to dobrze zdefiniowany CSS. Chociaż korzystając z Bootstrap możesz również używać JavaScript, jQuery itp. Ale główna różnica polega na tym, że używając Bootstrap możesz po prostu wywołać nazwę klasy, a następnie otrzymać wynik w formularzu HTML. na przykład kolorowanie przycisków kształtowanie tekstu, przy użyciu układów. W tym celu nie musisz pisać pliku CSS, wystarczy użyć poprawnej nazwy klasy do kształtowania formularza HTML.

Mówiąc prościej, można zrozumieć Bootstrap jako front-endową platformę internetową, która została stworzona przez Twittera w celu szybszego tworzenia aplikacji internetowych reagujących na urządzenia. Bootstrap może być również rozumiany głównie jako zbiór klas CSS, które są w nim zdefiniowane, które można po prostu użyć bezpośrednio. Wykorzystuje CSS, javascript, jQuery itp. W tle do tworzenia stylu, efektów i akcji dla elementów Bootstrap.

Być może wiesz, że używamy CSS do stylizowania elementów strony i tworzymy klasy oraz przypisujemy klasy do elementów strony, aby zastosować do nich styl. Bootstrap tutaj upraszcza projektowanie, ponieważ musimy tylko dołączyć pliki Bootstrap i wspomnieć o predefiniowanych nazwach klas Bootstrap dla naszych elementów strony internetowej i zostaną one automatycznie zaprojektowane za pomocą Bootstrap. Dzięki temu pozbywamy się pisania własnych klas CSS w celu stylizowania elementów strony. Co najważniejsze, Bootstrap jest zaprojektowany w taki sposób, że sprawia, że ​​Twoje urządzenie internetowe reaguje i to jest jego główny cel. Inne alternatywy dla Bootstrap mogą być - Foundation , Materialise itp. Frameworki.

Bootstrap uwalnia od pisania dużej ilości kodu CSS, a także pozwala zaoszczędzić czas poświęcony na projektowanie stron internetowych.

Bootstrap to open source'owe środowisko CSS, JavaScript, które zostało pierwotnie opracowane dla aplikacji twitter przez zespół projektantów i programistów twittera. Potem wypuścili go na open source. Jako długoletni użytkownik twitterowego bootstrapu uważam, że jest to jeden z najlepszych programów do projektowania gotowych i responsywnych stron internetowych. Wiele wtyczek CSS i Javascript jest dostępnych do szybkiego zaprojektowania witryny. To rodzaj szybkiej struktury szablonów. Niektóre osoby narzekają, że pliki CSS ładowania początkowego są ciężkie i ich ładowanie zajmuje dużo czasu, ale twierdzenia te są zgłaszane przez leniwych ludzi. Nie musisz przechowywać pełnego pliku bootstrap.css na swojej stronie. Zawsze masz możliwość usunięcia stylów komponentów, które nie są potrzebne w witrynie. Na przykład, jeśli używasz tylko podstawowych składników, takich jak formularze i przyciski, możesz usunąć inne składniki, takie jak akordeony itp. z głównego pliku CSS. Aby rozpocząć dabbing w bootstrap, możesz pobrać podstawowe szablony i składnikigetbootstrap site i pozwól magii się wydarzyć.

Oświadczenie: W przeszłości używałem bootstrapu, ale tak naprawdę nigdy nie doceniałem tego, co tak naprawdę było wcześniej, ten opis pochodzi ode mnie, kiedy przyszedłem do mojej własnej definicji, dzisiaj. Wiem, że bootstrap v4 jest obecnie niedostępny, ale uważam, że dokumentacja bootstrap v3 jest znacznie bardziej przejrzysta, więc wykorzystałem to. Biblioteka nie zmieni zasadniczo tego, co zapewnia.

Krótko

Bootstrap to zbiór plików CSS i javascript, który zapewnia ładnie wyglądającą domyślną stylizację standardowych elementów HTML oraz kilka popularnych obiektów treści WWW, które nie są standardowymi elementami HTML.

Aby dokonać analogii, to trochę jak zastosowanie motywu w programie PowerPoint, ale dla twojej witryny: sprawia, że ​​wszystko wygląda całkiem ładnie bez zbytniego wysiłku.

Z czego to się składa?

Oficjalna dokumentacja v3 dzieli ją na trzy sekcje:

• CSS
• składniki
• JavaScript

Z grubsza odpowiadają one trzem głównym rzeczom, które zapewnia Bootstrap:

• Zwykłe pliki CSS, które stylizują standardowe elementy HTML. Bootstrap sprawia, że ​​standardowe elementy wyglądają ładnie. np. HTML:<input class="btn btn-default" type="button" value="Input">Click me</button>
• Pliki CSS, które używają stylizacji na standardowych elementach HTML, aby przekształcić je w coś, co nie jest standardowym elementem HTML, ale jest standardowym elementem Bootstrap (np. Https://getbootstrap.com/docs/3.3/components/#progress ). W ten sposób Bootstrap rozszerza listę „standardowych” elementów WWW w spójny wizualnie sposób. np. HTML:<span class="glyphicon glyphicon-align-left"></span>
• Klasy CSS zostały zaprojektowane z myślą o jQuery. Wewnętrznie Bootstrap używa selektorów jQuery do modyfikowania stylów w locie i interakcji z DOM, a tym samym zapewnia użytkownikowi takie same możliwości. Uważam, że wymaga to więcej wyjaśnień, więc ...

Korzystanie z Javascript / jQuery

Bootstrap znacznie rozszerza jQuery . Jeśli spojrzymy na kod źródłowy, zobaczymy, że używa on jQuery do wykonywania takich czynności, jak: konfigurowanie detektorów zdarzenia keydown w celu interakcji z listami rozwijanymi . Wykonuje całą konfigurację jQuery podczas importowania jej do <script>tagu, więc musisz się upewnić, że jQuery jest załadowane przed uruchomieniem Bootstrap.

Ponadto wiąże javascript z DOM bardziej szczelnie niż zwykły jQuery, zapewniając interfejs klasy javascript . np . programowo przełączać przycisk . Pamiętaj, że CSS po prostu określa wygląd rzeczy, więc głównym zadaniem tych operacji będzie modyfikowanie, które klasy CSS mają zastosowanie do elementu w danym momencie. Tego rodzaju zmian, opartych na danych wprowadzonych przez użytkownika, nie można wprowadzić za pomocą zwykłego CSS.

Istnieją inne standardowe interakcje z użytkownikiem, do których jesteśmy przyzwyczajeni, ponieważ nie są objęte CSS. Na przykład kliknięcie linku przewijającego stronę w dół zamiast zmiany stron. Jedną z rzeczy, które daje Bootstrap, jest łatwy sposób na wdrożenie tego zachowania na własnej stronie internetowej.

Standardy

Wspominałem tu często słowo „standard” i nie bez powodu. Myślę, że najlepszą rzeczą, jaką zapewnia Bootstrap, jest zestaw dobrze wyglądających standardów. Możesz dowolnie modyfikować domyślny motyw, ale jest to lepsza baza niż surowy HTML, CSS i JS. I dlatego nazywa się to „framework”.

Różne przeglądarki internetowe mają różne style domyślne i mogą działać inaczej, potrzebują różnych prefiksów CSS i tym podobnych. Główną zaletą Bootstrap jest to, że jest o wiele bardziej niezawodny niż pisanie wszystkich rzeczy z różnych przeglądarek (nadal będziesz mieć problemy, jestem pewien, ale jest łatwiejszy).

Myślę, że Bootstrap był bardziej preferowany, gdy łyk i babel nie były tak popularne. Patrząc na Bootstrap, wydaje się, że pochodzi on z czasów, zanim wszyscy skompilowali swój JavaScript. Jest to nadal aktualne, ale teraz możesz czerpać korzyści z innych źródeł.

_{Nowsze wersje CSS umożliwiły definiowanie przejść między tymi listami statycznymi w miarę ich zmiany. Oryginalna wersja Bootstrap faktycznie wyprzedza rozpowszechnienie tej możliwości w przeglądarkach, więc nadal mają własne klasy animacji. Jest kilka bitów Bootstrap, które wyglądają tak: inne rzeczy pojawiły się wokół niego i sprawiają, że wygląda trochę zbędnie.}

Bootstrap to framework HTML, CSS, JS z wieloma komponentami, które pozwalają bardzo szybko tworzyć piękne i nowoczesne strony internetowe lub aplikacje internetowe.

Następujące strony internetowe zawierają przykłady, elementy i komponenty wielokrotnego użytku, które można zintegrować z projektem przy użyciu frameworka bootstrap

bootsnipp.com

startbootstrap.com

bootdey.com

Bootstrap to najpopularniejsza na świecie i powszechnie używana platforma open source do programowania w HTML, CSS i JS. Jest to frameworkiem frameworka HTML. Bootstrap pomaga budować responsywne strony internetowe lub aplikacje internetowe oraz 12-kolumnowy system siatki, który pomaga dynamicznie dostosowywać stronę internetową do odpowiedniej rozdzielczości ekranu. Obecna wersja bootstrap to 4.3.1, a zespół bootstrap oficjalnie ogłosił również wersję Bootstrap 5 i zmiany, takie jak usuwanie jquery z bootstrap. Oto niektóre z kluczowych powodów, dla których framework ładujący jest najbardziej preferowany

• Jest łatwy w użyciu
• Bootstrap ma duże wsparcie społeczności
• Dostosowania można łatwo wykonać
• Zwiększa szybkość rozwoju

• Reakcja na coś

  Aby uzyskać więcej informacji, możesz sprawdzić oficjalną stronę internetową: https://getbootstrap.com/

Źródło: https://vmokshagroup.com/blog/bootstrap-advantages/

Według dzisiejszych standardów i terminologii internetowej, powiedziałbym Bootstrap to faktycznie nie ramy , chociaż to właśnie ich roszczenia www. Większość programistów uważa frameworki Angular, Vue i React, podczas gdy Bootstrap jest powszechnie nazywany „ biblioteką ” ”.

Ale, aby być dokładnym i poprawnym, Bootstrap to kolekcja open source, najpierw mobilna kolekcja narzędzi do projektowania CSS, JavaScript i HTML mająca na celu zapewnienie środków do opracowywania często używanych elementów internetowych znacznie szybciej (i mądrzej) niż kodowania ich od zera .

Kilka podstawowych zasad, które przyczyniły się do sukcesu Bootstrap:

• jest wielokrotnego użytku
• jest elastyczny (tj .: pozwala na dostosowanie niestandardowych systemów siatki, zmianę punktów przerwania odpowiedzi, rozmiarów rynny kolumnowej lub kolorów stanu; z reguły większość ustawień jest kontrolowana przez zmienne globalne)
• jest intuicyjny
• jest modułowy (zarówno JavaScript, jak i (S) CSS wykorzystują podejście modułowe; można łatwo znaleźć samouczki na temat tworzenia niestandardowych kompilacji Bootstrap, zawierające tylko potrzebne części)
• ma ponadprzeciętną kompatybilność z różnymi przeglądarkami
• natychmiastowy dostęp do sieci (gotowy na czytnik ekranu)
• jest dość dobrze udokumentowany

Zawiera szablony projektowe i funkcje dla: układu, typografii, formularzy, nawigacji, menu (w tym menu rozwijanych), przycisków, paneli, znaczków, modałów, alertów, zakładek, składanych, akordeonów, karuzeli, list, tabel, paginacji, narzędzi medialnych (w tym osadzanie, obrazy i zastępowanie obrazów), narzędzia reagowania, narzędzia oparte na kolorach (podstawowe, dodatkowe, niebezpieczne, ostrzeżenie, informacje, jasne, ciemne, wyciszone, białe), inne narzędzia (pozycja, margines, wypełnienie, zmiana rozmiaru, odstępy, wyrównanie, widoczność), scrollspy, afiks, podpowiedzi, popovers.

Domyślnie opiera się na jQuery, ale znajdziesz bezpłatne warianty jQuery obsługiwane przez każdy z popularnych popularnych progresywnych frameworków JavaScript:

• React-Bootstrap - React powered Bootstrap
• BootrapVue - Bootstrap zasilany przez Vue
• ng-bootstrap - Bootstrap z zasilaniem kątowym

Praca z Bootstrap polega w dużej mierze na zastosowaniu pewnych klas (lub, w zależności od frameworku JS: dyrektyw, metod lub atrybutów / propozycji) oraz na użyciu określonych struktur znaczników.

Dokumentacja zazwyczaj zawiera ogólne przykłady, które można łatwo wkleić i skopiować jako szablony początkowe.

Kolejną zaletą programowania za pomocą Bootstrap jest jego dynamiczna społeczność, przetłumaczona na wiele dostępnych motywów, szablonów i wtyczek, z których większość jest typu open source (tj. Kalendarze, selektory daty / czasu, wtyczki do zarządzania zawartością tabelaryczną, takie jak a także biblioteki / kolekcje komponentów zbudowane na Bootstrap, takie jak MDB, szablony portfolio, szablony administracyjne itp.)

Last but not least, Bootstrap był dobrze utrzymywany przez lata, co czyni go dobrym wyborem dla aplikacji / stron internetowych gotowych do produkcji.