Bootstrap-i komponentide tutvustus

Algselt nimega Twitter Blueprint töötasid selle välja Twitteris Mark Otto ja Jacob Thronton. Bootstrap on tasuta CSS-raamistik, mis annab reageerimise veebilehtedele. Vastuvõtlikkuse all tähendab see seda, et erinevad DOM-i elemendid muudavad end vastavalt ekraani suuruse muutusele, ilma et see kahjustaks veebilehe elegantsi, nagu see tavaliselt juhtuks piksli- või protsendimääraga CSS-meetodite korral.

Seda nimetatakse ka kõigepealt CSS-i raamistikuks, kuna see on ette nähtud CSS-ruudustiku paigutuseks, määrates read ja veerud. Selles raamistikus on JavaScripti komponendid koos CSS-klassidega. Selle raamistiku kasutamiseks peate kohustuslikult linkima jQuery ja JavaScripti raamistiku Bootstrapile koos teiste Bootstrap CSS-failidega. Need CSS-failid on saadaval nii allalaadimiseks kui ka CDN-ide (sisu edastamise võrk) kujul.

Erinevad Bootstrap-i komponendid:

Bootstrap on komplekteeritud kümnete komponentidega, mida saab uuesti kasutada, et pakkuda veebilehel head kasutajakogemust ja kasutajaga suhtlemist, näiteks navigeerimisribad, hüpikud, rippmenüüd, ikoonid, nupud, eelkujundatud vormid ja ka erinevate DOM-i elementide suuruse määramise valikud.

1) Glüfoonid - need on fonti vormindatud ikoonid, mis on saadaval Bootstrapis. Neid on umbes 200. Need glükoolid leiate aadressilt https://glyphicons.com.

Kuidas seda kasutada?
Peaaegu kõiki toiminguid, nagu suumimine, muutmine, hoiatamine, failide salvestamine, kustutamine jne, tähistavad glükoolid ja need on määratletud eraldi klassis. Niisiis, peate kasutama põhiklassi ja individuaalset klassi, ideaaljuhul span-elemendis ja neid glüfikone.

Süntaks:

2) rippmenüüd - need on lülituspõhised menüüd, milles loetletakse linkide loend. Neid muudab JS-i pistikprogramm dünaamilisemaks ja need leiate aadressilt http: // getbootstrap / javascript / # rippmenüüdest

Kuidas seda kasutada?
Peate kasutama klassi .dropdown, kuna elemendi klassil on selle all olevad loendielemendid koos klassi .dropdown-menüüga.

Süntaks:

3) Nupugrupid - selle Bootstrap-komponendi abil saate grupeerida nupud üksteise kõrval asuvatesse sarjadesse.

Kuidas seda kasutada?
Määratlege jagamise elemendid .btn-grupiklassiga ja peske need elemendid nupuga .btn klassiga. Õige
Vale

4) Nuppude rippmenüüd - seda komponenti kasutatakse nupulelemendi käivitamiseks rippmenüüst.

Süntaks:

5) Sisestusgrupid - see laiendab vormi kontrollklassi ja lisab teksti või nuppe sisestuselemendi sisestusvälja mõlemale küljele. Nende sisendgruppide kasutamiseks peate kasutama sisendigrupi klassi koos sisendklassi-lisaklassiga.

Süntaks:

@

6) Navbar - need komponendid toimivad teie veebisaidi navigeerimise päistena. Need on kokku lükatud, et väiksemate ekraanisuurustega seadmetes vertikaalselt laiendatava hamburgerimenüüga laiendada ja muutuvad ekraani laiuse suurenemisel horisontaalseks.

Süntaks:

7) Jumbotron - see on alglaadimiskomponent, mis võib võtme sisu kuvamiseks laieneda täisekraanil (või vaateaknas).

Süntaks:

8) Hoiatused - see on jQuery pistikprogrammiga Bootstrap-komponent, mis pakub kontekstilist tagasisidet vastavalt kasutaja tegevusele. Põhimõtteliselt kasutatakse seda häireteadete kuvamiseks.

Süntaks: …

9) Edenemisriba - seda komponenti kasutatakse visuaalse ülevaate saamiseks töö või tegevuse edenemise tagasiside kohta koos edenemisribaga.

Synatx:

Näide:

10) Märgid - see on komponent, et esile tõsta midagi lugemata üksuste moodi, lisades DOM elemendile klassi .badge, eelistatavalt vahemikku.

Süntaks:

Teated 3

11) leheküljed - see komponent annab teie saidile mitmeleheküljelise lehekülje, nii et sisu saaks seda teha

jagada mitmeks leheküljeks ja liikuda hõlpsalt. Tavaliselt määratletakse järjestamata loendite DOM-element selle klassi .pagination abil.

Süntaks:

    Kuidas see teie karjääris aitab?

    Kõik ettevõtted keskenduvad nüüd kasutaja interaktsioonile ja kasutajakogemusele (UI / UX). Kuna valdav enamus elanikkonnast kasutab käeshoitavaid seadmeid nagu tahvelarvutid ja nutitelefonid, mille pikslite eraldusvõime ja ekraani suurus on väga erinevad. Seetõttu on tõesti oluline, et kasutajaliidese disain oleks piisavalt reageeriv, et kohandada end mis tahes ekraaniga, ilma et see kahjustaks veebilehe elegantsi.

    Niisiis, Bootstrapi tööoskuste omandamine annaks teile lisaväärtuse tehnilises karjääris ja ettevõtted ootaksid teid palgata kena palgaga. Kuna see on tasuta ja avatud lähtekoodiga, on teil palju arendamisvõimalusi, mille abil saate arendajana panustada ja muuta see endiselt paremaks kui see, mis praegu on.

    Järeldus-

    Bootstrap-raamistik on väga mugav vahend veebilehtedele reageerimise võimaldamiseks. Selles ajaveebis selgitatud komponendid on mõned väga laialdaselt kasutatavad komponendid, mis aitavad teil funktsionaalsuse suurendamiseks vähem koodi kirjutada ja loovad veebisaidile rohkem elegantsi lisada.

    Soovitatavad artiklid

    See on olnud juhend Bootstrap Components jaoks. Siin käsitleme ka alglaadimise sissejuhatust ja erinevaid komponente koos selle süntaksiga. Lisateavet leiate ka meie muudest soovitatud artiklitest -

    1. Kuidas installida Bootstrap
    2. Nurk vs Bootstrap
    3. Bootstrap koolituskursus
    4. Bootstrap-i intervjuu küsimused
    5. Kuidas kasutada Bootstrap-i paigutust?
    6. 5 parimat Boostrap-tüüpi tüüpi koos näidiskoodiga

    Kategooria:

    Tarkvaraarendus