Weekend Prosjekt: Bootstrap ditt nettsted med Bootstrap

Noen gang hatt en Web prosjekt i tankene, men fikk stoppet ved tanken på å måtte bekymre seg om site design? Hvis kode, og ikke design, er din sterke punkt du ønsker å ta en titt på Twitters Bootstrap. Denne helgen kan du få ryddet et eksisterende webområde eller starte et webprosjekt du har vært å sette deg ned med en full design verktøykasse.

Som mange folk i Linux-fellesskapet, har jeg vært å skape Nettsteder siden 90-tallet. Min første området ble arrangert i den sjenerøse 10MB
plass gitt av min ISP i Kirksville, Missouri. Den besto av en hyllest til Charles Bukowski, og var så hjemlig et nettsted som du noensinne har sett. Vel, det var bedre enn sider på MySpace, men det var ikke veldig pen.

Spol frem til 2011, og mens mine HTML ferdigheter har bedret seg litt, min web design ferdigheter fortsatt forlate noe å være ønsket. Men hvis jeg jobber med et prosjekt som krever en rask Web-side (og ikke en fullverdig CMS), jeg kan slå til Bootstrap.

Hva er Bootstrap?

Bootstrap er en Prosjektet utgitt av Twitter i midten av august i år. Det har vert på GitHub og er tilgjengelig som en 6K gzipped ressurs hvis du velger å bruke utgivelsen vert på GitHub. (Mer om det i et øyeblikk.)

Det inkluderer CSS og HTML for typografi, knapper, tabeller, rutenett, navigeringslinjer, og mye mer. Det er designet for å være egnet for grunnleggende områder eller for webapplikasjoner

Bootstrap er ". Bygde " med mindre, en dynamisk stilark språk. I utgangspunktet, det kan du fremskynde CSS utvikling, og gjør det enklere å tilpasse Bootstrap. Vi skal snakke litt mer om det om kort tid også.

Får Bootstrap

Du kan bruke Bootstrap et par måter. Den første og enkleste måten er å koble til den kompilerte CSS fra GitHub hjelp av koblingen element øverst på siden din (under tittelen element, for eksempel, men før kroppen element)

<. Link rel = " stilark &​​quot; href = " http: //twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.min.css" >

Det er alt som trengs. Du umiddelbart arve alle stiler fra Bootstrap – så hvis du har elementer som er definert av stilene i Bootstrap, vil du se en umiddelbar endring i siden din. Og du bør
ha elementer som er definert av Bootstrap.

Hva du får

La oss ta en titt på hva Bootstrap får deg. Naturligvis har det stiler for de vanlige sideelementer vi bruker hele tiden. Så ledd, får header, oversikt, vekt, sterk, og andre standard tags alle stylet.

Bootstrap har også to oppsett å velge mellom, slik at du har muligheten til en fast 940 piksler bred layout, eller en væske layout med et sidepanel.

En ting som kan være smertefullt å lage fra bunnen av er en navigeringslinje. Heldigvis, Bootstrap gir en Navigation klasse som gjør det smertefritt å skape et godt utseende sidebar.

Hvis du hater koding tabeller (som ikke?) Bootstrap gjør det litt bedre ved å gi flere stiler av tabellen. Du får " sebra-stripet " klasse som har de vekslende rader, og de viser også kombinere sebra-stripet stil med Tablesorter å skape en sorterbar tabell.

Du har også standardformat for skjemaer som Spiff opp noen skjemaer som du trenger for å lage med kjekk liten -ser boksene, prepended tekst, og så videre.

Hvis du gjør en søknad, vil du sannsynligvis ønske å se nærmere på verktøytips, varsler, og popovers samt de vanlige sideelementer. Twitter har du dekket her med varsler og alt som er lett på øynene og lett å slippe inn.

Utover Bootstrap

Men hva hvis du ønsker å finpusse stilen litt? Mens Twitter grunn ser fungerer for meg, det kan ikke være helt hva du leter etter. Ingen fare, det er lett å fikse.

The Bootstrap-kode er delt opp i syv .less filer som dekker ulike deler av design og layout. For eksempel, det er forms.less at håndtakene (du gjettet det) skjemaer, tables.less for tabeller, type.less for typografiske elementer, og så videre.

Det fine med å bruke mindre, er at du kan gjøre ting som endrer farger eller stiler hele med variabler i stedet for å endre hvert enkelt tilfelle. Se LESS nettstedet for mer. Du gjør endringer i disse filene, og deretter bruke Makefile følger med Bootstrap å kompilere inn i en CSS-fil for distribusjon.

Forresten, hvis du er nysgjerrig på lisensen, distribuerer Twitter Bootstrap under Apache License 2,0 – som skal være kompatibel med omtrent alle personlige eller virksomhet prosjektet.

Hvis det er et prosjekt du har vært spent på å starte, eller hvis det er en hjemmekoselig websiden du trenger å pen opp, prøv Bootstrap. Jeg kjenner mange FOSS prosjekter der ute som kan ha nytte av det. Denne helgen, gå gjøre nettet ser litt hyggeligere! Anmeldelser