Ilmaiset Bootstrap -widgetit sivustollesi

Bootstrap on käyttöliittymä mobiililaitteille sopivien verkkosivustojen rakentamiseen ilman vaivaa. Suurin osa Bootstrapista käsitellään CSS: n kautta, mutta on myös joitakin laajennuksia, jotka tarvitsevat JavaScriptiä. Kun käytät kehystä sivustossasi, on helppo lisätä yksittäisiä sisäänrakennettuja komponentteja, kuten painikkeita, karuselleja, merkkejä, hälytyksiä jne. Voit kuitenkin luoda myös mukautettuja Bootstrap-widgettejä muokkaamalla koodia. Tässä on kokoelma joitain verkkosivustosi suosituimmista ilmaisista Bootstrap -widgeteistä.

• Nämä ovat mukautettuja widgettejä, jotka on tehty Bootstrap 4- ja 5 -kehyksillä.
• Voit kopioida ja liittää nämä widgetit sivustoosi tai testata yhdessä aloitusmallin kanssa.
• Olemme selittäneet jokaisen widgetin koodilla ja esittelyllä, jotta voit yksinkertaisesti kopioida ja liittää.
• Voit muokata widgettiä edelleen omalla koodillasi.

Selittääksemme widgetin käyttämisen itsenäisenä osana olemme osoittaneet, miten joillekin Weebly -sivuston widgeteille. Vaikka Weebly on tavallinen HTML- ja CSS -alusta, sinun on ehkä muutettava joitain verkkosivustollasi käytettäviä parametreja. Paras esimerkki on CSS: n laatikon mitoitusominaisuus. Sinun on ehkä muutettava tämä sisältö- tai reunusruuduksi widgetin tiettyjen elementtien osalta, jos huomaat täyttöongelmia.

1 Bootstrap vinossa kortti -widget

Luettelon ensimmäinen widget on yksinkertainen kortti, joka näkyy vinossa muodossa. Tämä näyttää tyylikkäästi sivuston oletusarvona kortti komponentti ja minimaalinen räätälöinnin CSS. Alla on esimerkkejä vinosta kortista.

Vino kortti, jossa on pelkkää tekstiä

+8 astetta X -akselilla

Vino kortti -8 asteen X -akselilla

2 Käyttäjäprofiilikortin widget

Seuraava widget on värikäs käyttäjäprofiili -widget. Voit muokata profiilikuvaa, sosiaalisia linkkejä ja lyhyttä kuvausta tarpeidesi mukaan. Se on hyvä tapa esitellä sivustosi käyttäjiä.

Käyttäjäkortti ja vasen profiilikuva

Bootstrap -käyttäjäprofiili

3 Flip Card -widget

Kääntökortti on hyödyllinen tapa näyttää tekstisisältöä kuvan takana. Käyttäjät voivat siirtää tekstiä viemällä hiiren kuvan päälle. Voit lisätä yhden kortin tai useita käännettäviä kortteja, jotta se olisi kuin galleria. Widget näyttää, kuinka Bootstrap -kortin osaa voi kääntää sekä vaaka- että pystysuunnassa.

Bootstrap Horizontal Card Flip -widget

Bootstrap -pystysuuntainen kortin kääntö -widget

4 Bootstrap -tiimin jäsen, jolla on parallaksitausta

Jos sinulla on toimisto tai yritys, on järkevää esitellä kaikki tiimin jäsenet verkkosivustollasi. Onneksi sinun ei tarvitse viettää liikaa aikaa, ja tässä on kopioi liitä tiimin jäsen widget sinulle. Widget näyttää kauniisti parallaksitaustalla ja sosiaalisilla kuvakkeilla.

Bootstrap -tiimin jäsen -widget, jossa on parallaksitausta

5 CSS -hinnoittelutaulukko ja Bootstrap

Monet käyttäjät lisäävät hinnoittelutaulukon sivustoonsa mukautetun JavaScriptin avulla. Vaikka JavaScript toimii hyvin tähän tarkoitukseen, voit luoda täydellisen CSS: n avulla kauniita hinnoittelutaulukoita Bootstrapilla. Alla on taulukkojen ulkoasu ja voit muokata sarakkeiden sisältöä ja lukumäärää tarpeidesi mukaan.

CSS -hinnoittelutaulukon widget

6 Suosittelun liukusäädin

Jos sinulla on paljon käyttäjäkokemuksia, tässä on liukusäädin -widget sinulle. Esittele kaikki asiakaspalautteet automaattisesti pyörivässä liukusäätimessä, jossa on kuva- ja tekstisisältöä.

Kaksi yhtäläistä saraketta suositteluliukusäädin

7 Bootstrap Block Quotes

Lohkolainaukset ovat hyödyllisiä lainausten, lainausten ja viittaussisällön esittelyyn. Bootstrapissa ei ole oletuksena lainausosaa. Voit kuitenkin helposti luoda erilaisia ​​lohkolainaustyylejä muokkaamalla CSS -koodia hieman.

Bootstrap Blockquote -tyylit

8 CSS Parallax -sivu

Voit luoda parallaksimaisen tehosteen täydellisellä CSS: llä ilman JavaScriptiä. Jumbotron-komponentti on yksi vähiten tunnetuista, ja voit käyttää räätälöityä jumbotronia luomaan täysleveitä parallaksisivuja.

Bootstrap Parallax -sivu Jumbotronin kanssa

9 Harmonikan liukusäädin -widget

Bootstrap 5 esitteli erillisen harmonikkakomponentin, jonka voit luoda käyttämällä kutistusta aiempien versioiden kanssa. Tässä on harmonikka -liukusäädin -widget, jonka avulla voit lisätä elementtejä tyylikkääseen harmonikka -tyyliin.

Bootstrap -harmonikan sisällön liukusäädin

10 Käynnistyshihnan pystysuora aikajana -widget

Pystysuora aikajana on tapa esitellä tapahtumia, jotka tapahtuivat peräkkäin. Voit käyttää tätä aikajanaa myös tulevien tuotteiden tai tapahtumien julkistamiseen. Alla näet, miten pystysuora aikajana -widget näyttää:

11 Bootstrap -lisätaulukko

Bootstrapissa on sisäänrakennettu komponentti, jonka avulla voit lisätä monenlaisia taulukoita sivustoosi. Tarvitset kuitenkin edistyneen tietotaulukon, jotta voit käyttää ominaisuuksia, kuten lajittelua, hakua ja suodatusta. Tämä on erittäin hyödyllistä, kun sinulla on paljon sisältöä ja haluat esitellä sen taulukossa.

Advanced Data Table

Yhteenveto

Toivomme, että yllä olevat widgetit ovat hyödyllisiä verkkosivustollesi ja säästävät aikaa. Bootstrap 5: llä mahdollisuudet ovat rajattomat, ja voit luoda uusia widgettejä tai muokata olemassa olevia komponentteja tarpeidesi mukaan.