Dostosowywanie trendów, narzędzi i struktur Bootstrap Layouts

Bootstrap jest obecnie numer jeden front-end framework i łatwo najszybszy sposób budowania układów. Jest już od lat, a zewnętrzni deweloperzy opublikowali nawet własne zasoby online. Zasoby te wahają się od darmowe motywy do szczegółowe wtyczki i frameworki.

W tym artykule chciałbym podzielić się garstką z nich zasoby i najlepsze praktyki dla programistów, którzy chcą iść dalej z Bootstrap.

Wszystkie zasoby w tym poście są bezpłatne, więc możesz z nich korzystać, jak Ci się podoba. Nawet jeśli nigdy nie używałeś Bootstrap, na pewno znajdziesz tu coś, co pomoże Ci zacząć.

Restyling z Bootstrap

Domyślna biblioteka Bootstrap jest dostarczana wraz z własny, niepowtarzalny projekt to wygląda fantastycznie. Jest powszechnie znany w sieci i można łatwo stwierdzić, kiedy witryna jest przy użyciu tradycyjnych elementów Bootstrap.

Ale możesz też przeprojektuj te elementy samodzielnie użyć kodu Bootstrap jako podstawy dla twojego układu.

Tam są kilka różnych sposobów możesz to zrobić:

Dodaj własny arkusz stylów, aby zastąpić domyślny.
Dostosuj wyjście BootStrap, dzięki czemu otrzymasz tylko potrzebne elementy.
Połącz z dodatkami i wtyczkami / motywami.

Ta ostatnia opcja jest najczęstsza i jest jednym z powodów, dla których Bootstrap rozwinął się tak szybko.

Przyznaję, że jestem także ich wielkim fanem dostosuj narzędzie ponieważ jest całkowicie darmowy i daje ci tyle kontroli jakich funkcji chcesz użyć.

Istnieje mnóstwo zasobów dla BootStrap 3/4, stworzonych przez zewnętrznych programistów, więc jest to łatwiejsze niż kiedykolwiek stwórz własne unikalne układy BootStrap bez pisania dużo kodu.

Wtyczki i dodatki

Ponieważ Bootstrap jest wyposażony w ogromną bibliotekę JavaScript, jest to łatwe rozwiń funkcje JavaScript. A programiści z pewnością zrobili to za pomocą własnych wtyczek, wiele wydanych za darmo w Internecie.

To moje ulubione rzeczy obsługuje natywnie Bootstrap. Wiele z nich uruchom na jQuery, więc są one również łatwe do dostosowania, jeśli znasz drogę do biblioteki jQuery.

Walidator formularzy

Najpierw jest moim ulubionym wtyczka walidacji formularza, formularz Validator. Działa na jQuery i obsługuje całą stertę frontendowych struktur: Bootstrap, Foundation, Pure, UIKit i inne.

Możesz ręcznie dołącz dowolną liczbę 51 walidatorów do dowolnego formularza w witrynie. Oznacza to, że odwiedzający będą musieli spełnić te wymogi walidacji, zanim będą mogli przesłać treść.

Wiele formularzy kontaktowych używa tych walidatorów do wymagają roboczych adresów e-mail. Ale możesz również użyć ich do przesyłania obrazów lub haseł, prawie wszystkiego, czego pragnie serce Bootstrap.

Zbieracz danych

Zbieracze dat są też ogromnym bólem w samodzielnym kodowaniu. Wiele formularzy używa menu rozwijanych dla ustawień dzień / miesiąc / rok, ale możesz również użyć tego Wtyczka wyboru daty bootstrap zaoszczędzić sobie kłopotów.

Jest całkowicie open-source i działa na bibliotece Bootstrap 3.x.. Ty też to zauważysz obsługuje zarówno datę i czas używając innej wtyczki jQuery, Moment.js.

Ogólnie rzecz biorąc, ta biblioteka jest fantastyczna, aby aktywować selektor daty pracy. To ma wiele zależności ale na szczęście nie będziesz musiał pisać dużo kodu, aby działał.

Oceny gwiazd

Oto kolejna fajna funkcja gwiazdki w sieci. Możesz dodaj ocenę od jednego do pięciu gwiazdek w dowolnym miejscu na Twojej stronie, używając biblioteki Bootstrap do zachowań JavaScript.

Gdy użytkownik najedzie na te gwiazdy, wyświetlacz zmieni się na dowolną ocenę opartą na pozycji kursora. Następnie jednym kliknięciem użytkownik oddaje swój głos i ustawia ocenę gwiazdkową, w tym oceny półgwiazdkowe.

Ta wtyczka jest zdecydowanie skomplikowane w konfiguracji ponieważ możesz zmienić wiele ustawień domyślnych dla bardziej zaawansowanych technik. Ale możesz zobaczyć proste demo na żywo, aby ocenić, czy ta wtyczka do oceny gwiazdek pasuje do Twojej witryny.

WATable

Bootstrap pochodzi z jego własny styl układu tabeli do wyświetlania danych tabelarycznych na nakładce. Ale z Wtyczka WATable, możesz dodać całą masę dodatkowych funkcji do swoich tabel Bootstrap.

Jest to jedna z najbardziej szczegółowych wtyczek jQuery i są to tylko niektóre z funkcji, które możesz dodać:

Niestandardowa paginacja.
Sortowanie kolumn.
Filtrowanie danych.
Efekty animacji tabeli.
Zaznacz, aby zaznaczyć całe wiersze.

WATable jest opisany jako Szwajcarski scyzoryk do wtyczek stołowych i muszę się zgodzić z tym opisem. Fakt, że obsługuje Bootstrap, jest po prostu wisienką na torcie.

To były niektóre z moich ulubionych wtyczek, ale jest ich tak wiele. Możesz przeglądać jeszcze więcej na tej stronie, jeśli jesteś ciekawy.

Ramy bootstrap

Bootstrap jest w rzeczywistości dużą strukturą, ponieważ pozwala użytkownikom dostosuj domyślne style HTML i CSS z kilkoma zajęciami.

Jednak programiści pobrali domyślną bibliotekę BootStrap i dodali własne style, aby stworzyć jeszcze większe ramy działa jak motywy, więc nie musisz zmieniać stylu Bootstrap od podstaw.

Na szczęście wszystkie są darmowe i wszystkie działają na domyślnych klasach BootStrap.

Bootflat

Prawdopodobnie najbardziej znanym frameworkiem BootStrap jest Bootflat UI że podąża za płaskim trendem.

Działa z wszystkie domyślne funkcje Bootstrap, w tym wszystkie składniki JavaScript. Główne różnice są większe projekt i struktura gdzie elementy strony używają płaskich schematów kolorów, aby odejść od stylów gradientu Bootstrap.

Bootflat nie był nadużywany bardzo, więc możesz dodać tę strukturę na dowolnej stronie docelowej lub stronie głównej, aby stworzyć niepowtarzalny wygląd swojej witryny.

Jest w 100% bezpłatny, a nawet pochodzi z narzędzie do wybierania kolorów, dzięki czemu można znaleźć płaskie schematy kolorów pasujące do układu.

Get Shit Done

To zaskakująco tępy zestaw interfejsu użytkownika także buduje na wierzchu biblioteki Bootstrap 3 i jest wydany za darmo na GitHub.

Get Shit Done pochodzi od zespołu Creative Tim, gdzie sprzedają kilka najlepszych zasobów. Ten konkretny zestaw interfejsu użytkownika ma wersję pro, ale w ogóle nie jest konieczny.

Wersja open-source ma więcej niż wystarczająco dla wszystkich i możesz sprawdzić demo na żywo aby zobaczyć, jak to wygląda w przeglądarce.

Konstrukcja materiału z paskiem startowym

Innym popularnym trendem w projektowaniu jest Projekt materiałów Google. Jest to język projektowy stworzony pierwotnie dla projektantów aplikacji na Androida, ale od tego czasu rozprzestrzenił się w sieci i zdobył wiele wsparcia od projektantów UI / UX.

Ta niesamowita struktura materiałowa Bootstrap wykorzystuje cechy materiału do zbuduj własny styl projektowania poza biblioteką Bootstrap.

Domyślnie to obsługuje wszystko w BootStrap 3 i jest obecnie przerabiany tak, aby obsługiwał Bootstrap 4. Możesz dowiedzieć się więcej na oficjalnej stronie głównej, która zawiera dokumentację i prezentacje.

Podobną bibliotekę możesz spróbować MDBootstrap, chociaż uważam, że jest to trochę trudniejsze do pracy.

Bootplus

Google stworzyło język projektowania materiałów, ale mają też własne style dla wielu swoich narzędzi i aplikacji internetowych.

Bootplus naśladuje styl interfejsu Google+, wraz z wieloma dokumentami pomocy Google, Dyskiem Google i podobnymi aplikacjami internetowymi. Posiada wszystkie te same funkcje, co Bootstrap, w tym siatki, style układu, style elementów i komponenty JavaScript.

Możesz nawet przeglądać demo na stronie, aby zobaczyć różnice między Bootplus a oryginalnym interfejsem Bootstrap. W przypadku darmowego zasobu Bootplus jest obszerny i jest idealny dla każdego, kto lubi techniki projektowania Google.

Narzędzia i zasoby

Na koniec chcę zagłębić się w wiele darmowych narzędzi dostosowywanie i budowanie układów Bootstrap.

Te narzędzia to wszystkie aplikacje internetowe, a wiele z nich jest nawet otwartych na GitHub. Zostały stworzone, aby zaoszczędzić czas i zaprojektować niesamowite układy Bootstrap bez większego kodu.

Edytor na żywo

Wolny Bootstrap live editor jest jednym z najlepszych narzędzi dla projektantów nietechnicznych. Jeśli nie wiesz, jak kodować, nadal możesz polegać na tym programie budującym Bootstrap, aby stworzyć cały układ od podstaw.

To działa bezpośrednio w przeglądarce i możesz nawet wybrać z gotowych szablonów, aby zacząć.

Opcje na pasku bocznym pozwalają dodaj pewne wartości CSS jeśli znasz jakieś kodowanie frontendowe. Ale możesz także użyć GUI do zmiany kolorów, czcionek, rozmiarów i prawie wszystkiego, co lubisz.

Po zakończeniu, Kliknij “Pobierz motyw” i możesz skopiować / wkleić zaktualizowane style CSS do własnego projektu. Super łatwy sposób na zmianę stylu Bootstrap bez konieczności przekodowywania wszystkiego od zera.

Kreator formularzy

To za darmo Kreator formularzy Bootstrap jest narzędzie przeglądarki „przeciągnij i upuść” to pozwala tworzyć od podstaw formularze Bootstrap.

Znowu to wymaga zerowej wiedzy o kodowaniu i masz pełny dostęp do wszystkich elementów Bootstrap 3. Po prostu wybierz żądany element i przeciągnij go w lewe pole. Od tego momentu możesz zmienić wszystko od tekstu zastępczego do klasy CSS.

Zdecydowanie najfajniejszy kreator formularzy, jaki kiedykolwiek widziałem i jest w 100% darmowy!

BootSwatchr

Innym darmowym narzędziem, które naprawdę lubię, jest BootSwatchr. Opiera się na frameworku Bootstrap i pozwala na to aktualizuj kolory, style motywów, i ogólny układ strony.

To, co podoba mi się w tej aplikacji, to to, że jest ona także dostępna w darmowa galeria gotowych stylów.

Więc możesz pobrać projekt, który ktoś inny już zrobił lub możesz użyć tego jako punktu wyjścia do dostosowania własnego motywu.

Poruszanie się do przodu

Bootstrap zyskuje na popularności, więc teraz jest najlepszy czas zanurz się w tej strukturze. Na szczęście istnieją dziesiątki wtyczek, frameworków i darmowych narzędzi, których możesz użyć do przyspieszenia procesu dev.

W tym artykule pokazałem tylko wierzchołek góry lodowej, więc jeśli nic tu nie widzisz, skorzystaj z Google i zobacz, co jeszcze możesz znaleźć.