Den Ultimate Guide to Bootstrap
Bootstrap er et kraftig, mobil-først, responsivt, front-end rammeverk som er bygget med CSS, HTML og JavaScript. Det gir en rekke fordeler over å starte fra bunnen av, og til og med over mange andre rammer.
Bootstrap ble opprinnelig utviklet av en designer og utvikler fra Twitter, og er blitt en av de mest populære front-end rammer i verden. Det ble først kjent som Twitter Blueprint, før det ble åpen kildekode, og tjente som Twitters interne stilguide i over et år før det ble offentliggjort.
Hvis du ikke er kjent med Bootstrap, vil ressursene og informasjonen her gi deg fart.
Hvorfor Bootstrap?
Bootstrap har mange fordeler enn å starte fra scratch på dine web dev prosjekter. En av de største årsakene er det store antallet ressurser tilgjengelig for Bootstrap, spesielt når det sammenlignes med mange andre rammer og boilerplater (vi kommer til dem senere).
Men utover de tilgjengelige ressursene, er det mange andre grunner til å bruke Bootstrap:
- Det er enkelt å bruke: Kom i gang med Bootstrap er en ganske rask og enkel prosess. Og det er fleksibelt: du kan bruke det med Mindre eller CSS, og til og med Sass (hvis du laster ned Sass-versjonen).
- Gitteret: Bootstrap bruker et 12-kolonne responsivt rutenett. Den støtter selv innkapslede og kompenserte elementer. Gitteret kan holdes responsivt, eller du kan enkelt bytte det til en fast layout.
- Raskere utvikling: fordi Bootstrap har så mange ferdige komponenter og ressurser tilgjengelig, kan det øke utviklingsprosessen din betydelig.
- Basestiler: Bootstrap leveres med basestiler for massevis av HTML-elementer du skal bruke uansett. Den inneholder stiler for typografi, skjemaer, bilder og mye mer.
- Pre-styled komponenter: Bootstrap leveres også med pre-styled komponenter for dropdowns, nav barer, varsler, og mange andre.
- Kombinert JavaScript-komponenter: Bootstrap leveres med en gjeng med JavaScript-komponenter for å legge til funksjonalitet. Det gjør det enkelt å manipulere ting som modale vinduer, verktøytips, varsler og mer. Du kan hoppe over skriveskript sammen.
- Utmerket dokumentasjon: Bootstrap har eksepsjonell dokumentasjon tilgjengelig, som er nyttig for både nybegynnere og mer avanserte brukere.
- Enkel integrering: Bootstrap kan integreres med en rekke andre rammer og plattformer, både på nye nettsteder og eksisterende. Du kan også bruke bare bestemte elementer i Bootstrap sammen med ditt eksisterende CSS.
Komme i gang med Bootstrap
Det er to hovedveier du kan Last ned Boostrap : den forkompilerte versjonen eller kildekoden versjonen. Hvilken du velger, avhenger av hvordan du vil komme i gang.
Den forkompilerte er klar for innbrudd i nesten alle prosjekter, og inkluderer kompilert CSS og JS, sammen med kompilerte og minifiserte versjoner av hver. Glyfonisk skrifttyper er inkludert, sammen med det valgfrie Bootstrap-temaet.
Kildekodeversjonen inneholder forhåndsforsynt CSS og JavaScript, samt skrifttypeaktiver. Den inneholder også Mindre, JavaScript og dokumentasjon. I utgangspunktet er det en mer fullstendig versjon, men læringskurven kommer til å være litt høyere enn den forkompilerte versjonen.
Det er også en versjon av Bootstrap som har blitt hentet fra Less to Sass, noe som er spesielt nyttig hvis du vil inkludere det i Rails, Compass eller Sass-only prosjekter.
Når du har bestemt hvilken versjon du vil installere, må du installere Grunt, som er byggesystemet Bootstrap bruker. Du må laste ned og installere node.js først, og deretter Grunt. Derfra har du en rekke Grunt-kommandoer på fingertuppene.
Deretter kan du starte med den grunnleggende Bootstrap HTML-malen, eller en av deres Eksempelmaler . Eksempelmaler inkluderer gridoppsett, jumbotronbaserte oppsett, forskjellige navbars og andre tilpassede komponenter (til og med en blogg og en påloggingsside).
Hva om jeg ikke vil ha et responsivt nettsted?
Mens Bootstrap er responsivt og mobil-først rett ut av esken, behøver det ikke å være slik hvis du ikke vil ha et responsivt nettsted. Alt du trenger å gjøre for å deaktivere det, er utelat visnings-metataggen i CSS, overstyr bredden på beholderne for hvert gridnivå, fjern eventuell kollapsende og utvoksende oppførsel på navbjørene dine, og gjør noen justeringer av gridoppsettene hvis du ' bruke dem igjen. Du kan lese de spesifikke instruksjonene i Komme i gang med dokumentasjon .
Bootstrap-plugins, utvidelser og komponenter
Bootstrap kommer med mange flotte funksjoner innebygd. Men det er også mange måter å utvide sin funksjonalitet for å møte dine eksakte behov.
Drivstoff UX er et sett med ekstra JavaScript-kontroller for webappsene dine. Du kan bare distribuere kontrollene du vil bruke fra mer enn et dusin tilgjengelig.
Jasny Bootstrap er et sett med komponenter, inkludert en vertikal navkomponent og varsler.
Bootstrap-Modal Legger til stabelbare, responsive AJAX modale vinduer til Bootstrap-siden din. Den støtter fullbreddsmodeller og lange modeller, blant annet formater.
Bootbox.js er et lite bibliotek som lar deg lage programmatiske dialogbokser enkelt.
Bootstrap Image Gallery er en utvidelse til Blueimp Gallery, som er et berøringsaktivert, responsivt bildegalleri ved hjelp av Bootstraps modale dialog.
Bootstrap Lightbox er en enkel lightbox plugin basert på Bootstrap Modal plugin. Det inkluderer alternativer for bakteppet, hvordan lysboksen skal lukkes og mer.
Bootstrap Form Hjelpere er en samling av jQuery-plugins for å bygge bedre skjemaer. Du kan bruke de fleste av dem selvstendig eller sammen for å dekke dine behov.
Varsler er en Bootstrap-utvidelse som lar deg enkelt legge til tilpassede varsler til nettstedet eller appen din. Det finnes alternativer for posisjon, type, overganger og mer.
Bootstrap-knurring er et jQuery-plugin som forvandler vanlige Bootstrap-varsler til Growl-lignende varsler. Det er varsler for informasjon, feil og suksessstiler, og det støtter flere påfølgende varsler.
Bootstrap-select legger til en egendefinert valg for Bootstrap ved hjelp av en dropdown-knapp.
Boostrap Maxlength gir en visuell tilbakemelding indikator for makslength-attributtet på en feltinngang.
Boostrap Markdown gjør det enkelt å legge til Markdown-støtte for skjemaene dine, sømløst å slå dem inn i en Markdown-editor.
Bootstrap Switch 3 gjør det enkelt å omforme boksene og radioknappene til svitsjbrytere.
jQuery-filopplasting legger til en jQuery-filopplastings widget med støtte for dra og slipp, flere filvalg og mer.
jqBootstrapValidation er et jQuery-valideringsplugg for Bootstrap-skjemaer som er enkle å bruke og gjør det enkelt å gi tydelig instruksjon når valideringsfeil oppstår.
Bootstrap-wysihtml5 er en enkel og vakker HTML5 WYSIWYG editor som kommer som en JavaScript plugin.
Bootstrap Multiselect er et jQuery-plugin for brukergrensesnitt som bruker utvalgte innganger med flere attributter, viser dem som en rullegardin med avmerkingsboksene.
BIC-kalender er en jQuery enkel kalender for merking av hendelser.
bootstrap-datetimepicker er en enkel dato og tid plukker komponent for Bootstrap.
Urskive er en timepicker for Bootstrap med muligheter for ting som format og trigger.
Bootstrap Timepicker gjør det enkelt å velge en tid for en tekstinngang med enten mus eller piltastene.
Fargepalett for Bootstrap er en enkel fargeplukker som tilbyr grunnleggende, Gmail-stil og tilpassede fargepaletter.
Pick-a-Color er en jQuery fargevalger for Bootstrap som gir fleksibel tekstoppføring, lagrede farger og mer.
Bootstro.js gjør det enkelt å legge til en guidet tur til nettstedet ditt.
Sosiale knapper for Twitter Bootstrap 2 gir deg sosiale knapper som er vektor, zoombar, retina-klar og tilpassbar.
Flippant.js er et JavaScript og CSS bibliotek for å bla ting, det er enkelt å tilpasse, uten avhengighet.
Tabelldråpe for Bootstrap Omarrangerer dine faner til rullegardinmenyene når de ikke alle passer inn i den tildelte plassen.
Tocify er en jQuery innholdsfortegnelse som kan bli tema med Bootstrap.
Bootpag er et jQuery-plugin for dynamisk paginering som fungerer med Bootstrap eller på egenhånd.
Typeahead.js er et JavaScript-bibliotek fra Twitter for å bygge typeheads.
X-redigerbar lar deg opprette redigerbare elementer på siden din i Bootstrap.
Bootstrap Tree View er en enkel løsning for å vise hierarkiske trestrukturer.
Tokenfield for Bootstrap er et avansert tokenizing-plugin som fokuserer på tastatur og kopi-lim-støtte.
Bootstrap Star Rating er en jQuery stjernestatusplugin som støtter funksjoner som brøkfyll og RTL-inngangsstøtte.
Yamm Megamenu er enda en Megamenu for Bootstrap som bruker standard navbar markup og fluid grid system klasser.
Summernote er en enkel WYSIWYG editor for Bootstrap.
Knockout-Bootstrap er et sett med knockout-bindingshåndteringsprogrammer for tilgang til Bootstrap JavaScript-widgets.
Gridmanager.js lar deg opprette og redigere gridoppsett i rammer som Bootstrap.
Glidebryter for Bootstrap er en oppstartskomponent for Bootstrap for skjemaer.
WATable er et jQuery-plugin som lar deg filtrere, formatere, paginere og sortere dataene dine raskt og enkelt.
Bootstrap Datagrid er et jQuery-plugin for Bootstrap som er fullt tilpassbart mens det gjenstår enkelt og kraftig.
PNotify er en utvidelse av JavaScript-varsling for Bootstrap.
Bootstrap Tour er en enkel utvidelse for å opprette nettstedsturneringer med (eller uten) Bootstrap.
De Bootstrap Accessibility Plugin , fra PayPal, gjør mange Bootstrap-komponenter tilgjengelig for brukere av tastatur og skjermleser.
Bootstrap Video Player er et tilpassbart HTML5 videospiller jQuery-plugin.
Last ned brukergrensesnitt er et sett med lastindikatorer som hovedsakelig er ment å bli brukt med skjemaer.
Bootstrap-temaer, maler og brukergrensesnitt
Du kan bygge dine egne temaer og maler fra bunnen av hvis du velger, eller sjekk ut disse gratis- og premium-eiendelene for å spare tid. Noen er ment å bli brukt som-er, mens mange andre er ment å være et hoppe av punkt for dine egne tilpassede design.
Kreativt marked har mer enn 300 premium Bootstrap temaer tilgjengelig.
BootstrapMade tilbyr temaer i en rekke stiler.
BootstrapBay er en markedsplass for premium Bootstrap temaer og maler hvor du kan kjøpe eller selge.
GridGum er et premium tema markedsplass med dusinvis av temaer som tilbys.
Themeforest har hundrevis av Bootstrap temaer til salgs, med bare $ 4.
WrapBootstrap tilbyr temaer for alt fra e-handel nettsteder til destinasjonssider.
Cardeostrap er et stort brukergrensesnitt for Bootstrap som inkluderer CSS, komponenter og JavaScript.
Flatstrap er et gratis og open source Bootstrap tema rammeverk uten alle frills.
Bootmetro er et webramme som har utseendet på Windows 8.
Fbootstrapp er et verktøy for å lage Facebook iframe-apper med Bootstrap.
Bootplus er et Google-designet front-end-rammeverk som er elegant og intuitivt.
Få mal er en liten samling av HTML5 og CSS3 maler i en rekke stiler.
BootstrapTaste er en samling av gratis og premium Bootstrap temaer.
Bootstrap Zero er den selvutnevnte største open source-mallsamlingen for Bootstrap.
Svart slips er en samling av gratis og premium temaer bygget på ulike versjoner av Bootstrap. De inkluderer alt fra dashboard-temaer til nyhetsaggregatene til porteføljetemaer.
Oppstartsramme er et enkelt, men kraftig Bootstrap-rammeverk fra DesignModo.
Bootswatch er en samling av gratis, enkle å installere, modulære Bootstrap-temaer.
Start Bootstrap er et sett med gratis Bootstrap-temaer og maler, inkludert blogemner, porteføljetemaer og mer.
Joostrap er en samling av Joomla maler bygget med Bootstrap.
Tema Armada er et sett med håndlagde responsive temaer som er bygget med Bootstrap, starter fra bare $ 8.
PrepBootstrap er en stor kilde til gratis temaer, maler og widgets for alt fra admin-grensesnitt til kontaktskjemaer.
RandThemes er et sett med premium Bootstrap temaer, inkludert både front- og back-end design.
Roots er et WordPress starter tema som er bygget på Bootstrap.
UI Bootstrap er en samling av Bootstrap-komponenter skrevet i AngularJS.
Bootstrap er et rent og moderne Bootstrap WordPress tema.
BootstrapWP er en solid base for tilpasset WordPress-temautvikling basert på Bootstrap.
StrapPress er et WordPress-tema som er mobil-først, responsivt, og inneholder tonn Bootstrap-elementer.
Shoestrap er et avansert WordPress-tema basert på Bootstrap.
Utslipp rammeverk er et grunntema som tilbyr en fluid layout, HTML5 og CSS3, og responsive menyer.
Flere Bootstrap ressurser
Utover grunnleggende utvidelser og temaer, er det nok av andre Bootstrap-ressurser der ute som gjør det lettere og morsommere å jobbe med Bootstrap.
De Bootstrap Style Guide Boilerplate hjelper deg semi-automatisk generere levende stil guider ved å koble et stilark og lage HTML-filer for hvert mønster eller element.
Bootstrap Magic er et tema redigeringsverktøy for Bootstrap som lar deg bygge temaer raskere.
akademisk er en rask blogg CMS basert på Bootstrap.
Wright er et Joomla 2.5 og 3.x rammeverk bygget på Bootstrap.
AngularStrap er et sett av AngularJS innfødte direktiver for Bootstrap 3.
PaintStrap lar deg lage Bootstrap-temaer ved hjelp av fargepaletter fra Adobe Kuler eller COLOURlovers.
Durandal er et rammeverk for å bygge enkeltsideapps som integreres med Bootstrap.
overdådige gjør det enkelt å lage ditt eget Bootstrap fargevalg fra et bilde.
LayoutIt! er en dra og slipp-grensesnittbygger for å lage din front-end-kode.
Pingendo er en visuell desktop app for prototyping responsive design basert på Bootstrap.
Bootsnip er et element galleri for Bootstrap ressurser.
Bootply er en lekeplass for bygging, testing og prototyping med Bootstrap-rammen.
Dojo for Bootstrap kombinerer Bootstrap-komponenter med tilpassede Dojo-moduler for alt fra modale vinduer til karuseller til knapper.
Bootsnipp Form Builder er en formbygger som bruker dra og slipp-komponenter.
Bootsnip Button Builder er en brukervennlig knappbygger som lar deg tilpasse utdata, knappetekst, farge, størrelse og ikon.
Ratchet er et verktøy for å bygge mobile apps med HTML, CSS og JavaScript-komponenter.
Bootbundle er et sett med temaer, utdrag og komponenter for Bootstrap.
BootSwatchr er en visuell temaopptaker for å bygge Bootstrap-temaer fra bunnen av.
React Bootstrap er en Bootstrap-build av den populære front-end rammen.
Brix.io er en grensesnittbygger for Bootstrap. Det er skybasert, enkelt å bruke, og tilbyr sanntids samarbeid.
Noen gode Bootstrap-prosjekter
Det er tonnevis av nettsteder der ute som allerede kjører på Bootstrap. De nedenfor viser hvor mye mangfold er mulig med Bootstrap.
Filter Surfboard Manufacturing Academy
Konklusjon
Bootstrap er bare en av mange tilgjengelige rammer for å bygge responsive, mobile første nettsteder med HTML, CSS og JavaScript. Ta deg tid til å studere hva Bootstrap kan gjøre (og hva du føler deg komfortabel med å gjøre med det) sammenlignet med andre rammer og velg den som passer ditt spesifikke prosjekt, trenger best. Og vær ikke redd for å velge forskjellige rammer for ulike prosjekter!