Salvattore touts seg som et jQuery Masonry-alternativ med en viktig forskjell: Den bruker CSS-konfigurasjon i stedet for JavaScript. Disse typer rister kan ses over hele nettet, trolig mest kjent på Pinterest.
I dag bruker vi Salvattore i kombinasjon med Twitter Bootstrap 3 for å gi en responsivt fantastisk flytende rutenettstruktur.
Først må du ta tak i Salvattore JavaScript-biblioteket (minifisert eller kilde). Deretter vil du koble opp Twitter Bootstraps CSS. I stedet for å laste ned og hosting vår egen kopi, låner vi dette direkte fra NetDNAs BootstrapCDN.
Salvattore + Bootstrap
Når dette er ferdig, er du klar til å komme i gang med å konfigurere Salvattore!
Deretter trenger du enten et eksternt stilark eller en tag i overskriften din. Det meste av vårt arbeid blir gjort i stilarket.
Merk: du må inkludere type
og rel
attributter for Salvattore å fungere skikkelig.
Twitter Bootstrap gir en kraftig, fleksibel nettstruktur som fokuserer på bottom-up media spørringer. La oss ta en titt på en felles rad med kolonner.
Du vil merke i mønsteret ovenfor col- [size] - [kolonne nummer]
. Med tilgjengelige størrelser på xs
, sm
,md
, og lg
, Vi kan sette forskjellige kolonnestørrelser for forskjellige bruddpunkter uten å skrive spesifikke medieforespørsler. Ta en titt på dette eksemplet som viser hvordan kolonnene skifter på forskjellige skjermbredder.
Vi skal skape et flytende rutenett ved hjelp av Bootstraps panelkomponent. Markeringen for å opprette panelet er bygget slik:
Paneloverskrift uten tittelPanelinnhold
Nå som vi har Bootstrap-brikkene vi trenger, skal vi sette alt sammen med Salvattore. For nå begynner vi med seks tomme paneler; senere vil vi gjøre alt dynamisk for å gi hvert panel noe innhold.
For at Salvattore skal fungere ordentlig, behøver vår rutenett a datakolonner
Egenskap. Her ser det ut som vår markering ser ut som:
Paneloverskrift uten tittelPanelinnhold
Deretter går vi til stilarket vårt og legger til følgende etiketter via pseudo-elementer:
@media skjerm og (min bredde: 1px) og (maks bredde: 767px) #columns [datakolonner] :: før innhold: '2 .col-xs-6'; @ media skjerm og (min bredde: 768px) og (maks bredde: 991px) #columns [datakolonner] :: før innhold: '3 .col-sm-4'; @ media skjerm og (min bredde: 992px) og (maks bredde: 9999px) #columns [datakolonner] :: før innhold: '4 .col-md-3';
Breakpoints vi har valgt kartet direkte til Bootstraps medieforespørsler. Salvattore bruker::før
pseudo-element og innhold
attributt til å definere klassene i kolonnene som er opprettet, og forsøker deretter å dele elementene jevnt i disse kolonnene.
Vi har holdt ting strengt innen CSS så langt, men hvis du ønsker å gå den ekstra mile, kan JavaScript tilby noen godbiter.
Salvattore tar ting et skritt videre ved å tilby tilleggsfunksjonalitet. Med disse funksjonene og en forbindelse til en API (vi bruker Googles Book API for å trekke inn bøker av Ernest Hemingway), kan vi bygge et dynamisk rutenett. Her er JavaScript som vi skal bruke:
funksjonstilføyning (tittel, innhold) // bygge / velg våre elementer var grid = $ ('# kolonner') [0]; var item = document.createElement ('div'); // bygge html var h = ''; h + = ''; salvattore ['append_elements'] (grid, [item]) item.outerHTML = h; $ .getJSON ("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", funksjon (data) $ (data.items) .each (funksjon (jeg , bok) append (book.volumeInfo.title, book.volumeInfo.description);););'; h + = tittel; h + = ''; h + = ''; h + = innhold; h + = ''; h + = '
Merk: jQuery påkrevd
Først oppretter vi en føyer
funksjon som tar tittelen og innholdet vårt, og bryter dem inn i vårt paneloppslag. Vi bruker deretter salvattore ['append_elements'] (grid, [item])
funksjon for å legge elementet til vårt rutenett. Til slutt kjører vi AJAX-anropet for å trekke inn dynamiske data.
For at dette skal fungere skikkelig, vil vi fjerne alt innholdet i rutenettet.
Salvattore fyller inn kolonnene for oss.
Vår siste oppslag ser slik ut:
Bøker av Ernest Hemingway
Salvattore gjør det enkelt å lage dynamiske Masonry-stilrister for noen som ikke vet mye JavaScript. Å si at med en liten mengde JavaScript, er det en bris å lage dynamiske grensesnitt kombinert med dynamisk innhold. Til slutt, Bootstrap gir fleksibel klassenavnestruktur for å enkelt konstruere grid for ethvert brytepunkt.