Introduktion till Bootstrap-komponenter
Ursprungligen kallad Twitter Blueprint, detta utvecklades av Mark Otto och Jacob Thronton på Twitter. Bootstrap är ett gratis CSS-ramverk som ger respons på webbsidorna. Genom lyhördhet betyder det att olika DOM-element ändrar storlek på sig i enlighet med förändringen i skärmstorlek utan att kompromissa med webbsidans elegans eftersom det annars skulle hända traditionellt med pixel eller procentuell storlek på CSS-metoder.
Detta kallas också som det "mobil-först" CSS-ramverket eftersom det är utformat för att ha en CSS Grid-layout genom att definiera rader och kolumner. Detta ramverk har också JavaScript-komponenter tillsammans med CSS-klasser. För att kunna använda detta ramverk måste du obligatoriskt länka jQuery och JavaScript Framework för Bootstrap tillsammans med andra Bootstrap CSS-filer. Dessa CSS-filer är tillgängliga för nedladdning såväl som i form av CDN: er (Content Delivery Network).
Olika Bootstrap-komponenter:
Bootstrap har flera tiotals komponenter som kan återanvändas för att ge bra användarupplevelse och användarinteraktioner på en webbsida som navigeringsfält, popup-fönster, dropdowns, ikoner, knappar, fördesignade former och även storleksalternativ för olika DOM-element.
1) Glyphicons - Dessa är teckensnitt formaterade ikoner som är tillgängliga i Bootstrap. De är ungefär 200 i antal. Dessa glyphicons finns på https://glyphicons.com.
Hur man använder det?
Det finns glyphicons för att beteckna nästan alla åtgärder som zoom, redigera, varning, fil, radera osv. Och de definieras i en individuell klass. Så du måste använda basklassen och individuell klass, helst i ett spanelement och använda dessa glyphicons.
Syntax:
2) Listrutor - Det här är de menyer som är baserade på menyerna och en lista med länkar. Dessa görs mer dynamiska av JS-plugin och kan hittas på http: // getbootstrap / javascript / # dropdowns
Hur man använder det?
Du måste använda klassen .dropdown eftersom elementets klass har listobjekten under den med klassen .dropdown-menyn.
Syntax:
3) Knappgrupper - Med denna Bootstrap-komponent kan du gruppera en uppsättning knappar i en serie intill varandra.
Hur man använder det?
Definiera delningselement med .btn-gruppklass och bo de elementen med knappen med .btn-klassen. Korrekt
Fel
4) Knapplister - Denna komponent används för att använda ett knappelement för att utlösa en rullgardinsmeny.
Syntax:
5) Ingångsgrupper - Detta utökar formkontrollklassen och lägger till text eller knappar på vardera sidan av ett inmatningsfält i ett inmatningselement. Du måste använda .input-gruppklass med en .input-group-addon-klass för att kunna använda dessa inputgrupper.
Syntax:
@
6) Navbar - Dessa komponenter fungerar som navigeringsrubriker för din webbplats. De kollapsas för att utvidgas vertikalt med en växlande hamburgarmeny i enheter med mindre skärmstorlekar och blir horisontella när skärmbredden ökar.
Syntax:
7) Jumbotron - Detta är en bootstrap-komponent som kan sträcka sig över hela skärmen (eller visningsområdet) för att visa lite nyckelinnehåll.
Syntax:
8) Varningar - Detta är en Bootstrap-komponent med ett jQuery-plugin som ger kontextuella feedbackmeddelanden beroende på användarens åtgärd. Detta används i princip för att visa varningsmeddelanden.
Syntax: …
9) Framstegsfält - Den här komponenten används för att ge en grafik om feedback på framstegen i arbetet eller handlingen med en framstegsfält.
Synatx:
Exempel:
10) Märken - Detta är en komponent för att markera något som olästa objekt genom att lägga till klassen .badge till DOM-elementet, helst ett spann.
Syntax:
Meddelanden 3
11) Pagination - Den här komponenten ger din webbplats en flersidig pagination så att innehållet kan
delas upp i flera sidor och navigeras enkelt. Vanligtvis definieras DOM-elementet för oordnade listor med denna klass .pagination.
Syntax:
Hur detta kommer att hjälpa i din karriär?
Alla företag fokuserar nu på User Interaction och User Experience (UI / UX). Eftersom den stora majoriteten av befolkningen använder handhållna enheter som surfplattor och smartphones som i stor utsträckning varierar vad gäller deras pixelupplösning och skärmstorlek. Därför är det verkligen viktigt att ha den främre designen som är tillräckligt lyhörd för att anpassa sig till alla slags skärmar utan att kompromissa med webbsidans elegans.
Så att vara skicklig på Bootstrap är att öka värdet för dig i den tekniska karriären och företag ser fram emot att anställa dig med en stilig lönecheck. Och eftersom det är gratis och öppen källkod finns det många räckvidd för dig att bidra som utvecklare och göra det fortfarande bättre än vad det är idag.
Slutsats-
Bootstrap-ramverket är ett mycket praktiskt verktyg för att få in respons på webbsidorna. Komponenterna som förklaras i den här bloggen är några av de mycket använt som hjälper dig att skriva mindre kod för mer funktionalitet och lägga till mer elegans på webbsidan du bygger.
Rekommenderade artiklar
Detta har varit en guide till Bootstrap-komponenter. Här diskuterar vi också en introduktion och olika komponenter i bootstrap tillsammans med dess syntax. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -
- Hur du installerar Bootstrap
- Angular vs Bootstrap
- Bootstrap Training Course
- Bootstrap intervjufrågor
- Hur använder du Bootstrap Layout?
- Topp 5 typer av Boostrap med provkod