Coderen Elementaire webpagina-elementen met Bootstrap - dummies

< Naast pure lay-outs kan Bootstrap ook webpagina-componenten maken die op bijna elke website worden gevonden. Het idee hier is hetzelfde als bij het werken met lay-outs - in plaats van het wiel telkens opnieuw te maken door uw eigen knop of werkbalk te ontwerpen, zou het beter zijn om vooraf gebouwde code te gebruiken, die al in meerdere browsers en apparaten is getest.

De volgende voorbeelden laten zien hoe u snel algemene webonderdelen kunt maken.

Knoppen ontwerpen

Knoppen vormen een basiselement op veel webpagina's, maar kunnen meestal moeilijk zijn in te stellen en te stijlen. Zoals hier te zien, kunnen knoppen verschillende soorten en maten hebben.

Bootstrap-code voor het maken van knoppen

Kenmerk

Class Prefix	Beschrijving	Knoptype
btn-defaultbtn-primarybtn-successbtn-danger	Standaard knoptype met hovereffect	Blauwe knop met zweefeffect Groene knop met zweefeffect Rode knop met zweefeffect Knoopsgrootte
btn-lgbtn-defaultbtn-sm	Grote knop grootte	Standaardknopgrootte Kleine knopgrootte Om een ​​knop te maken, schrijft u de volgende HTML:

Begin met de

1. knop HTML-element. In de opening << knop>
2. tag include type = "button" . Neem het kenmerk class op met de kenmerkwaarde btn
3. class en voeg extra voorvoegsels toe op basis van het gewenste effect. Als u aanvullende stijlen wilt toevoegen, gaat u door met het toevoegen van de -klasse
4. -voorvoegnaam in het kenmerk class van de HTML-code. De volgende code combineert zowel het knoptype als de knopgrootte:

Grote primaire knop

Grote standaardknop

Standaardsuccesknop

Standaard standaardknop

Kleine gevaarsknop

Kleine standaardknop

Bootstrap-knoptypen en -maten.

Bekijk extra knoptype, knopgrootte en andere knopopties.

Navigeren met werkbalken

webpagina's met meerdere pagina's of weergaven hebben meestal een of meer werkbalken om gebruikers met navigatie te helpen. Hier zijn enkele werkbalkopties.

Bootstrap-code voor het maken van navigatiebalken

Kenmerk

Class Prefix

Beschrijving	Werkbalktype	nav-tabs
nav-pills	Navigatiewerkbalk met tabbladen Pil, of werkbalk met navigatie met vaste knoppen	Knopafbeelding werkbalk vervolgkeuzelijst
vervolgkeuzelijst caret	Knop of tabblad als vervolgkeuzemenu Pijl-omlaag vervolgkeuzepictogram	Vervolgkeuzelijst menu-items Om een ​​werkbalk voor navigatie met een pilletje of een effen knop te maken, schrijft u de volgende HTML: Begin een ongeordende lijst met het element

ul

1. . Voeg in de opening -tag
2. class = "nav nav-pills"
   toe. Maak knoppen met de tag . Voeg
   • class = "active"
   • in één opening -tag toe om aan te geven welk tabblad op de hoofdwerkbalk visueel moet worden gemarkeerd als de muis over de knop zweeft. Om een ​​vervolgkeuzelijst te maken, nestelt u een ongeordende lijst. Zie de code naast "Meer" met klassenvoorvoegsels
   • "dropdown"
   • , "caret" en "vervolgkeuzemenu" . U kunt een koppeling maken naar andere webpagina's in uw vervolgkeuzemenu met behulp van de tag .

     De volgende code maakt een werkbalk met Bootstrap: Tijdlijn

Over

• Foto's
• Vrienden
• Meer
• Plaatsen

• Sport

  • Muziek
  • Bootstrap-werkbalk met vervolgkeuzemenu's.
  • De

dropdown-toggle

-klasse en het data-toggle = "dropdown" -attribuut en de waarde werken samen om vervolgkeuzemenu's toe te voegen aan elementen zoals koppelingen. Bekijk extra werkbalkopties. Pictogrammen toevoegen Pictogrammen worden vaak gebruikt met knoppen om een ​​bepaald type actie over te brengen. Uw e-mailprogramma gebruikt bijvoorbeeld waarschijnlijk een knop met een prullenbakpictogram om e-mails te verwijderen. Pictogrammen communiceren snel een voorgestelde actie aan gebruikers zonder veel uitleg.

Deze pictogrammen worden

glyphs, genoemd en Glyph Icons biedt de glyphs die worden gebruikt in Bootstrap. Bootstrap ondersteunt meer dan 200 glyphs, die u kunt toevoegen aan knoppen of werkbalken met behulp van de tag. In de volgende voorbeeldcode worden drie knoppen gemaakt met een ster, paperclip en prullenbakglyph.

Star Koppel

Trash

Bootstrap-knoppen met pictogrammen.

Controleer hier voor de namen van alle Bootstrap-glyphs.