Hur man kodar grundläggande webbsidor med Bootstrap - dummies

< Förutom rena layouter kan Bootstrap också skapa webbsidakomponenter som finns på nästan alla webbplatser. Tanken här är densamma som när man arbetar med layouter - istället för att återskapa hjulet varje gång genom att designa din egen knapp eller verktygsfält, är det bättre att använda förbyggd kod, som redan har testats över flera webbläsare och enheter.

Följande exempel visar hur du snabbt skapar vanliga webbkomponenter.

Designa knappar

Knappar är ett grundläggande element på många webbsidor, men vanligtvis kan det vara svårt att konfigurera och utforma. Såsom visas här kan knappar ha olika typer och storlekar.

Bootstrap-kod för att skapa knappar

Attribut

Klassprefix	Beskrivning	Knapptyp
btn-defaultbtn-primarybtn-successbtn-danger	Standardknappstyp med svängareffekt	Blå knapp med svängareffekt Grön knapp med svängningseffekt Röd knapp med svängareffekt Knappstorlek
btn-lgbtn-defaultbtn-sm	Stor knapp storlek	Standard knappstorlek Liten knappstorlek För att skapa en knapp, skriv följande HTML:

Börja med

1. knappen HTML-element. I öppningen << -knappen>
2. -taggen ingår typ = "knapp" . Inkludera klassattributet med klassvärdet btn
3. , och lägg till ytterligare klassprefix baserat på önskad effekt. Om du vill lägga till ytterligare stilar fortsätter du att lägga till prefixnamnet klass
4. i attributet HTML klass . Följande kod kombinerar både knapptyp och knappstorlek:

Stor primär knapp

Stor standardknapp

Standard framgångsknapp

Standard standardknapp

Liten riskknapp

Liten standardknapp

Bootstrap-knapptyper och -storlekar.

Kolla in ytterligare knapptyp, knappstorlek och andra knappalternativ.

Navigering med verktygsfält

webbsidor med flera sidor eller visningar brukar ha en eller flera verktygsfält för att hjälpa användare med navigering. Här är några verktygsfält alternativ.

Bootstrap-kod för att skapa navigeringsverktygsfält

Attribut

Klassprefix

Beskrivning	Verktygsfältstyp	nav-flikar
nav-piller	Navigeringsverktygsfält Pill, eller verktygsfältet för verktygsfältet	Verktygsfältets knapptyp dropdown
dropdown-menyn	Knapp eller flik som rullgardinsmeny Nedrullningsmenyns ikon	Drop-down menyalternativ För att skapa ett verktygsfält för pil eller fast knapp, skriv följande HTML: Börja en oorderad lista med elementet

ul

1. . I öppningen -taggen, inkludera
2. class = "nav nav-pills"
   . Skapa knappar med taggen . Inkludera
   • class = "active"
   • i en öppning tagg för att ange vilken flik på huvudverktygsfältet ska visas som visuellt markerad när musen svävar över knappen. För att skapa en rullgardinsmeny, inhämta en oorderad lista. Se koden bredvid "Mer" med klassprefix
   • "dropdown"
   • , "caret" och "rullgardinsmenyn" . Du kan länka till andra webbsidor i din rullgardinsmeny genom att använda taggen .

     Följande kod skapar en verktygsfält som använder Bootstrap: Tidslinje

Om

• Foton
• Vänner
• Mer
• Platser

• Sport

  • Musik
  • Verktygsfält med startrem rullgardinsmenyer.
  • attributet

dropdown-toggle

och attributet data-toggle = "dropdown" fungerar tillsammans för att lägga till rullgardinsmenyer till element som länkar. Kolla in extra verktygsfält alternativ. Lägga till ikoner Ikoner används ofta med knappar som hjälper till att förmedla någon typ av åtgärd. Till exempel använder ditt e-postprogram sannolikt en knapp med papperskorgen för att radera e-postmeddelanden. Ikoner kommunicerar snabbt en föreslagen handling till användarna utan mycket förklaring.

Dessa ikoner heter

glyphs, och Glyph Icons ger de glyfer som används i Bootstrap. Bootstrap stöder mer än 200 glyfer, som du kan lägga till på knappar eller verktygsfält med taggen. Följande exempel kod skapar tre knappar med en stjärna, paperclip och papperskorgen kan glyph.

Star Bifoga

Trash

Bootstrap-knappar med ikoner.

Kolla här för namnen på alla Bootstrap-glyferna.