Den ultimative guide til Bootstrap
Bootstrap er en kraftfuld, mobil-først, lydhør, front-end ramme, der er bygget med CSS, HTML og JavaScript. Det giver mange fordele i forhold til start fra bunden og endda over mange andre rammer.
Bootstrap blev oprindeligt udviklet af en designer og udvikler fra Twitter, det er blevet en af de mest populære front-end rammer i verden. Den blev først kendt som Twitter Blueprint, før den blev åben kilde og tjente som Twitters intern stilguide i over et år, før den blev offentliggjort offentligt.
Hvis du ikke er bekendt med Bootstrap, får ressourcerne og informationerne dig hurtigere.
Hvorfor Bootstrap?
Bootstrap har mange fordele i forhold til start fra bunden af dine web-dev-projekter. En af de største årsager er det store antal ressourcer, der er til rådighed for Bootstrap, især i forhold til mange andre rammer og kedelplader (vi kommer til dem senere).
Men ud over de tilgængelige ressourcer er der mange andre grunde til at bruge Bootstrap:
- Det er nemt at bruge: Kom godt i gang med Bootstrap er en ret hurtig og nem proces. Og det er fleksibelt: Du kan bruge det med Mindre eller CSS, og endda Sass (hvis du downloader Sass versionen).
- Gitteret: Bootstrap bruger et 12-kolonne responsivt gitter. Det understøtter endda indlejrede og kompenserede elementer. Gitteret kan holdes lydhørt, eller du kan nemt ændre det til et fast layout.
- Hurtigere udvikling: fordi Bootstrap har så mange færdige komponenter og ressourcer til rådighed, kan det betydeligt fremskynde din udviklingsproces.
- Basestil: Bootstrap leveres med basisformater til et ton af HTML-elementer, som du alligevel bruger. Det omfatter stilarter til typografi, formularer, billeder og meget mere.
- Pre-stylede komponenter: Bootstrap leveres også med pre-stylede komponenter til dropdowns, nav barer, advarsler og mange andre.
- Bundled JavaScript-komponenter: Bootstrap leveres med en masse JavaScript-komponenter for at tilføje funktionalitet. Det gør det nemt at manipulere ting som modale vinduer, værktøjstips, advarsler og meget mere. Du kan springe over skript alle sammen.
- Fremragende dokumentation: Bootstrap har exceptionel dokumentation til rådighed, hvilket er nyttigt for både begyndere og mere avancerede brugere.
- Nem integration: Bootstrap kan integreres med en række andre rammer og platforme, både på nye websteder og eksisterende. Du kan endda bruge kun specifikke elementer i Bootstrap sammen med din eksisterende CSS.
Kom godt i gang med Bootstrap
Der er to hovedmåder, du kan download Boostrap : den forkompilerede version eller kildekoden version. Hvilken du vælger afhænger af, hvordan du vil komme i gang.
Den forkompilerede er klar til indbrud i næsten ethvert projekt, og indeholder kompileret CSS og JS sammen med kompilerede og miniverede versioner af hver. Glyphicon skrifttyper er inkluderet, sammen med det valgfrie Bootstrap tema.
Kildekodeversionen indeholder forudgående CSS og JavaScript samt skrifttypeaktiver. Den indeholder også Mindre, JavaScript og dokumentation. I grund og grund er det en mere komplet version, selvom læringskurven vil være lidt højere end den forkompilerede version.
Der er også en version af Bootstrap, der er blevet portet fra Less to Sass, hvilket er særligt nyttigt, hvis du vil inkludere det i Rails, Compass eller Sass-only projekter.
Når du har valgt, hvilken version du vil installere, skal du installere Grunt, som er byggesystemet Bootstrap bruger. Du skal downloade og installere node.js først, og derefter Grunt. Derfra har du en række Grunt-kommandoer lige ved hånden.
Så kan du starte med den grundlæggende Bootstrap HTML skabelon, eller en af deres Eksempel skabeloner . Eksempler skabeloner omfatte grid layouts, jumbotron-baserede layouter, forskellige navbars og andre brugerdefinerede komponenter (selv en blog og en login-side).
Hvad hvis jeg ikke ønsker et lydhurt websted?
Mens Bootstrap er lydhør og mobil-først lige ud af boksen, behøver det ikke at forblive den måde, hvis du ikke vil have et lydhurt websted. Alt du skal gøre for at deaktivere det er udeladt viewport-metatagget i CSS, tilsidesætter bredden på beholderne for hvert gitterniveau, fjern eventuelt sammenfaldende og ekspanderende adfærd på navbjolerne, og foretag nogle tilpasninger af gitterlayouterne, hvis du ' genbruge dem Du kan læse de specifikke instruktioner i Kom godt i gang med dokumentation .
Bootstrap plugins, udvidelser og komponenter
Bootstrap leveres med mange gode funktioner indbygget. Men der er også masser af måder at udvide sin funktionalitet til at opfylde dine nøjagtige behov.
Brændstof UX er et sæt ekstra JavaScript-kontroller til dine webapps. Du kan kun installere de kontroller, du vil bruge fra mere end et dusin til rådighed.
Jasny Bootstrap er et sæt af komponenter, herunder en vertikal nav komponent og advarsler.
Bootstrap-modal tilføjer stabile, lydhørede AJAX modale vinduer til dit Bootstrap-websted. Det understøtter fuldbreddsmodeller og lange modeller, blandt andet formater.
Bootbox.js er et lille bibliotek, der giver dig mulighed for nemt at oprette programmatiske dialogbokse.
Bootstrap Image Gallery er en udvidelse til blueimp Gallery, som er et berøringsaktiveret, responsivt billedgalleri ved hjælp af Bootstraps modale dialog.
Bootstrap Lightbox er en simpel lightbox plugin baseret på Bootstrap Modal plugin. Det omfatter muligheder for baggrunden, hvordan lysboksen skal lukkes og mere.
Bootstrap Form Helpers er en samling af jQuery-plugins til opbygning af bedre formularer. Du kan bruge de fleste af dem selvstændigt eller sammen for at passe til dine behov.
underretninger er en Bootstrap-udvidelse, der giver dig mulighed for nemt at tilføje brugerdefinerede meddelelser til dit websted eller din app. Der er muligheder for position, type, overgange og mere.
Bootstrap-brumme er en jQuery-plugin, der forvandler regelmæssige Bootstrap-advarsler til Growl-lignende meddelelser. Der er advarsler for information, fejl og succesformer, og det understøtter flere på hinanden følgende underretninger.
Bootstrap-select tilføjer et brugerdefineret valg til Bootstrap ved hjælp af en dropdown-knap.
Boostrap Maxlength giver en visuel feedbackindikator for maxlængdeattributten på en feltindgang.
Boostrap Markdown gør det nemt at tilføje Markdown-support til dine formularer, og gør dem nemmere til en Markdown-editor.
Bootstrap Switch 3 gør det nemt at omdanne dine afkrydsningsfelter og radioknapper til omskiftere.
jQuery-filoverførsel tilføjer en jQuery-filupdaterings widget med support til drag & drop, flere filvalg og meget mere.
jqBootstrapValidation er et jQuery validerings plugin til Bootstrap formularer, der er nemme at bruge og gør det nemt at give tydelig instruktion, når valideringsfejl opstår.
Bootstrap-wysihtml5 er en simpel og smuk HTML5 WYSIWYG editor, der kommer som et JavaScript-plugin.
Bootstrap Multiselect er et jQuery-plugin til brugergrænseflader, der bruger udvalgte input med flere attributter, viser dem som en dropdown med afkrydsningsfelter.
BIC Kalender er en jQuery simpel kalender til markering af begivenheder.
bootstrap-DateTimePicker er en enkel dato og tid picker komponent til Bootstrap.
clockface er en timepicker til Bootstrap med muligheder for ting som format og trigger.
Bootstrap Timepicker gør det nemt at vælge en tid til en tekstindtastning med enten musen eller piletasterne.
Farvepalet til Bootstrap er en simpel farvevælger, der tilbyder grundlæggende, Gmail-stil og brugerdefinerede farvepaletter.
Vælg-et-Color er en jQuery farvevælger til Bootstrap, der giver mulighed for fleksibel tekstindtastning, gemte farver og meget mere.
Bootstro.js gør det nemt at tilføje en rundvisning til dit websted.
Sociale knapper til Twitter Bootstrap 2 giver dig sociale knapper, der er vektor, zoombar, nethinden klar og tilpasses.
Flippant.js er et JavaScript- og CSS-bibliotek til at flippe ting, der er let at tilpasse, uden afhængigheder.
Tab drop for Bootstrap Omstiller dine faner til dropdown-menuer, når de ikke alle passer inden for det tildelte rum.
Tocify er en jQuery indholdsfortegnelse plugin, der kan tema med Bootstrap.
Bootpag er et jQuery-plugin til dynamisk pagination, der virker med Bootstrap eller alene.
Typeahead.js er et JavaScript-bibliotek fra Twitter til bygning af skrivehoveder.
X-redigerbare lader dig oprette redigerbare elementer på din side i Bootstrap.
Bootstrap Tree View er en simpel løsning til visning af hierarkiske træstrukturer.
Tokenfield for Bootstrap er et avanceret tokenizing plugin, der fokuserer på tastatur og kopi-indsæt support.
Bootstrap Star Rating er en jQuery stjerneklassificering plugin, der understøtter funktioner som fractional fills og RTL input support.
Yamm Megamenu er endnu en Megamenu til Bootstrap, der bruger standard navbar markup og væskenettet system klasser.
Summernote er en simpel WYSIWYG editor til Bootstrap.
Knockout-Bootstrap er et sæt af knockout bindende håndtere for at få adgang til Bootstrap JavaScript widgets.
Gridmanager.js lader dig oprette og redigere gitterlayouts i rammer som Bootstrap.
Skyder til Bootstrap er en opstartskomponent til Bootstrap til formularer.
WATable er et jQuery-plugin, som lader dig filtrere, formatere, paginere og sortere dine data hurtigt og nemt.
Bootstrap Datagrid er et jQuery-plugin til Bootstrap, der er fuldt tilpasset, mens det forbliver enkelt og kraftfuldt.
PNotify er en udvidelse af JavaScript-meddelelser til Bootstrap.
Bootstrap Tour er en simpel udvidelse til oprettelse af site tours med (eller uden) Bootstrap.
Det Bootstrap Accessibility Plugin , fra PayPal, gør mange Bootstrap-komponenter tilgængelige for brugere af tastatur og skærmlæser.
Bootstrap Video Player er en brugerdefineret HTML5 video player jQuery plugin.
Download brugergrænseflade er et sæt indlæsningsindikatorer, der hovedsagelig er beregnet til at blive brugt med formularer.
Bootstrap temaer, skabeloner og UI kits
Du kan opbygge dine egne temaer og skabeloner fra bunden, hvis du vælger, eller tjek disse gratis og præmieaktiver for at spare tid. Nogle er beregnet til at blive brugt som-er, mens mange andre er beregnet til at være et springpunkt for dine egne brugerdefinerede designs.
Kreative marked har mere end 300 premium Bootstrap temaer til rådighed.
BootstrapMade tilbyder temaer i forskellige stilarter.
BootstrapBay er et marked for premium Bootstrap temaer og skabeloner, hvor du kan købe eller sælge.
GridGum er et premium tema markedsplads med snesevis af temaer på tilbud.
ThemeForest har hundredvis af Bootstrap temaer til salg, fra kun $ 4.
WrapBootstrap tilbyder temaer for alt fra e-handelssites til destinationssider.
Cardeostrap er et stort brugergrænseflade til Bootstrap, der indeholder CSS, komponenter og JavaScript.
Flatstrap er en gratis og open source Bootstrap tema ramme uden alle dikkedarer.
Bootmetro er en webramme, der har udseendet af Windows 8.
Fbootstrapp er et værktøjssæt til oprettelse af Facebook iframe-apps med Bootstrap.
Bootplus er en Google-stylet front-end ramme, der er slank og intuitiv.
Få skabelon er en lille samling HTML5 og CSS3 skabeloner i en række forskellige stilarter.
BootstrapTaste er en samling af gratis og premium Bootstrap temaer.
Bootstrap Zero er den selvudråbte største open source template samling for Bootstrap.
Sort slips er en samling af gratis og premium temaer bygget på forskellige versioner af Bootstrap. De omfatter alt fra dashboard-temaer til nyhedsaggregatorer til porteføljetemaer.
Startup Framework er en simpel men kraftfuld Bootstrap ramme fra DesignModo.
Bootswatch er en samling af gratis, nemme at installere, modulære Bootstrap temaer.
Start Bootstrap er et sæt gratis Bootstrap temaer og skabeloner, herunder blog temaer, portefølje temaer og meget mere.
Joostrap er en samling af Joomla skabeloner bygget med Bootstrap.
Tema Armada er et sæt håndlavede responsive temaer, der er bygget med Bootstrap, startende med kun $ 8.
PrepBootstrap er en kæmpe kilde til gratis temaer, skabeloner og widgets til alt fra admin-grænseflader til kontaktformularer.
RandThemes er et sæt premium Bootstrap temaer, herunder både front- og back-end designs.
Rødder er et WordPress starter tema, der er bygget på Bootstrap.
UI Bootstrap er en samling af Bootstrap komponenter skrevet i AngularJS.
Bootstrap er et rent og moderne Bootstrap WordPress tema.
BootstrapWP er en solid base for brugerdefineret WordPress tema udvikling baseret på Bootstrap.
StrapPress er et WordPress-tema, der er mobil-først, lydhørt og indeholder tonsvis af Bootstrap-elementer.
Shoestrap er et avanceret WordPress tema baseret på Bootstrap.
Udsætte rammer er et basaltema, der tilbyder et fluid layout, HTML5 og CSS3, og lydhøre menuer.
Flere Bootstrap ressourcer
Ud over grundlæggende udvidelser og temaer er der masser af andre Bootstrap-ressourcer derude, der gør arbejdet med Bootstrap nemmere og mere behageligt.
Det Bootstrap Style Guide Boilerplate hjælper dig semi-automatisk generere levende stil guider ved at forbinde et stylesheet og skabe HTML-filer for hvert mønster eller element.
Bootstrap Magic er et redigerings tema editor, som giver dig mulighed for at opbygge temaer hurtigere.
Akademisk er en hurtig blog CMS baseret på Bootstrap.
Wright er en Joomla 2.5 og 3.x ramme bygget på Bootstrap.
AngularStrap er et sæt af AngularJS oprindelige direktiver til Bootstrap 3.
PaintStrap lader dig oprette Bootstrap-temaer ved hjælp af farvepaletter fra Adobe Kuler eller COLOURlovers.
Durandal er en ramme for at opbygge enkeltsideapps, der integreres med Bootstrap.
Lavish gør det nemt at oprette dit eget Bootstrap farveskema fra et billede.
LayoutIt! er en træk og slip interface builder til at oprette din front-end kode.
Pingendo er en visuel desktop app til prototyping responsive designs baseret på Bootstrap.
Bootsnip er et element galleri for Bootstrap ressourcer.
Bootply er en legeplads til bygning, testning og prototyper med Bootstrap-rammen.
Dojo for Bootstrap kombinerer Bootstrap komponenter med brugerdefinerede Dojo moduler til alt fra modale vinduer til karruseller til knapper.
Bootsnipp Form Builder er en formbygger, der bruger træk og slip komponenter.
Bootsnip Button Builder er en brugervenlig knapbygger, der lader dig tilpasse output, knaptekst, farve, størrelse og ikon.
Ratchet er et værktøj til opbygning af mobilapps med HTML, CSS og JavaScript-komponenter.
Bootbundle er et sæt af temaer, uddrag og komponenter til Bootstrap.
BootSwatchr er en visuel tema skaber til at bygge Bootstrap temaer fra bunden.
React Bootstrap er en Bootstrap-build af den populære front-end ramme.
Brix.io er en grænsefladebygger til Bootstrap. Det er skybaseret, nemt at bruge og tilbyder real-time samarbejde.
Nogle gode Bootstrap projekter
Der er masser af steder derude, der allerede kører på Bootstrap. De nedenfor viser, hvor meget mangfoldighed er muligt med Bootstrap.
Filter Surfboard Manufacturing Academy
Konklusion
Bootstrap er kun en af mange tilgængelige rammer for at opbygge lydhøre, mobile første websites med HTML, CSS og JavaScript. Tag dig tid til at studere, hvad Bootstrap kan gøre (og hvad du har det godt med at gøre med det) sammenlignet med andre rammer og vælg den der passer til dit specifikke projekt, har det bedste. Og vær ikke bange for at vælge forskellige rammer for forskellige projekter!