Co to jest Bootstrap?

512

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.
Панайот Толев
źródło
Odpowiedź na to pytanie jest dobra . Zastanów się dwa razy nad opublikowaniem nowych odpowiedzi, zwłaszcza jeśli zamierzasz skopiować i wkleić swoją odpowiedź z innego miejsca.
meagar
Z całym szacunkiem, @meagar, wydaje się, że pytanie wymaga bardzo konkretnej i precyzyjnej odpowiedzi, a zaakceptowana odpowiedź elegancko go unika. Co oznacza, że ​​technicznie nie ma na nie dobrze odpowiedzi. Po przeczytaniu każdej odpowiedzi (w tym usuniętych) dodałem własną, która, mam nadzieję, wyjaśnia, czym jest Bootstrap, ogólnie i jest łatwy do zrozumienia, w dużej mierze ma na celu zmniejszenie zamieszania początkujących (tak rozumiem to pytanie).
tao

Odpowiedzi:

271

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.

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

hutchonoid
źródło
2
@hutchonoid: czy bootload zawsze jest zawsze bezpłatny? jaka jest różnica między Joomla a bootply? który jest lepszy ?
logan
9
@logan Joomla i Bootply nie są porównywalne. Joomla to system zarządzania treścią zbudowany na PHP i SQL, podczas gdy Bootply to strona internetowa służąca do eksperymentowania ze strukturą Bootstrap (zupełnie inna). Pomyśl o Bootply jak o JSFiddle, który jest specjalnie dla Bootstrap. I tak, Bootply jest zawsze bezpłatny.
APAD1,
15
Myślę, że najbardziej odpowiednie dla udzielenia odpowiedzi na to pytanie byłoby skorzystanie z linku „Przykłady” podanego w powyższej odpowiedzi. Kopiowanie / wklejanie definicji Bootstrap z ich strony internetowej jest oczywiście bezużyteczne, biorąc pod uwagę, że użytkownik, który opublikował pytanie, wyraźnie wspomniał o obejrzeniu strony bootstrap. Nie sądzę, że zobaczenie tego samego tekstu z ich strony miałoby większy sens, ponieważ jest teraz napisany pogrubioną czcionką.
Mihaela,
13
@hutchonoid To może być dla Ciebie jasna definicja, ponieważ używasz Bootstrap od dłuższego czasu, ale zaufaj mi, ta definicja na ich stronie internetowej jest powodem, dla którego szukałem tej odpowiedzi - nie mogłem zrozumieć, co to znaczy. Więc w pełni się z tym zgadzam. Jeśli szukam odpowiedzi na to pytanie, nie chcę, aby był to ten sam cytat ze strony, tylko większą czcionką. Twoje wyjaśnienie nie ma sensu, ponieważ użytkownicy, którzy pytali o to w przeszłości, nie potrzebują już odpowiedzi w chwili obecnej, a każdy z obecnych na pewno najpierw zobaczy opis ze strony internetowej.
Anderson
2
Może wspomnieć o projektach, do których najlepiej pasuje? (Tj. Tymczasowe witryny, małe aplikacje internetowe, mikro strony itp.?)
Chuck Le Butt
94

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

GowriShankar
źródło
16
Uderza mnie bardziej jako zbiór komponentów lub widżetów niż „framework”. Czy możesz wyjaśnić, co dokładnie stanowi „szkielet”, a kiedy biblioteka komponentów przestaje być biblioteką komponentów i zaczyna być „strukturą”? Czy ma to coś wspólnego z „systemem siatki”?
Kirby L. Wallace
25

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.

Ciężkie bombardowanie
źródło
10
W rzeczywistości bootstrap to znacznie więcej niż tylko „plik css”.
Przepis
1
zgadzam się z @Recipe, że nie chodzi tylko o plik CSS
Sujay sreedhar
1
Osobiście zgadzam się z Blitzem. Nie dlatego, że ma wyczerpującą listę funkcji Bootstrap, ale że w moich złożonych sklepach używam głównie purystycznego kodowania i używam Bootstrap do jego najbardziej podstawowych funkcji css. To rodzaj rdzenia jego mocnych stron.
Suamere
1
To bardzo słaba odpowiedź, która źle wyjaśnia, co robi CSS (i tylko CSS). Doceniony. To po prostu wyjaśnia, że ​​możesz użyć CSS, a następnie odwołać się do klas, aby zmodyfikować interfejs użytkownika. Nic wspólnego z samym bootstrapem w stosunku do innych zapakowanych zasobów.
RichieHH
22

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.

gauravparmar
źródło
18

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

wartościowy
źródło
4

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:

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.

Multihunter
źródło
3

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

Dey-Dey
źródło
1

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/

Saanvi Sen
źródło
1

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:

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.

tao
źródło