abgx360.net
  • Home
  • Уроци
  • Сигурност
  • Новини и общност
  • Отзиви
RSS

Bootstrap-huijaussivu

07.06.2020 Jeffrey Wilson Ei luokkaa

Bootstrap-huijaussivu

Bootstrap-huijaussivu


Bootstrap 4 on hyvä valinta, jos aiot poimia joitain koodaustaitoja!

Miksi?

Koska se on käyttöliittymäkehityksen kultastandardi:

  • Bootstrapissa on sisäänrakennetut luokat, mikä tarkoittaa, että sinun ei tarvitse koodata useimpia elementtejä tyhjästä
  • Se on avoimen lähdekoodin ja sillä on merkittävää yhteisön tukea
  • Lisäksi se on erittäin monipuolinen ja sitä voidaan käyttää minkään tyyppisten verkkosivustojen luomiseen nopeasti.

Jos olet valmis rullaamaan, lataa ilmainen bootstrap-huijauskortti PDF-muodossa.

Contents

      • 0.0.1 Bootstrap-huijaussivun PDF-versio
      • 0.0.2 Bootstrap-huijaussivun (PNG) infografinen versio
    • 0.1 Bootstrap-huijaussivu
      • 0.1.1 Mikä on Bootstrap?
      • 0.1.2 Bootstrap-avainkomponentit
        • 0.1.2.1 Bootstrap.css
        • 0.1.2.2 Bootstrap.js
        • 0.1.2.3 Glyphicons
      • 0.1.3 Bootstrap-lähdekoodielementit
      • 0.1.4 Bootstrap-näytön koot
        • 0.1.4.1 min:
        • 0.1.4.2 max:
      • 0.1.5 Bootstrap-avainkomponentit
        • 0.1.5.1 hälytykset
      • 0.1.6 Merkit
        • 0.1.6.1 Esimerkki: Otsikot
  • 1 Esimerkki otsikko Uusi
    • 1.1 Esimerkki otsikko Uusi
      • 1.1.1 Luo toimivia merkkejä Hover- ja Focus-tiloilla
      • 1.1.2 .korppujauho
      • 1.1.3 .painikkeet
      • 1.1.4 Nappiryhmä
      • 1.1.5 Kortit
        • 1.1.5.1 Iso otsikko
            • 1.1.5.1.0.1 Fancy kortti -tekstitys
        • 1.1.5.2 Kortti numero yksi
        • 1.1.5.3 Kortti numero kaksi
        • 1.1.5.4 Kortti kolme
        • 1.1.5.5 Jotkut otsikko
        • 1.1.5.6 Toinen kortti
        • 1.1.5.7 Olen myös kortti!
      • 1.1.6 Karuselli
        • 1.1.6.1 Carousel Slide - yhden dia luominen
      • 1.1.7 Cool Slide Label
      • 1.1.8 Jopa kylmempi etiketti
      • 1.1.9 Kutista ja haitar
        • 1.1.9.1 Harmonikkakatkelmaesimerkki 2 ryhmäkohdetta
          • 1.1.9.1.1 Kokoontaitettava ryhmäkohde # 1
          • 1.1.9.1.2 Kokoontaitettava ryhmäkohta # 2
      • 1.1.10 dropdowns
      • 1.1.11 Lomakkeet
        • 1.1.11.1 Esimerkki .lomake-ryhmä
      • 1.1.12 Mukautetut lomakkeet
      • 1.1.13 Syöttöryhmä
        • 1.1.13.1 .input.group - Perus esimerkki
      • 1.1.14 Jumbotron
  • 2 Hei, upea sinä!
  • 3 Nestemäinen jumbotron
      • 3.0.1 Listaryhmä
      • 3.0.2 Mediaobjekti
          • 3.0.2.0.1 Sinun otsikko
          • 3.0.2.0.2 Yläasennettu media
        • 3.0.2.1 Sisäinen media
          • 3.0.2.1.1 Media-otsikko
          • 3.0.2.1.2 Toinen mediaotsikko
      • 3.0.3 nav
        • 3.0.3.1 .Nav perusteltu
        • 3.0.3.2 Perusteltu Nav-elementtien esimerkki
      • 3.0.4 navbar
        • 3.0.4.1 NavBar - Perusnavigointiotsikot sivun yläosassa
      • 3.0.5 Bootstrap-modaali (plugin)
        • 3.0.5.1 Modaalinen esimerkki
          • 3.0.5.1.1 Anna sille otsikko
          • 3.0.5.1.2 Modaalinen otsikko
          • 3.0.5.1.3 Modaalinen otsikko
          • 3.0.5.1.4 Modaalinen otsikko
      • 3.0.6 Paginators
      • 3.0.7 popovers
        • 3.0.7.1 Hyvä tietää ennen aloittamista
        • 3.0.7.2 popover
        • 3.0.7.3 Ponnahdusikkunoiden sijoittaminen - ylhäältä, alhaalta, vasemmalta tai oikealta
        • 3.0.7.4 Konttien avautumisen luominen
      • 3.0.8 edistyminen
        • 3.0.8.1 Lisää useita edistymispalkkeja
      • 3.0.9 Scrollspy
        • 3.0.9.1 Esimerkki tavallisesta Bootstrap Scrollspy: stä
    • 3.1 Kohta yksi
    • 3.2 Kohta kaksi
    • 3.3 Kyllä, se on kolme
        • 3.3.0.1 @fat
        • 3.3.0.2 @mdo
        • 3.3.0.3 yksi
        • 3.3.0.4 kaksi
        • 3.3.0.5 kolme
        • 3.3.0.6 Soittaminen Scrollspylle JavaScriptin kautta
      • 3.3.1 kehrääjä
        • 3.3.1.1 Kasvava kehruu
      • 3.3.2 Pöytä
      • 3.3.3 paahtoleipää
      • 3.3.4 työkaluvinkit
        • 3.3.4.1 Ota työkaluvihjeet käyttöön
        • 3.3.4.2 Kohdista työkaluvihjeet
      • 3.3.5 Bootstrap-tyylin perusteet
        • 3.3.5.1 Raja-arvot
        • 3.3.5.2 Ristikot ja sarakkeet
        • 3.3.5.3 Ruudukon koon vaihtoehdot
        • 3.3.5.4 perustiedot .kontti Vanhempi ruudukko
      • 3.3.6 Pylväskoot
      • 3.3.7 Typografia
        • 3.3.7.1 Tekstin kohdistus - vasen, oikea, keskitetty, oikeutettu
        • 3.3.7.2 Lista rivillä - Näytä luettelo rivillä
        • 3.3.7.3 List-Unstyled - Poista oletusluettelotyyli
  • 4 Muokattu otsikko
        • 4.0.0.1 Johtaa
        • 4.0.0.2 Lohkolainaus
        • 4.0.0.3 Blockquote-alatunniste
        • 4.0.0.4 kellukkeet
      • 4.0.1 Flex
        • 4.0.1.1 Flex - sm-lg-md-xl
      • 4.0.2 suuntaus
      • 4.0.3 Reunukset
        • 4.0.3.1 Reunanurkkauksen muotoiluvaihtoehdot
      • 4.0.4 asento
      • 4.0.5 varjot
      • 4.0.6 näkyvyys

Bootstrap-huijaussivun PDF-versio

�� Bootstrap-huijaussivu (Lataa PDF)

Bootstrap-huijaussivun (PNG) infografinen versio

�� Bootstrap-huijaussivu (Lataa PNG)

Bootstrap-huijaussivu

Bootstrap-huijaussivu

Mikä on Bootstrap?

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..

Voit tarkistaa täydelliset asiakirjat Bootstrapin virallinen verkkosivusto.

Bootstrap-avainkomponentit

Bootstrap.css

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ä.

Laajennusten asentaminen:

Bootstrap-näytön koot

Bootstrap 4 on mobiili-ensin reagoiva kehys. Mutta silti, sinun on annettava näytön koon ohjeet, kun luot sivun asetteluristikoita. Alla on vakiona näytön koot viitteeksi:

min:

@media (min. leveys: @ näyttö-sm-min) //> = 768px (pieni tabletti) @media (min. leveys: @ näyttö-md-min) //> = 992px (keskikokoinen kannettava tietokone) @media (min. leveys: @ näyttö-lg-min) //> = 1200 kuvapistettä (iso työpöytä)

max:

@media (enimmäisleveys: @ näyttö-xs-max) {// < 768px (xsmall phone) @media (max-width: @screen-sm-max) { // < 992px (small tablet) @media (max-width: @screen-md-max) { // < 1200px (medium laptop)

Bootstrap-avainkomponentit

Bootstrap-avainkomponentit (Laajenna)

hälytykset

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.

ensisijainen toissijainen

.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.

Varoitus Menestys Vaara Tiedot

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.

 
  1. Koti
 
  1. Koti
  2. Kirjasto
 
  1. Koti
  2. Kirjasto
  3. 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.

 

.btn-valo, .btn tumma, .btn-ensisijainen, .btn-toissijainen, .btn-läpinäkyvä, .btn-valkoinen, .btn-varoitus, .btn-menestys, .btn-info, .btn-vaara

Suunnittele painikkeesi vakio-ennalta määriteltyjen muotoiluvaihtoehtojen avulla:

       

.btn-ääriviivat

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

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.

Kortin kuvan korkki
Mikä eeppinen kuva!

.kortti-kuva-pohja

Tai voit antaa kuvan näkyä kortin pohjana. Sinun päätöksesi.

Katso sitä kuvaa!
Kortin kuvan korkki

.kortti-kuva-overlay

Käytä kuvaa taustana ja peitä kaikki tekstit.

Kortin kuva

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öä

Päivitetty 2 päivää sitten

.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

Ensimmäinen liuku
Toinen liuku
Edellinen Seuraava

.karuselli-fade

Lisää tämä hieno häivytystehoste dioille ennen seuraavaa.

Ensimmäinen liuku
Toinen liuku
Edellinen Seuraava

.karuselli-indikaattorit

Lisää ohjaus ja tuki seuraavalle / edelliselle ja indikaattoreille, kuten diojen numero.

Ensimmäinen liuku
Toinen liuku
Edellinen Seuraava

.karuselli-kuvateksti

Lisää funky otsikko kuhunkin tai useampaan dioon.

Ensimmäinen liuku

Cool Slide Label

Olen niin ylpeä itsestäni, että koodain tämän dian.

Toinen liuku

Jopa kylmempi etiketti

Jep, täysin rokkaamalla koko koodaus asia.

Edellinen Seuraava

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.

$ ( '# MyCollapsible'). Romahtaa ({ vaihtaa: väärä })

.harmonikka

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.

.lomake-ohjaus-alue

Aseta vaakatasossa vieritettävät alueetulot lomakkeellesi.

.lomake-tarkistus

Lisää valintaruudut lomakkeeseesi.

merkintä: Voit myös lisätä valintanappeja valintaruutujen sijasta käyttämällä lomake-check-input type = "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.

@ example.com

.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.

  • junat
  • lentokoneet
  • raketteja

.lista-ryhmä-erä (valo, tumma primaari, toissijainen, läpinäkyvä, valkoinen, Varoitus, menestys, tiedot, vaara)

Käytä vakiotyylejä yksittäisiin luettelokohteisiin.

  • Kaikki värit, jotka minulla on
  • Vaaleansininen
  • Vaalean harmaa
  • Vihreä
  • Punainen
  • Keltainen
  • tavi
  • Valkoinen
  • harmaa

Mediaobjekti

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.

Hieno paikkamerkkikuva
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.

Yleinen paikkamerkkikuva
Media-otsikko
Tässä menee teksti.
Yleinen paikkamerkkikuva
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.

  • Joku esine
  • .nav oikeuttaa-sisältökeskus

    Kohdista navigointi vaakasuoraan keskelle.

    • aktiivinen
    • Linkki

    .nav perustella-sisältö-loppu

    Tai perustele sisältösi oikealle.

    • aktiivinen
    • Linkki

    .nav-välilehdet

    Lisää hienoja välilehtiä navigointivalikkoosi.

    merkintä: Sinä tulet tarvitsemaan välilehti JavaScript-laajennus asennetut.

    • aktiivinen
    • Linkki
    • Linkki

    .nav-pillereitä

    Vaihtoehtoisesti voit muotoilla valikkokomponentit pillereinä.

    • aktiivinen
    • Linkki
    • Liikuntarajoitteinen

    .Nav perusteltu

    Tasaa kaikkien välilehtien / pillereiden leveydet lisäämällä .nav-perusteltua että .nav, .nav-välilehdet, tai .nav-pillereitä.

    Perusteltu Nav-elementtien esimerkki

    • Koti
    • HTML
    • CSS
    • PHP
    • Jaava

    .nav täyttö

    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.

    $ (toiminto () { $ ( 'Esimerkiksi-popover'). Popover ({ kontti: 'runko' }) })

    .popover-hylkää

    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;

    $ ('runko'). vierivä ({kohde: '# navbar-esimerkki'})

    .scrollspy (Refresh)

    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.

    .kiekkoa ylittävä

    Rakenna mustavalkoinen lastausosoitin.

    Ladataan...

    .kiekkoa ylittävä ensisijaisten (-sekundaari, -kevyt, -tarkki, -varoitus, -menestys, -info, -vaaro)

    Tai lisää värikäs reunus käyttämällä tavallisia Bootstrap-tyylimääritteitä.

    Ladataan...
    Ladataan...
    Ladataan...
    Ladataan...
    Ladataan...
    Ladataan...
    Ladataan...
    Ladataan...

    Kasvava kehruu

    Luo sykkivä kehruu, joka suurentaa ja pienentää kokoa. Hieno vaihtoehto kehruuhöylälle. Jälleen, se voidaan suunnitella useisiin väreihin.

    Ladataan...

    Pöytä

    Bootstrap tarjoaa helpon tapojen luoda taulukoita. Lisää perusluokka .pöytä to

    ja lisää ylimääräisiä mukautettuja tyylejä.

    merkintä: Kaikki taulukkotyypit periytyvät Bootstrap 4: ssä. Jokainen sisäkkäinen taulukko muotoillaan kuten vanhempi.

    .pöytä - esimerkki

    # Ensimmäinen Kestää Käsitellä
    1 merkki Otto @mdo
    2 Jaakob Thornton @fat
    3 larry lintu @viserrys

    .table-tumma

    Luo taulukko tummalla taustalla ja vaaleilla teksteillä.

    # Nimimerkki seuraajaa Käsitellä
    1 MINIMARK 5000 @minik
    2 Gigi_B 24K @keikka
    3 tipu 50K @bi) TKI

    .thead-valo ja .kierre tumma

    Voit myös korostaa vain yhden taulukon merkinnöistä tumma / vaalea-määritteen avulla.

    # episodi Nimi luokitus
    1 # 4 Uusi toivo 10/10
    2 # 6 Jedin paluu 9/10
    3 # 9 Skywalkerin nousu 6/10
    # episodi otsikko Raiting
    1 merkki Otto @mdo
    2 # 2 Sithin kosto 7/10
    3 # 5 Imperiumin vastaisku 10/10

    .taulukko-raidallinen

    Lisää tämä luokka luokkaan

    tehdäksesi pöydästä seepraraitaisen.

    # Etunimi Sukunimi
    1 Darth Vader
    2 säde Vain Ray

    .taulukko-rajautuu

    Tyylirajat kaikille soluille ja taulukon sivuille.

    # Etunimi Sukunimi
    1 Lil Kim
    2 Kanye länsi

    .taulukko -reunaton

    Ditch reunat antaa pöydälle minimalistisen tunnelman.

    # Etunimi Sukunimi
    1 Indiana Jones
    2 han soolo

    .taulukko-leijua

    Lisää leijutustila taulukkoriville.

    # Etunimi Sukunimi
    1 merkki kaksi
    2 henri James

    .taulukko-sm

    Pienennä pöytä. Tämä luokka leikkaa solun tyynyn puoliksi.

    # Etunimi Sukunimi
    1 Amy Viinitila
    2 Kurt Cobain

    .taulukko-aktiivinen (-primaari,-oletus, -sekundaari, -menestys, -vaara, -varoitus, -info, -valo, -tark)

    Maalaa yksittäiset taulukkorivit eri väreillä.

    ... ... ... ... ... ... ... ... ...

    paahtoleipää

    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.

    Ota työkaluvihjeet käyttöön

    $ (function () {$ ('[data-toggle = "tooltip"]'). tooltip ()})

    Kohdista työkaluvihjeet

    Työkaluvinkki päälle

    Työkaluvinkki oikealla

    Työkaluvinkki alhaalla

    Työkaluvinkki vasemmalla

    Tarkemmat mukautukset ja JavaScript-menetelmät ovat viralliset Tooltip-ohjeet.

    Bootstrap-tyylin perusteet

    Bootstrap Styling Essentials (Laajenna)

    Raja-arvot

    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.

    Joku kuuluisa Lähteen otsikko

    .text-break

    Tämä estää erittäin pitkiä tekstejä rikkomasta muiden sisustuselementtien ulkoasua.

    mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

    kellukkeet

    .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?

    .ALIGN-perustason

    Kohdistettu flex-esine

    .ALIGN-top, .ALIGN-keski, .ALIGN-pohja: aseta painikkeet haluamaasi paikkaan.

    lähtötilanteessa ylin keskimmäinen pohja

    .ALIGN-teksti-top, .ALIGN-teksti-bottom: laita teksti haluamaasi kohtaan.

    text-top text-bottom

    Reunukset

    Rajat lisäävät sivustolle tyylikkyyttä. Käytä niitä korostamiseen tai estetiikkaan.

    .reunus

    Hei maailma

    .border-valo, -tumma, -ensisijainen, -toissijainen, -Varoitus, -menestys, -vaara, -tiedot, -valkoinen

            

    .reunus- (ylin, oikea, pohja, vasen)

    Hei maailma Hei maailma Hei maailma Hei maailma Hei maailma

    Reunanurkkauksen muotoiluvaihtoehdot

    (.pyöristetty, .pyöristetty-top, .pyöristetty oikeassa, .pyöristetty-bottom, .pyöristetty vasemmassa, .pyöristetty ympyrän)

    ... ... ... ... ... ... ...

    asento

    Määritä elementtien sijainti.

    .tahmea-top

    Sijoita elementti näyttöportin yläosaan reunasta reunaan.

    Sticky toppi

    .kiinteä-top, .kiinteä pohja

    Aseta elementti näyttöportin ylä- tai alareunaan reunasta reunaan.

    Jotain huipulla
    Jotain alareunassa

    varjot

    Lisää koristeellisia kontrastia lisää vetovoimaa.

    .varjo

    Säännöllinen varjo

    .varjo-none

    Ei varjoa

    .shadow-sm

    Pieni varjo

    .shadow-lg

    Suurempi varjo

    näkyvyys

    Viritä minkä tahansa elementin näkyvyys.

    .näkyvä

    ...

    .näkymätön

    ...
    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      « 2020年最佳摄影WordPress主题 » Φύλλο εξαπάτησης SQL

      Random Posts

      • MailOptin Recenze: Jednoduché a působivé formuláře WordPress Optin
      • Puis-je payer InMotion avec Paypal?
      • WordPress 3.9 je zde: Co lze očekávat při aktualizaci
      • Srovnání CCPA a GDPR pro WordPress
      • Φύλλο εξαπάτησης Bootstrap
      • Google Analyticsin kaatumiskurssi digitaalisille markkinoijille
      • Com acceptar els pagaments de Bitcoin amb WordPress
      • FrontPoint Security Review
      • 10+ Best Gaming WordPress Themes für 2020
      • Sådan overføres dit websted fra FatCow til InMotion
      • Verbessern Sie die Leistung Ihrer WordPress-Site mit Hummingbird
      • Creeu formularis avançats de franc amb el complement de WordPress Visual Builder Builder
      • Beaver Builder WordPress Plugin Handbuch & Review
      • Χρήση ασφάλειας SSL στο WebHostingHub Hosting
      • Proč jsou ověřené recenze důležité a jak je přidat do WooCommerce
      • Yoast SEO for WordPress的10个最重要的功能
      • Най-добрите мързеливи приставки за WordPres
      • Как да стартирате множество WordPress сайтове от едно табло
      • 30+ Best News & Magazine Style Themes für WordPress
      • 14 най-добрите приставки, добавки и разширения на Гутенберг
      • Výměna iThemes: Recenze zásuvného modulu pro elektronické obchodování
      • Základy marketingu sociálních médií pro váš web WordPress
      • Cart66 Cloud WordPress Plugin Review
      • Αναθεώρηση HostGator
      • 15 най-добри теми за помощ в WordPress за вашия бизнес
      • Inicia sessió automàtica d’administrador de WordPress a PHP
      • 6 lokalizačních hacků pro zvýšení provozu na WordPressu
      • Revue de l’hébergement Web Heart Inetrnet UK
      • Το BlueHost προσφέρει ένα εργαλείο δημιουργίας ιστότοπων;
      • 10+ nejlepších otázek a odpovědí pro WordPress 2020
      • Nejlepší služby údržby WordPress na webu
      • ARForms Review: Výkonný, profesionální a snadný WordPress Form Builder
      • Venedor – Examen approfondi du thème WordPress + WooCommerce
      • Com personalitzar WooCommerce per als vostres clients més valorats
      • 80+ beste WooCommerce-Erweiterungen und Addons
      • 12+ най-добрите анти-спам приставки за WordPress 2020
      • Social Media Marketing-Grundlagen für Ihre WordPress-Website
      • Kan jeg betale inMotion med Paypal?
      • 10 приказки за архивиране на WordPress, които могат да убият вашия сайт
      • Pingbacky a zpětné odkazy WordPress: Ultimate A – Z Guide
      • 共享与云托管–您应该选择哪个?
      • Vendes, cupons i ofertes de WordPress Black Friday i Cyber ​​Monday
      • emaze ülevaade – emaze veebiesitlustehnoloogia maksimaalne ärakasutamine
      • 为什么和如何在使用WordPress退休后创建博客
      • Com utilitzar BuddyPress per crear una xarxa social amb WordPress
      • 只需6个简单的步骤即可增加您WordPress网站的访问量
      • Как да увеличите времето, което посетителите прекарват на вашия уебсайт WordPress
      • Tipy pro snížení výkonu webu WordPress pro lepší výkon
      • Nejlepší podcastové pluginy a služby pro WordPress
      • Как да експортирате и импортирате блокове Гутенберг в WordPress
      • Jak migrovat na WordPress z libovolného webu nebo CMS
      • 15+ най-добри теми за архитектура на интериорен дизайн за WordPress
      • Checkliste für den Start der WordPress-Website
      • Въведение в HTTP / 2 за WordPress
      • Comprant temes de WordPress The Smart Way
      • Zehn mögliche Gründe, warum Besucher Ihre Website verlassen
      • 场外活动以发展您的WordPress网站
      • So erstellen Sie eine Überprüfungswebsite mit WordPress, 4 Schlüsselelemente
      • Как да изпратите клиентски фактури чрез WordPress
      • 20+ nejlepších témat blogů WordPress pro osobní a externí blogování
      • 5 Gründe, warum WordPress-Benutzer zu Facebook-Kommentaren wechseln sollten
      • 30+ beste Social Media Plugins für WordPress im Jahr 2020
      • Οδηγός φιλοξενίας Ιστού για αρχάριους
      • Αναθεώρηση φιλοξενίας Webfusion
      • Kas BlueHost pakub veebisaitide koostajat?
      • Jak vytvořit a přidat váš soubor Sitemap WordPress
      • 为什么Nginx是WordPress托管的最佳朋友
      • Kuidas kasutada Gutenbergi (WordPressi redigeerija)
      • Hostingtyper – Forskellen mellem delt VPS og dedikeret webhosting
      • Mobile-First-Indizierung für WordPress – Was es ist und wie man sich darauf vorbereitet
      • Как да подобрите структурата и препратките към вашия сайт в WordPress
      • Jak prodávat své produkty pomocí WordPress a WooCommerce
      • Com executar diversos llocs de WordPress des d’un quadre de comandament únic
      • 2020年最佳WordPress团队展示插件
      • Jak vytvořit blogový příspěvek WordPress, od nápadu k publikování
      • So fügen Sie Ihrer WordPress-Site soziale Anmeldungen hinzu
      • 45 fantàstics blocs de WordPress que heu de seguir
      • 您为什么应该使用WordPress创建博客的十大理由
      • Дилемата между „Доста” и удобна за потребителя: Как да изберете перфектната тема за WordPress
      • Препроектиране на вашия уебсайт WordPress, за да добавите лично докосване (The Sequel)
      • Beste .htaccess-Snippets zur Verbesserung der WordPress-Sicherheit
      • En detaljeret gennemgang af Nice Hotel – WordPress Theme
      • Hinzufügen einer Zwei-Faktor-Authentifizierung für WordPress
      • Ръководство за документация и употреба на безплатна тема за WPExplorer
      • Jak optimalizovat databázi WordPress
      • Verkon saavutettavuuden tarkistuslista
      • Десет възможни причини защо посетителите напускат уебсайта Ви
      • Visual Web Technologies -katsaus
      • 10 millors filtres de profanitat de WordPress i complements de bloqueig de correu brossa
      • Μπορώ να μεταφέρω τον ιστότοπό μου στο InMotion;
      • Мониторинг на време и време на престой в WordPress
      • Flywheel Review: Hosting gestionat per WordPress
      • Com allotjar un podcast amb WordPress mitjançant PowerPress
      • 如何自定义您的WordPress管理员用户界面
      • 如何使用WordPress(和总主题)构建在线投资组合
      • 9 millors cursos de WordPress per a principiants
      • StartLogic κριτική
      • Er InMotion kompatibel med Mac?
      • 如何建立自由职业者,WordPress的简易指南
      • 如何保护您的WordPress管理区域

      Follow us

      • facebook
      • twitter
      • dribbble

      ↑

      • Home
      • Уроци
      • Сигурност
      • Новини и общност
      • Отзиви