Johdanto Bootstrap-komponentteihin
Alun perin sitä kutsuttiin Twitter-suunnitelmaksi, jonka ovat kehittäneet Mark Otto ja Jacob Thronton Twitterissä. Bootstrap on ilmainen CSS-kehys, joka antaa reagoinnin verkkosivuille. Reaktiivisuudella se tarkoittaa, että erilaiset DOM-elementit muuttavat kokoaan vastaavasti näytön koon muutoksen kanssa vaarantamatta verkkosivun tyylikkyyttä, kuten muuten tapahtuisi perinteisesti pikseli- tai prosenttikokoisilla CSS-menetelmillä.
Tätä kutsutaan myös 'mobiili ensin' CSS-kehykseksi, koska se on suunniteltu saamaan CSS-ruudukon asettelu määrittelemällä rivit ja sarakkeet. Tämä kehys sisältää myös JavaScript-komponentteja yhdessä CSS-luokkien kanssa. Tämän kehyksen hyödyntämiseksi sinun on pakollisesti linkitettävä jQuery ja JavaScript Framework for Bootstrap yhdessä muiden Bootstrap CSS-tiedostojen kanssa. Nämä CSS-tiedostot ovat ladattavissa sekä CDN-tiedostoina (Content Delivery Network).
Eri Bootstrap-komponentit:
Bootstrap-paketissa on kymmeniä komponentteja, joita voidaan käyttää uudelleen tarjoamaan hyvää käyttökokemusta ja käyttäjien vuorovaikutusta verkkosivuilla, kuten navigointipalkit, ponnahdusikkunat, pudotusvalot, kuvakkeet, painikkeet, ennalta suunnitellut lomakkeet ja myös eri DOM-elementtien kokovaihtoehdot.
1) Glyphicons - Nämä ovat fonttimuotoiset kuvakkeet, jotka ovat käytettävissä Bootstrap-sovelluksessa. Niitä on noin 200. Nämä glyphicons löytyvät osoitteesta https://glyphicons.com.
Kuinka käyttää sitä?
On glyphiconeja, jotka kuvaavat melkein kaikkia toimintoja, kuten zoomaus, muokkaus, varoitus, arkistointi, poistaminen jne., Ja ne määritetään yksittäisessä luokassa. Joten, sinun on käytettävä perusluokkaa ja yksittäistä luokkaa, mieluiten span-elementissä ja käytettävä näitä glyphiconeja.
Syntaksi:
2) Pudotusvalikot - Nämä ovat vaihtamiseen perustuvat valikot, joissa on linkkiluettelo. JS: n laajennus tekee niistä dynaamisempia, ja ne löytyvät osoitteesta http: // getbootstrap / javascript / # pudotusvalikot
Kuinka käyttää sitä?
Sinun on käytettävä .dropdown-luokkaa, koska elementin luokalla on luettelotiedot sen alla luokan .dropdown-valikossa.
Syntaksi:
3) Painikkeiden ryhmät - Tällä Bootstrap-komponentilla voit ryhmitellä painikkeiden ryhmät sarjaan vierekkäin.
Kuinka käyttää sitä?
Määritä jakoelementit .btn-ryhmäluokalla ja aseta ne elementteihin .btn-luokan painikkeilla. Oikea
Väärä
4) Painikkeiden pudotusvalot - Tätä komponenttia käytetään painikeelementin avaamiseen pudotusvalikossa.
Syntaksi:
5) Syöttöryhmät - Tämä laajentaa lomakkeenohjausluokkaa ja lisää tekstiä tai painikkeita syöttöelementin syöttökentän molemmille puolille. Sinun on käytettävä .input-ryhmäluokkaa .input-group-addon luokan kanssa, jotta näitä syöttöryhmiä voidaan käyttää.
Syntaksi:
@
6) Navbar - Nämä komponentit toimivat verkkosivustosi navigointiotsikoina. Ne pienenevät laajennettavaksi pystysuunnassa vaihtavalla hampurilavalikolla pienemmissä näyttöruutuissa laitteissa ja muuttuvat vaakasuoraksi näytön leveyden kasvaessa.
Syntaksi:
7) Jumbotron - Tämä on käynnistysosien komponentti, joka voi ulottua koko näytön (tai näkymäportin) yli näyttääksesi jonkin avainasisällön.
Syntaksi:
8) Hälytykset - Tämä on Bootstrap-komponentti, jossa on jQuery-laajennus, joka tarjoaa kontekstuaaliset palauteviestit käyttäjän toiminnasta riippuen. Tätä käytetään periaatteessa hälytysviestien näyttämiseen.
Syntaksi: …
9) Edistyspalkit - Tätä komponenttia käytetään visuaalien toimittamiseen palautteen antamiseen työn tai toiminnan etenemispalkista.
Synatx:
Esimerkki:
10) Tunnusmerkit - Tämä on komponentti, joka korostaa jotain lukemattomia kohteita lisäämällä luokan .badge DOM-elementtiin, mieluiten span.
Syntaksi:
Viestit 3
11) Sivunvaihto - Tämä komponentti antaa sivustollesi sivun monisivuisella sivutuksella, jotta sisältö voi
jakaa useille sivuille ja navigoida helposti. Yleensä järjestämättömien luetteloiden DOM-elementti määritetään tällä luokan .pagination avulla.
Syntaksi:
Kuinka tämä auttaa urallasi?
Kaikki yritykset keskittyvät nyt käyttäjän vuorovaikutukseen ja käyttökokemukseen (UI / UX). Koska suuri osa väestöstä käyttää kädessä pidettäviä laitteita, kuten tablet-laitteita ja älypuhelimia, jotka eroavat toisistaan suuresti pikselien tarkkuuden ja näytön koon suhteen. Siksi on todella tärkeää, että käyttöliittymäsuunnitelma on riittävän reagoiva säätämään itseään minkä tahansa tyyppiselle näytölle vaarantamatta verkkosivun tyylikkyyttä.
Joten Bootstrap-taito on lisäarvoa tekniselle urallesi ja yritykset odottavat palkkaavansa sinut komealla palkkalistalla. Koska se on ilmainen ja avoimen lähdekoodin ominaisuus, sinulla on paljon mahdollisuuksia osallistua kehittäjänä ja tehdä siitä vieläkin parempi kuin nykyään.
Conclusion-
Bootstrap-kehys on erittäin kätevä työkalu reagoinnin tuomiseksi verkkosivuille. Tässä blogissa selostetut komponentit ovat joitain hyvin käytettyjä komponentteja, joiden avulla voit kirjoittaa vähemmän koodia enemmän toimintoja varten ja lisätä lisää tyylikkyyttä rakennettavalle verkkosivulle.
Suositellut artikkelit
Tämä on ollut opas Bootstrap-komponentteihin. Täällä keskustellaan myös käynnistyslaitteen johdannosta ja eri komponenteista sekä sen syntaksista. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -
- Kuinka asentaa Bootstrap
- Kulma vs Bootstrap
- Bootstrap-koulutuskurssi
- Bootstrap -haastattelukysymykset
- Kuinka käyttää Bootstrap-asettelua?
- 5 suosittua Boostrap-tyyppiä näytekoodilla