Bootstrap 4 er en populær ramme for front-end website-udvikling.
Primært er det et CSS-mobil-første design og inkluderer både CSS- og JavaScript-skabeloner til sådanne ting som former, knapper, navigation, typografi, dropdowns, popovers, modaler og karrusler sammen med andre interfaceelementer. Men forkert ikke: Bootstrap tilbyder også masser af plads til tilpasning, og du kan bruge det til at kode enhver type websted.
Dette er den grundlæggende Bootstrap-pakke, som du bliver nødt til Hent. CSS er et stilarksprog til statisk information.
Bootstrap.js
Et JavaScript / jQuery-bibliotek er det, der tænder for visse komponenter i Bootstrap, såsom animation, rulle og interaktivitet..
Glyphicons
Glyffer er elementære symboler med typografi, såsom det engelske pundsymbol (£). Bootstrap har en enorm liste over indlejrede glyphikoner, der er gratis tilgængelige.
Bootstrap kildekodeelementer
Download af Bootstrap-kildekode inkluderer de forudkompilerede CSS-, JavaScript- og font-aktiver, sammen med kilde Less, JavaScript og dokumentation.
mindre/ – et forarbejderstilark til CSS, der fjerner gentagne kodningsopgaver
sass / – en nyere version af forbehandleren, der er mere populær
js / – henviser blot til kildekoden JavaScript, som gør det muligt for Bootstrap-komponenter at arbejde
skrifttyper / – dette er ikonskrifttyper, der følger med download
dist / – en mappe, der indeholder forudkompilerede filer til drop-in brug i webstedsudvikling
Bemærk: Bootstrap kræver også jQuery-installation til Bootstraps JavaScript-plugins. jQuery er en funktionsrig komponent i JavaScript-biblioteket, og det nedvikler masser af JavaScript-kode og pakker dem ind i handlinger, du kan udføre med en enkelt linje.
Underretninger er beskeder til brugere, når noget er galt. Hvis en bruger f.eks. Indtaster en forkert e-mail-adresse eller kreditkortnummer, modtager de en fejlmeddelelse, der beder dem om at foretage rettelser.
.alarm-primær
Du kan oprette farverige alarmer til alle tekster. Den primære alarm (vigtigere besked) er i lyseblå farve.
Primær alarm
.alarm-sekundær
Tilføj en sekundær alarm (mindre vigtig besked) i lysegrå farve.
Jeg er en sekundær alarm
.alarm-succes
Dette vil advare en bruger om, at deres handling har været vellykket.
Advarsel om succes!
.alarm-advarsel
Dette vil sende en besked om kommende handling.
Advarsel! Advarsel!
.alarm-fare
En farevarsel ligner en advarselsalarm, men ved mere negative handlinger (f.eks. At blive låst ud efter for mange adgangskodefejl).
Du er i alvorlig fare, min ven!
.alarm-link
Så du vil tilføje en ny besked og et link til denne meddelelse i den originale alarm? Du kan integrere denne meddelelse og i samme farve.
Succes! Du skal læse denne seje besked.
.alarm-afviselig
Det giver en mulighed for at lukke alarmen efter at have læst den.
×Succes! Du gjorde det godt.
.alarm-overskrift
Føj en hurtig overskrift til din alarm. (f.eks. "leveringsadresse" eller "faktureringsadresse"). Det kan relateres til en hel side eller bare et stykke indhold på denne side.
.alarm-lys og .alarm-mørke
Ændrer alarmstil til en i enten en lys eller mørkegrå farve.
Jeg er lys opmærksom
Og jeg er den mørke (side) alarm!
Badges
Brug badges til at vise ekstra information ved siden af en kategori, en knap eller andre elementer. Du kan oprette og style dem med andre kontekstelementer (f.eks. Badge-advarsel). Badges skaleres også, så de svarer til størrelsen på det overordnede element (f.eks. Overskrifter). Til sidst kan du bruge badges som en del af knapper eller links til at give tællere.
Eksempel: Overskrifter
Antag, at du har et antal overskrifter, og du tilføjer en badge. Denne badge justeres i størrelse, så den passer til overskriften.
Eksempel på overskrift Ny
Eksempel på overskrift Ny
.badge-pille
Brug denne kommando til at ændre formen på dine badges og gøre dem mere afrundede.
Lys
.badge-primær + .badge-sekundær
Det kan være nødvendigt at tilføje en badge til primære (vigtigere) og sekundære (mindre vigtige) meddelelser.
PrimærSekundær
.badge-transparent
Antag, at du vil gøre en knap gennemsigtig, så den skiller sig ud fra resten. Med Bootcamp 4 behøver du ikke bruge in-line styling. Brug i stedet følgende kommando:
.badge-advarsel, .badge-succes, .badge-info, eller .badge-fare
Tilføjer et badge til en advarsel, succes, info eller farevarsel.
AdvarselSuccesFareInfo
Opret handlingsmærke-mærker med sveve- og fokusstater
Når brugere flytter deres markører til en knap, men endnu ikke har aktiveret den, kan du give svæve- og fokuselementer for at tilskynde til handling.
For at gøre dette skal du bruge de kontekstuelle .badge- * klasser på en element.
Her er et par eksempler:
Primær Sekundær Succes Fare Advarsel
.brødkrummer
Brødkrummer er navigationskomponenter, der hjælper brugere med at bevæge sig fra side til side uden at gå tabt og give dem måde at pedalere tilbage til en forrige side.
Hjem
Hjem
Bibliotek
Hjem
Bibliotek
Data
.knapper
Som navnet antyder, giver knappen .knap dig mulighed for at oprette og style… en knap.
.knap-primær + .knap-sekundær
En primær knap bruges ofte til en brugerhandling; en sekundær knap kan derefter bruges til at lukke ud.
Design dine knapper vha. De standardforuddefinerede stylingindstillinger:
.btn-skitse
Vælg en knapkontur efter disse kodestykker:
.btn-lg + .btn-sm
Skift størrelsen på dine knapper.
.btn-blok
Gruppér dine knapper i en blok. Alle grupperede knapper spænder over en forældres fulde bredde.
.aktiv
Som standard vises alle knapper, når de er trykket på - med en mørk kant, mørkere baggrund og indsat skygge - når de er aktive.
Bemærk: Du behøver ikke tilføje en klasse til
Men hvis du af en eller anden grund har brug for at tvinge det samme aktive look, skal du bruge følgende kodestykker:
Primært link
Bemærk: Du kan også tilføje den deaktiverede booleske attribut til en vilkårlig knap for at få den til at se inaktiv ud.
Knapgruppe
Brug dette element til at oprette en gruppe af knapper i lignende størrelse uden at kode hver for sig.
.btn-gruppe
.btn-gruppe-lodret
Stil en lodret gruppe af knapper:
.btn-gruppe (Indskudt)
Du kan også oprette indlejrede knapper med rullemenuer.
Dropdown-link Dropdown-link
.Btn-værktøjslinje
Arranger knappegrupper i en værktøjslinje for at fremstille mere komplekse komponenter. Du kan anvende forskellige værktøjsklasser til yderligere styling.
.btn-gruppe-toggle
Installere Bootstrap Skift plugin for at ændre afkrydsningsfelter til skift. Du kan derefter tilføje data-toggle = ”knapper” til en knappegruppe med ændrede knapper for at aktivere deres skifteadfærd via JavaScrip. Brug derefter .btn-gruppe-toggle at style forskellige input på dine knapper.
Kort
Kortene er fleksible containere med muligheder for overskrifter / sidefødder, farver og displayindstillinger med mere. De erstattede flere tidligere komponenter (paneler, brønde og miniaturer) fra Bootstrap 3.
.kort-krop
Hovedelementet på kortet. Brug det til at tilføje et polstret afsnit på dit kort.
Din fantastiske tekst
.kort-titel
Kode en titel til dit kort. Føj dette til en tag.
Stor titel
.kort-undertekster
Du kan også tilføje undertekster til hvert kort for en vis ekstra fancy.
Fancy kort undertekst
.kort-link
Integrer et link inde i dit kort. Føj denne klasse til en tag.
Link til noget sjovt
.kort-tekst
Føj nogle ord til dit kort. Så mange eller så få, som du vil.
Roser er røde, violer er blå, Jeg lærer Bootstrap, Hvad med dig?
.kort-img-top
Du kan også vedlægge et billede på dit kort. Dette uddrag tilføjer et toppen af det.
Hvilket episk billede!
.kort-img-bund
Eller du kan få vist billedet som bunden af kortet. Dit kald.
Se på det billede!
.kort-img-overlay
Brug et billede som baggrund og overlejre alle tekster.
Jeg er tekst, der har et baggrundsbillede!
.kort-header
Placer en brugerdefineret header øverst på dit kort. Det vises over alle titler og undertekster.
Nogle store overskrifter!
.kort-footer
Du kan også kode en sidefod til dit kort for at kommunikere nogle ekstra oplysninger. Det vil gå lige efter .kort-krop.
Noget mere kortindhold
.card-gruppe
Leg rundt med kortlayout og opbyg en gruppe kort. En gruppe vil fungere som et enkelt, knyttet element, hvor hvert kort har samme bredde og højde. Du kan også ansøge display: flex; at forbedre størrelsen.
Bemærk: Gruppekortlayouter reagerer ikke!
Kort nummer et
Jeg er det første kort i gruppen, der viser nogle seje oplysninger.
Kort nummer to
Jeg er det midterste kort i gruppen og sandsynligvis tilbyder jeg den bedste deal
Kort tre
Jeg er det tredje kort, der prøver at være så cool som det første.
.card-søjler
Du kan organisere dine kort i murlignende kolonner. Dette giver dig mulighed for at opbygge nogle kreative mønstre ved hjælp af kun CSS.
Bemærk: Hvis dine kort bryder på tværs af kolonner, skal du indstille dem til display: inline-block.
.kort-dæk
Saml et sæt ikke-vedhæftede kort med lige højde og bredde.
Nogle titler
Dine tekster
Et andet kort
Endnu flere tekster, som nogen bliver nødt til at skrive.
Jeg er også et kort!
Nogle ord at tilføje og arrangere
Karrusel
Konfigurer et lysbilledshow til at gå gennem en række lysbilleder, tekst eller billeder. Bygget med CSS 3D og nogle JS. Du kan tilføje billeder, tekst eller brugerdefineret markering samt tilføje eller fjerne forrige / næste kontroller.
Karruselslide - Oprettelse af et enkelt lysbillede
TidligereNæste
.karrusel-fade
Tilføj denne cool fade-out effekt for et dias før den næste.
TidligereNæste
.karrusel-indikatorer
Tilføj kontrol og support til næste / forrige og indikatorer som diasnummer.
TidligereNæste
.karrusel-billedtekst
Tilføj en funky billedtekst til hver eller flere dias.
Cool diasetiket
Jeg er så stolt af mig selv for at kode dette dias.
Endnu køligere etiket
Jepp, rocking helt denne kodning ting.
TidligereNæste
Skjul & akkordeon
Collapse er et JavaScript-plugin, du kan bruge til at skjule indhold under menuen “kollaps”. Det sammenklappede element vil animere dets højde fra nul til dets normale værdi, når det udløses og vice versa.
.falde sammen
Skjul dit indhold.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad blæksprutte. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
.sammenbrud show
Vis det kollapsede indhold.
Nogle tekster har du besluttet at skjule
.collapse.options
Aktivér indhold som et sammenklappeligt element; accepterer valgfri objekter.
En udvidelse af sammenfoldelig opførsel til kort. Du kan bruge denne funktion til at oprette en harmonika.
Bemærk: Du skal bruge .accordion som indpakning
Eksempel på akkordeonuddrag med 2 gruppeelementer
Sammenfoldelig gruppeelement nr. 1
Her er den første ting, jeg vil skjule på dette kort.
Sammenfoldelig gruppeelement nr. 2
Og her er nogle andre tekster, som jeg styler med harmonika.
rullemenuerne
Brug dette plugin til at oprette kontekstuelle overlays til visning af lister over brugerlink. Det er en praktisk mulighed for at oprette menuer. Dropdowns er bygget gennem Popper.js, del af et tredjepartsbibliotek. Sørg derfor for, at du inkluderer popper.min.js før Bootstraps egen JavaScript. Eller du kan bare bruge bootstrap.bundle.min.js/ bootstrap.bundle.js. Begge indeholder Popper.js.
Tip til hurtig styling: alle dropdowns i Bootstrap skiftes ved at klikke og ikke holde musen hen.
.dropdown
Tilføj en enkel dropdown-menu med knapper.
Handling En anden handling
.dropdown-toggle-split
Opret dropdowns med splitknapper med passende afstand omkring dropdown-caret.
Handling En anden handling
.dropup
Vidste du, at du kan style en menu, der kommer frem i stedet for ned? Nu gør du det!
.dropright
Angiv menuen til højre for knappen.
.dropleft
... Og du kan også vise menuen til venstre.
.dropdown-post-tekst
Føj ikke-interaktive dropdown-poster til din menu.
Simpel tekst Klikbar handling En anden handling Uanset hvad du har brug for
.dropdown-element deaktiveret
Du kan også vælge at deaktivere ethvert menupunkt (er).
Aktivt link Deaktiveret link Et link mere
.dropdown-divider
Tilføj en simpel skillelinje mellem menuelementer for at henlede opmærksomheden.
.dropdown-menu-ret
Juster hele menuen til højre.
Forms
Du kan nemt bygge attraktive former og kode tilpassede stilarter, layout og yderligere elementer. I Bootstrap 4 modtog formularer også nogle nye inputkontroller, som f.eks. Valg af numre, e-mail-verifikation og andre sammen med en masse nye responsive klasser.
Eksempel på .formular-gruppe
.formular-kontrol
Brug denne klasse til at style alle tekstuelle formkontroller som brugerinput, titler osv.
.formular-kontrol-fil
Tilføj denne klasse, når du har brug for at give brugeren en mulighed for at uploade en fil til formularen.
.formular-kontrol-lg og .formular-kontrol-sm
Opret et visuelt hierarki i din form ved at tilføje .formular-kontrol-lg at skabe større inputområder og .formular-kontrol-sm at lave mindre.
.formular-kontrol-klartekst
Brug denne klasse til korrekt visning elementer i din form. Det erstatter standardformularfeltstyling med almindelig tekst, mens den rigtige margin og polstring bevares.
.formular-kontrol-range
Indstil vandret rullbare rækkeindgange til din form.
.formular-kontrol
Føj afkrydsningsfelter til din form.
Bemærk: Du kan også tilføje radioknapper i stedet for afkrydsningsfelter ved hjælp af formular-check-inputtype = "radio".
.formular-check-inline
Opret en vandret liste med afkrydsningsfelter.
.Læs kun boolsk attribut
Angiv, at en bestemt form for input er skrivebeskyttet. Dette vil forhindre ændring af inputens værdi.
Tilpassede formularer
Bootstrap 4 har flere tilpassede formelementer, der erstatter browserens standardindstillinger.
.custom-afkrydsningsfeltet
Som navnet antyder, kan du oprette et brugerdefineret afkrydsningsfelt til din form.
.custom-radio
... og du kan også style en brugerdefineret radio!
.custom-switch
Til sidst kan du også oprette en stilfuld brugerdefineret switch.
.custom-select
Brug denne kommando til at tilføje en brugerdefineret valgmenu.
.custom-fil
Tilpas upload af brugerfil. For at gøre det, tilføj .custom-fil klasse rundt om input med type = "file". Tilføj derefter .custom-fil-input til det.
.custom-range
Design en tilpasset rækkevidde-menu.
Input Group
Inputgruppeelementet giver dig mulighed for at oprette mere interaktive og attraktive formkontroller. Brug det til at tilføje tekster, ikoner eller knapper på begge sider af inputfeltet.
.input.group - Grundlæggende eksempel
For-og efternavn
.input-gruppe-prepend
Angiv yderligere tekster foran input.
.input-gruppe-append
... Eller liste dem bag input.
.input-gruppe-tekst
Brug denne klasse til at style specificerede tekster.
.00
Jumbotron
En fleksibel komponent, der hjælper dig med at oprette store bokse til at kommandere mere opmærksomhed på featured indhold eller meddelelse. I Bootstrap ser jumbotron ud som en grå boks med afrundede hjørner, der automatisk forstørrer alle skriftstørrelser og tekster inde i det.
Du kan tilføje en hvilken som helst HTML og andre Bootstrap-klasser i en jumbotron.
.jumbotron
Hej, awesome dig!
Dette er en simpel heltenhed, der viser, at enhver kan være en rigtig helt!.
Brug hjælpeklasser til typografi og afstand
Klar til handling
.jumbotron-væske
Ændrer let jumbotron-udseendet og gør det bredside bredt uden afrundede hjørner.
Flydende jumbotron
Jeg tager hele det vandrette rum på siden.
Liste gruppe
Brug listegrupper til at få vist en række indhold med masser af indstillinger for styling og layout.
.liste-gruppe - Eksempel
Opret en grundlæggende listegruppe med flere elementer.
Mælk
Te
Karameller
.liste-gruppe-element aktiv
Tilføj .aktiv klasse for at fremhæve det aktuelle aktive valg på listen.
jeg vil have det her
Ikke dette
Eller dette
.liste-gruppe-element deaktiveret
Vis, at en af listepunkterne ikke er tilgængelig / deaktiveret. Nogle aktive elementer (f.eks. Links) kræver brugerdefineret JavaScript oven på .disibel for at blive fuldstændig inaktiv.
Dette produkt er ikke på lager
Men vi har dette!
Og også denne seje ting
.liste-gruppe-post-handling
Føj mere interaktivitet til din liste ved at tilføje stylingeffekter (deaktiveret, hover, aktiv osv.) Til individuelle elementer.
Vores førsteklasses valg til dig! Nogle gode tilbud Også en mulighed Noget andet på listen Og denne er ikke tilgængelig
.liste-gruppe-flush
Skift udseendet på vores liste ved at fjerne rammer og afrundede hjørner. Alle genstande placeres kant-til-kant.
Chai Latte
Matcha Latte
Earl Grey
Vanilla Rooibos
Makker
.liste-gruppe-horisontal
Du kan også indstille din liste vandret snarere end lodret. Du kan desuden kode listegruppen for at blive vandret, startende ved et bestemt brudpunkts minbredde ved hjælp af .liste-gruppe-horizontal- {sm | md | lg | xl}.
Bemærk: Du kan ikke bruge horisontale listegrupper med flushlistegrupper på samme tid.
Anvend standardformater på individuelle listeposter.
Alle de farver, jeg har
Lyseblå
Lysegrå
Grøn
Rød
Gul
Teal
hvid
Grå
Medieobjekt
Bootstrap 4 giver dig mulighed for at opbygge komplekse, gentagne komponenter med tekster og nogle medier. Medieobjekter er et cool værktøj til at opbygge tweet-lignende elementer og fremhævede bokse. De er også latterligt lette at bruge, da de kun kræver to klasser.
.medier
Brug .medier indpakning og .medie-organ omkring indholdet for at oprette et enkelt medieobjekt. Her er en prøve til en overskrift.
Din overskrift
En nøglemeddelelse, du vil dele med verden!
.medie-organ
En klasse, der specificerer, hvad der ville være inde i dit objekt. Du kan kode forskellige justeringer for dit indhold. Standarden er øverst, men du kan justere i midten eller slutningen.
Top-justeret medie
Læs teksterne, der beskriver billedet ovenfor
Indlejrede medier
Du har også muligheden for at inkludere mere end et medieobjekt. Objekter indlejres ved at begynde ved venstre margen og tappe hvert nyt objekt ind.
Her er et uddrag til indlejring.
Medieoverskrift
Her går noget tekst.
En anden medieoverskrift
Nogle flere tekster, der forklarer hvad der foregår her.
Nav
.nav er en baseklasse, der hjælper dig med at opbygge alle mulige navigationskomponenter, selv med stiloverskridelser. Du har masser af muligheder for tilpasning.
.nav eksempel
Du kan ikke klikke på dette deaktiverede link
Klik på dette i stedet
.nav-elementer
En klasse til at specificere et nyt element i navigationsmenuen.
I stedet for at retfærdiggøre, kan du også tvinge dine menupunkter til at udfylde al den ledige plads ved hjælp af denne kommando. Alle emner har dog ikke den samme bredde.
Aktiv
Dette link er looooong
Kort link
Navbar
Navbar er en lydhør navigationshoved med masser af fleksibilitet og support til branding, formularer, links og mere.
NavBar - Grundlæggende navigationsoverskrifter øverst på siden
Min første navbar
Hjem (nuværende)
Link 1
Link deaktiveret
.navbar-mærke
Navbars leveres forudindrettet med support til nogle underkomponenter. Dette element får din tekst til at skille sig ud mere. Det var forud designet til at imødekomme et produkt eller virksomhedsnavn.
Dit firmanavn
.navbar-tekst
Brug denne klasse til at tilføje centrerede tekststrenge lodret og vandret afstand.
Jeg er en navbar-tekst med et inline-element
.navbar-udvide (-sml -mdl -lgl -xl)
Aktivér responsive sammenbrud.
Navbar
Hjem (nuværende)
Link
.navbar-toggler
Programmer forskellige navigationsskiftets adfærd (f.eks. Hold objekter aktive eller kollaps dem).
Navbar
Hjem (nuværende)
Link
.formular-inline
Placer en formular (f.eks. Søgebjælke) i nav-overskriften.
.collapse.navbar-kollaps
Gruppér og kollaps navneindhold efter et forældrebrudspunkt.
Navbar
Hjem (nuværende)
Link
.navbar fast top
Indstil en fast navbar som primær og i mørk farve.
Fast top
Bootstrap Modal (plugin)
Dette er et JavaScript-plugin, der bruges til at tilføje dialoger til et websted, såsom brugerunderretninger, brugerdefineret indhold og lightbox-popups.
Modaler består af HTML, CSS og JavaScript. Og du kan kun vise et modalvindue ad gangen, da Bootstrap-skabere betragter indlejrede modeller som en dårlig UX-praksis.
Modaleksempel
Giv det en titel
Tilføj noget modalt kropstekst her.
.modal-dialog-centreret
Du kan vælge at centrere alt indhold lodret.
Modal titel
Liste over nogle tekster.
.modal-dialog-rulle
Når du har brug for at pakke mere indhold ind i en modal (f.eks. En lang privatlivspolitik), kan du tilføje denne klasse for at få den til at rulle den uafhængigt af siden.
Modal titel
Dette er en superlange aftalevilkår og betingelser, som du accepterer uden at læse den faktisk.
.modal falme
Aktiveret falmning for indholdet.
Modal titel
Jeg skal i det mindste have noget her.
.modal-lg, .modal-sm, .modal-xl
Du kan også justere størrelserne på dine modaler.
Jeg er en stor modal!
Jeg er en lille og sød modal.
Jeg er en jumbo-størrelse modal!
Bemærk: Bootstrap tilbyder en demo af alle disse komponenter på Modal side. De er værd at se på.
Paginators
Hvis du kender HTML, er paginatorer ikke noget nyt for dig. Med Bootstrap har du flere muligheder for at style dem.
.paginering - grundlæggende paginationseksempel
«Tidligere
1
2
3
»Næste
.side-element deaktiveret
Du kan vælge at deaktivere et af pagineringselementerne eller flere.
Tidligere
1
2 (nuværende)
3
Næste
.sideelement aktiv
Aktiv angiver det aktuelle trin ved at fremhæve det med blåt.
Tidligere
1
2 (nuværende)
3
Næste
.sidetal-lg
Gør din pagination større og dristigere.
Tidligere
1
2
3
Næste
.sidetal-sm
Eller gør det petite og mindre synligt i størrelse.
Tidligere
1
2
3
Næste
popovers
Popover-plugin giver dig mulighed for at oprette en pop-up-boks med indhold og andre elementer, der aktiveres, hver gang en bruger klikker på elementet. Popovers ligner værktøjstip, men passer til mere indhold.
Ting at vide, inden du begynder
Du skal tilføje attributten, data-toggle = "popover" til et element for at oprette en popover.
Du skal bruge titelattributten til at specificere overskriftsteksten.
Brug data-indhold attribut for at specificere, hvilket indhold der skal vises i popover-kroppen.
Skift popover
Du skal bruge jQuery til at initialisere popovers - popover ().
popover
Her er koden, der giver mulighed for popovers på din side:
Placering af dine popovers - top, bund, venstre eller højre
Angiv en af de fire positioner til din popover.
Popover på toppen
Popover til højre
Popover på bunden
Popover til venstre
Oprettelse af en container-popover
Kod en tilpasset beholder, når du føler, at nogle stilarter på et overordnet element kan ødelægge dets udseende. Tilføjelse af en containerattribut vil "indpakke" popoverens HTML i det overordnede element.
Giv brugerne mulighed for at lukke en popover, når de klikker på elementet anden gang. Du kan arrangere, at popoveren afvises, når brugeren også klikker uden for elementet: Brug data-trigger = "fokus" attribut.
Som standard lukkes popoveren, når du klikker på elementet igen. Du kan dog bruge data-trigger = "fokus" attribut, der lukker popoveren, når du klikker uden for elementet:
Klik på mig
Fremskridt
Udvikle en brugerdefineret statuslinje, og tilføj yderligere stylingelementer, såsom animation og tekstetiketter, hvis du vil.
.fremskridt
Klassen til opsætning af en grundlæggende statuslinje. Det fungerer som en indpakning, der angiver den maksimale værdi af din statuslinje.
.fremskridt-bar
Brug denne kommando til at specificere den aktuelle fremgang.
.fremskridt-bar-stribet
Føj nogle striber til sektionen med statuslinjen.
.fremskridt-bar-animerede
Få nu disse striber i bevægelse, barbers polstil.
Tilføj flere fremskridtsbarer
Du kan samtidig tilføje flere søjler for at indikere fremskridt for forskellige elementer. Juster tildelingen for hver enkelt efter din smag.
Scrollspy
Et praktisk plugin, du kan bruge til at fremhæve nav-links eller elementer i listegrupper for at lade en bruger vide, hvor de i øjeblikket er på en side.
Eksempel på Basic Bootstrap Scrollspy
Punkt et Punkt to Ja, det er tre
Punkt et
Og noget indhold om det..
Punkt to
Og en anden forklaring.
Ja, det er tre
Hvem ville have gætt? :).
Lad os pakke dette ud lidt mere.
data-spion = "scroll" + data-target
Tilføj til for at aktivere scrollspy i topbar-navigation data-spion = "scroll" attribut til det element, du vil holde øje med. (i de fleste tilfælde er dit mål målet ).
Tildel data-target attribut til det overordnede element i .nav komponent, så nav-links er målrettet til fremhævning.
...
...
...
data-offset
Dette specificerer en vis placering af rullen og kan justeres. Standard er 10 pixels.
@fed
...
@mdo
...
en
...
to
...
tre
...
Opkald Scrollspy via JavaScript
Du har også flere metoder til at aktivere ScrollSpy ved hjælp af JavaScript. For at gøre det, tilføj følgende kommando i din CSS, efter position: relativ;
Når du tilføjer eller fjerner elementer fra DOM ... og forsøger at bruge scrollspy, bliver du nødt til at kalde opdateringsmetoden ved hjælp af den næste kommando:
.scrollspy ( 'disponere')
Brug denne metode til at fjerne elementets scrollspy.
activate.bs.scrollspy
Denne begivenhed affyres på rulleelementet, hver gang scrollspy aktiverer et nyt element.
$ ('[data-spy = "rulle"]'). on ('activ.bs.scrollspy', funktion () { // Lad os gøre det… })
Spinner
Brug dette plugin til at tilføje den animerede spinner. Spinners er kun bygget med HTML og CSS uden JS. Men ... du har muligvis brug for JavaScript til nogle stylingindstillinger f.eks. for at skifte synlighed. Du har også flere gode muligheder at vælge imellem.
En plugin, der giver dig mulighed for at tilføje "push-meddelelser" med Flexbox - meget let at placere og justere. Brug disse som et alternativ til alarmer.
.ristet brød - eksempel
bootstrap 11 minutter siden
Kudos, jeg er en skålbesked!
værktøjsvink
Værktøjstip er små tekstvinduer, der giver brugerne en vis yderligere kontekst på knappen eller et andet webstedselement. I Bootstrap 4 bruger værktøjstip Popper.js-biblioteket til positionering. Derfor skal du bruge dem for at bruge dem popper.min.js Før bootstrap.js eller brug bootstrap.bundle.min.js/bootstrap.bundle.js.
For de fleste komponenter, layouts og gittersystemer bruger Bootstrap følgende breakpoint-værdier:
Ekstra lille < 544px
Lille ≥ 544 pixels
Medium ≥ 768px
Stor ≥ 992 px
Ekstra stor ≥ 1200 px
Gitter og kolonner
Let at layout og justere indhold gennem Flexbox; helt lydhør. Du får et 12-søjlesystem, 5 niveauer som standard, foruddefinerede klasser og masser af variabler.
Indstillinger for netstørrelse
col-xs-: containerbredde - auto / ingen; kolonnebredde - auto.
Føj en mindre skriftstørrelse til typiske forkortelser.
At føre
Når du ønsker at lægge vægt på et bestemt afsnit af indhold, kan du gøre skrifttypen lidt større og endnu tyndere, så afsnittet skiller sig ud visuelt.
Dette er den information, du virkelig skal være opmærksom på!
Blokcitat
Hvis du indsætter et tilbud, der er lidt længe, vil denne klasse give dig mulighed for at slå det fra resten af teksten.
Noget sejt tilbud, som du har fundet.
Blockquote Footer
Tilføj kilden til et tilbud ved at tilføje sidefodselementet.
Lorem ipsum dolor sidder amet, consectetur adipiscing elit.
.tekst-break
Dette forhindrer superlange tekster i at bryde udseendet på dine andre designelementer.
.float-venstre - Floats vare tilbage - alle størrelser
Flyd tilbage til alle visningsstørrelser
Svæv tilbage på visningsporte i størrelse SM (lille) eller bredere
Svæv til venstre på visningsporte i størrelse MD (medium) eller bredere
Svæv tilbage på udsigtsstørrelser LG (store) eller bredere
Flyd tilbage til visningsporter størrelse XL (ekstra stor) eller bredere
.float højre - Floats vare højre - i alle størrelser
Flyd lige i alle udsigtsstørrelser
Flyd højre på udsigtsporte i størrelse SM (lille) eller bredere
Flyd højre på udsigtsporte MD (medium) eller bredere
Flyd højre på visningsstørrelser LG (store) eller bredere
Flyd højre på udsigtspor i størrelse XL (ekstra stor) eller bredere
.float-ingen - Fjerner float - alle størrelser
Flyd ikke på alle visningsstørrelser
Flyd ikke på udsigtsporte i størrelse SM (lille) eller bredere
Flyd ikke på udsigtsporte i størrelse MD (medium) eller bredere
Flyd ikke på udsigtsstørrelser LG (store) eller bredere
Flyd ikke på udsigtspor i størrelse XL (ekstra stor) eller bredere
.clearfix - Fjerner flydende fra overordnede element
...
Flex
Du kan nemt og hurtigt administrere dine layouts, justeringer, størrelser, navs, skærme, farver, justering og meget mere med dette enkelt Bootstrap-værktøj.
Flex - sm-lg-md-xl
Størrelse på alle dine elementer ved hjælp af forudbestemte størrelser og vær fuldt lydhør.
...
...
...
...
.flex-rækken og .flex-række-revers
Indstil vandret retning eller vend den tilbage for at starte fra den modsatte side.
Flekspost 1
Flekspost 2
Flekspost 3
Flekspost 1
Flekspost 2
Flekspost 3
.flex-søjle og .flex-søjle-revers
Indstil retningen på kolonnerne eller bagud for at indstille fra den modsatte retning.
Flekspost 1
Flekspost 2
Flekspost 3
Flekspost 1
Flekspost 2
Flekspost 3
.flex-fill
Dette værktøj tvinger alle elementer til at optage en lige bredde, mens de optager alt det tilgængelige vandrette rum.
Flex artikel
Flex artikel
Flex artikel
.flex-grow- *
En af flex-emnerne vil udfylde al den tilgængelige plads, mens den også sikrer, at andre også har minimalt nok plads.
Flex artikel
Flex artikel
Tredje flex-vare
.flex-stræk- *
Aktivér elementets evne til at skrumpe til den mest minimale størrelse for at udfylde den tilgængelige plads.
Flex artikel
Flex artikel
.flex-nowrap, .flex-wrap-revers og .flex-wrap
Brug disse klasser, når du vil have emner, der enten skal vikles til den næste linje eller til at passe på en enkelt linje (nurap), eller udføre omvendt indpakning. (Wrap-revers).
...
...
...
.flex justify-indhold
Tilføj denne klasse, når du vil retfærdiggøre tekst til højre eller venstre, og når du vil have denne begrundelse til at starte og slutte.
Flekspost 1
Flekspost 2
Flekspost 3
Flekspost 1
Flekspost 2
Flekspost 3
.flex justere genstande
Specificer, hvornår justeringen begynder, og hvornår den slutter for en liste over elementer.
Flekspost 1
Flekspost 2
Flekspost 3
Flekspost 1
Flekspost 2
Flekspost 3
.flex align-selv-start
Du kan også tilsidesætte en containers justering for et valgt element i denne container.
Justeret flex-vare
Justering
Hvordan og hvor vil du justere dit indhold, knapper osv. - højre, venstre, midterste?
.align-baseline
Justeret flex-vare
.align-top, .align-middle, .align-bottom: Placer knapper, hvor du vil.
baselinetopmidtenbund
.align-tekst-top, .align-tekst-bund: placer tekst, hvor du vil.
tekst-toptekst-bund
Grænser
Kanter tilføjer elegance til et sted. Brug dem til vægt eller æstetik.
