Bootstrap 4 on suosittu kehys käyttöliittymien verkkosivustojen kehittämiseen.
Ensisijaisesti se on CSS-mobiililaitteiden ensimmäinen malli ja sisältää sekä CSS- että JavaScript-malleja sellaisille asioille kuin lomakkeet, painikkeet, navigointi, typografia, pudotusvalikot, ponnahdusikkunat, modaalit ja karusellit yhdessä muiden käyttöliittymäelementtien kanssa. Mutta älä arvioi sitä väärin: Bootstrap tarjoaa myös runsaasti tilaa räätälöinnille ja voit käyttää sitä minkä tahansa tyyppisten verkkosivustojen koodaamiseen..
Tämä on perus Bootstrap-paketti, joka tarvitset ladata. CSS on tyylisivun kieli staattiselle tiedolle.
Bootstrap.js
JavaScript / jQuery-kirjasto on se, joka käynnistää Bootstrap-ohjelman tietyt komponentit, kuten animaation, vierityksen ja interaktiivisuuden..
Glyphicons
kuvioita ovat tyypillisiä elementtejä, kuten English Pound (£). Bootstrapissa on valtava luettelo sulautetuista kuvakkeista, jotka ovat saatavilla ilmaiseksi.
Bootstrap-lähdekoodielementit
Bootstrap-lähdekoodin lataus sisältää esikäännetyt CSS-, JavaScripti- ja fonttisisällöt sekä Vähemmän lähdekoodin, JavaScriptin ja asiakirjat.
Vähemmän/ – esikäsittelytyylitiedosto CSS: lle, jotka poistavat toistuvat koodaustehtävät
Sass / – esiprosessorin uudempi versio, joka on suositumpi
js / – viittaa yksinkertaisesti lähdekoodiin JavaScript, jonka avulla Bootstrap-komponentit voivat toimia
kirjasimet / – nämä ovat kuvakefonttit, jotka tulevat latauksen mukana
dist / – kansio, joka sisältää esikäännetyt tiedostot käytettäväksi verkkosivustojen kehittämisessä
merkintä: Bootstrap vaatii myös jQuery-asennuksen Bootstrapin JavaScriptin laajennuksille. jQuery on JavaScript-kirjaston ominaisuuksiltaan rikas osa, ja se pienentää paljon JavaScript-koodia ja kääri ne toimiin, jotka voit suorittaa yhdellä rivillä.
Hälytykset ovat viestejä käyttäjille, kun jokin on vialla. Esimerkiksi, jos käyttäjä kirjoittaa väärän sähköpostiosoitteen tai luottokorttinumeron, hän saa virheilmoituksen, joka kehottaa heitä tekemään korjauksia.
.hälytys-ensisijainen
Voit luoda värikkäitä hälytyksiä mistä tahansa tekstistä. Ensisijainen hälytys (tärkeämpi viesti) on vaaleansininen.
Ensisijainen hälytys
.hälytys-toissijainen
Lisää toissijainen hälytys (vähemmän tärkeä viesti) vaaleanharmaana.
Olen toissijainen hälytys
.hälytys-menestys
Tämä varoittaa käyttäjää siitä, että hänen toimintansa on onnistunut.
Menestysvaroitus!
.hälytys-varoitus
Tämä lähettää viestin tulevista toimista.
Varoitus! Varoitus!
.hälytys-vaara
Vaaravaroitus on samanlainen kuin varoitushälytys, mutta negatiivisempien toimien tapauksessa (esim. Lukitseminen liian monien salasanojen epäonnistuessa).
Olet vakavassa vaarassa, ystäväni!
.hälytys-link
Joten haluat lisätä uuden viestin ja linkin viestiin alkuperäiseen hälytykseen? Voit upottaa viestin samalla värillä.
Menestys! Sinun pitäisi lukea tämä hieno viesti.
.hälytys-dismissible
Se tarjoaa mahdollisuuden sulkea hälytys sen lukemisen jälkeen.
×Menestys! Pärjäsit hyvin.
.hälytys-otsikko
Lisää nopea otsikko hälytykseesi. (esimerkiksi ”toimitusosoite” tai “laskutusosoite”). Se voi koskea koko sivua tai vain kyseisen sivun sisältöä.
.hälytys-valo ja .hälytys-tumma
Muuttaa hälytystyylin joko vaaleaksi tai tummanharmaaksi.
Olen kevyt hälytys
Ja olen tumma (sivu) hälytys!
Merkit
Käytä merkkejä näyttääksesi lisätietoja kategorian, painikkeen tai muiden elementtien vieressä. Voit luoda ja tyyliä niitä muilla kontekstiosilla (esim. .Varoitusvaroitus). Lisäksi merkit skaalautuvat vastaamaan pääelementin kokoa (esim. Otsikot). Viimeiseksi voit käyttää merkkejä osana painikkeita tai linkkejä laskurien tarjoamiseen.
Esimerkki: Otsikot
Oletetaan, että sinulla on useita otsikoita ja lisäät tunnuksen. Kyseisen merkin koko muuttuu otsikon mukaiseksi.
Esimerkki otsikko Uusi
Esimerkki otsikko Uusi
.merkki-pilleri
Käytä tätä komentoa muokataksesi tunnuskuvasi muotoa tekemällä niistä pyöristetyt.
valo
.merkki-ensisijainen + .merkki-toissijainen
Voit lisätä tunnuksen ensisijaisiin (tärkeämpi) ja toissijaiseen (vähemmän tärkeisiin) viesteihin.
ensisijainentoissijainen
.merkki-läpinäkyvä
Oletetaan, että haluat tehdä napin läpinäkyväksi, jotta se erottuu muusta. Bootcamp 4: n kanssa sinun ei tarvitse käyttää suoraa muotoilua. Käytä sen sijaan seuraavaa komentoa:
.merkki-varoitus, .merkki-menestys, .merkki-info, tai .merkki-vaara
Lisää tunnuksen varoitukseen, menestykseen, tietoon tai vaaravaroitukseen.
VaroitusMenestysVaaraTiedot
Luo toimivia merkkejä Hover- ja Focus-tiloilla
Kun käyttäjät siirtävät osoittimensa painikkeeseen, mutta eivät ole vielä aktivoineet sitä, voit antaa hover- ja kohdistuselementtejä toiminnan rohkaisemiseksi.
Tee tämä käyttämällä kontekstuaalisia .badge- * -luokkia elementti.
Tässä on muutama esimerkki:
ensisijainen toissijainen Menestys Vaara Varoitus
.korppujauho
Leipärummut ovat navigointikomponentit, joiden avulla käyttäjät voivat siirtyä sivulta toiselle eksymättä ja antaa heille mahdollisuuden palata takaisin edelliselle sivulle.
Koti
Koti
Kirjasto
Koti
Kirjasto
data
.painikkeet
Kuten nimi vihjaa, .button-komennolla voit luoda ja tyyliä… painikkeen.
.painike-ensisijainen + .painike-toissijainen
Ensisijaista painiketta käytetään yleisesti käyttäjän toimintoon; Toissijaista painiketta voidaan sitten käyttää sulkemiseen.
Valitse painikkeiden ääriviivat seuraavien katkelmanäytteiden seurauksena:
.btn-lg + .btn-sm
Muuta painikkeiden kokoa.
.btn-lohko
Ryhmitä painikkeet lohkoon. Kaikki ryhmitetyt painikkeet kattavat vanhemman koko leveyden.
.aktiivinen
Oletusarvon mukaan kaikki painikkeet näytetään painettuna - tumma reunus, tummempi tausta ja upotettu varjo - kun ne ovat aktiivisia.
merkintä: Sinun ei tarvitse lisätä luokkaa
Mutta jos jostain syystä joudut pakottamaan saman aktiivisen ilmeen, käytä seuraavaa koodinpätkää:
Ensisijainen linkki
merkintä: Voit myös lisätä käytöstä poistetun Boolean-määritteen mihin tahansa painikkeeseen, jotta se näyttää passiiviselta.
Nappiryhmä
Tämän elementin avulla voit luoda ryhmän samankokoisia painikkeita koodamatta niitä erikseen.
.btn-ryhmä
.btn-ryhmä pystysuora
Muodosta pystysuora painikeryhmä:
.btn-ryhmä (Sisäkkäiset)
Voit myös luoda sisäkkäisiä painikkeita pudotusvalikoilla.
Pudotuslinkki Pudotuslinkki
.btn-toolbar
Järjestä painikeryhmät työkaluriviin monimutkaisempien komponenttien tekemiseksi. Voit käyttää erilaisia apuohjelmalleja lisätyylille.
.btn-ryhmä-ota
Asentaa Bootstrap Toggle -laajennus muokata valintaruudut vaihtoiksi. Voit sitten lisätä data-toggle = ”painikkeet” painikeryhmään, jossa on muokatut painikkeet, jotta niiden kytkentäkäyttäytyminen saadaan JavaScriptin avulla käyttöön. Myöhemmin, käytä .btn-ryhmä-ota tyyliäksesi erilaisia tuloja painikkeistasi.
Kortit
Kortit ovat joustavia säilytysastioita, joissa on vaihtoehto otsikoille / alatunnisteille, väreille ja näyttövaihtoehdoille sekä muulle. Ne korvasivat useita Bootstrap 3: n aiempia komponentteja (paneelit, kaivot ja pikkukuvat).
.kortti-body
Kortin pääosa. Käytä sitä lisätäksesi pehmustettu osa korttiisi.
Mahtava teksti
.kortti-title
Kooda kortin otsikko. Lisää tämä kohtaan tag.
Iso otsikko
.kortti-tekstityksen
Voit myös lisätä tekstityksiä jokaiselle kortille erityisen ihanaa.
Fancy kortti -tekstitys
.kortti-link
Upota linkki korttiin. Lisää tämä luokka luokkaan tag.
Linkki jotain hauskaa
.kortti tekstin
Lisää joitain sanoja kortillesi. Niin monta tai harvaa kuin haluat.
Ruusut ovat punaisia orvokit sinisiä, Opiskelen Bootstrapia, Entä sinä?
.kortti-kuva-top
Voit myös liittää kuvan kortillesi. Tämä katkelma lisää yhden huipun.
Mikä eeppinen kuva!
.kortti-kuva-pohja
Tai voit antaa kuvan näkyä kortin pohjana. Sinun päätöksesi.
Katso sitä kuvaa!
.kortti-kuva-overlay
Käytä kuvaa taustana ja peitä kaikki tekstit.
Olen teksti, jolla on taustakuva!
.kortti-header
Aseta mukautettu otsikko kortin yläosaan. Se näkyy kaikkien nimikkeiden ja tekstitysten yläpuolella.
Jokin iso otsikko!
.kortti-footer
Voit myös koodata alatunnisteen kortillesi välittääksesi lisätietoja. Se menee heti .kortti-body.
Jotkut lisää kortin sisältöä
.kortti-ryhmä
Pelaa ympäri kortin asettelua ja rakenna ryhmä kortteja. Ryhmä toimii yhtenä, kiinnitetynä elementtinä, jokaisella kortilla on sama leveys ja korkeus. Voit myös hakea näyttö: flex; parantaa mitoitusta.
merkintä: Ryhmäkortin asettelut eivät reagoi!
Kortti numero yksi
Olen ryhmän ensimmäinen kortti, jolla on hienoja tietoja.
Kortti numero kaksi
Olen ryhmän keskikortti ja tarjoan todennäköisesti parhaan tarjouksen
Kortti kolme
Olen kolmas kortti, joka yrittää olla yhtä viileä kuin ensimmäinen.
.kortti-pylväät
Voit järjestää korttisi muurausmaisiin sarakkeisiin. Tämän avulla voit rakentaa joitain luovia malleja käyttämällä vain CSS: ää.
merkintä: Jos korttisi jakautuvat sarakkeiden yli, aseta ne kohtaan näyttö: inline-block.
.kortti kannen
Kokoa sarja kiinnittämättömiä kortteja, joilla on sama korkeus ja leveys.
Jotkut otsikko
Tekstisi
Toinen kortti
Vielä enemmän tekstejä, jotka jonkun täytyy kirjoittaa.
Olen myös kortti!
Jotkut sanat lisäämistä ja järjestämistä varten
Karuselli
Aseta diaesitys selataksesi dioja, tekstiä tai kuvia. Rakennettu CSS 3D: n ja jonkin JS: n kanssa. Voit lisätä kuvia, tekstiä tai mukautettuja merkintöjä sekä lisätä tai poistaa edellisiä / seuraavia säätimiä.
Carousel Slide - yhden dia luominen
EdellinenSeuraava
.karuselli-fade
Lisää tämä hieno häivytystehoste dioille ennen seuraavaa.
EdellinenSeuraava
.karuselli-indikaattorit
Lisää ohjaus ja tuki seuraavalle / edelliselle ja indikaattoreille, kuten diojen numero.
EdellinenSeuraava
.karuselli-kuvateksti
Lisää funky otsikko kuhunkin tai useampaan dioon.
Cool Slide Label
Olen niin ylpeä itsestäni, että koodain tämän dian.
Jopa kylmempi etiketti
Jep, täysin rokkaamalla koko koodaus asia.
EdellinenSeuraava
Kutista ja haitar
Kutista on JavaScript-laajennus, jonka avulla voit piilottaa sisältöä "kutista" -valikossa. Kutistunut elementti animoi sen korkeuden nollasta normaaliarvoonsa, kun se laukaistaan, ja päinvastoin.
.romahtaa
Piilota sisältösi.
Animal pariatur cliche reprehenderit, enimmod korkean elämän accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, käsityöolut labore wes anderson kred nesciunt sapiente ea proident.
.romahtaa show
Näytä tiivistetty sisältö.
Jokin teksti, jonka olet päättänyt piilottaa
.collapse.options
Aktivoi sisältö kokoontaitettavana elementtinä; hyväksyy valinnaiset objektit.
Kokoontaitettavan käytön laajennus kortteihin. Tämän ominaisuuden avulla voit luoda harmonikan.
merkintä: Sinun on käytettävä .accordionia kääreenä
Harmonikkakatkelmaesimerkki 2 ryhmäkohdetta
Kokoontaitettava ryhmäkohde # 1
Tässä on ensimmäinen asia, jonka haluan piilottaa tähän korttiin.
Kokoontaitettava ryhmäkohta # 2
Ja tässä on jokin muu teksti, jonka muotoilun haitarilla.
dropdowns
Käytä tätä laajennusta luodaksesi kontekstuaaliset peittokuvat käyttäjän linkkiluetteloiden näyttämiseksi. Se on kätevä vaihtoehto valikoiden luomiseen. Pudotusvalikot rakennetaan läpi Popper.js, osa kolmannen osapuolen kirjastoa. Varmista siis, että sisällytät popper.min.js ennen Bootstrapin omaa JavaScriptiä. Tai voit vain käyttää bootstrap.bundle.min.js/ bootstrap.bundle.js. Molemmat sisältävät Popper.js.
Nopea muotoilukärki: kaikki Bootstrap-pudotusvalikot vaihdetaan napsauttamalla, ei hiiri.
.pudota alas
Lisää yksinkertainen pudotusvalikko painikkeilla.
Toiminta Toinen toiminta
.avattavasta-ota-split
Luo jaettujen painikkeiden avattavat pudotusvalikot oikein välimatkoin.
Toiminta Toinen toiminta
.dropup
Tiesitkö, että voit muotoilla valikon tulevan eikä alaspäin? Nyt teet!
.dropright
Syötä valikko painikkeen oikealla puolella.
.dropleft
… Ja voit myös näyttää valikon vasemmalla.
.avattavasta-item-text
Lisää ei-vuorovaikutteiset avattavat kohteet valikkoosi.
Pelkkä teksti Napsautettava toiminta Toinen toiminta Mitä muuta tarvitset
.avattava kohde poistettu käytöstä
Voit myös poistaa käytöstä minkä tahansa valikkokohteen.
Aktiivinen linkki Poistettu linkki Vielä yksi linkki
.avattavasta-jakaja
Lisää yksinkertainen jako valikkoelementtien väliin kiinnittääksesi erityistä huomiota.
.avattavasta-valikon oikeassa
Kohdista koko valikko oikealle.
Lomakkeet
Voit helposti luoda houkuttelevia lomakkeita ja koodata mukautettuja tyylejä, asetteluja ja lisäelementtejä. Bootstrap 4: ssä lomakkeet saivat myös joitain uusia syöttöohjauksia, kuten numeroiden valinta, sähköpostin vahvistus ja muut, sekä joukko uusia reagoivia luokkia.
Esimerkki .lomake-ryhmä
.lomake-ohjaus
Tämän luokan avulla voit muotoilla kaikki tekstimuodon ohjaimet, kuten käyttäjän syöttämät tiedot, otsikot jne.
.lomake-ohjaus-tiedosto
Lisää tämä luokka aina, kun sinun on annettava käyttäjälle mahdollisuus ladata tiedosto lomakkeeseen.
.lomake-ohjaus-lg ja .lomake-ohjaus-sm
Luo visuaalinen hierarkia lomakkeellesi lisäämällä .lomake-ohjaus-lg tehdä suurempia syöttöalueita ja .lomake-ohjaus-sm tehdä pienempiä.
.lomake-ohjaus selväkielisenä
Käytä tätä luokkaa näyttääksesi oikein elementtejä muodossasi. Se korvaa oletusmuotokentän muotoilun tavallisella tekstillä pitäen oikean reunan ja pehmusteen.
merkintä: Voit myös lisätä valintanappeja valintaruutujen sijasta käyttämällä lomake-check-inputtype = "radio".
.lomake-check-inline
Luo horisontaalinen luettelo valintaruuduista.
.Lue ainoastaan boolean-määrite
Määritä, että tietyn tyyppinen syöte on vain luku -tyyppinen. Tämä estää tulon arvon muuttamisen.
Mukautetut lomakkeet
Bootstrap 4: ssä on useita mukautettuja muotoelementtejä, jotka korvaavat selaimen oletusasetukset.
.tilaustyönä valintaruutu
Kuten nimi viittaa, voit rakentaa muokatun valintaruudun lomakkeellesi.
.tilaustyönä radio
… Ja voit myös tyyliä mukautetun radion!
.tilaustyönä kytkin
Viimeiseksi voit myös luoda tyylikkään mukautetun kytkimen.
.tilaustyönä valitsemalla
Käytä tätä komentoa lisätäksesi mukautetun valikon.
.tilaustyönä tiedosto
Mukauta käyttäjän tiedostojen lähettämistä. Lisää niin .tilaustyönä tiedosto luokan ympärillä panos kanssa type = "tiedosto". Lisää sitten .tilaustyönä file-input siihen.
.tilaustyönä alue
Suunnittele mukautettu aluevalikko.
Syöttöryhmä
Syöttöryhmäelementin avulla voit luoda vuorovaikutteisempia ja houkuttelevampia muotoohjaimia. Käytä sitä lisätäksesi tekstejä, kuvakkeita tai painikkeita syöttökentän molemmille puolille.
.input.group - Perus esimerkki
Etu-ja sukunimi
.tulo-ryhmä-prepend-
Anna lisätekstit syötteen eteen.
.tulo-ryhmä-liittämiskyselyn
… Tai lue ne syötteen taakse.
.tulo-ryhmä-teksti
Käytä tätä luokkaa määritettyjen tekstien tyyliin.
.00
Jumbotron
Joustava komponentti, joka auttaa sinua luomaan suuria laatikoita ohjaamaan enemmän huomiota esillä olevaan sisältöön tai viestiin. Bootstrap-sovelluksessa jumbotron näyttää harmaalta ruudulta, jonka kulmat ovat pyöristetyt ja joka suurentaa automaattisesti kaikki sen sisällä olevat fonttikoko ja tekstit.
Voit lisätä mitä tahansa HTML- ja muita Bootstrap-luokkia jumbotroniin.
.jumbotron
Hei, upea sinä!
Tämä on yksinkertainen sankariyksikkö, joka osoittaa, että kuka tahansa voi olla todellinen sankari!.
Käytä hyödyllisyysluokkia typografiassa ja väli
Valmiina toimintaan
.jumbotron-neste
Muuttaa hiukan jumbotronin ulkonäköä ja tekee siitä koko sivun leveä ilman pyöristettyjä kulmia.
Nestemäinen jumbotron
Otan koko sivun vaakatilan.
Listaryhmä
Käytä luetteloryhmiä näyttääksesi sisältösarjan, jossa on paljon vaihtoehtoja tyylille ja asetteluille.
.lista-ryhmä - Esimerkki
Luo perusluetteloryhmä, jossa on useita kohteita.
Maito
tee
toffeet
.list-group-item active
Lisää .active luokka korostaaksesi nykyisen aktiivisen valinnan luettelossa.
tahdon tämän
Ei tätä
Tai tämä
.luetteloryhmä-kohde poistettu käytöstä
Osoita, että yksi luettelon kohteista ei ole käytettävissä / poistettu käytöstä. Jotkut aktiiviset elementit (esim. Linkit) vaativat mukautetun JavaScriptin päälle .disable: n, jotta ne olisivat täysin passiivisia.
Tämä tuote ei ole varastossa
Mutta meillä on tämä!
Ja myös tämä hieno asia
.lista-ryhmä-item-toiminta
Lisää interaktiivisuutta luetteloosi lisäämällä tyylitehosteita (poistettu käytöstä, vie hiiri, aktiivinen jne.) Yksittäisiin kohteisiin.
Ensisijainen valinta sinulle! Hyvää tarjousta Myös vaihtoehto Jotain muuta luettelossa Ja tätä ei ole saatavana
.lista-ryhmä-huuhtelu
Muuta luettelomme ulkoasua poistamalla reunat ja pyöristetyt kulmat. Kaikki tuotteet sijoitetaan reunasta reunaan.
Chai Latte
Matcha Latte
Earl Grey Tea
Vanilla Rooibos
perämies
.lista-ryhmä horisontaaliset
Voit myös asettaa luettelosi pystysuuntaisen sijaan vaakasuunnassa. Voit lisäksi koodata luetteloryhmän vaakasuoraksi alkamalla tietyn välipisteen min-leveydellä käyttämällä .lista-ryhmä-vaakasuuntaisesti {sm | md | lg | xl}.
merkintä: Et voi käyttää horisontaalisia luetteloryhmiä samanaikaisesti huippuluetteloryhmien kanssa.
Bootstrap 4 antaa sinun rakentaa monimutkaisia, toistuvia komponentteja, jotka sisältävät tekstiä ja joitain medioita. Mediaobjektit ovat hieno työkalu tweetin kaltaisten elementtien ja esiteltyjen laatikoiden rakentamiseen. Niitä on myös naurettavan helppo käyttää, koska ne vaativat vain kaksi luokkaa.
.tiedotusvälineet
Käytä .tiedotusvälineet kääre ja .Media-body sisällön ympärillä yhden mediaobjektin luomiseksi. Tässä on otosotsikko.
Sinun otsikko
Keskeinen viesti, jonka haluat jakaa maailmalle!
.Media-body
Luokka, joka määrittää, mikä esineessäsi olisi. Voit koodata sisältösi erilaiset kohdistukset. Oletusasetus on yläosa, mutta voit kohdistaa sen keskelle tai loppuun.
Yläasennettu media
Lue tekstit, jotka kuvaavat yllä olevaa kuvaa
Sisäinen media
Voit myös sisällyttää useita mediaobjekteja. Objektit asetetaan sisäkkäin aloittamalla vasemmasta reunasta ja napsauttamalla jokaista uutta kohdetta.
Tässä on katkelma pesästä varten.
Media-otsikko
Tässä menee teksti.
Toinen mediaotsikko
Muutamia tekstejä, jotka selittävät mitä täällä tapahtuu.
nav
.nav on perusluokka, joka auttaa sinua rakentamaan kaikenlaisia navigointikomponentteja, jopa tyylin ohitusten kanssa. Sinulla on paljon mukautusvaihtoehtoja.
.nav esimerkki
Et voi napsauttaa tätä käytöstä poistettua linkkiä
Napsauta tätä sen sijaan
.nav-eriä
Luokka, jolla määritetään uusi kohde navigointivalikossa.
Perustelun sijasta voit myös pakottaa valikkokohteet täyttämään kaiken vapaan tilan tällä komennolla. Kaikilla esineillä ei kuitenkaan ole samaa leveyttä.
aktiivinen
Tämä linkki on koko ajan
Lyhyt linkki
navbar
Navbar on reagoiva navigointiotsikko, jossa on paljon joustavuutta ja tukea tuotemerkkien, lomakkeiden, linkkien ja muun kanssa.
NavBar - Perusnavigointiotsikot sivun yläosassa
Ensimmäinen navigointipalkki
Koti (Nykyinen)
Linkki 1
Linkki pois käytöstä
.navbar tuotemerkin
Navbars-kalusteet toimitetaan valmiiksi joidenkin alakomponenttien tuella. Tämä elementti tekee tekstistäsi erottuvamman. Se oli ennalta suunniteltu sopimaan tuotteen tai yrityksen nimi.
Yrityksesi nimi
.navbar-text
Käytä tätä luokkaa lisätäksesi keskitetyt tekstimerkkijonot pystysuoraan ja vaakaväliin.
Olen navigointipalkin teksti, jossa on upotettu elementti
.Navbaria laajentaa (-sml-mdl-lgl-xl)
Ota reagoiva romahtaminen käyttöön.
navbar
Koti (Nykyinen)
Linkki
.Navbaria nivelvivun
Ohjelmoi erilaiset navigointitoiminnot (esimerkiksi pidä kohteet aktiivisina tai kutista ne).
navbar
Koti (Nykyinen)
Linkki
.lomake-inline
Sijoita lomake (esim. Hakupalkki) navigointiotsikkoon.
.collapse.navbar-romahdus
Ryhmitä ja tiivistä navigointipalkin sisältö vanhemman murtopisteen perusteella.
navbar
Koti (Nykyinen)
Linkki
.navbar-kiinteä top
Aseta kiinteä navigointipalkki ensisijaiseksi ja tummaksi.
Kiinteä yläosa
Bootstrap-modaali (plugin)
Tämä on JavaScript-laajennus, jota käytetään lisäämään valintaikkunoita sivustoon, kuten käyttäjän ilmoituksia, mukautettua sisältöä ja valopöytä ponnahdusikkunoita.
Moodit koostuvat HTML, CSS ja JavaScript. Ja voit näyttää vain yhden modaalikkunan kerrallaan, koska Bootstrap-luojat pitävät sisäkkäisiä malleja huonoina UX-käytäntöinä.
Modaalinen esimerkki
Anna sille otsikko
Lisää tähän modaalinen runoteksti.
.modaalinen-dialogi keskittyvää
Voit keskittää kaiken sisällön pystysuunnassa.
Modaalinen otsikko
Luettelo joitain tekstejä.
.modaalinen-dialogi-vieritettäviä
Kun sinun on pakattava enemmän sisältöä modaaliin (esimerkiksi pitkä tietosuojakäytäntö), voit lisätä tämän luokan, jotta se vierittäisi sitä sivusta riippumattomasti.
Modaalinen otsikko
Tämä on erittäin pitkä käyttöehtoissopimus, jonka hyväksyt lukematta sitä.
.modaalinen haalistua
Sisältö on häipynyt.
Modaalinen otsikko
Täytyy ainakin jotain täällä.
.modaalinen-lg, .modaalinen-sm, .modaalinen-xl
Voit myös säätää modaaliesi kokoa.
Olen suuri modaali!
Olen pieni ja söpö modaali.
Olen jumbo-kokoinen modaali!
merkintä: Bootstrap tarjoaa demon kaikista näistä komponenteista Modaalinen sivu. Ne ovat tarkastelun arvoisia.
Paginators
Jos tiedät HTML: n, paginaattorit eivät ole sinulle mitään uutta. Bootstrapilla sinulla on useita vaihtoehtoja niiden muotoiluun.
.sivunumerointi - perussivu esimerkki
«Edellinen
1
2
3
»Seuraava
.sivu-esine on poistettu käytöstä
Voit poistaa yhden sivutuselementeistä tai useamman niistä.
Edellinen
1
2 (Nykyinen)
3
Seuraava
.sivukohde aktiivinen
Aktiivinen ilmaisee nykyisen vaiheen korostamalla sen sinisellä.
Edellinen
1
2 (Nykyinen)
3
Seuraava
.sivunumerointi-lg
Tee sivutus suurempi ja rohkeampi.
Edellinen
1
2
3
Seuraava
.sivunumerointi-sm
Tai tee siitä siro ja kooltaan vähemmän näkyvä.
Edellinen
1
2
3
Seuraava
popovers
Popover-laajennuksen avulla voit luoda ponnahdusikkunan, jossa on sisältöä ja muita elementtejä, jotka aktivoidaan aina, kun käyttäjä napsauttaa elementtiä. Ponnahdusikkunat ovat samankaltaisia työkaluvihjeiden kanssa, mutta sopivat enemmän sisältöön.
Hyvä tietää ennen aloittamista
Sinun on lisättävä ominaisuus, data-ota = "popover" elementtiin popoverin luomiseksi.
Sinun on määritettävä otsikkoteksti otsikkomääritteellä.
Käytä data-sisältöä attribuutti määrittääksesi mitä sisältöä näytetään popoverin rungossa.
Vaihda popover
Sinun on käytettävä jQueryä popoversioiden alustamiseen - popover ().
popover
Tässä on koodi, joka mahdollistaa sivusi ponnahdusikkunoiden:
Ponnahdusikkunoiden sijoittaminen - ylhäältä, alhaalta, vasemmalta tai oikealta
Määritä yksi popoverin neljästä sijainnista.
Popover päällä
Popover oikealla
Popover alaosassa
Popover vasemmalla
Konttien avautumisen luominen
Koodaa mukautettu säilö aina, kun sinusta tuntuu, että jotkut vanhemman elementin tyylit voivat sekoittaa sen ulkoasun. Säiliöattribuutin lisääminen "kääri" popoverin HTML-koodin vanhempaan elementtiin.
Tarjoa käyttäjille mahdollisuus sulkea ponnahdusikkuna, kun he napsauttavat elementtiä toisen kerran. Voit järjestää popoverin lopettamisen, kun käyttäjä napsauttaa myös elementin ulkopuolella: Käytä data-trigger = "Focus" ominaisuus.
Oletuksena ponnahdusikkuna on suljettu, kun napsautat elementtiä uudelleen. Voit kuitenkin käyttää data-trigger = "Focus" attribuutti, joka sulkee ponnahdusikkunan napsauttamalla elementin ulkopuolella:
Napsauta minua
edistyminen
Kehitä mukautettu edistymispalkki ja lisää haluamallasi tavalla uusia elementtejä, kuten animaatio ja tekstitarrat.
.edistyminen
Luokka perusasetuksen etenemispalkin asettamiseksi. Se toimii käärenä, joka osoittaa edistymispalkin enimmäisarvon.
.edistymispalkki
Käytä tätä komentoa määrittääksesi nykyisen edistymisen.
.edetä-Bar-raidallinen
Lisää joitain raitoja edistymispalkin osaan.
.edetä-Bar-animoitu
Nyt saat nämä raidat liikkuviksi, parturin sauvatyyliin.
Lisää useita edistymispalkkeja
Voit lisätä samanaikaisesti useita palkkeja eri elementtien edistymisen osoittamiseksi. Säädä kullekin kohdennusta mieluummin.
Scrollspy
Kätevä laajennus, jonka avulla voit korostaa navikkolinkkejä tai luetteloryhmien kohteita ilmoittaaksesi käyttäjälle, missä he tällä hetkellä ovat sivulla.
Esimerkki tavallisesta Bootstrap Scrollspy: stä
Kohta yksi Kohta kaksi Kyllä, se on kolme
Kohta yksi
Ja jotain sisältöä siitä..
Kohta kaksi
Ja toinen selitys.
Kyllä, se on kolme
Kuka olisi arvata? :).
Pakkaamme tämä hieman kauemmas.
data-vakooja = "selaa" + tiedot kohde-
Lisää vierityspyörä yläpalkin navigoinnissa, lisää data-vakooja = "selaa" määrittää elementin, jota haluat seurata. (useimmissa tapauksissa tavoitteesi on ).
Määritä tiedot kohde- attribuutti emoelementille .nav komponentti, jotta nav-linkit kohdistetaan korostamiseen.
...
...
...
data-offset
Tämä määrittelee vierityksen jonkin sijainnin ja sitä voidaan säätää. Oletusasetus on 10 pikseliä.
@fat
...
@mdo
...
yksi
...
kaksi
...
kolme
...
Soittaminen Scrollspylle JavaScriptin kautta
Sinulla on myös useita tapoja ottaa ScrollSpy käyttöön JavaScriptin avulla. Lisää seuraava komento CSS: ään sen jälkeen asema: suhteellinen;
Kun lisäät tai poistat elementtejä DOM: sta… ja yrität käyttää vierityspistettä, sinun on soitettava päivitysmenetelmälle seuraavalla komennolla:
.scrollspy ( 'hävittää')
Käytä tätä menetelmää elementin vierityspinnan poistamiseen.
activate.bs.scrollspy
Tämä tapahtuma palaa vierityselementtiin aina, kun vieritys aktivoi uuden kohteen.
$ ('[data-spy = "scroll"]'). päällä ('activ.bs.scrollspy', function () { // Tehdään tämä… })
kehrääjä
Käytä tätä laajennusta lisätäksesi animoitu kehruu. Spinnners on rakennettu vain HTML: llä ja CSS: llä, ilman mitään JS: tä. Mutta… saatat tarvita JavaScriptiä joihinkin muotoiluvaihtoehtoihin, esimerkiksi vaihtaa heidän näkyvyyttä. Lisäksi sinulla on useita hienoja vaihtoehtoja valita.
Plugin, jonka avulla voit lisätä “push-ilmoituksia” Flexboxilla - erittäin helppo sijoittaa ja kohdistaa. käytä näitä vaihtoehtona ilmoituksille.
.paahtoleipä - esimerkki
bootstrap 11 minuuttia sitten
Kudos, olen paahtoleivän viesti!
työkaluvinkit
Työkaluvihjeet ovat pieniä tekstiä ponnahdusikkunoita, jotka tarjoavat käyttäjille jonkin verran lisäympäristöä painikkeessa tai muussa verkkosivuelementissä. Bootstrap 4: n työkaluvihjeet käyttävät Popper.js-kirjastoa paikannukseen. Siksi sinun täytyy sisällyttää ne käyttämään niitä popper.min.js ennen bootstrap.js tai käytä bootstrap.bundle.min.js/bootstrap.bundle.js.
Useimmille komponenteille, asetteluille ja ruudukkojärjestelmille Bootstrap käyttää seuraavia raja-arvoarvoja:
Erittäin pieni < 544px
Pieni ≥ 544 kuvapistettä
Medium ≥ 768px
Suuri ≥ 992px
Erittäin suuri ≥ 1200 kuvapistettä
Ristikot ja sarakkeet
Helppo asettaa ja kohdistaa sisältöä Flexboxin avulla; täysin reagoiva. Saat 12 sarakkeen järjestelmän, 5 tasoa oletuksena, ennalta määritetyt luokat ja paljon muuttujia.
Ruudukon koon vaihtoehdot
COL-xs-: säiliön leveys - automaattinen / ei mitään; sarakkeen leveys - automaattinen.
.COL-sm-: säiliön leveys - 750px; pylvään leveys - ~ 62px
.col MD-: säiliön leveys - 970px; pylvään leveys - ~ 81px
.COL-lg-: säiliön leveys - 1170px; pylvään leveys - ~ 97px
perustiedot .kontti Vanhempi ruudukko
Luo 3 yhtäläistä saraketta ennalta määritellyillä ruudukoluokilla.
Yksi kolmesta sarakkeesta
Yksi kolmesta sarakkeesta
Yksi kolmesta sarakkeesta
.kontti-neste
Skaalaa säilytysastian koko näkökulmasta.
Pylväskoot
Valitse joukosta xs, sm, md, lg. Jälleen, kun lisäät sarakkeita, niiden on sovittava kaikkien laitteiden näyttöruutuihin, tai käyttäjät turhautuvat.
Tässä koodinpätkä - muuta vain kokoelementti:
.no-kourut
Sarakkeiden välinen vakioväli on 15px molemmilla puolilla. Mutta voit poistaa sen.
.col-12, col-sm-6, col-md-8
.col-6 .col-md-4
Typografia
Kaikki mitä tarvitset otsikoihin, tekstiteksteihin, luetteloihin ja paljon muuta.
Tekstin kohdistus - vasen, oikea, keskitetty, oikeutettu
dotnetfunda on online-opetusohjelma
dotnetfunda on online-opetusohjelma
dotnetfunda on online-opetusohjelma
Lista rivillä - Näytä luettelo rivillä
tee
sokeri
Maito
List-Unstyled - Poista oletusluettelotyyli
kahvi
tee
Musta tee
Vihreä tee
Maito
.text-pieniä
pienikokoinen teksti.
.text-isoiksi
isot kirjaimet.
.text-isoin
iso kirjain.
.text-typistetty
katkaistu teksti.
.text-NoWrap
Ei tekstiä.
.text-monoscape
Tämä on monospace
.text-piilota
Muokattu otsikko
.text-decoration-none
tätä tekstiä ei ole koristeltu
.alkukirjainlyhenne
Lisää pienempi fonttikoko tyyl lyhenteisiin.
Johtaa
Kun haluat lisätä painotusta tiettyyn sisältökappaleeseen, voit tehdä fontista hieman suuremman ja jopa ohuemman, niin että kappale erottuu visuaalisesti.
Tämä on tieto, johon sinun tulisi todella kiinnittää huomiota!
Lohkolainaus
Jos lisäät lainauksen, joka on vähän pitkä, tämä antaa luokalle mahdollisuuden poistaa se muusta tekstistä.
Jotkut hienot tarjoukset, jotka olet löytänyt.
Blockquote-alatunniste
Lisää tarjouksen lähde lisäämällä alatunniste.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.text-break
Tämä estää erittäin pitkiä tekstejä rikkomasta muiden sisustuselementtien ulkoasua.
.float-vasen - Kelluu esine jäljellä - kaikki koot
Kellu vasemmalle kaikissa ikkunoissa
Kellu vasemmalle näyttöportteihin, joiden koko on SM (pieni) tai leveämpi
Kellu vasemmalle näyttökenttien kokoiselle MD (keskitasolle) tai leveämmälle
Kellu vasemmalle näyttökenttien kokoiselle LG (suurelle) tai leveämmälle
Kellu vasemmalle näyttöportteille, joiden koko on XL (erittäin suuri) tai leveämpi
.float-oikeus - Kelluu esine oikealla - kaikki koot
Kellu oikealla kaikilla näyttöporttikokoilla
Kellu oikealla näyttöportteilla, joiden koko on SM (pieni) tai leveämpi
Kellua oikeanpuoleisella näyttöportin kokoisella MD (keskikokoinen) tai leveämpi
Kellu oikealla näyttöporttien kokoisella LG (suurella) tai laajemmalla
Kellua oikeanpuoleisessa näkymäportissa, jonka koko on XL (erittäin suuri) tai leveämpi
.float-none - Poistaa kelluvuuden - kaikki koot
Älä kellu kaikissa näyttöporttikokoissa
Älä kellu näyttökenttien kokoisena (pieni) tai leveämpänä
Älä kellu MD (keskikokoinen) tai leveämpänä näkyvissä näyttöportteissa
Älä kellu LG (iso) tai leveämpien näyttökenttien kanssa
Älä kellu XL-näyttöä (erityisen suuri) tai leveämpää näyttöporttia kohden
.clearfix - Poistaa kelluvuuden emoelementistä
...
Flex
Voit hallita helposti ja nopeasti asetteluja, kohdistuksia, kokoja, navigointeja, näyttöjä, värejä, kohdistusta ja paljon muuta tällä yhdellä Bootstrap-työkalulla.
Flex - sm-lg-md-xl
Mittaa kaikki elementit ennalta määrätyillä kokoilla ja reagoi täysin.
...
...
...
...
.Flex-rivi ja .flex-rivi-käänteisfaasi
Aseta vaakasuunta tai käännä se aloittaaksesi vastakkaiselta puolelta.
Joustava kohta 1
Jousto 2
Jousto 3
Joustava kohta 1
Jousto 2
Jousto 3
.Flex-sarake ja .flex-sarake-käänteisfaasi
Aseta sarakkeiden suunta tai käännä päinvastaiseen suuntaan.
Joustava kohta 1
Jousto 2
Jousto 3
Joustava kohta 1
Jousto 2
Jousto 3
.Flex-täyttö
Tämä apuohjelma pakottaa kaikki elementit käyttämään yhtä suurta leveyttä ottaen samalla huomioon kaiken käytettävissä olevan vaakatilan.
Joustava esine
Joustava esine
Joustava esine
.flex-grow- *
Yksi joustavista tuotteista täyttää kaiken käytettävissä olevan tilan ja varmistaa samalla, että muilla on myös minimaalisesti tarpeeksi tilaa.
Joustava esine
Joustava esine
Kolmas joustava esine
.flex-kavahtaa *
Aktivoi tuotteen kyky kutistua pienimmäksi kokoksi vapaan tilan täyttämiseksi.
Joustava esine
Joustava esine
.Flex-NoWrap, .flex-Wrap-reverse ja .Flex-Wrap
Käytä näitä luokkia, kun haluat esineiden joko kääriä seuraavalle riville tai sovittaa yhdelle riville (nytkäävy) tai tehdä käänteisen kääretoiminnon. (Wrap-reverse).
...
...
...
.flex perustele sisältöä
Lisää tämä luokka, kun haluat perustella oikealla tai vasemmalla olevaa tekstiä ja kun haluat, että perustelu alkaa ja päättyy.
Joustava kohta 1
Joustava kohta 2
Jousto 3
Joustava kohta 1
Jousto 2
Jousto 3
.Flex Align-tuotteet
Määritä, kun kohdistus alkaa ja milloin se päättyy, kun haluat luettelon.
Joustava kohta 1
Jousto 2
Jousto 3
Joustava kohta 1
Jousto 2
Jousto 3
.flex align-itsekäynnistys
Voit myös ohittaa säiliön kohdistuksen valitulle kohteelle kyseisessä säilössä.
Kohdistettu flex-esine
suuntaus
Kuinka ja mihin haluat kohdistaa sisältösi, painikkeet jne. - oikealle, vasemmalle, keskelle?
