Introduktion til Bootstrap-komponenter

Oprindeligt kaldet Twitter Blueprint, blev dette udviklet af Mark Otto og Jacob Thronton på Twitter. Bootstrap er en gratis CSS-ramme, der giver respons på websiderne. Ved lydhørhed betyder det, at forskellige DOM-elementer ændrer størrelsen på sig selv med ændringen i skærmstørrelse uden at gå på kompromis med websidens elegance, da det ellers ville ske traditionelt med pixel eller procentvis størrelse af CSS-metoder.

Dette kaldes også som den 'mobile-first' CSS-ramme, da den er designet til at have et CSS Grid-layout ved at definere rækker og kolonner. Denne ramme har også JavaScript-komponenter sammen med CSS-klasser. For at kunne bruge denne ramme skal du obligatorisk linke jQuery og JavaScript Framework til Bootstrap sammen med de andre Bootstrap CSS-filer. Disse CSS-filer er tilgængelige til download og i form af CDN'er (Content Delivery Network).

Forskellige Bootstrap-komponenter:

Bootstrap er bundet med snesevis af komponenter, der kan genbruges til at give god brugeroplevelse og brugerinteraktion på en webside som navigationsbjælker, pop-ups, dropdowns, ikoner, knapper, foruddesignede formularer og også størrelsesindstillinger for forskellige DOM-elementer.

1) Glyphicons - Dette er de ikoner, der er formateret af font, der er tilgængelige i Bootstrap. De er omkring 200 i antal. Disse glyphicons findes på https://glyphicons.com.

Brugsvejledning?
Der er glyphicons til at betegne næsten alle handlinger som zoom, redigering, advarsel, fil, slet osv., Og de er defineret i en individuel klasse. Så du er nødt til at bruge baseklassen og den individuelle klasse, ideelt i et spanelement og bruge disse glyphicons.

Syntaks:

2) Dropdowns - Dette er de skiftebaserede menuer, der viser en liste over links. Disse er gjort mere dynamiske af JS-plugin og kan findes på http: // getbootstrap / javascript / # dropdowns

Brugsvejledning?
Du skal bruge klassen .dropdown, da elementets klasse har listepunkterne under den med klassen .dropdown-menu.

Syntaks:

3) Knapgrupper - Med denne Bootstrap-komponent kan du gruppere et sæt knapper sammen i en serie ved siden af ​​hinanden.

Brugsvejledning?
Definer inddelingselementer med .btn-gruppeklasse, og nest disse elementer med knap med .btn-klasse. Korrekt
Forkert

4) Knap-dropdowns - Denne komponent bruges til at anvende et knapelement til at udløse en dropdown.

Syntaks:

5) Inputgrupper - Dette udvider formkontrolklassen og tilføjer tekst eller knapper på hver side af et inputfelt i et inputelement. Du skal bruge .input-gruppeklasse med en .input-gruppe-addon-klasse for at kunne bruge disse inputgrupper.

Syntaks:

@

6) Navbar - Disse komponenter fungerer som navigationsoverskrifter for dit websted. De kollapses for at blive udvidet lodret med en skiftende hamburgermenu i enheder med mindre skærmstørrelser og bliver vandrette, når skærmbredden øges.

Syntaks:

7) Jumbotron - Dette er en bootstrap-komponent, der kan strække sig over fuld skærm (eller viewport) for at vise noget nøgleindhold.

Syntaks:

8) Alarmer - Dette er en Bootstrap-komponent med et jQuery-plugin, der leverer kontekstuelle feedbackmeddelelser afhængigt af brugerhandlingen. Dette bruges dybest set til at vise advarselsmeddelelser.

Syntaks: …

9) Fremskridtsbjælker - Denne komponent bruges til at give et billede af feedback på forløbet af arbejde eller handling med en fremdriftslinje.

Synatx:

Eksempel:

10) Badges - Dette er en komponent til at fremhæve noget som ulæste genstande ved at tilføje klassen .badge til DOM-elementet, helst et spenn.

Syntaks:

Meddelelser 3

11) Pagination - Denne komponent giver dit websted med pagination på flere sider, så indholdet kan

deles i flere sider og navigeres let. Normalt defineres DOM-elementet for uordnede lister med denne klasse .pagination.

Syntaks:

    Hvordan dette vil hjælpe i din karriere?

    Alle virksomheder fokuserer nu på brugerinteraktion og brugeroplevelse (UI / UX). Fordi langt de fleste af befolkningen bruger håndholdte enheder som tablets og smartphones, der vidt varierer med hensyn til deres pixelopløsning og skærmstørrelse. Derfor er det virkelig vigtigt at have front-design, der er responsiv nok til at tilpasse sig til enhver form for skærm uden at gå på kompromis med websidens elegance.

    Så at være dygtig hos Bootstrap er at øge værdien for dig i den tekniske karriere, og virksomheder ser frem til at ansætte dig med en smuk løncheck. Og fordi det er gratis & open-source, er der en masse rækkevidde for dig at bidrage som udvikler og gøre det stadig bedre end hvad det er i dag.

    Conclusion-

    Bootstrap framework er et meget praktisk værktøj til at bringe respons på websiderne ind. Komponenterne, der er forklaret i denne blog, er nogle af de meget anvendte, der hjælper dig med at skrive mindre kode for mere funktionalitet og tilføje mere elegance til den webside, du bygger.

    Anbefalede artikler

    Dette har været en guide til Bootstrap-komponenter. Her diskuterer vi også en introduktion og forskellige komponenter af bootstrap sammen med dens syntaks. Du kan også gennemgå vores andre foreslåede artikler for at lære mere -

    1. Sådan installeres Bootstrap
    2. Angular vs Bootstrap
    3. Bootstrap-kursus
    4. Bootstrap Interview spørgsmål
    5. Sådan bruges bootstrap-layout?
    6. Top 5 typer boostrap med prøvekode

    Kategori:

    Softwareudvikling