Bootstrap on üks parimatest ja enamkasutatavatest HTML / CSS / JS esiotsa raamistikest. Peaaegu iga veebiarendaja, kes on loonud ühe või kaks veebisaiti, on sellest populaarsest raamistikust kuulnud. See pakub nii palju valmis komponente ja ressursse, Bootstrap võib teie rakenduste arendamist oluliselt kiirendada.
Parimad tavad rakenduste arendamise kiirendamiseks Bootstrapiga Piiksuma
Iga hea arendaja tegeleb iga sekundi säästmisega oma arendusprotsessis. Tõhusus tähendab kiiremat juurutamist - mida varem ja sagedamini juurutame, seda kiiremini saavad meie lõppkasutajad parema toote. Seetõttu võib mõne tunni või päeva kulutamine protsessi ja strateegia kavandamisele kokku hoida mitte ainult mõne minuti, vaid ka mitu tundi.
Olen isiklikult selle raamistikuga töötanud viimased 4 aastat 90% oma projektidest. Selles artiklis tahaksin teiega jagada mõningaid näpunäiteid, mis aitavad teil rakenduste arendamist kiirendada, ilma et mõned Bootstrapi suurepärased võimalused jäävad kasutamata.
Bootstrapi mõistmine
Ehkki tegemist on raamistikuga, mida on väga lihtne alustada, ärge laske end esmapilgul petta selle lihtsusest. Enne projektiga kiirustamist veetke aega raamistikuga mängides ning selle infrastruktuuri ja põnevate komponentide võtmetähtsuse vähendamiseks. See aitab vältida Kümme kõige tavalisemat alglaadimisviga .
Pange tund aega Bootstrapi saidi dokumentide lugemiseks või lisateabe saamiseks ApeeScape'i ajaveebi suurepärasest postitusest, Mis on Bootstrap? Lühike õpetus selle kohta, mida, miks ja kuidas. Ja suurepärane artikkel Bootstrap 3 näpunäiteid, mida te ei pruugi teada saidil scotch.io.
Kui leiate, et dokumentide lugemine on igav ja soovite selle asemel mõnda koodi lugeda, on parim koht alustamiseks Bootstrapi veebisait . Avage veebiinspektor, skannige saidi lähtekood ja kontrollige kõiki koodiplokke ja nende elemente. See on ilmselt üks parimatest ja kiirematest viisidest põhitõdesid mõista.
Süvenege lehestruktuuri ja õppige, kuidas paigutused on üles ehitatud.
... ... muutke oma brauseriakna suurust või kasutage meediumipäringu utiliitide kohta lisateavet Chrome'i Viewport Resizer'i abil.
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... } @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... } ... ning kuidas ja millal neid kasutada, tutvuge veeruklassidega, et saada parimaid reageerivaid disainitulemusi.
Left column Right column Heitke pilk W3Schoolsile, kust leiate a täielik Bootstrapi viide kõigist CSS-klassidest, komponentidest ja JavaScripti pistikprogrammidest - kõik koos näidetega 'Proovi ise':
- Bootstrapi võrgusüsteem selgitas: võrgud Bootstrapis
- CSS-i põhiklassid: tüpograafia , nupud , vormid ja vormielemendid , abiklassid , pilte , tabelid
- Üksikud komponendid: glüfoonid , rippmenüüd , navs .
Kontrollige lähtekoodi ja proovige tutvuda võimalikult paljude klasside nimedega. Siit saate teada nende kasutusjuhtumite kohta - kuidas, miks ja miks. See aitab teil HTML-i kirjutamisel ja kasutajaliidese elementide kujundamisel kiiremini edasi liikuda. Nende komponentide kohta lisateabe saamine aitab teil vältida stiilitabelite punnitamist rohke mittevajaliku duplikaatkoodiga. Hoidke see lahja ja puhas, kasutades olemasolevaid komponente ja taaskasutades selle asemel, et luua liiga palju uusi, mis teevad sama, mis raamistikus juba olemas.
See on eriti oluline mitme arendaja meeskonnas töötades. Veenduge, et te ei kirjutaks lõpuks mitu tonni dubleeritud koodi, luues sama kujunduse jaoks iga kord liiga palju stiile, kui tõlgite uusi kujundusi koodi. Kasutajaliidese arendamise järjepidevuse ja kasutajaliidese stiilijuhenditega hästi dokumenteeritud hoidmine võib produktiivse meeskonnatöö jaoks lisada ka paar sõlme. Lisaks leiate, et rakendusele uute funktsioonide või lehtede lisamisel liigute vähem pettunult edasi. Olen osalenud üle tosina suure projekti ja sellega võrreldes olen näinud mitmeid juhtumeid, kus raamistikku sõna otseses mõttes häkkiti ja iga kord, kui uus CSS-kood lisati, lõhkus see teistel lehtedel kasutajaliidese. See oleks kogu saidi läbimine ja seda tüüpi vigade parandamine üsna kurnav. Vähe sellest, mõelge arendaja lisaaega ja kvaliteedi tagamise abi kulude ja kogu raha peale.
7 kõige tavalisemat aja raiskamise stiiliviga
1. Teksti või divide tsentreerimisel
Kui peate div ja / või sisu tsentreerima, võite kasutada ühte järgmistest klassidest:
Kasutage tekstikeskus
I am centered text
… Või keskplokk
I am centered text mitte .Keskus või
2. Fondi suuruse muutmisel
Kui vajate väiksemaid või suuremaid fonte, võite kasutada ühte järgmistest klassidest:
I'm bigger paragraph text.
I'm smaller paragraph text.
Ärge unustage, kui vajate suuremaid või väiksemaid päiseid .x1 , .h2 , .h3 , .h4 , .h5 , .h6 , .väike . Kasutage seda järgmiselt:
Bigger Title with .h1
Smaller Title with .small
3. Ujukite puhastamisel või elementide sundimisel oma lapsi ise puhastama
Selliseid klasse nagu .clear pole vaja luua, saate alati kasutada Bootstrapi .clearfix selle asemel.
... 4. .rea klassi marginaalide tapmisel
Oma stiilide määratlemise asemel kasutage lihtsalt .clearfix (või veel halvem, kui kasutate siseseid stiile):
... 5. Korrastamata loendite ja muude elementide stiliseerimisel või ühendamisel
Eemaldage vaikeseade loendistiilis ja loendi üksuste vasak varu. See kehtib ainult otseste laste nimekirja üksuste kohta. Kui peate pesastatud loendite puhul rakendama sama, peate ka nendele lisama klassi nime.
- ...
- ...
Samamoodi on meil märkeruutude või raadionuppude jaoks .checkbox-inline ja .raadio-inline .
Ja saate alati lisada .vormisisene vormidele (mis ei pea olema a) vasakule joondatud ja tekstisiseselt blokeeritud juhtnuppude jaoks.
6. Nuppude suuruse määramisel
Kas soovite suuremaid või väiksemaid nuppe? Lisama .btn-lg , .btn-sm või .btn-xs täiendavate suuruste jaoks.
7. Üksuste hõljumisel ja joondamisel paremale või vasakule
Hõljutage elementi klassiga vasakule või paremale. ! oluline on lisatud spetsiifilisuse probleemide vältimiseks. Klase saab kasutada ka miksidena mis tahes CSS-i eelprotsessoriga.
Kasutage .tõmmake paremale , .tõmmake vasakule , .tekst-parem , .tekst-vasakule selle asemel .parem , . vasakule , . vasakpoolne ujuk , .parem-hõljuk .
... ... Teksti hõlpsasti joondamine tekstiosakestega komponentide jaoks.
Left aligned text.
Right aligned text.
Ärge kohandage raamistiku põhifaile otse
Suurte projektide kallal töötades leidsin, et parim viis raamistiku tõhusaks kasutamiseks on sellest üles ehitada ja mitte selle põhifaile otse kohandada. See kontseptsioon sarnaneb teiste platvormide ja raamatukogudega, mida võite projekti jaoks kasutada.
Kuigi kui ehitate väikest saiti ja teil on kujundusmudel, mis ei pruugi vajada palju muudatusi ega värskendusi, võite leida, et raamistiku kohandamine vastavalt teie vajadustele on parem valik. Näiteks võite soovida kõik raamid, mida te ei vaja, otse raamistikufailides või võite minna Bootstrapi saidi kohandamise jaotisse, kus saate hõlpsasti konfigureerida kõik komponendid, muutujad ja jQuery pistikprogrammid oma versioon. Sellisel juhul võite oma saidi arendamist kiirendada ja lühendada stiili või alistustega tegelemise aega.
Kui aga alustate suurel saidil või töötate mitme või enama arendajaga, on kõige parem hoida asjad lahus ja hästi korraldatud. Viige raamistikufailid väljaspool peamist kohandatud CSS-i kausta ja hoidke seda mitte-redigeerimata kaustas, mis pole versioon, ja eemaldage kasutamata CSS, kasutades selleks Grunti või Gulpi pistikprogramme grunt-uncss või gulp-uncss. Teine võimalus selle eraldi hoidmiseks on serveerimine CDN-i kaudu. Kui raamistiku kood on eraldi ja puutumata, saate selle uuemale versioonile üleminekul parema ja kiirema võimaluse. Samuti aitab see minimeerida mitmeid mastaapsuse ja stiiliga seotud probleeme või pidurdada kasutajate kiirete pidevate kasutajaliidese muudatustega täienduste tegemisel.
Kasutage tellingute tööriistu nagu Yeoman või Slush ja paketihaldureid, nagu Bower, Pythoni pip, Node'i NPM või Ruby Gems, kuna nad teevad palju rohkem kui lisavad faile teie rakenduse teele. Hindan väga Boweri jõudu - see suudab kindlasti teha midagi enamat kui lihtsalt ühe või kahe faili alla laadida. Pakettihalduri kasutamine on hea mõte, sest tõenäoliselt kasvab teie projekti keerukus ning kolmandate osapoolte pistikprogrammide hulk ja nende hooldamine muutub hulluks ja aeganõudvaks. Bower aitab teil jälgida iga pistikprogrammi ja selle sõltuvust, sealhulgas kõike, mis on seotud Bootstrapiga.
Kasutage rakenduste arendamiseks saadaolevaid alglaadimisressursse
Bootstrapi populaarsusega kaasnevad hulgaliselt kasulikke ressursse: artiklid, õpetused, kolmanda osapoole pistikprogrammid ja laiendused, mallid, teemaehitajad ja nii edasi. Nii et kas otsite inspiratsiooni või koodilõike, on teil kõik, mida vajate oma edenemise kiirendamiseks.
Võiksite arvata, et nii paljude ressursside olemasolul kasutaksid kõik seda ära ja kasutaksid seda oma projektide kaudu, kuid uskuge või mitte - see pole nii. Mõned arendajad raiskavad oma aega ja aeglast projekti edenemist, jättes vahele mõned suurepärased koodijupid või ressursid. Kuigi te ei tohiks lihtsalt pimesi kopeerida ja kleepida, peate mõistma häid osi ja kohandama need vastavalt oma kodeerimisstiilile ja tehnilistele vajadustele. Oskus leida ja sorteerida häid ressursse ning osata neid tõhusalt kasutada on samuti oskus ning nõuab aastatepikkust kogemust ja teadmisi.
Allpool leiate loendi kasulikke ressursse alustamiseks:
kuidas cvv-koodist mööda minna
Mallid, teemad ja pistikprogrammid
Bootstrapi loojate ametlikud teemad: themes.getbootstrap.com .
Premium Bootstrapi teemade ja mallidega turuplatsid: wrapbootstrap.com , themeforest.net , creativemarket.com/themes/bootstrap .
Tasuta alglaadimisteemad ja -mallid: startbootstrap.com , www.bootstrapzero.com , shapebootstrap.net/free-templates .
“The Big Badass List” - 319 kasuliku Bootstrapi ressursi loend: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/
NurgaJS
BootstrapUI kirjutatud AngularUI meeskonna puhta AngularJS-iga.
ReactJS
React-Bootstrap on korduvkasutatavate esiotsa komponentide kogu. Twitter Bootstrapi ilme ja tundlikkus, kuid palju puhtama koodiga saate Facebooki React.js raamistiku kaudu.
Django
Bootstrap 3 integreerimine Djangoga: https://github.com/dyve/django-bootstrap3
Jekyll
Jekyll-Bootstrap on Jekyllil baseeruvate blogide täielik ajaveeb.
WordPress
WordPressi starteri teema Sage kaasaegse esiotsa arenduse töövooga. Põhineb HTML5 Boilerplate, gulp, Bower ja Bootstrap.
Materjali kujundus
Bootstrapi materjali disain on Bootstrap 3 teema, mis võimaldab teil kasutada uut Google'i materjalidisaini oma lemmikliideses.
Järeldus
Bootstrap on üks parimaid saadaolevaid raamistikke, mis pakub teile palju suurepäraseid tööriistu ja ressursse, et teie rakenduste arendamise protsessi kiirendada ja kiirendada.
See säästab palju tunde / päevi tööd, kui kavandate ja kodeerite vinge kasutajaliidese. Iga komponent ja pistikprogramm on hõlpsama kasutamise ja kohandamise jaoks põhjalikult dokumenteeritud reaalsete näidete ja koodiplokkidega. Paljud soovitavad seda väga arendajad ning väga populaarne nii prototüüpide loomiseks kui ka tootmiseks. See on väga hea vahend mobiilsõbralike tundlike veebisaitide loomiseks. Bootstrap annab teile suurepärase lähtepunkti mitut tüüpi projektide jaoks, võimaluse see üle anda a-le disainer ja öelge 'tee see välimus uhke!' ilma et neil oleks vaja koodi läbi häkkida. Mis kõige tähtsam, see võimaldab teil kõigepealt välja töötada struktuuri ja adresseerida fonte, värve ja väljamõeldud stiile hiljem. Võtke aega, et uurida, mida see suudab, ja mõelge tarkalt, kuidas seda parimal viisil kasutada, et saaksite kiiremini sinna, kuhu soovite.
