Turvateabe portaal. WordPressi ajaveebi alglaadimise kasutamine Alglaadimismall paigutuse jaoks Bootstrap 3-s

Tervitused kõigile minu ajaveebi külalistele ja veebiarenduse asjatundjatele. Tänane väljaanne on pühendatud sellise populaarse raamistiku nagu Bootstrap tutvustamisele. Pärast käesoleva artikli lugemist saate teada, miks see loodi, kuidas bootstrapiga töötada ja kuidas seda installida, milliseid tööriistu see raamistik pakub ja kus seda kõige sagedamini kasutatakse. Noh, nüüd jätkake ja sorteerige uus materjal välja!

Mis on Bootstrap?

Bootstrap on raamistik, mis on loodud spetsiaalselt esiotsa paigutuse jaoks ( väline liides) veebiteenused ja rakendused.

See sisaldab standardseid tüpograafiamalle, nuppe, vorme, erinevaid menüüsid, sealhulgas rippmenüüd, tabeleid, modaalaknaid, navigeerimist, liugureid (tavaline ja karussell-stiilis) ja muid tööriistu, aga ka kõikvõimalikke pistikprogramme.

Kõige populaarsemad nende seas on Tooltip, mis vastutab hüpikakende eest, Dropdown, mis vastutab ripploendite eest, Carousel, mis korraldab keritavat liugurit ja veel mõned.

KOOS täielik nimekiri olemasolevad pistikprogrammid, mallid ja komponendid leiate ametlikult veebisaidilt http://getbootstrap.com/getting-started/. Samuti saate selle abiga alates teisest versioonist luua tundliku paigutuse.

Paar sõna ajaloost

Arvan, et kirjeldatava instrumendi loomise ajaloost on vaja veidi teada saada, et aru saada, mis on mis.

Bootstrapi lõid Mark Otto ja Jacob Thornton spetsiaalselt selle jaoks sotsiaalvõrgustik Twitter. See toimis sisemise raamatukoguna. Seetõttu näete mõnikord nime Twitter Bootstrap.

Raamatukogu kandis algselt nime Twitter Blueprint. Selleks ajaks, kui toode laiemale avalikkusele avaldati (ja see juhtus 19. augustil 2011), muudeti selle nimi aga Bootstrapiks. Tänapäeval on raamistikust neli versiooni.

Kõige märgatavam ja nõutum Sel hetkel on Bootstrap 3. See oli esimene, kes seda kontseptsiooni kasutas mobiilneesiteks. Lisaks on tehtud palju muudatusi ja täiustusi.

Millised on Bootstrapi kasutamise eelised?

Tegelikult, nagu kõigi tehnoloogiate puhul, on Bootstrapi kasutamisel nii positiivseid kui ka negatiivseid külgi. Seetõttu ärge kunagi kasutage seda raamistikku mõtlematult. Ühes artiklis kirjeldasin üksikasjalikult Bootstrapiga töötamise eeliseid ja puudusi.

Ja nüüd tahan teie tähelepanu pöörata mugavusele valmis lahendusi mida Bootstrap pakub ja nende positiivseid külgi.

Nii et kirjeldatud raamistiku ühendamisel antakse teile võimalus kasutada selliseid valmiselemente nagu:

  • Igasugused komponendid, mille hulka kuuluvad: navigeerimisribad, ripploendid, nupud, edenemise indikaatorid, lehekülgede jagamine ja muud;
  • JavaScripti pistikprogrammid, sealhulgas üleminekud, modaalsed ja rippmenüü elemendid, hüpikakende plokid ja vihjed, ahendamine, vahelehtede juurutamine, liugurid ja muud;
  • Ruudustiku mallid, sh ujuvad;
  • Paigutused;
  • Ja loomulikult tundliku disaini rakendamine.

Erilist tähelepanu tasub pöörata võredele või, nagu neid ka nimetatakse, paigutuspaigutustele. Nüüd tuleb väike spoiler, andke andeks, sest otsustasin pühendada sellele teemale eraldi artikli, kuid midagi pole teha!

Tänu sellele tööriistale kasutatakse Bootstrapi väga sageli veebisaitide kirjutamiseks. Sest see on tõesti pädev ja võimas mehhanism ploki paigutus. Raamistiku loojad pakkusid maksimaalne summa veerud - 12. See on "raami" paigaldamiseks enam kui piisav.

Lisaks ei lihtsusta mõnes olukorras Bootstrapi kasutamine mitte ainult koodi, vaid säästab ka oluliselt teie aega. Samal ajal ei pea te muretsema, et mõned elemendid probleemsetes brauserites ei tööta (jah, ma vihjan IE-le), sest Bootstrap ühildub täielikult .

Kuidas raamistikku ühendada?

Selle instrumendi ühendamiseks on mitu võimalust. Alustan vist alglaadimisfaili installimisega.

Seega saate lingi kaudu ametlikul veebisaidil alla laadida Bootstrapi praegused versioonid. Kõik on väga lihtne. Valige lihtsalt teile sobiv installipakett ja klõpsake nuppu "Laadi alla". Samalt saidilt saate alla laadida Bootstrap 4 alfaversiooni.

Teine võimalus on loomulikult CDN-i kasutamine. Nii et ühendada uusimad versioonid raamistikus, peate sisestama selle lingi:

Kui peate ühendama JavaScripti väiksema versiooni, kopeerige see rida:

Noh, teemad on omavahel seotud järgmiselt:

Russified veebisaidil saate vaadata koolitusvideot selle raamistiku ühendamise kohta (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/).

See on kõik, sõbrad, on aeg hüvasti jätta. Ärge unustage jagada kolleegidega huvitavaid postitusi ja tellida ka minu ajaveebi värskendusi. Headaega!

Bootstrapil (praegu v3.3.1) on alustamiseks mitu võimalust, millest igaüks on huvitav sõltuvalt teie kogemuste tasemest ja konkreetsetest kasutusvajadustest. Vaadake, mis teile kõige paremini sobib.

Bootstrap CDN-i installimine Boweri abil

Boweri abil saate installida ja hallata ka Bootstrap's Lessi, CSS-i, JavaScripti ja fonte:

$ bower install bootstrap Mis on kaasas

Bootstrap on saadaval kahes vormis, millest leiate loogiliselt rühmitatud kataloogid ja failid, mis on esitatud kokkupandud ja minimeeritud versioonis.

Nõuab jQueryt

Pange tähele, et kõik JavaScripti pistikprogrammid nõuavad jQuery kaasamist, nagu on näidatud . Vaadake meie faili bower.json, et näha, milliseid jQuery versioone toetatakse.

Bootstrap 3 koodikogu

Pärast allalaadimist pakkige tihendatud kataloogid lahti. Peaksite nägema midagi sarnast:

Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │─├─css. ─ bootstrap-theme.css .map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.sregul. g/l ot ├ ── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff

See on Bootstrapi kõige elementaarsem vorm: kokkupandud failid kiireks sisestamiseks mis tahes veebiprojekti. Pakume CSS-i ja JS-i kollektsiooni (bootstrap.*), aga ka minimeeritud versiooni (bootstrap.min.*). CSS (bootstrap.*.map) on saadaval kasutamiseks teatud brauserite" arendaja tööriistadega. Kuidas lisavalikud Bootstrapi teemad – pakub ka Glyphiconsiga fonte.

Bootstrapi lähtekood

Bootstrapi lähtekood sisaldab eelkompileeritud CSS-i, JavaScripti ja fondivõimalusi koos allika Less, JavaScripti ja dokumentatsiooniga. Täpsemalt sisaldab see järgmist ja palju muud:

Bootstrap/ ├── vähem/ ├── js/ ├── fondid/ ├── dist/ │ ├── css/ │ ├── js/ doc/───── └── näited/

vähem/ , js/ ja teie lähte-CSS-i, JS-i ja ikoonide fondid/ (vastavalt). Kaust dist/ sisaldab kõiki ülaltoodud jaotises loetletud eelkompileeritud allalaadimisi. Dokumendid/kaust sisaldab allikas meie dokumentatsiooni ja Bootstrapi näidete/kasutamise jaoks. Lisaks pakuvad kõik muud kaasatud failid tuge pakettide, litsentsimise ja arendusteabe jaoks.

CSS-i ja JavaScripti põhidokumentide koostamine (dokumentide varade koostamine ja testimine)

Ehitab ja testib CSS-i, JavaScripti ja muid varasid, mida kasutatakse dokumentatsiooni lokaalsel käitamisel jekylli kaudu.

nurin (Ehitage absoluutselt kõike ja käivitage testid)

Kompileerib ja minifailib CSS-i ja JavaScripti, loob dokumentatsioonisaidi, käitab dokumentide vastu HTML5-validaatorit, taastab kohandaja varasid ja palju muud. Nõuab Jekylli. Tavaliselt on see vajalik ainult siis, kui olete Bootstrapi laaduri enda sisse häkkinud.

Veaotsing

Kui teil on probleeme sõltuvuste installimisel või Grunti käskude käivitamisel, eemaldage esmalt npm-i loodud kataloog /node_modules/. Seejärel korrake npm installimist.

Põhimall

Alusta sellest põhiline HTML malli või muuda . Loodame, et kohandate meie malle ja näiteid oma vajadustele vastavaks.

Allpool on HTML-kood, mis kasutab Bootstrapi dokumendi minimeeritud versiooni.

Bootstrap 101 mall Tere maailm! Mallide näited

Ülaltoodud mallis loob Bootstrap palju komponente. Soovitame teil Bootstrapi kohandada ja kohandada vastavalt teie individuaalse projekti vajadustele.

Märgistusraamistiku kasutamine

Mitmed näited märgistuse paigutustest, millel on kõik neli pesastamistasandit ja palju muud.

Reageeriva vaatamise blokeerimise sammud
  • Ärge looge vaateava nimega, nagu on märgitud CSS-i dokumentides
  • Alistada laius , .konteiner konkreetse laiusega iga paigutustaseme jaoks, näiteks: laius: 970px !tähtis; Veenduge, et see kood tuleb pärast Bootstrapi peamise CSS-koodi lisamist. Soovi korral saate vältida!olulist meediapäringutega või spetsiaalse valijaga.
  • Kui kasutate navigeerimismenüüd, eemaldage kõik menüüd, mis võivad ahendada/laieneda.
  • Märgistuspaigutuse jaoks kasutage keskmiste/suurte klasside kõrval või asemel klasse .col-xs-*. Ärge muretsege, xs (eriti väike) märgistusskaala sobib kõikidele ekraanisuurustele.

    • IE8 jaoks on teil endiselt vaja faili Respond.js (kuna meie meediapäringud on endiselt olemas ja neid tuleb töödelda). See blokeerib Bootstrapi saidi mobiilsuse atribuudi.

    Alglaadimismall, mille reageerimisvõime on lukus

    Oleme kasutanud neid samme näitena. Konkreetsete erinevuste nägemiseks vaadake üle lähtekood.

    Üleminek versioonilt v2.x versioonile v3.x

    Vaadake üleminekut vana versioon Bootstrap versioonis v3.x? Vaadake meie üleminekujuhendit.

    Brauseri ja seadme tugi

    Bootstrap on mõeldud parem töö uutes brauserites, st vanemad brauserid ei pruugi alati stiile õigesti kuvada, kuigi nad on teatud komponentide renderdamisel täielikult funktsionaalsed

    Brauseri tugi

    Eelkõige toetame järgmiste brauserite ja platvormide uusimaid versioone. Windowsis me toetame Internet Explorer 8-11. Rohkem konkreetset teavet tugi on esitatud allpool.

    Chrome Firefox Internet Explorer Opera SafariAndroid iOS Mac OS X Windows
    Toetatud Toetatud Ei kehti Ei toetata Ei kehti
    Toetatud Ei kehti Ei toetata Toetatud
    Toetatud Toetatud Toetatud Toetatud
    Toetatud Toetatud Toetatud Toetatud Ei toetata

    Bootstrap peaks Chromiumis ja Chrome'is Linuxile, Firefoxis Linuxile ja Internet Explorer 7-s suhteliselt hästi välja nägema ja käituma, kuigi neid ametlikult ei toetata.

    Internet Explorer 8 ja 9

    Toetatud on ka Internet Explorer 8 ja 9, kuid pidage meeles, et mõned CSS3 atribuudid ja HTML5 elemendid ei ole nendes brauserites täielikult toetatud. Lisaks nõuab Internet Explorer 8 meediumipäringute toe lubamiseks faili Respond.js.

    Atribuut Internet Explorer 8 Internet Explorer 9piiriraadius kast-vari teisendada üleminek kohatäide
    Ei toetata Toetatud
    Ei toetata Toetatud
    Ei toetata Toetatud prefiksiga -ms
    Ei toetata
    Ei toetata

    Ükshaaval lisame selle demonstratsioonina Bootstrapi dokumentatsiooni ja näidetesse.

    Protsentuaalne ümardamine Safaris

    Safari versioonidele 7.1 OS X ja Safari iOS 8.0 jaoks varasemate versioonide renderdusmootoril oli probleeme meie ruudustikuklassides .col-*-1 kasutatavate kümnendkohtade arvuga. Nii et kui teil oleks 12 individuaalset ruudustiku veergu, märkaksite, et need on teiste veergude ridadega võrreldes lühikesed. Lisaks Safari/iOS-i täiendamisele on teil mõned lahendused:

    • Tugeva paremale joonduse saamiseks lisage .pull-right paigutuse viimasesse veergu.
    • Safari jaoks täiusliku ümardamise saavutamiseks muutke protsente käsitsi (keerulisem kui esimene valik)
    Moodulid, navigeerimisribad ja virtuaalsed klaviatuurid Ületäitumine ja kerimine

    Ületäite tugi: elemendile peidetud on iOS-is ja Androidis üsna piiratud. Kui kerite nende seadmete brauseris ülemisest või alumisest modaalist kaugemale, kuvatakse sisu .

    Virtuaalne klaviatuur

    Pange tähele – kui kasutate modaalses aknas või navigatsioonis sisestusvormi, on iOS-is kuvaviga, mille korral fikseeritud elementide asukohta ei värskendata virtuaalne klaviatuur. Selle jaoks on mõned lahendused, sealhulgas elementide teisendamine positsiooniks: absoluutne või taimeri kutsumine, kui elemendil on fookus, ja proovimine seda käsitsi parandada. Bootstrap ei käsitle selliseid vigu, seega peate selle ise välja mõtlema.

    Navibari rippmenüüd

    Elementi .dropdown-backdrop ei kasutata iOS-i navigeerimisel z-indeksi raskuste tõttu. Seega peate rippmenüüde sulgemiseks lihtsalt klõpsama rippmenüü elemendil (või mis tahes muul elemendil, mis iOS-is klikisündmuse genereerib).

    Brauseri skaleerimine

    Lehe suurust muutes see paratamatult selgub vale kuva mõned elemendid: see kehtib nii Bootstrapi kui ka ülejäänud veebidokumendi kohta. Olenevalt konkreetsest juhtumist saame selle parandada (vajadusel saab vastava päringu avada, aga enne tuleb otsida sarnased päringud). Siiski ignoreerime neid üldiselt, kuna neil pole sageli muud otsest lahendust kui häkkivate lahenduste loomine.

    Tihend

    Isegi mõnes kaasaegses brauseris võib printimine olla omapärane.

    Täpsemalt, alates Chrome'i versioonist 32 ja veeriseadistustest olenemata kasutab Chrome veebilehe printimise ajal meediumipäringute lahendamisel füüsilisest paberiformaadist oluliselt väiksemat vaateava laiust. Selle tulemusena võib Bootstrapi eriti väike ruudustik printimisel ootamatult aktiveeruda. Üksikasju vaadake jaotisest #12078. Soovitatavad lahendused:

    • Rakendage eriti väikest märgistust ja veenduge, et teie leht näeb hea välja.
    • @screen-* väärtuse määramine Vähem muutujaid, et teie printeripaberit peetaks rohkem kui eriti väikeseks.
    • Lisage kohandatud päringuid, et muuta ainult prindikandja katkestuspunkti märgistuse suurust.

    Lisaks võivad Safari v8.0 seisuga fikseeritud laiusega konteinerid põhjustada Safari printimisel ebatavaliselt väikese fondi suuruse kasutamise. Vaadake lisateavet #14868. Üks võimalik lahendus sellele on järgmise CSS-i lisamine:

    @media print ( .container ( laius : auto ; ) ) Androidi aktsiabrauser

    Karbist väljas installib Android 4.1 (ja ilmselt isegi mõned uuemad väljaanded) brauseripõhise rakenduse, näiteks vaikeveebibrauseri (erinevalt Chrome'ist). Kahjuks on brauserirakendusel CSS-iga üldiselt palju vigu ja ebakõlasid.

    Valige menüü

    Elemendi peal, sisse Androidi brauser Juhtnuppe ei kuvata, kui on äärise raadius ja/või ääris . (Lisateavet leiate sellest StackOverflow küsimusest.) Kasutage allolevat koodilõiku selle CSS-i eemaldamiseks ja elemendi muutmiseks Androidi brauseris stiilita. Snort kasutajaagent hoiab ära Chrome'i, Safari ja Mozilla brauserite häirimise.

    $ (funktsioon () ( var nua = navigaator . userAgent var isAndroid = (nua . indexOf ( "Mozilla/5.0" ) > - 1 && nua . indexOf ( "Android " ) > - 1 && nua . indexOf ( "AppleWebKit") > - 1 && nua indexOf ( "Chrome" ) === - 1 ) if ( isAndroid ) ( $ ( "select.form-control"). removeClass ( "form-control"). css ( "width", " 100%" ) ) )) Validaatorid

    Parima võimaliku kasutuskogemuse pakkumiseks vanadele ja lollakatele brauseritele kasutab Bootstrap mitmes kohas CSS-i brauseri häkke, et sihtida teatud brauseriversioonidele spetsiaalset CSS-i, et vältida brauserite endi vigu. Need häkkimised põhjustavad arusaadavalt CSS-i valideerijatel kaebusi, et need on kehtetud. Mõnes kohas kasutame ka tipptasemel CSS-i funktsioone, mis pole veel täielikult standarditud, kuid neid kasutatakse ainult järkjärguliseks täiustamiseks.

    Need valideerimishoiatused ei oma praktikas tähtsust, kuna meie CSS-i mittehäkkiv osa valideerib täielikult ja häkkivad osad ei sega mittehäkkiva osa nõuetekohast toimimist, mistõttu me neid konkreetseid hoiatusi teadlikult eirame.

    Meie HTML-dokumentidel on samuti mõned triviaalsed ja ebaolulised HTML-i valideerimise hoiatused, kuna oleme lisanud lahenduse teatud Firefoxi veale.

    Kolmanda osapoole tugi

    Kuigi me ei toeta ametlikult kolmandate osapoolte pistikprogramme ega lisandmooduleid, pakume siiski mitmeid kasulikke näpunäiteid mis aitab teil vältida võimalikud probleemid oma projektides.

    Ploki suurus

    Olenevalt kontekstist saate kasti suuruse alistada ainult siis, kui see on vajalik (1. valik) või lähtestada kogu ala jaoks (2. valik).

    /* Kasti suuruse lähtestamine * * Lähtestage üksikud elemendid või alistage piirkonnad, et vältida konflikte * Bootstrapi globaalse kasti mudeli sätete tõttu. Kaks valikut, individuaalsed alistamised ja * piirkonna lähtestamine, on saadaval tavalise CSS-i ja kompileerimata Less-vormingus. */ /* Valik 1A: ühe elemendi kasti mudeli alistamine CSS-i kaudu */ .element ( -webkit-box-sizing : content-box ; -moz-box-sizing : content-box ; box-sizing : sisu- kast ; ) /* Valik 1B: alistab ühe elemendi kasti mudeli Bootstrap Less mixin abil */ .element ( .box-sizing (content-box ) ; ) /* Valik 2A: lähtesta terve regioon CSS-i kaudu * / .reset-box-sizing , .reset-box-sizing *, .reset-box-sizing * :before , .reset-box-sizing * :after ( -webkit-box-sizing : sisukast ; -moz- box-sizing : content-box : box-sizing : content-box ) /* Valik 2B: Lähtesta kogu piirkond kohandatud Less mixiniga */ .reset-box-sizing ( & , *, * :befor , * : after ( .box-sizing (content-box ) ; ) .element ( .reset-box-sizing () ; ) Saadavus

    Bootstrap järgib üldlevinud veebistandardeid ja seda saab kasutada minimaalse lisapingutusega AT-le juurdepääsetavate saitide loomiseks.

    Jäta navigeerimine vahele

    Kui teie navigeerimismenüüs on palju linke ja see asub DOM-is enne põhisisu, lisage link Ava põhisisu juurde otse märgendi järele.

    Mine põhisisu juurde Pealehe sisu. Pesastatud päised

    Pealkirjade ( - ) pesastamisel peab teie dokumendi põhipealkiri olema . Järgmised päised tuleb loogiliselt määrata kasutades -, et päiseid lugev programm saaks lehe sisu konstrueerida.

    Värvi kontrast

    Praegu on mõned vaikevärvikombinatsioonid Bootstrapis saadaval (nt erinevad stiiliga nupuklassid, mõned põhikoodiplokkide jaoks kasutatavad koodi esiletõstmise värvid, .bg-primary kontekstuaalse tausta abistaja klass ja lingi vaikevärv, kui seda kasutatakse valgel taustal) on madala kontrastsusega (alla soovitatud suhte 4,5:1). See võib halva nägemisega või värvipimedatele kasutajatele probleeme tekitada. Neid vaikevärve võib olla vaja muuta, et suurendada nende kontrasti ja loetavust.

    Täiendavad ressursid See võimaldab: See ei nõua:
    • Sisaldab Bootstrapi lähtekoodi või mis tahes selles tehtud muudatusi saab kompileerida teistesse distributsioonidesse, et kaasata see, mida see sisaldab
    • Esitage Bootstrapis tehtud muudatused Bootstrapi projekti demonstreerimiseks (kuid Tagasiside Tere tulemast)

      • Kas olete tõlkinud uue või on parem tõlge? Avage taotlus selle lisamiseks meie loendisse.

    Enne allalaadimist veenduge, et teil oleks koodiredaktor (soovitame Sublime Text 3) ning HTML-i ja CSS-i tundmine. Siin me lähtefaile ei puuduta, kuid saate neid alati ise alla laadida ja uurida. Keskendume kompileeritud Bootstrapi failidega alustamisele.

    Kompileeritud failide laadimine

    Kiireim viis alustamiseks: hankige meie CSS-i, JS-i ja piltide kompileeritud ja minimeeritud versioone. Dokumente ega lähtefaile pole.

    2. Faili struktuur

    Allalaaditud failidest leiate järgmise struktuuri ja sisu, mis on loogiliselt rühmitatud ühiste omaduste järgi ja sisaldavad nii minimeeritud kui ka kompileeritud versioone.

    Pärast allalaadimist pakkige tihendatud kaust lahti, et näha (kompileeritud) Bootstrapi struktuuri. See peaks olema midagi sellist:

    bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min. css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min. js +-- img / ¦ +-- glyphicons - poollings . png ¦ +-- glyphicons - poollings - white . png L-- README . md

    See on Bootstrapi põhivorm: kompileeritud failid kiireks ja lihtsaks kasutamiseks peaaegu kõigis veebiprojektides. Pakume teile kompileeritud CSS-i ja JS-i (bootstrap.*), samuti kompileeritud ja minimeeritud CSS-i ja JS-i (bootstrap.min.*). Pildifailid tihendatakse ImageOptimi abil, Maci rakendused piltide PNG-vormingus tihendamiseks.

    Pange tähele, et kõik JavaScripti pistikprogrammid nõuavad jQueryt.

    3. Mis on kaasas

    Bootstrap on varustatud HTML-i, CSS-i ja JS-iga igasuguste tööde jaoks, need kõik on loetletud kategooriates, mille leiate lehe ülaosast.

    Dokumendi jaotised Toetatud elemendid

    Levinud keha stiilid tüübi ja tausta lähtestamiseks, lingi stiilid, malli ruudustik ja kaks lihtsat märgistuselementi.

    CSS-stiilid

    Stiilid üldiselt HTML elemendid: disain, kood, tabelid, vormid ja nupud. Sisaldab ka Glyphiconsi, suurepärast ikoonikomplekti.

    Komponendid

    Lihtsate liidese komponentide põhistiilid: vahelehed ja nupud, navigeerimisribad, sõnumid, lehepäised jne.

    Javascripti pistikprogrammid

    Nagu komponendid, on need Javascripti pistikprogrammid interaktiivsed komponendid tööriistavihjete, teabeplokkide, modaalsete komponentide ja muu jaoks.

    Komponentide loend

    Kõik koos sisaldavad Javascripti komponente ja pistikprogramme järgmised elemendid liides:

    • Nuppude rühmad
    • Rippmenüü nuppude loendid
    • Navigeerimiskaardid, nupud ja loendid
    • Navigeerimisriba
    • Otseteed
    • Märgid
    • Lehekülje päised ja kangelase element
    • Miniatuurid
    • Sõnumid
    • Protsessi indikaatorid
    • Modaalsed elemendid
    • Rippmenüüd
    • Tööriistanõuanded
    • Teabeplokid
    • Element "Akordion"
    • Karusselli element
    • Klaviatuuri sisend ees
    4. Põhiline HTML-i mall

    Pärast lühikest tutvustust keskendume Bootstrapi kasutamisele. Selleks kasutame tavalist HTML-i malli, mis sisaldab kõiki jaotises loetletud elemente.

    Tüüpiline HTML-fail näeb välja selline:

  • Bootstrap 101 mall
  • Tere, Maailm!

    • Sellise Bootstrapi malli loomiseks lisage lihtsalt sobivad CSS- ja JS-failid:

  • Bootstrap 101 mall
  • Tere, Maailm!

    • Ja kõik on paika pandud! Nende kahe faili lisamisega saate koos kasutades Bootstrapi arendada veebisaiti või rakendust.

    Kiiresti arenevad tehnoloogiad sunnivad meid ajaga kaasas käima. Kui varasemate kujunduste loomisel kasutati puhast HTML- ja CSS-koodi, siis täna on kooditeekide aeg.

    Paljud oma aega väärtustavad esiotsa arendajad on pikka aega kasutanud mallimootoreid, ruudustikstruktuure, SESS-i, LESS-i, Bootstrapi ja muid lahendusi. See on õige, miks teha oma elu keeruliseks, kui on olemas valmis ülesannete kogud ja teostused.

    Täna vaatame, kui lihtne on Bootstrap 3.0 abil plokivõrke luua. Kuigi võin julgelt öelda, on poole aasta pärast vaja süveneda bootstrapi uude 4. versiooni.

    Kes ei ole Bootstrapiga veel tuttav?

    Bootstrap on CSS-i kooditeek, mida pakub Twitter ja mida levitatakse tasuta. Lihtsustab oluliselt veebidisaineri elu. Arhiiv sisaldab väikest täiendust js-faili kujul. Lisateavet installimise ja kasutamise kohta leiate ametlikult veebisaidilt.

    Näited lahendustest: http://getbootstrap.com/components/ - vahelehed, tabeli stiil, hüpikaknad, navigeerimine, menüüd, vertikaalsed loendid, nupud, ikoonid ja muud naudingud. Ka inglise keeles. keel.

    Mida peate esmalt alglaadimisvõrkude kohta teadma?

    Varem olid bootstrapi teises versioonis ainult mõned täiendused mobiilsed lahendused. Kolmandas versioonis on kogu raamistik algselt kohandatud erinevate seadmete jaoks: mobiil, tahvelarvutid, lauaarvutid. Nüüd on asi selgem :)

    Peaaegu kõik alglaadimisfunktsioonid on rakendatud algklasside abil.

    Kogu keha sisu kood sisaldub spetsiaalses div-plokis. See võib olla fikseeritud laiusega .container või täisekraanil .container-fluid .

    Võrgusüsteem

    Koosneb 12 lahtrist, millest igaüks on div-plokk, reas rida.rida.

    Nüüd vaadake allolevat tabelit, et oleks lihtsam mõista järgmisi koodilõike.

    Sõltuvalt eesliitest loome vajaliku seadme jaoks võrgusilma.

    Tähelepanu!

    Saate luua ruudustiku, mis keskendub esialgu mitmele seadmele korraga. See saavutatakse eesliidete kombineerimisega.


    Näide 1. Loome mõned ruudustikud ainult lauaarvutite jaoks:

    .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col -md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md -4 .col-md-6 .col-md-6


    Näide 2. Nüüd ühendame lauaarvuti ja mobiilseadme ruudustiku korraga:

    .col-xs-12 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col -xs-6 .col-md-4 .col-xs-6 .col-xs-6

    Artikkel, milles vaatleme saite, mis pakuvad veebidisaineritele, arendajatele või lihtsalt harrastajatele Bootstrapi jaoks tasuta malle ja teemasid.

    Saidid, kust saate Bootstrapi malle tasuta alla laadida See sait sisaldab tasuta teemad Ja Alglaadimismallid

    nii isiklikuks kui äriliseks kasutamiseks. Kõik mallid on jaotatud sihtlehtedeks, ühelehelisteks saitideks, ajaveebideks, portfellideks jne. Seda saiti saab tasuta vaadata ja alla laadida. reageerivad mallid

    Bootstrap. Selle ressursi leht koosneb kahest jaotisest. Esimene jaotis (lehe ülaosas) sisaldab tasulisi malle ja teine ​​jaotis (lehe allosas) sisaldab tasuta malle. Bootswatchi sait sisaldab Bootstrapi jaoks tasuta teemasid, mis erinevad algsest ainult selle poolest, et need on tehtud teises keeles värvipalett . Lisaks on neid teemasid väga lihtne installida, lihtsalt laadige need alla CSS-fail

    ja asendage algne Bootstrapi fail sellega.

    See sait pakub tasuta ja tasulisi teemasid. Tõsi, tasuta ja tasuliste teemade valik pole nii suur. Kuid PrepBootstrap sisaldab väga suurt hulka Bootstrapi raamistiku jaoks mõeldud HTML-vidinaid ja komponente (üle 100).

    Sait, millel on väga suur valik Twitter Bootstrapi teemasid. Otsingu hõlbustamiseks on kõik teemad rühmitatud kategooriatesse, sarnaselt Start Bootstrapi veebisaidil.

    Tasuta CSS-i sait sisaldab suurt hulka teemasid, sealhulgas Twitteri alglaadimisraamistiku teemasid. Kõiki teemasid saab otseülekandena vaadata nupu "Live Demo" abil ja soovi korral alla laadida.

    Sellel saidil on tasuta HTML5-malle, mis on üles ehitatud Bootstrapi raamistikule. Kõik mallid on tundlikud. Vaadake, kuidas konkreetne mall välja näeb erinevaid seadmeid kasutades vastavaid nuppe otsevaate režiimis.

    WebThemezi veebisaidilt on allalaadimiseks saadaval enam kui 200 tasuta Bootstrapi malli. Iga malliga on kaasas kirjeldus ja selle põhifunktsioonid.