TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Komma igång med Bootstrap

1

Ett decennium tillbaka, att ha en webbplats var en dröm och bara möjligt för tekniska nördar. Numera kan varje vanlig man starta en webbplats eller blogg tack vare populariteten hos gratis verktyg för webbplatsbyggare och UI -ramverk. Eftersom byggnadsindustrin är mycket konkurrenskraftig måste varje företag fokusera på att erbjuda bättre än andras för att locka slutanvändare. Bootstrap är en av de populära ramarna och vi kommer att förklara hur du kan börja lära dig Bootstrap för att bygga dina webbplatser.

Det finns tre slags verktyg för användare och utvecklare att komma igång med sin webbplats:

  • Självbaserade system för öppen källkodshantering som WordPress.org, Drupal och Joomla.
  • Gratis plattformar som WordPress.com, Weebly och Wix.
  • Oberoende ramar för användargränssnitt (UI) som Bootstrap och Google Material Design.

Omfattningen av plattformar som är värd för sig själv är stor och är inte lämplig för de flesta slutanvändare som inte har tid att investera. Gratis värdplattformar är enkla att använda men har stora beroenden som endast begränsar dina möjligheter till den plattformen. Det sista alternativet är att ha en blandning av egen värd, utveckling och friheten att återanvända frontend-elementblock. I den här artikeln, låt oss utforska mer om hur du kommer igång med Bootstrap frontend -ramverk.

Komma igång med Bootstrap

Lär dig Bootstrap

Vad är Bootstrap?

Bootstrap är en av de populära ramarna för användargränssnitt som är tillgängliga vid denna tidpunkt. Detta är ett frontend -ramverk som skapats med HTML, CSS och JavaScript utan inblandning av serversideskript som PHP. Det utvecklades ursprungligen av Twitter med namnet "Twitter Blueprint" för att förbättra konsekvent synlighet över flera enheter och verktyg. Senare döptes det om till Bootstrap och släpptes som ett open source -projekt under augusti 2011.

Bootstrap är ett av de populära projekten som finns tillgängliga på GitHub med 100k+ stjärnor. Den senaste informationen om Bootstrap -utgåvor och uppdateringar finns på den officiella webbplatsen getbootstrap.com. Populariteten för Bootstrap ökar över tiden med den första mobila metoden och den enkla konverteringen av Bootstrap -teman till populära innehållshanteringsteman som WordPress. Det finns också populära Bootstrap-webbplatsbyggare som Mobirise för att starta din webbplats utan kodningskunskaper.

Bootstrap -versioner

Tabellen nedan visar versionsuppdateringen av Bootstrap, det är på V4 alpha 6 när denna artikel skrevs.

Version Datum Stora ändringar
Version 1 19 augusti 2011 Öppen källa
Version 2 31 januari 2012 Stor uppdatering med 12 kolumner rutnätlayout och Glyphicons.
Version 3 19 augusti 2013 Platt design och mobilt första tillvägagångssätt.
Version 4 19 augusti 2015 Stor uppdatering i CSS -klasser, användning av Sass och borttagning av Glyphicons, tether.js tappad och popper.js tillagd.
Version 5 05 maj 2021 Fri från jQuery, Bootstrap -ikoner, ny logotyp och RTL -stöd.

Allmän användning

För närvarande är den stabila versionen Bootstrap 5.01 och du måste migrera till den senaste versionen om du använder tidigare versioner 3 eller 4. Så om du utvecklar en webbplats som ska publiceras snart ska du helst använda version 5.01 som är stabil. Slutanvändare kan direkt ladda ner de förkompilerade CSS / JS -filerna och använda dem på din webbplats. Ladda ner version 3.4.1 här, V4.6 här och V5.01 här. Om du utvecklar projekt för kunder eller dig själv kan du ladda ner hela källkoden med Sass -filer från GitHub.

Obs! Att installera Bootstrap på din Windows -baserade dator eller macOS är en komplicerad uppgift eftersom den har många beroenden. Kort sagt bör du ha Node.js och NPM installerat på din dator tillsammans med Grunt för kompilering. Vidare kan du använda Harp.js för att generera statiska webbplatsfiler med partialt innehåll eller inkluderar.

Licens

Bootstrap -filerna distribueras under MIT -licens med ett enda krav eftersom upphovsrättsinformationen bör bevaras i alla Bootstrap -källfiler.

Behåll licens- och upphovsrättsmeddelandet i Bootstraps CSS- och JavaScript -filer när du använder dem i dina verk.

Du kan se hela licensen i GitHub.

Starta din webbplats

Du har två sätt att börja bygga din webbplats med Bootstrap. Den ena är att ladda ner och värd CSS- och JS -filer på din webbserver och den andra är att använda CDN -länkar. Vi rekommenderar att du bygger en startmall och sedan börjar använda alla Bootstrap -komponenter i en startmall. Du kan få mer information om avsnittet Startmall för Bootstrap 5.

Nedan finns CDN -länkarna för användning på din webbplats:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Se till att du använder Popper och sedan Bootstrap JS -filen i följd, annars kan du använda en enda medföljande skriptfil som innehåller Popper -skript. Lägg på samma sätt till alla anpassade CSS -formatmallar efter Bootstrap CSS, så att det inte har företräde framför ramdefinitionerna. Bootstrap 5 använder border-box för box-sizing egendom som kan påverka layouterna. Du kan ändra detta till content-box om det bara behövs för de specifika elementen genom att deklarera inline CSS.


Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer