Siirry pääsisältöön
Bootstrap 4:stä on uudempi versio!

Esimerkkejä

Aloita projekti nopeasti millä tahansa esimerkeillämme aina kehyksen osien käyttämisestä mukautettuihin komponentteihin ja asetteluihin.

Lataa lähdekoodi

Mukautetut komponentit

Upouudet komponentit ja mallit auttavat ihmisiä pääsemään nopeasti alkuun Bootstrapin kanssa ja esittelemään parhaita käytäntöjä kehykseen lisäämiseksi.

Albumin kuvakaappaus
Albumi

Yksinkertainen yhden sivun malli valokuvagallerioita, portfolioita ja muuta varten.

Hinnoittelun kuvakaappaus
Hinnoittelu

Esimerkki hinnoittelusivusta, joka on rakennettu Cardsilla ja jossa on mukautettu ylä- ja alatunniste.

Checkout-kuvakaappaus
Tarkista

Mukautettu kassalomake, joka näyttää lomakekomponentit ja niiden vahvistusominaisuudet.

Tuotteen kuvakaappaus
Tuote

Lean tuotekeskeinen markkinointisivu, jossa on laaja ruudukko- ja imagotyö.

Kannen kuvakaappaus
Peite

Yksisivuinen malli yksinkertaisten ja kauniiden kotisivujen luomiseen.

Karuselli-kuvakaappaus
Karuselli

Mukauta navigointipalkkia ja karusellia ja lisää sitten uusia osia.

Blogin kuvakaappaus
Blogi

Lehden kaltainen blogimalli, jossa on otsikko, navigointi ja esitelty sisältö.

Kojelaudan kuvakaappaus
Kojelauta

Perusjärjestelmänvalvojan kojelautakuori kiinteällä sivupalkilla ja navigointipalkilla.

Sisäänkirjautumisen kuvakaappaus
Kirjaudu sisään

Mukautettu lomakkeen asettelu ja suunnittelu yksinkertaiselle kirjautumislomakkeelle.

Sticky alatunniste kuvakaappaus
Tahmea alatunniste

Kiinnitä alatunniste näkymän alaosaan, kun sivun sisältö on lyhyt.

Sticky footer navigointipalkin kuvakaappaus
Tahmea alatunnisteen navigointipalkki

Kiinnitä alatunniste näkymän alaosaan kiinteällä ylänavigointipalkilla.

puitteet

Esimerkkejä, jotka keskittyvät Bootstrapin tarjoamien sisäänrakennettujen komponenttien käyttöön.

Aloitusmallin kuvakaappaus
Aloitusmalli

Ei muuta kuin perusasiat: käännetty CSS ja JavaScript.

Ruudukkokuvakaappaus
Ruudukko

Useita esimerkkejä ruudukkoasetteluista, joissa on kaikki neljä tasoa, sisäkkäisiä ja paljon muuta.

Jumbotron-kuvakaappaus
Jumbotron

Rakenna jumbotronin ympärille navigointipalkin ja joidenkin perusruudukon sarakkeiden avulla.

Otetaan oletusnavigointipalkkikomponentti ja näytetään, kuinka sitä voidaan siirtää, sijoittaa ja laajentaa.

Navbars-kuvakaappaus
Navigointipalkit

Esittely kaikista navigointipalkin reagoivista ja säilövaihtoehdoista.

Navbarin staattinen kuvakaappaus
Navbar staattinen

Yksittäinen navigointipalkki esimerkki staattisesta ylänavigointipalkista sekä lisäsisältöä.

Navbar korjattu kuvakaappaus
Navbar korjattu

Esimerkki yksittäisestä navigointipalkista, jossa on kiinteä ylänavigointipalkki sekä lisäsisältöä.

Navigointipalkin alaosa kuvakaappaus
Navigointipalkin alaosa

Esimerkki yksittäisestä navigointipalkin alareunasta ja lisäsisällöstä.

Kokeilut

Esimerkkejä, jotka keskittyvät tulevaisuuteen sopiviin ominaisuuksiin tai tekniikoihin.

Kelluvat tarrat -kuvakaappaus
Kelluvat etiketit

Kauniin yksinkertaiset lomakkeet kelluvilla tarroilla syötteidesi päällä.

Offcanvas-kuvakaappaus
Offcanvas

Tee laajennettavasta navigointipalkistasi liukuva offcanvas-valikko.