The Ultimate Guide to Bootstrap
Stígvél er öflugur, farsíma-fyrsti, móttækilegur, framan-endir ramma sem er byggð með CSS, HTML og JavaScript. Það býður upp á tonn af kostum frá byrjun frá grunni, og jafnvel yfir mörgum öðrum rammaumhverfum.
Bootstrap var upphaflega þróað af hönnuður og verktaki frá Twitter, það er orðinn einn vinsælasta framhliðarsamstæðan í heiminum. Það var fyrst þekktur sem Twitter Teikning, áður en hún varð opin, og starfaði sem innri stíll fylgja Twitter í meira en ár áður en hún var gefin út opinberlega.
Ef þú ert ókunnugur með stígvél, þá munu auðlindirnar og upplýsingarnar hérna fá þig í hraðbraut.
Hvers vegna stígvél?
Stígvél hefur mikið af kostum yfir að byrja frá grunni á vefþekkingunni þinni. Eitt af stærstu ástæðum er mikill fjöldi auðlinda í boði fyrir Bootstrap, sérstaklega þegar borið er saman við margar aðrar rammar og boilerplates (við munum komast að þeim seinna).
En umfram þær auðlindir sem eru tiltækar, eru margar aðrar ástæður til að nota Bootstrap:
- Það er auðvelt að nota: að byrja með Bootstrap er frekar fljótleg og auðveld aðferð. Og það er sveigjanlegt: þú getur notað það með minna eða CSS, og jafnvel Sass (ef þú hleður niður Sass útgáfunni).
- Ristið: Stígvél notar 12-dálka svöruðu rist. Það styður jafnvel innbyggð og móti hlutum. Ristið er hægt að halda móttækilegum, eða þú getur auðveldlega breytt því í föst skipulag.
- Hraðari þróun: vegna þess að Bootstrap hefur svo margar tilbúnar íhlutir og auðlindir í boði, getur það dregið verulega úr þróunarferlinu.
- Undirstöðuatriði: Bootstrap kemur með grunnstíll fyrir tonn af HTML þætti sem þú ert að fara að nota engu að síður. Það felur í sér stíl fyrir leturfræði, eyðublöð, myndir og margt fleira.
- Pre-stíll hluti: Bootstrap einnig koma með pre-stíl hluti fyrir dropdowns, nav bars, tilkynningar, og margir aðrir.
- Búnt JavaScript hluti: Bootstrap kemur með fullt af JavaScript hlutum til að bæta við virkni. Það gerir það auðvelt að stjórna hlutum eins og modal gluggum, tólum, áminningum og fleira. Þú getur sleppt skrifunarskriftir öllum saman.
- Framúrskarandi skjöl: Stígvél hefur óvenjuleg gögn í boði, sem er gagnlegt fyrir bæði byrjendur og fleiri háþróaða notendur.
- Einföld samþætting: Stígvél er hægt að samþætta með ýmsum öðrum ramma og vettvangi, bæði á nýjum stöðum og í núverandi. Þú getur jafnvel notað aðeins tiltekna þætti Bootstrap við hliðina á núverandi CSS.
Byrjaðu með Bootstrap
Það eru tvær helstu leiðir sem þú getur sækja Boostrap : the precompiled útgáfa eða kóða útgáfa. Hver sá sem þú velur fer eftir því hvernig þú vilt byrja.
The precompiled einn er tilbúinn til að falla í notkun í nánast hvaða verkefni sem er og samanstendur af CSS og JS, ásamt samanlögðum og hreinsaðar útgáfur af hverjum. Giffíkon leturgerðir eru innifalin, ásamt valfrjálst Bootstrap þema.
Uppruni kóða útgáfa inniheldur fyrirfram uppfyllt CSS og JavaScript, auk letur eignir. Það felur einnig í sér minna, JavaScript og skjöl. Í grundvallaratriðum er það fullkomnari útgáfa, þó að námsferillinn muni vera svolítið hærri en fyrri útgáfan.
Það er einnig útgáfa af Bootstrap sem hefur verið flutt frá Less to Sass, sem er sérstaklega gagnlegt ef þú vilt láta það í Rails, Compass eða Sass-only verkefni.
Þegar þú hefur ákveðið hvaða útgáfu þú vilt setja upp þarftu að setja upp Grunt, sem er byggingakerfið Bootstrap notar. Þú þarft að hlaða niður og setja upp node.js fyrst, og þá Grunt. Þaðan hefur þú margs konar Grunt skipanir innan seilingar.
Þá getur þú byrjað með grundvallarskotalistanum HTML-sniðmát, eða einn þeirra dæmi sniðmát . Dæmi sniðmát eru töflureiknir, jumbotron-undirstaða skipulag, ýmsar navbars og aðrar sérsniðnar þættir (jafnvel blogg og innskráningarsíða).
Hvað ef ég vil ekki móttækilegur staður?
Þó Bootstrap er móttækilegur og hreyfanlegur-fyrst rétt út úr reitnum, þarf það ekki að vera svona ef þú vilt ekki móttækilegur staður. Allt sem þú þarft að gera til að slökkva á því er sleppt viewport meta taginu í CSS, hunsa breiddina á ílátunum fyrir hverja ristflokka, fjarlægja allar hrynjandi og vaxandi hegðun á navbars þínum og gera nokkrar breytingar á töflureikningum ef þú ' nota þau aftur. Þú getur lesið sérstakar leiðbeiningar í Hafist handa skjölum .
Bootstrap tappi, eftirnafn og hluti
Stígvél kemur með fullt af frábærum eiginleikum innbyggður. En það eru líka margar leiðir til að auka virkni sína til að mæta þörfum þínum.
Eldsneyti UX er sett af viðbótar JavaScript stjórna fyrir vefsíður þínar. Þú getur sent aðeins stjórnina sem þú vilt nota úr meira en tugum sem eru í boði.
Jasny Bootstrap er sett af íhlutum, þ.mt lóðrétt hólf hluti og viðvörun.
Stígvél-Modal bætir stafrænum, móttækilegum AJAX stýrikerfum á heimasíðuna þína. Það styður breiddarmyndir og langar leiðir, meðal annars snið.
Bootbox.js er lítið bókasafn sem gerir þér kleift að búa til forritaðan glugga auðveldlega.
Stígvél myndasafns er framlengingu á Blueimp Gallery, sem er snertavirkt, móttækilegt myndasafn með því að nota Modal Dial Bootstrap.
Stígvél er einfalt lightbox tappi byggt á stígvélastýringu tappi. Það felur í sér valkosti fyrir bakgrunninn, hvernig ljósastillinn ætti að vera lokaður og fleira.
Stígvélarmót hjálparmenn er safn af jQuery tappi til að byggja upp betri form. Þú getur notað þau sjálfstætt, eða saman til að henta þörfum þínum.
Tilkynningar er upphleypt viðbót sem gerir þér kleift að bæta við sérsniðnum tilkynningum á vefsvæðið þitt eða app. Það eru valkostir fyrir stöðu, gerð, umbreytingar og fleira.
Stígvél er jQuery tappi sem umbreytir reglulega Bootstrap tilkynningar í Growl-eins og tilkynningar. Það eru tilkynningar um upplýsingar, villur og velgengni stíl, og það styður margar samfelldar tilkynningar.
Stígvél-veldu bætir við sérsniðna val fyrir Bootstrap með dropahnappi hnappsins.
Boostrap Maxlength veitir sjónræna viðmiðunarvísir fyrir hámarksstyrk á sviði inntaks.
Boostrap Markdown gerir það auðvelt að bæta við Markdown stuðningi við eyðublöðin þín, óaðfinnanlega að breyta þeim í Markdown ritstjóri.
Stýripinna 3 gerir það auðvelt að umbreyta gátreitunum og útvarpshnöppunum í rofaliða.
jQuery File Upload bætir upp jQuery skráarupphlaða búnaður með stuðningi við draga og sleppa, margfeldi skrárval og fleira.
jqBootstrapValidation er jQuery löggildingarforrit fyrir stígvélarmyndir sem auðvelt er að nota og gerir það einfalt að veita skýrar leiðbeiningar þegar staðfestingarvillur eiga sér stað.
Bootstrap-wysihtml5 er einföld og falleg HTML5 WYSIWYG ritstjóri sem kemur sem JavaScript tappi.
Stígvél Multiselect er jQuery tappi fyrir HÍ sem notar valið inntak með mörgum eiginleikum og sýnir þá sem fellilistann með kassa.
BIC Dagatal er jQuery einfalt dagatal til að merkja viðburði.
bootstrap-datetimepicker er einföld dagsetning og tímaspilari fyrir Bootstrap.
Clockface er timepicker fyrir Bootstrap með valkosti fyrir hluti eins og snið og kveikja.
Stígvél Timepicker gerir það auðvelt að velja tíma fyrir innslátt með annaðhvort músar- eða örvatakkana.
Liturpjald fyrir stígvél er einföld litaspilari sem býður upp á grunn, Gmail-stíl og sérsniðnar litaspjöld.
Pick-a-Color er jQuery litaspjald fyrir Bootstrap sem gerir þér kleift að búa til sveigjanlegan textafærslu, vistaða liti og fleira.
Bootstro.js gerir það auðvelt að bæta við leiðsögn á vefsvæðið þitt.
Social Buttons fyrir Twitter Bootstrap 2 gefur þér félagslega hnappa sem eru vektor, zoomable, retina-tilbúinn og sérhannaðar.
Flippant.js er JavaScript og CSS bókasafn til að snúa hlutum, það er auðvelt að aðlaga, án ósjálfstæði.
Tab dropa fyrir Bootstrap endurstillir flipana þína í fellilistann þegar þeir munu ekki passa allt í úthlutað rými.
Tocify er jQuery innihaldsefni tappi sem hægt er að þema með Bootstrap.
Bootpag er jQuery tappi fyrir dynamic pagination sem vinnur með Bootstrap eða eingöngu.
Typeahead.js er JavaScript bókasafn frá Twitter til að byggja upp typaheads.
X-editable leyfir þér að búa til breytanlegar þætti á síðunni þinni í Bootstrap.
Stígvél er einföld lausn til að birta hierarchic tré mannvirki.
Tokenfield fyrir Bootstrap er háþróaður tokenizing tappi sem leggur áherslu á hljómborð og afrita-líma stuðning.
Stígvél Stjörnugjöf er jQuery stjörnuspjaldstengill sem styður aðgerðir eins og brotthvarf og RTL inntaksstuðningur.
Yamm Megamenu er ennþá Megamenu fyrir stígvél sem notar staðlaða Navbar markup og vökva rist kerfi flokkum.
Summernote er einföld WYSIWYG ritstjóri fyrir Bootstrap.
Knockout-Bootstrap er sett af knockout bindandi handlers til að fá aðgang að javascript JavaScript búnaði.
Gridmanager.js leyfir þér að búa til og breyta ristarútlitum í ramma eins og Bootstrap.
Rennistikur fyrir stígvél er rennibrautarhlutur fyrir ræsibraut.
WATable er jQuery tappi sem leyfir þér að sía, snið, paginate og flokka gögnin þín fljótt og auðveldlega.
Stígvél er jQuery tappi fyrir Bootstrap sem er fullkomlega sérhannaðar en eftir er einfalt og öflugt.
PNotify er viðbót við JavaScript tilkynningar fyrir Bootstrap.
Bootstrap Tour er einfalt eftirnafn til að búa til ferðir með (eða án) stígvél.
The Stýripinna , frá PayPal, gerir mikið af Bootstrap hlutum aðgengilegt fyrir lyklaborð og skjálesara notendur.
Stígvél er sérsniðin HTML5 vídeó leikmaður jQuery tappi.
Hlaða notanda er sett af hleðslumerki aðallega ætlað til notkunar með formum.
Stígvél þemu, sniðmát og UI pökkum
Þú getur byggt upp eigin þemu og sniðmát frá grunni ef þú velur, eða kíkið á þessar ókeypis og hágæða eignir til að spara tíma. Sumir eru ætlaðir til notkunar sem-er, en nóg af öðrum er ætlað að vera stökk af stað fyrir eigin sérsniðna hönnun.
Skapandi markaður hefur meira en 300 Premium Bootstrap þemu í boði.
BootstrapMade býður upp á þemu í ýmsum stílum.
BootstrapBay er markaður fyrir hágæða þemuþemu og sniðmát þar sem þú getur keypt eða selt.
GridGum er aukagjald þema markaður með heilmikið af þemum í boði.
ÞemaForest hefur hundruð Bootstrap þemu til sölu, frá $ 4.
WrapBootstrap býður upp á þemu fyrir allt frá ecommerce staður til áfangasíður.
Cardeostrap er a gríðarstór UI Kit fyrir Bootstrap sem inniheldur CSS, hluti og JavaScript.
Flatstrap er ókeypis og opinn uppsprettur Bootstrap þema ramma án þess að allir frills.
Bootmetro er vefur ramma sem hefur útlit og feel af Windows 8.
Fbootstrapp er tól fyrir að búa til Facebook Iframe forrit með Bootstrap.
Bootplus er Google stíll framhlið ramma sem er sléttur og leiðandi.
Fáðu sniðmát er lítið safn HTML5 og CSS3 sniðmát í ýmsum stílum.
BootstrapTaste er safn af ókeypis og Premium Bootstrap þemum.
Stígvél er sjálfstætt tilnefnt stærsta opinn uppspretta sniðmát safn fyrir Bootstrap.
Svart bindi er safn af ókeypis og aukagjald þemum byggð á ýmsum útgáfum af Bootstrap. Þau fela í sér allt frá mælaborðþemum til fréttamiðla í þemuþema.
Uppsetning ramma er einföld en öflugur Stígvél ramma frá DesignModo.
Stígvélin er safn af ókeypis, auðvelt að setja upp, mát Bootstrap þemu.
Byrjaðu stígvél er a setja af ókeypis Bootstrap þemu og sniðmát, þar á meðal blogg þemu, eigu þemu, og fleira.
Joostrap er safn af Joomla sniðmát byggð með Bootstrap.
Þema Armada er a setja af handlagnum móttækilegum þemum sem eru byggð með Bootstrap, byrjun á aðeins $ 8.
PrepBootstrap er a gríðarstór uppspretta af ókeypis þemu, sniðmát og búnaður fyrir allt frá admin tengi til að hafa samband við eyðublöð.
RandThemes er sett af framúrskarandi Bootstrap þemum, þ.mt bæði framhlið og bakhliðarsnið.
Rætur er WordPress byrjun þema sem er byggt á Bootstrap.
UI stígvél er safn af Bootstrap hlutum skrifað í AngularJS.
The Bootstrap er hreint og nútíma Bootstrap WordPress þema.
BootstrapWP er traustur grunnur fyrir sérsniðin WordPress þema þróun byggt á Bootstrap.
StrapPress er WordPress þema sem er hreyfanlegur-fyrst, móttækilegur, og inniheldur tonn af Bootstrap þætti.
Shoestrap er háþróaður WordPress þema byggt á Bootstrap.
Útskýra ramma er grunnþema sem býður upp á vökvaútlit, HTML5 og CSS3 og móttækilegir valmyndir.
Fleiri Bootstrap auðlindir
Beyond grunn viðbótum og þemum, það eru fullt af öðrum Bootstrap úrræði þarna úti sem gera að vinna með Bootstrap auðveldara og skemmtilegra.
The Bootstrap Style Guide Boilerplate hjálpar þér að búa til sjálfstætt lífstíðir með því að tengja stílsíðu og búa til HTML skrár fyrir hvert mynstur eða frumefni.
Stígvél er þema ritstjóri sem gerir þér kleift að byggja þemu hraðar.
Academic er hratt blogg CMS byggt á Bootstrap.
Wright er Joomla 2.5 og 3.x ramma byggð á Bootstrap.
AngularStrap er sett af AngularJS innfæddur tilskipun fyrir Bootstrap 3.
PaintStrap leyfir þér að búa til þemuþemu með því að nota litaspjöld frá Adobe Kuler eða COLOURlovers.
Durandal er ramma til að byggja upp einföldu síðuforrit sem samþættir með Bootstrap.
Hinn fullkomni gerir það auðvelt að búa til eigin Bootstrap litasamsetningu úr mynd.
LayoutIt! er dregur og sleppur tengibúnaður til að búa til framhliðarkóðann þinn.
Pingendo er sjónrænt skrifborðsforrit fyrir frumgerðarsvörunarsvörun sem byggir á Bootstrap.
Bootsnip er frumefni gallerí fyrir Bootstrap auðlindir.
Bootply er leikvöllur fyrir byggingu, prófun og frumgerð með uppbyggingu ramma.
Dojo fyrir stígvél sameinar Bootstrap hluti með sérsniðnum Dojo mátum fyrir allt frá modal gluggum til karrusels í hnappa.
Bootsnipp Form Builder er form byggir sem notar draga og sleppa hluti.
Bootsnip Button Builder er auðvelt að nota hnappur byggir sem gerir þér kleift að sérsníða framleiðsla, hnappinn texta, lit, stærð og tákn.
Ratchet er tæki til að byggja upp farsímaforrit með HTML, CSS og JavaScript hluti.
Bootbundle er sett af þemum, sneiðum og íhlutum fyrir stígvél.
BootSwatchr er sjónrænt þemahöfundur til að byggja upp þemuþemu frá grunni.
React Bootstrap er Bootstrap-byggja af vinsælum framhlið ramma.
Brix.io er tengi byggir fyrir Bootstrap. Það er skýjað, auðvelt í notkun og býður upp á rauntíma samvinnu.
Sumir mikill Bootstrap verkefni
Það eru tonn af vefsvæðum þarna úti þegar keyrt er á Bootstrap. Þeir sem hér að neðan sýna hversu mikið fjölbreytni er mögulegt með Bootstrap.
Sía Surfboard Manufacturing Academy
Hamingjusamur gangsetningskóli
Hollenska National Opera & Ballet
Niðurstaða
Stígvél er aðeins einn af mörgum tiltækum ramma til að byggja upp móttækilegar, fyrstu farsíma vefsíður með HTML, CSS og JavaScript. Taktu þér tíma til að læra hvað Bootstrap getur gert (og það sem þér finnst gaman að gera með það) samanborið við aðrar ramma og veldu þá sem passa við þitt tiltekna verkefni þarf best. Og ekki vera hræddur við að velja mismunandi ramma fyrir mismunandi verkefni!