Använda Bootstrap -komponenterna

Bootstrap Den har två bra solida baser som ger oss en standard utgångspunkt för de olika webbdesignlösningar som vi behöver eller vill göra, det här är rutnätet och bas -CSS, med dessa två verktyg kan vi bygga en stor central bas där vi kan placera den för att vila alla olika element som utgör vårt gränssnitt.
Liksom alla baser gör dessa i sig själva inte resten av konstruktionen, för att nå en högre grad av sofistikering och detalj är det nödvändigt att använda ytterligare komponenter som finns på vår bas och naturligtvis påverkas deras kraft av soliditeten. den senare.
I fallet med Bootstrap Vi har flera komponenter som hjälper oss att maximera detaljerna i våra mönster, komponenter som sträcker sig från ikoner, paneler, till och med rubriker. Element som hjälper oss att differentiera och markera vår applikation från andra.
Komponenterna i Bootstrap De kan användas på våra sidor oberoende av resten av dem, det vill säga att vi kan generera så många komponenter som vi behöver i ett enda dokument utan att de kommer i konflikt med de andra.
Dessutom är grundstilen som standard redan fördefinierad, så vi kan bygga vår applikation snabbt och utan större ansträngning, där vi i slutändan kan anpassa hela vår applikation genom att ändra basstilen för våra egna stilar.
Komponenterna kan vara av CSS, JavaScript eller båda, så några förutom Bas CSS de kommer att kräva tredjepartsbibliotek som t.ex. jQuery, detta kan verka lite obehagligt men verkligheten är att implementeringen är så enkel att vi inte ens kommer att inse att vi använder fler saker än vad som förts som standard Bootstrap.
En av de första komponenterna som vi måste förstå är ikonerna, eftersom vi med dessa små bildbitar kan få användaren att förstå funktionaliteten i alla delar av vår design, så när vi ser en ikon med en stor X vi vet att det är relaterat till att stänga det aktuella avsnittet eller om vi ser en ikon i form av + vi vet att det är att lägga till något.
GlyphiconsI Bootstrap det finns ett bibliotek med ikoner Glyphicons, mycket populärt inom webbdesign och som erbjuder oss praktiskt taget en ikon för varje åtgärd som vi kan utföra på en webbsida, ger detta oss mycket arbete eftersom vi inte behöver tänka på att leta efter någon för att designa grafiska bitar som tjänar dessa syften.
I följande bild kan vi se ikonerna som vi har direkt på webbplatsen för Bootstrap:

FÖRSTORA

Detta är bara ett litet urval av de ikoner som vi har tillgängliga, men om vi surfar på den officiella sidan kommer vi att se alla alternativ vi har för vår användning.
Användningen av dessa ikoner är mycket enkel, vi måste bara lägga till klassen glyfikon till elementet HTML och lägg sedan till klassen för motsvarande ikon från den tillgängliga listan. Ikoner läggs vanligtvis till objekt som eller eftersom vi på det här sättet ser till att de bara är visuella, vilket ger bästa möjliga resultat. Låt oss se ett exempel på hur du använder den här komponenten i följande kod HTML.

 Använda Glyphicons i Bootstrap
Betala in
Post
Användare
Papperskorgen
Logga ut

I denna kod har vi helt enkelt placerat inkluderingarna från våra bibliotek av Bootstrap motsvarande, lägga till jQuery som ett tredjepartsbibliotek och lägg sedan till biblioteket js av Bootstrap, är det viktigt att behålla denna ordning sedan js -biblioteket i Bootstrap behov av jQuery och om det ingår så kommer det att ge oss ett fel i implementeringen.
Sedan inom vår har vi skapat några avsnitt där vi har lagt till GlyphiconsFör våra syften var det tillräckligt att placera ikonerna inom etiketten. Om vi ​​kör i vår webbläsare får vi följande resultat:

Som vi kan se följer ikonerna med meddelandena vilket ger dem större tyngd och förståelse, till exempel i sökrutan om någon inte talar engelska kommer de inte att förstå meddelandet SökMen om du har använt datorsystem och du ser förstoringsglasikonen direkt vet du att det refererar till sökningar, det är den här komponentens sanna kraft.
En annan viktig komponent är navigeringsflikarna, dessa gör att vi kan organisera vårt innehåll på samma sida, vilket gör att vi slipper ta mycket utrymme och därmed göra livet enklare för användaren genom att inte behöva lära oss ett stort antal sektioner i vår webbapplikation.
För att använda dessa flikar behöver vi hjälp av klassen nav, det här är att ta bort standardstilen för HTML av elementen och hans söner vilket underlättar användningen och dess efterföljande anpassning till vår design. För att använda detta måste vi helt enkelt lägga till klasserna nav Y nav-flikar till ett element och med detta kommer vi att få ett lämpligt resultat.
Låt oss se följande kod där vi implementerar den här lösningen, liksom föregående exempel måste vi inkludera filerna bootstrap.css, bootstrap-theme.css, bootstrap.js Y jquery.js, låt oss se vår kod:

 Använda Glyphicons i Bootstrap

säkerhet
Uppgif.webpter
Innehåll

Som vi märker användningen av elementet med denna klass kan vi skapa en struktur HTML normalt, men resultatet som vi kommer att se nedan ger oss ett annat sätt att organisera informationen. Vi kan belysa en annan intressant aspekt av vår kod och det är kombinationen av Glyphicons med denna lösning som visar vad vi förklarar om elementernas oberoende.

FÖRSTORA

En annan komponent som är till stor hjälp är rullgardinsmenyerna. Dessa gör att vi kan komprimera många alternativ till ett litet utrymme, särskilt för de webbsidor som har många kategorier som de behöver organisera.
Falla nerKomponenten i Bootstrap som hanterar detta kallas Falla ner och liksom den tidigare komponenten appliceras den i elementet dess konstruktion är dock lite mer komplex, även om den inte går utöver HTML -arbetsstilen.
Vi måste först ha ett element som är rubriken på rullgardinsmenyn, sedan måste vi ha som innehåller de alternativ som ska visas. För detta kommer vi att omformulera det föregående exemplet för att lägga till en rullgardinsmeny på innehållsfliken, med detta kan vi bättre förstå vårt exempel.
För att sammanfatta lite kommer vi bara att visa innehållet i eftersom rubriken kommer att vara densamma. Låt oss se koden för vår rullgardinsmenyfunktion:

säkerhet
Uppgif.webpter
Innehåll

videoklipp
Bilder
Audio

Vi ser sedan hur i ett element vi har börjat rullgardinsmenyn med klassen falla ner, inom detta definierar vi ett element som alternativutlösare när du lägger till klassen rullgardinsmeny och slutligen skapade vi en vad har klassen rullgardinsmenyn för att identifiera att den har alla alternativ som vi kommer att se. Om vi ​​kör vårt exempel i webbläsaren får vi följande resultat:

FÖRSTORA

Naturligtvis är detta bara en liten del av vad vi kan uppnå, eftersom det är möjligt att inkludera fler effekter och med olika stilar ändra det visuella av dessa. Med detta avslutar vi denna handledning, där vi har sett tre av de mest användbara komponenterna som vi kan använda i Bootstrap, och därmed uppnå en mycket större anpassning av vår applikation.