Hvordan du koder grunnleggende websideelementer med Bootstrap - dummies

< I tillegg til rene layouter kan Bootstrap også lage nettsidekomponenter som finnes på nesten alle nettsteder. Ideen her er den samme som når du jobber med layouter - i stedet for å gjenopprette hjulet hver gang ved å designe din egen knapp eller verktøylinje, ville det være bedre å bruke forhåndsbygget kode som allerede er testet på flere nettlesere og enheter.

Følgende eksempler viser hvordan du raskt lager felles webkomponenter.

Designe knapper

Knapper er et grunnleggende element på mange nettsider, men det kan vanligvis være vanskelig å sette opp og stil. Som vist her, kan knappene ha forskjellige typer og størrelser.

Bootstrap-kode for å lage knapper

Attributt

Klasseprøfiks	Beskrivelse	Knapptype
btn-defaultbtn-primarybtn-suksessfare	Standardknappstype med svevreffekt	Blå knapp med svingeffekt Grønn knapp med svingeffekt Rød knapp med svingeffekt Knappstørrelse
btn-lgbtn-defaultbtn-sm	Stor knapp størrelse	Standard knappestørrelse Liten knappestørrelse For å opprette en knapp, skriv følgende HTML:

Begynn med

1. knappen HTML-element. I åpningen << -knappen>
2. -koden er type = "knapp" . Inkluder klassetributtet med klassenattributtverdien btn
3. , og legg til flere klasseprefikser basert på effekten du vil ha. For å legge til flere stiler, fortsett å legge til prefiksnavnet klasse
4. i HTML klasse attributtet. Følgende kode kombinerer både knappetype og knappestørrelse:

Stor primærknapp

Stor standardknapp

Standard suksessknapp

Standard standard knapp

Liten fareknapp

Liten standard knapp

Bootstrap knappetyper og -størrelser.

Sjekk ytterligere knappetype, knappestørrelse og andre knappalternativer.

Navigering med verktøylinjer

nettsider med flere sider eller visninger har vanligvis en eller flere verktøylinjer for å hjelpe brukere med navigering. Her er noen verktøylinjealternativer.

Bootstrap-kode for å opprette navigeringsverktøylinjer

Attributt

Klasseprøfiks

Beskrivelse	Verktøylinjetype	nav-tabs
nav-piller	Navigeringsverktøylinje Pill, eller verktøylinjen for fast knappknapp	Verktøylinjeknapptype rullegardinmeny
rullegardinmeny	Knapp eller kategorien som rullegardinmeny Nedtrekksmenyikonet	Drop-down menyelementer For å opprette en piller eller en solid knappnavigasjonsverktøylinje, skriv følgende HTML: Start en uordnet liste ved hjelp av elementet

ul

1. . I åpningen -koden, inkluderer
2. class = "nav nav-pills"
   . Lag knapper med -taggen. Inkluder
   • class = "active"
   • i en åpning tag for å angi hvilken fane på hovedverktøylinjen skal vises som visuelt uthevet når musen svinger over knappen. For å lage en rullegardinmeny, nest en uordnet liste. Se koden ved siden av "Mer" med klassepremier
   • "rullegardin"
   • , "caret" og "rullegardinmeny" . Du kan koble til andre websider i rullegardinmenyen ved hjelp av -taggen.

     Følgende kode oppretter en verktøylinje ved hjelp av Bootstrap: Tidslinje

Om

• Bilder
• Venner
• Mer
• Steder

• Sport

  • Musikk
  • Verktøylinje med rullegardinmenyer.
  • Klassifiseringen

dropdown-toggle

og data-toggle = "dropdown" , og verdien fungerer sammen for å legge til rullegardinmenyer til elementer som lenker. Sjekk ut flere verktøylinjealternativer. Legge til ikoner Ikoner brukes ofte med knapper for å formidle noen form for handling. For eksempel bruker e-postprogrammet ditt sannsynligvis en knapp med et søppelikon for å slette e-postmeldinger. Ikoner kommuniserer raskt en foreslått handling til brukere uten mye forklaring.

Disse ikonene kalles

glyphs, og Glyph Icons gir glyphs brukt i Bootstrap. Bootstrap støtter mer enn 200 glyphs, som du kan legge til knapper eller verktøylinjer med -taggen. Følgende eksempelkode lager tre knapper med en stjerne, paperclip og papirkurven kan glide.

Stjerne Vedlegg

Papirkurv

Bootstrap-knapper med ikoner.

Sjekk her for navnene på alle Bootstrap-glyphene.