Att arbeta med webbsidor kräver mycket mer än att bara kunna de språk som vi måste använda, det finns en rad milstolpar som vi måste möta för att utveckla en produkt med ett exceptionellt resultat. En av dessa milstolpar är utformningen och arrangemanget av elementen som kommer att visas på skärmen.
Låt oss föreställa oss att vi måste designa en webbsida, om vi börjar från början måste vi ta hänsyn till hur menyn, tabellerna, knapparna ska se ut, så enkla saker som ikonerna som vi kommer att placera på några åtgärdsknappar etc.
Som vi kan se är det hårt arbete, särskilt om vi vill att det ska se optimalt ut och ha ett överklagande, måste vi också vara detaljerade för att ge webbplatsen en personlig touch, nu om vi inte är designers? Det här är den stora frågan, det finns utvecklare som har blinda ögon när det gäller god smak och design, och den här typen av profiler hämmas för att göra kvalitetswebbuppträdanden. Eller vad händer om vi har god smak men lite tid att designa?
För att lösa dessa två stora krav har vi Bootstrap vilket inte är mer än a CSS -ram som gör att vi kan få den grundläggande aspekten av vår sida på en gång utan att behöva lida med designen, men bortsett från det hjälper det oss också med grundläggande effekter och ett mycket speciellt sätt att strukturera innehållet som vi ska presentera.
Bootstrap -fördelarDet vet vi redan Bootstrap det är en CSS -ram och det hjälper oss att fastställa de grundläggande aspekterna för vår webbplats, men förutom att den har vissa fördelar när det gäller dess användning, kommer vi att se nedan några av de positiva sakerna som den ger oss Bootstrap:
1. ÅteranvändMed Bootstrap Vi har många komponenter som standard, så att vi kan använda dem utan ändringar i olika delar av vår webbplats, vilket minskar tiden och mängden kod vi använder. Detta gynnar också den modulära utvecklingen av våra applikationer.
2. KonsistensTack vare att vi har många komponenter gjorda på ett generiskt sätt är koden konsekvent, det vill säga den hanterar mycket liknande strukturer, så när vi läser den eller underhåller applikationen kommer vi redan att veta hur den fungerar mycket enklare.
3. Flexibel designMobildesign är mycket viktigt och Bootstrap tar hänsyn till det från början, vi har flexibiliteten att vår webbplats anpassar sig till olika upplösningar och skärmlayouter automatiskt, vilket sparar oss mycket arbete från att behöva designa mobilvyer från grunden.
4. GemenskapEn annan aspekt att ta hänsyn till är dokumentationen, när vi använder en ram från tredje part är det mycket viktigt att ha vart vi ska vända oss när vi tvivlar och i den meningen Bootstrap Det har ingen jämförelse, eftersom vi kan få nästan alla svar på våra tvivel utan mycket ansträngning.
Nackdelar med BootstrapÄven om nästan allt är bra, måste vi också prata om nackdelarna eller inte så bra aspekter som vi möter när vi använder detta CSS -ramverkLåt oss se några av dess svagheter nedan.
1. Lite originalOm vi inte tar lite tid att göra vår design, kan vi förbli lika lite original om vi använder Bootstrap utan mer, även om detta ramverk är utformat för det, på grund av den stora adoption det har haft, måste vi arbeta lite mer för att inte se ut som kopian av kopian.
2. InlärningskurvaSom allt måste vi gå igenom en inlärningskurva om vi vill få ut det mesta av problemet, problemet är att om vi vill gå från den grundläggande aspekten till den avancerade är chocken lite stark.
3. Dålig kompatibilitet mellan versionerNär det sker en versionändring förlorar den tidigare versionen mycket giltighet och om vi vill uppdatera kommer det att kosta oss, särskilt om vi har gjort viktiga ändringar så att vår webbplats ser annorlunda ut.
InstallationNär vi vet vad det är Bootstrap, och fördelarna och nackdelarna med att använda det i våra projekt, måste vi komma till den praktiska delen av handledningen, nu ska vi lära oss var vi kan få detta ramverk från och hur vi kan inkludera det i vårt projekt.
Skaffa BootstrapDet första vi måste göra är att skaffa nödvändiga filer för att inkludera Bootstrap i vårt projekt, det är därför vi måste besöka deras webbplats getbootstrap.com och ladda ner nödvändiga filer, eller alternativt använda en CDN för att undvika att värda filerna på vår server och minska användningen av vår bandbredd.
Oavsett alternativ måste vi vara på en sida som liknar följande om vi klickar på den första nedladdningsknappen när vi besöker ramsidan:
FÖRSTORA
För att underlätta arbetet, låt oss anta att vi har laddat ner projektet, det kommer i en komprimerad fil som vi måste extrahera på en plats som vi kan använda och som borde vara något liknande följande:
Som vi kan se måste det inom vårt projekt finnas tre mappar, en för CSS, en annan för de källor som används och slutligen en för JS nödvändig. Med detta har vi redan tillgängligt Bootstrap, vilket inte är annat än att kopiera projektet till vår resursmapp.
Kom igång med BootstrapEftersom vi har alla resurser i vår besittning måste vi inkludera det i vår design, för detta kan vi skapa en fil HTML och där gör de nödvändiga inkluderingarna, kan vi se detta mer detaljerat i följande kod:
Installera BootstrapSom vi kan se var det enda vi gjorde att inkludera tre filer, specifikt två .css och a .js, det här är vad vi behöver för att börja använda hela strukturen, om vi nu öppnar vår fil med en webbläsare ser vi hur bokstäverna skiljer sig från vad vi normalt skulle se med en etikett H1:
Bootstrap -rutnätetFör att uppnå organisationen av våra mönster, Bootstrap använd ett rutnät eller rutnät, detta består av 12 kolumner, så allt vi ser på vår skärm måste organiseras på detta sätt, med detta uppnås att sidan kan struktureras på ett sådant sätt att vi kan använda de verktyg som erbjuds oss på ett mycket öppet sätt.
Naturligtvis är det en anpassningsprocess, men det viktiga är att vi kan göra kolumner som grupperar flera, liksom när vi arbetar med tabellerna över HTML att vi kan skapa kolumner med flera kopplingar med egenskapen span. För att skapa en webbplats som använder denna struktur behöver vi bara ha följande:
En div med klassen behållare, inuti detta en div med klassen rad, och slutligen inuti en eller flera div med klassen kål, låt oss se i följande kod ett exempel på en sida med tre kolumner, för detta måste varje kolumn gruppera 4 för att lägga till totalt 12 vilket är vad vi har förklarat är standardvärdet för Bootstrap.
Kolumner i BootstrapDetta resulterar i en sida där de tre interna divs är i en enda rad uppdelad i tre lika kolumner, som vi kan se i följande bild:Exempel på hur man använder kolumner i bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam underlättar min in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, begäran om efficitur vel, placerat sit amet purus. Cras id semper felis. Var ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam underlättar min in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, begäran om efficitur vel, placerat sit amet purus. Cras id semper felis. Var ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam underlättar min in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, begäran om efficitur vel, placerat sit amet purus. Cras id semper felis. Var ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.
FÖRSTORA
Denna struktur, trots att den ser lite fyrkantig ut, är mycket flexibel, eftersom vi bara behöver göra ett slags spel med behållarna och deras kolumner för att uppnå de resultat vi vill ha. Med detta avslutar vi denna handledning, vi har effektivt tagit våra första steg med Bootstrap och nu kan vi börja dra fördel av dess fördelar mer direkt på våra projekt eller webbapplikationer.
