Sådan kodes grundlæggende websideelementer med Bootstrap - dummies

< Ud over rene layouts kan Bootstrap også oprette websider, der findes på næsten alle hjemmesider. Ideen her er den samme som ved arbejde med layouter - i stedet for at genskabe hjulet hver gang ved at designe din egen knap eller værktøjslinje, ville det være bedre at bruge forudbygget kode, som allerede er testet på tværs af flere browsere og enheder.

Følgende eksempler viser, hvordan du hurtigt opretter almindelige webkomponenter.

Designe knapper

Knapper er et grundlæggende element på mange websider, men det kan normalt være svært at oprette og style. Som vist her kan knapper have forskellige typer og størrelser.

Bootstrap-kode til oprettelse af knapper

Egenskab

Klassepræfiks	Beskrivelse	Knappen type
btn-defaultbtn-primarybtn-succesbtn-fare	Standardknaptype med svæveffekt	Blå knap med svæveffekt Grøn knap med svæveffekt Rød knap med svæveffekt Knapstørrelse
btn-lgbtn-defaultbtn-sm	Stor knap størrelse	Standardknapstørrelse Lille knapstørrelse For at oprette en knap skriv følgende HTML:

Begynd med

1. knappen HTML-element. I åbningen << knappen>
2. tag er type = "knap" . Inkluder klassetildelingen med klassenattributværdien btn
3. , og tilføj yderligere klassepræfikser baseret på den ønskede effekt. For at tilføje yderligere stilarter skal du fortsætte med at tilføje klasse
4. præfiksnavnet i attributten HTML klasse . Følgende kode kombinerer både knappetype og knapstørrelse:

Stor primærknap

Stor standardknap

Standard succesknap

Standard standardknap

Lille fareknap

Små standardknap

Bootstrap-knappetyper og -størrelser.

Tjek yderligere knappetype, knapstørrelse og andre knapper.

Navigering med værktøjslinjer

websider med flere sider eller visninger har normalt en eller flere værktøjslinjer for at hjælpe brugere med navigation. Her er nogle værktøjslinje muligheder.

Bootstrap-kode til oprettelse af navigeringsværktøjslinjer

Egenskab

Klassepræfiks

Beskrivelse	Værktøjslinjetype	nav-faner
nav-piller	Tabletnavigationsværktøjslinje Pille, eller værktøjslinjen til fast knapnavigation	Knappen Værktøjslinje knap dropdown
drop-down menu	Knap eller faneblad som drop-down menu Pil ned-pil-ikon	Drop-down menupunkter For at oprette en pille eller en solid knappe navigations værktøjslinje, skriv følgende HTML: Start en uordnet liste ved hjælp af elementet

ul

1. . I åbningen -mærket skal du inkludere
2. class = "nav nav-pills"
   . Opret knapper ved hjælp af taggen. Medtag
   • class = "active"
   • i en åbning tag for at angive hvilken fane på hovedværktøjslinjen der skal vises som visuelt fremhævet, når musen svæver over knappen. For at oprette en rullemenu, nest en uordnet liste. Se koden ved siden af ​​"Mere" med klasse præfiks
   • "dropdown"
   • , "caret" og "dropdown-menu" . Du kan linke til andre websider i din rullemenu ved hjælp af -taggen.

     Følgende kode opretter en værktøjslinje ved hjælp af Bootstrap: Tidslinje

Om

• Billeder
• Venner
• Mere
• Steder

• Sport

  • Musik
  • drop-down menuer.
  • Klassen

dropdown-toggle

og attributten data-toggle = "dropdown" arbejder sammen for at tilføje rullemenuer til elementer som links. Tjek ekstra værktøjslinje muligheder. Tilføjelse af ikoner Ikoner bruges ofte med knapper til at hjælpe med at formidle en eller anden form for handling. For eksempel bruger dit e-mail-program sandsynligvis en knap med et papirkurv-ikon for at slette e-mails. Ikoner fortæller hurtigt en foreslået handling til brugere uden meget forklaring.

Disse ikoner kaldes

glyphs, og Glyph Icons giver de glyphs, der bruges i Bootstrap. Bootstrap understøtter mere end 200 glyfer, som du kan tilføje til knapper eller værktøjslinjer ved hjælp af taggen. Følgende eksempelkode opretter tre knapper med en stjerne, paperclip og papirkurven kan glyph.

Stjerne Vedhæft

Papirkurven

Knapper med knapperne med ikoner.

Tjek her for navnene på alle Bootstrap-glyphs.