TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Gratis Bootstrap -widgets för din webbplats

1

Bootstrap är ett frontend-ramverk för att bygga mobilvänliga webbplatser utan krångel. Huvuddelen av Bootstrap hanteras via CSS medan det också finns några plugins som behöver JavaScript. När du använder ramverket på din webbplats är det enkelt att infoga enskilda inbyggda komponenter som knappar, karuseller, märken, varningar etc. Du kan dock också skapa anpassade Bootstrap-widgets genom att ändra koden. Här är en samling av några av de mest populära gratis Bootstrap -widgetarna för din webbplats.

  • Det här är anpassade widgets gjorda med Bootstrap 4 och 5 -ramverk.
  • Du kan kopiera och klistra in dessa widgets på din webbplats eller testa tillsammans med startmallen.
  • Vi har förklarat varje widget med kod och demo så att du enkelt kan kopiera och klistra in.
  • Du kan anpassa widgeten ytterligare med din egen kod.

För att förklara hur man använder widgeten som en oberoende komponent har vi visat hur man gör några av widgetarna på Weebly -webbplatsen. Även om Weebly är en vanlig HTML- och CSS -plattform kan du behöva justera några parametrar för att använda på din webbplats. Det bästa exemplet är box-sizing-egenskapen i CSS, du kan behöva ändra detta till content-box eller border-box för specifika element på widgeten om du märker vadderingsproblem.

1 Bootstrap skev kort widget

Den första widgeten i listan är ett enkelt kort som visas i snett format. Detta kommer att se elegant på din webbplats med hjälp av standardkortkomponenten och minimal anpassning av CSS. Nedan följer några exempel på det snedställda kortet.

Gratis Bootstrap -widgets för din webbplats

Snett kort med vanlig text

Gratis Bootstrap -widgets för din webbplats

+8 grader i X -axel

Gratis Bootstrap -widgets för din webbplats

Snett kort med -8 grader i X -axel

2 Kort för widget för användarprofil

Nästa widget är en färgstark widget för användarprofiler. Du kan anpassa profilbilden, sociala länkar och den korta beskrivningen efter dina behov. Det är ett bra sätt att visa upp användarna på din webbplats.

Gratis Bootstrap -widgets för din webbplats

Användarkort med vänster profilbild

Gratis Bootstrap -widgets för din webbplats

Bootstrap användarprofilkort

3 Flip Card Widget

Vändkort är ett användbart sätt att visa textinnehåll bakom en bild. Användare kan sväva bilden för att läsa texten. Du kan sätta in ett enda kort eller flera flip -kort för att göra det som ett galleri. Widgeten visar dig hur du vänder kortkomponenten i Bootstrap i både horisontell och vertikal riktning.

Gratis Bootstrap -widgets för din webbplats

Bootstrap Horizontal Card Flip Widget

Gratis Bootstrap -widgets för din webbplats

Bootstrap Vertical Card Flip Widget

4 Bootstrap Teammedlem med Parallax -bakgrund

Om du driver en byrå eller ett företag är det vettigt att visa upp alla dina teammedlemmar på din webbplats. Lyckligtvis behöver du inte spendera för mycket tid och här är en team -widget för kopieringspasta för dig. Widgeten kommer att se vackert ut med en parallaxbakgrund och sociala ikoner.

Gratis Bootstrap -widgets för din webbplats

Bootstrap Team Member Widget med Parallax -bakgrund

5 CSS pristabell med Bootstrap

Många användare lägger till pristabell på sin webbplats med anpassad JavaScript. Även om JavaScript fungerar bra för detta ändamål kan du använda fullständig CSS för att göra vackra pristabeller med Bootstrap. Nedan ser du hur tabellerna kommer att se ut och du kan anpassa innehållet och antalet kolumner enligt dina behov.

Gratis Bootstrap -widgets för din webbplats

CSS prissättningstabell -widget

6 Skjutreglage för vittnesmål

Om du har många vittnesmål från användare, här är en reglervidget för dig. Visa alla dina kundfeedback i ett automatiskt roterande reglage med bild- och textinnehåll.

Gratis Bootstrap -widgets för din webbplats

Två lika stora kolumner Testimonial Slider

7 Blockeringar för Bootstrap -block

Blockcitat är användbara för att visa citat, citat och referensinnehåll. Bootstrap har inte en offertkomponent som standard. Du kan dock enkelt skapa olika stilar av blockcitat genom att göra mindre anpassningar av CSS -koden.

Gratis Bootstrap -widgets för din webbplats

Bootstrap Blockquote -stilar

8 CSS Parallax -sida

Du kan skapa en parallaxliknande effekt med komplett CSS utan JavaScript. Jumbotron-komponenten är en av de minst kända och du kan använda anpassad jumbotron för att skapa parallax-sidor i full bredd.

Gratis Bootstrap -widgets för din webbplats

Bootstrap Parallax -sida med Jumbotron

9 Widget för dragspelreglage

Bootstrap 5 introducerade en separat dragspelskomponent som du kan skapa med kollaps med tidigare versioner. Här är en dragspelreglage -widget som du kan använda för att infoga element i en elegant dragspelstil.

Gratis Bootstrap -widgets för din webbplats

Bootstrap dragspel innehållsreglage

10 Bootstrap Vertikal tidslinje -widget

Vertikal tidslinje är sättet att visa upp händelser som hände i en sekvens. Du kan också använda den här tidslinjen för att visa framtida produkt- eller evenemangslanseringar. Nedan ser hur den vertikala tidslinjewidgeten kommer att se ut:

Gratis Bootstrap -widgets för din webbplats

11 Avancerad datatabell med Bootstrap

Bootstrap har en inbyggd komponent för infogning av många tabellvarianter på din webbplats. Du behöver dock en avancerad datatabell för att ha funktioner som sortering, sökning och filtrering. Detta är supernyttigt när du har stort innehåll och vill visa upp i ett bord.

Gratis Bootstrap -widgets för din webbplats

Avancerad datatabell

Sammanfattning

Vi hoppas att ovanstående widgetar är användbara för din webbplats och sparar tid. Möjligheterna är obegränsade med Bootstrap 5 och du kan skapa nya widgets eller anpassa befintliga komponenter efter dina behov.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer