Twitter Bootstrap er et utmerket sett med nøye utformede brukergrensesnittelementer, layouter og javascript-verktøy, som er fritt tilgjengelige for bruk i ditt neste webdesignprosjekt. Denne videoserien tar sikte på å introdusere deg til Bootstrap; tar deg hele veien fra å laste ned ressursene, for å bygge en komplett Bootstrap-basert nettside.
Da Mark Otto (@mdo) og Jacob Thornton (@fat) utgav Twitter Bootstrap til verden i august 2011, forklarte deres kunngjøringen hva dens verdi ville være: å gi frontend-utviklere mulighet til å kickstart prosjekter mer effektivt og effektivt.
Bootstrap-stilarket gir et enkelt å implementere 960-grid for effektiv layout, samt faglig utformede stiler for typografi, navigasjon, tabeller, skjemaer, knapper og mer. For å ta vare på hverdagslige JavaScript-detaljer, gir Bootstrap et godt bygget sett med jQuery-plugins for rullegardinmenyer, faner, modalbokser, verktøytips, varselmeldinger og mer.
Sammen gir disse grensesnittelementene alle fester av et standardkompatibelt, brukervennlig, profesjonelt bygget HTML5-nettsted, rett ut av esken. Som @mdo sette den i det opprinnelige innlegget:
Bootstrap er en veldig enkel måte å markedsføre raske, rene og svært brukbare applikasjoner på. En ren og enhetlig løsning på de vanligste, daglige grensesnittsoppgaver utviklerne kommer over.
Og likevel blir ingen av det i veien for ytterligere tilpasning. Igjen, med @mdo, mens Twitter Bootstrap "er svært omfattende," er det likevel "fleksibelt nok til å fungere for mange unike designbehov." Og dermed,
Du kan bruke Bootstrap til å kaste sammen raske prototyper eller veilede utførelsen av mer sofistikerte design og større ingeniørarbeid.
De liberale lisensvilkårene, under Apache 2.0-lisensen, gir en stor kreativ frihet. Så lenge du gir de gode folkene på Twitter på grunn av kreditt for deres arbeid, er du fri til å ta, tilpasse og tilpasse alt til ditt hjertes innhold, så snu og lansere det resulterende nettstedet for deg selv eller for en klient, gratis eller for profitt. (For videre lesing, sjekk ut denne diskusjonstråden, der folkene på Twitter har forklart hvordan de skal forbli i samsvar med lisensen mens du tilpasser koden.)
Gitt den åpenbare verdien av det den tilbyr og de liberale vilkårene for lisensen, er det ikke rart at så mange utviklere har begynt å dra full nytte av det. Tumblr-nettstedet, "Built with Bootstrap", har dokumentert en rekke Bootstrap-bygget nettsteder, inkludert:
I alle disse eksemplene merker du et rent nett og et grensesnitt som betyr profesjonalitet. Du vil også merke en god del variasjon i detaljene. Og du kan bli rammet av det faktum at utviklere på respekterte antrekk som Code Academy og MSNBC har valgt å bygge med Bootstrap.
Hvis du er noe som meg, blir du veldig fristet til å sjekke det selv - og du burde!
Faktisk har jeg sjekket det ut nylig. La meg vise deg rundt.
I de to korte videoene nedenfor, presenterer jeg deg på Twitter Bootstraps hjemmebase, går du gjennom nedlasting av koden, hvoretter vi vil sprekke den åpne og begynne å organisere ting for å forberede vårt eget Bootstrap-bygget nettsted.
Alternativt, Last ned videoen, eller abonner på Webdesigntuts + screencasts via iTunes!
Alternativt, Last ned videoen, eller abonner på Webdesigntuts + screencasts via iTunes!
Vi gjør følgende, men ikke akkurat i denne rekkefølgen:
I fremtidige opplæringsprogrammer går jeg gjennom Bootstraps hovedtrekk, og jeg hjelper deg med å bruke Bootstrap til å bygge ditt eget lagringssted for Bootstrap-utdrag. På den måten får vi vite Bootstrap, få erfaring med å bruke den og tilpasse den, og forberede oss på å jobbe med enda større effektivitet på våre fremtidige Bootstrap-bygget prosjekter.