Aanpassen van Bootstrap Layouts Trends, Tools & Frameworks

bootstrap is momenteel de nummer één front-end framework en gemakkelijk de snelste manier om lay-outs te bouwen. Het bestaat al jaren en ontwikkelaars van derde partijen hebben zelfs hun eigen bronnen online gepubliceerd. Deze bronnen variëren van gratis thema's naar gedetailleerde plug-ins en frameworks.

In dit artikel wil ik een handjevol hiervan delen middelen en beste praktijken voor ontwikkelaars die verder willen gaan met Bootstrap.

Al de middelen in deze post zijn gratis, dus je kunt ze gebruiken zoals je wilt. Zelfs als je nog nooit Bootstrap hebt gebruikt, zul je hier zeker iets vinden dat je kan helpen om te beginnen.

Restylen met Bootstrap

De standaard Bootstrap-bibliotheek wordt geleverd met zijn eigen uniek ontwerp dat ziet er fantastisch uit. Het is algemeen bekend op internet en u kunt eenvoudig zien wanneer een website is met behulp van traditionele Bootstrap-elementen.

Maar u kunt ook restyle deze elementen zelf om Bootstrap's code te gebruiken als de basis voor uw lay-out.

Er zijn een paar verschillende manieren je kan dit doen:

Voeg uw eigen stylesheet toe om de standaard te overschrijven.
Pas de uitvoer van BootStrap aan, zodat u alleen de gewenste elementen krijgt.
Combineer met add-ons en plug-ins / thema's.

Die laatste optie is de meest voorkomende en het is een van de redenen waarom Bootstrap zo snel is gegroeid.

Toegegeven, ik ben ook een grote fan van hun pas hulpmiddel aan want het is helemaal gratis en geeft je zoveel controle over welke functies u wilt gebruiken.

Er zijn vele bronnen voor BootStrap 3/4, gemaakt door externe ontwikkelaars, dus het is eenvoudiger dan ooit om dit te doen maak uw eigen unieke BootStrap-lay-outs zonder veel code te schrijven.

Plug-ins & add-ons

Omdat Bootstrap wordt geleverd met een enorme JavaScript-bibliotheek, is dit eenvoudig genoeg JavaScript-functies uitbreiden. En ontwikkelaars hebben dit zeker gedaan met hun eigen plug-ins, waarvan vele gratis online beschikbaar zijn.

Dit zijn mijn favorieten die allemaal ondersteuning Bootstrap native. Veel van hen uitvoeren op jQuery, dus ze zijn ook eenvoudig aan te passen als u de weg kent in de jQuery-bibliotheek.

Formulier validator

De eerste is mijn favoriet vorm validatie plugin, Form Validator. Het draait op jQuery en het ondersteunt een hele hoop frontend frameworks: Bootstrap, Foundation, Pure, UIKit en anderen.

Jij kan voeg handmatig een willekeurig aantal van 51 validators toe naar elke vorm op uw site. Dit betekent dat bezoekers aan deze validatievereisten moeten voldoen voordat ze de inhoud kunnen indienen.

Veel contactformulieren gebruiken deze validators voor vereisen werkende e-mailadressen. Maar je kunt ze ook gebruiken voor beelduploads of wachtwoorden, vrijwel alles wat je Bootstrap-hartje begeert.

Datetime picker

Datumkiezers zijn ook een enorme pijn om jezelf te coderen. Veel vormen gebruiken alleen vervolgkeuzemenu's voor de instellingen voor de dag / maand / jaar, maar u kunt dit ook gebruiken Bootstrap datumkiezer plugin om jezelf de moeite te besparen.

Het is volledig open-source en werkt op de Bootstrap 3.x-bibliotheek. Je zult het ook opmerken ondersteunt zowel de datum en tijd door een andere jQuery-plug-in te gebruiken, Moment.js.

Over het algemeen is deze bibliotheek fantastisch om een werkende datumkiezer actief te krijgen. Het heeft wel veel afhankelijkheden maar gelukkig hoeft u niet veel code te schrijven om het werkend te krijgen.

Sterbeoordelingen

Hier is nog een leuke functie voor sterbeoordelingen op internet. Jij kan een score van één tot vijf sterren toevoegen overal op uw site, met behulp van de Bootstrap-bibliotheek voor JavaScript-gedrag.

Wanneer de gebruiker over deze sterren zweeft, verandert het display ongeacht de beoordeling op basis van de cursorpositie. Vervolgens, met één klik, werpt de gebruiker zijn stem uit en stelt hij een sterbeoordeling in, inclusief beoordelingen van een halve ster.

Deze plug-in is zeker ingewikkeld om op te zetten omdat je kan verander veel van de standaardinstellingen voor meer geavanceerde technieken. Maar u kunt een eenvoudige live demo zien om te peilen of deze plug-in voor uw sterbeoordeling geschikt is voor uw site.

WATable

Bootstrap wordt geleverd met zijn eigen stijl van de tafellay-out voor het weergeven van tabelgegevens op de frontend. Maar met de WATable plugin, je kunt een hele reeks extra functies aan je Bootstrap-tabellen toevoegen.

Dit is een van de meest gedetailleerde jQuery-plug-ins die er zijn en dit zijn slechts enkele van de functies die u kunt toevoegen:

Aangepaste paginering.
Kolom sorteren.
Gegevens filteren.
Tabelanimatie-effecten.
Selectievakje om volledige rijen te selecteren.

WATable wordt beschreven als a Zwitsers zakmes van tafelplugins en ik moet het eens zijn met deze beschrijving. Het feit dat het Bootstrap ondersteunt, is slechts de kers op de taart.

Dit waren enkele van mijn favoriete plug-ins, maar er zijn zoveel andere die er zijn. U kunt nog meer op deze pagina bladeren als u nieuwsgierig bent.

Bootstrap-raamwerken

Bootstrap is eigenlijk een groot raamwerk omdat het gebruikers toestaat pas de standaard HTML- en CSS-stijlen aan met een paar lessen.

Maar ontwikkelaars hebben de standaard BootStrap-bibliotheek gebruikt en hun eigen stijlen toegevoegd om nog grotere kaders te creëren werken als thema's, dus je hoeft Bootstrap niet helemaal opnieuw uit te leggen.

Gelukkig zijn ze allemaal gratis en ze draaien allemaal op de standaard BootStrap-klassen.

Bootflat

Misschien is het meest bekende BootStrap-framework dat wel Bootflat-gebruikersinterface dat volgt de platte designtrend.

Het werkt met alle standaard Bootstrap-functies, inclusief alle JavaScript-componenten. De grootste verschillen zitten er meer in ontwerp en structuur waar pagina-elementen egale kleurenschema's gebruiken om zich te verwijderen van de verloopstijlen van Bootstrap.

Bootflat is niet overgebruikt heel erg, dus je kunt dit kader toevoegen op elke bestemmingspagina of startpagina om een unieke look voor je site te creëren.

Het is 100% gratis en wordt zelfs geleverd met een kleur kiezer, zodat u egale kleurenschema's kunt vinden die passen bij uw lay-out.

Krijg Shit Done

Deze verrassend botte UI-kit bouwt ook op de top van de Bootstrap 3-bibliotheek en wordt gratis op GitHub uitgebracht.

Get Shit Done komt van het team van Creative Tim waar ze een paar premium-bronnen verkopen. Deze specifieke UI-kit heeft een pro-versie, maar is helemaal niet nodig.

De open-source versie heeft meer dan genoeg voor iedereen en je kunt de live demonstratie om te zien hoe het eruit ziet in de browser.

Bootstrap-materiaalontwerp

Een andere populaire ontwerptrend is Het materiaalontwerp van Google. Dit is een ontwerptaal die oorspronkelijk is gemaakt voor ontwerpers van Android-apps, maar sindsdien heeft gedaan verspreid op het web en kreeg veel steun van UI / UX-ontwerpers.

Dit ongelooflijke Bootstrap-materiaalraamwerk gebruikt de functies voor materiaalontwerp bouw een eigen ontwerpstijl uit de bibliotheek van Bootstrap.

Standaard is dit het ondersteunt alles in BootStrap 3 en wordt momenteel bijgewerkt om Bootstrap 4 ook te ondersteunen. U kunt meer informatie vinden op de officiële startpagina met documentatie en demo's.

Een soortgelijke bibliotheek die u zou kunnen proberen is MDBootstrap, hoewel ik deze een beetje moeilijker vind om mee te werken.

Bootplus

Google heeft de taal voor materiaalontwerp gemaakt, maar ze hebben ook hun eigen stijlen voor veel van hun hulpprogramma's en web-apps.

Bootplus bootst de stijl van de interface van Google+ na, samen met veel van de helpdocumenten van Google, Google Drive en vergelijkbare web-apps. Het heeft dezelfde functies als Bootstrap, inclusief rasters, lay-outstijlen, elementstijlen en JavaScript-componenten.

U kunt zelfs door een demo op de site bladeren om de verschillen tussen Bootplus en de originele Bootstrap UI. Voor een gratis bron is Bootplus uitgebreid en het is perfect voor iedereen die van de ontwerptechnieken van Google houdt.

Tools & bronnen

Ten slotte wil ik een duik nemen in de vele gratis tools voor Bootstrap-layouts aanpassen en bouwen.

Deze tools zijn allemaal web-apps en veel ervan zijn zelfs open source op GitHub. Ze zijn gemaakt om u tijd te besparen en u te helpen ongelooflijke Bootstrap-lay-outs te ontwerpen zonder veel code.

Live-editor

Het gratis Bootstrap live-editor is een van de beste tools voor niet-technische ontwerpers. Als je niet weet hoe je moet coderen, kun je nog steeds vertrouwen op deze Bootstrap-builder om helemaal vanuit het niets een hele layout te maken.

Het loopt rechtstreeks in uw browser en u kunt zelfs kiezen uit vooraf gemaakte sjablonen om aan de slag te gaan.

Opties in de zijbalk laten je voeg bepaalde CSS-waarden toe als je wat frontend codering kent. Maar u kunt ook de GUI gebruiken om kleuren, lettertypen, formaten en vrijwel alles wat u maar wilt te veranderen.

Als je klaar bent, Klik “Verkrijg thema” en u kunt de bijgewerkte CSS-stijlen kopiëren en in uw eigen project plakken. Super eenvoudige manier om Bootstrap opnieuw te stijlen zonder alles vanaf nul opnieuw te hoeven coderen.

Vormbouwer

Dit is gratis Bootstrap vormbuilder is een drag-en-drop browser tool waarmee je Bootstrap-formulieren helemaal zelf kunt maken.

Nogmaals, het vereist nul codeerkennis en je hebt volledige toegang tot alle Bootstrap 3-elementen. Selecteer gewoon het gewenste element en sleep het rechts in het linkervak. Vanaf hier kunt u alles wijzigen, van de tijdelijke aanduidingstekst tot de CSS-klasse.

Veruit de coolste vormbuilder die ik ooit heb gezien en het is 100% gratis!

BootSwatchr

Een andere gratis tool die ik echt leuk vind is BootSwatchr. Het is afhankelijk van het Bootstrap-framework en het laat je update kleuren, themastijlen, en de algemene lay-out van de pagina.

Wat ik leuk vind aan deze app is hoe deze ook wordt geleverd met een gratis galerij met vooraf ontworpen stijlen.

U kunt dus een ontwerp downloaden dat iemand anders al gemaakt of je kunt dat als een startpunt gebruiken om je eigen thema aan te passen.

Vooruit gaan

Bootstrap groeit alleen maar in populariteit, dus nu is het de beste tijd om dit te doen duik in dit kader. Gelukkig zijn er tientallen plug-ins, frameworks en gratis tools die u kunt gebruiken om het dev-proces te versnellen.

In dit artikel liet ik net het topje van de ijsberg zien, dus als je hier niets ziet dat nuttig is, ga dan naar Google en kijk wat je nog meer kunt vinden.