Sektion 1


Bootstrap-översikt

Bootstrap är det mest populära ramverket för webbutveckling. Bootstrap gör det enkelt för alla med fungerande kunskaper om HTML och CSS och ett webbhotellkonto att designa och publicera en nyskapande, mobil responsiv webbplats mycket snabbt. Du kan få den senaste versionen (Bootstrap 4.0.0 när den här artikeln publicerades) här.

Den här artikeln är för alla med fungerande kunskaper om HTML och CSS och tillgång till ett webbhotellkonto som vill utforma en ny webbplats eller omstrukturera en befintlig webbplats.

Den här artikeln kommer också att gynnas eller för en webbplatsägare eller chef som kommer att ha tillsyn över utformningen av deras webbplats. En grundläggande förståelse av tillgängliga alternativ med hjälp av Bootstrap, det mest populära ramverket för webbutveckling, kommer att hjälpa en webbplatschef att förstå alternativen och kommunicera mer effektivt med webbdesignern.

Bootstrap och webbhotell

Det finns två grundläggande sätt att använda Bootstrap. Den ena är åtkomst via Bootstraps innehållsleveransnätverk (CDN), vilket gör att du kan länka till Bootstrap från dina HTML-dokument. En CDN är ett system med distribuerade servrar som tillhandahåller innehåll till användare. Bootstraps CDN ger ett enkelt sätt att använda Bootstrap utan att installera det på din webbserver.

Att länka till Bootstrap CDN CSS-filer från HTML-dokument är den enklaste och vanligaste metoden att använda Bootstrap. Många teman och mallar har standard för denna metod för att använda Bootstrap, eftersom det fungerar med alla webbhotellkonton och inte kräver root-åtkomst till servern.

Den andra metoden att använda Bootstrap är att installera den på din server eller virtuella server (om du har VPS-värd). Detta ger dig större kontroll över Bootstrap, vilket möjliggör mer anpassning och kontroll över infrastrukturen, vilket kan vara viktigt om du har en mycket hög trafikwebbplats.

För att installera Bootstrap på din webbserver behöver du antingen kontrollera den dedikerade servern eller VPS-servern (dvs. root access) för att installera Bootstrap eller så måste din webbhotell tillhandahålla en mekanism som du kan installera Bootstrap i en delad värdkonto. Delade värdkonton har vanligtvis inte root-åtkomst, även om din webbhotelltjänst kan erbjuda Bootstrap som ett alternativ med ett klick. Kontrollera dokumentationen för din webbhotell för Bootstrap-installationsfunktioner.

Annars erbjuder några av de bästa webbhotelltjänsterna som finns på Hostadvice "ett klick" Bootstrap installera, eller så kan du helt enkelt installera det från din c-panel med Softaculous .

Om du har en dedikerad server eller VPS-värd och vill installera Bootstrap, se resursavsnittet nedan för en länk till Bootstraps officiella dokumentation, inklusive detaljerad information om installation av Bootstrap.

Vissa webbhotelltjänster har till och med Bootstrap webbhotellpaket, som är webbhotellpaket specifikt för webbhotell för Bootstrap.

Vad du behöver veta för att använda Bootstrap

Bootstrap är mycket populärt bland alla webbutvecklare från nybörjare till expertnivå. Grundläggande kunskaper om HTML, CSS och hur du publicerar din webbplats till ditt webbhotellkonto är allt du behöver för att använda Bootstrap.

Även om du tänker anställa någon för att designa en webbplats för dig, är det användbart för webbplatsägare att lära sig grunderna i den mest populära webbdesignramen, så att du kan kommunicera mer effektivt med designers.

Bootstrap hämtar sin funktionalitet från standardverktyg som är tillgängliga för alla webbhotellkunder: HTML, CSS, JavaScript och JQuery (ett JavaScript-bibliotek). Medan Bootstrap använder JavaScript för en del av sin interaktiva funktionalitet, behöver du inte vara programmerare för att designa webbplatser med Bootstrap.

Varför Bootstrap

Mobil responsiv – Bootstrap är en “mobil-först” -ramning, vilket gör det enkelt att skapa mobilkänsliga webbplatser.

Konsistent design på hela din webbplats – Bootstrap använder ett centralt bibliotek med designmallar och stilar för att hjälpa dig att skapa och upprätthålla en jämn designutseende.

Gratis och öppen källkod – Bootstrap är gratis för alla att använda och utvecklare kan bidra till själva Bootstrap-projektet.

Lätt att använda – Vem som helst med kunskap om HTML och CSS kan skapa en vacker, funktionell webbplats med Bootstrap. Arbetskunskap om JavaScript och JQuery skulle vara användbart för att göra din webbplats mer interaktiv.

Lätt att publicera till valfritt webbhotellkonto – Du behöver bara använda en FTP-klient (File Transfer Protocol) för att publicera din webbplats till ditt webbhotellkonto.

Sektion 2

Få Bootstrap för ditt projekt

Medan du kan ladda ner och installera Bootstrap om du har en dedicerad server eller Virtual Private Server (VPS) webbhotell, för denna primer kommer vi att länka till Bootstrap CDN, vilket är mycket lättare än att installera Bootstrap på servern.

Om du har en dedicerad server eller VPS-värd med root-åtkomst till servern kan du installera Bootstrap direkt på din dedikerade server eller virtuella server. Detta kräver betydligt mer tekniska färdigheter än vad som krävs för att bara länka till Bootstrap från dina HTML-filer.

Här är vad du behöver i varje HTML-dokument för att använda Bootstrap. Observera att om du börjar med en mall eller ett tema kommer alla dessa element redan att finnas i HTML-dokumenten. Det finns många mallar och teman tillgängliga (se resursavsnittet längst ned i denna artikel).

Lägg till HTML5-doktypen högst upp i ditt HTML-dokument och ställ in språket på ditt språk.

boostrap-kod 1

Lägg till teckenuppsättningen metatagg precis under elementet.

boostrap-kod 2

Eftersom Bootstrap är mobil först ställer du in visningsmeta-namnet enligt följande, och ser till att webbläsare gör din webbplats ordentligt och möjliggör zoomning av enheter på enheter.

boostrap-kod 3

Länka till Bootstrap 4.0.0 CSS, vilket gör all CSS-styling tillgänglig för dig.

boostrap-kod 4

Lägg till lite platshållarinnehåll som du kan ersätta senare med ditt riktiga webbplatsinnehåll.

Bootstrap-kodeksempel 5

Länk till Bootstrap JavaScript längst ner i elementet.

exempel på bootstrap-kod 6

Det är allt som krävs för att komma igång med Bootstrap 4.0.0! Bootstrap har omfattande dokumentation och en aktiv gemenskap. Bilagan till denna artikel innehåller länkar till dokumentation, handledning och andra användbara resurser.

Avsnitt 3

Bygga en webbplats med Bootstrap

Behållare: byggstenarna i Bootstrap

Behållare är de grundläggande byggstenarna på en Bootstrap-webbplats. En fast behållare (som svarar på skärmstorlek) förblir samma storlek tills webbläsaren når vissa brytpunkter, vilket representerar visningen av de olika enheter som folk använder för att visa webbplatser.

Det finns en huvudcontainer inom vilken du placerar containrar för varje komponent på din webbplats, inklusive allt från behållaren för navigeringsfältet ner till sidfotcontainern och allt däremellan. Tänk på en behållare som en låda som innehåller ditt innehåll.

Behållare med fast bredd

Här är en behållare med fast bredd med hjälp av Bootstraps behållarklass för fast bredd.

behållarkod exempel 1

Vätskebehållare

En vätskebehållare sträcker sig över visningsportens bredd oavsett vilken enhet som används. En typisk användning för en fluidbehållare skulle vara för en navstång eller en sidfot. Här är ett exempel på en enkel vätskebehållare.

Mobila responsiva brytpunkter

Bootstrap börjar med antagandet att en webbplatsbesökare använder en mobiltelefon för att visa din webbplats och ändrar webbplatsens layout beroende på vilken enhet besökaren använder och dina specifikationer.

Du anger vilken brytpunkt, punkt där layouten ändras, anpassar layouten efter enhetsvisningsstorlek. Bootstrap tar hand om mediefrågorna för dig, bestämmer vilken visningsport (enhetsskärmstorlek) varje besökare använder och gör justeringar som anges. Du måste bara säga Bootstrap var du ska ställa in brytpunkter.

För alla storlekar ovanför extra små (xs) bestämmer Bootstrap visningsstorleken genom mediefrågor, som upptäcker enhetens visningsstorlek för varje besökare på din webbplats och svarar på lämpligt sätt.

tabell 1 bootstrap storlekar

Stapling för mobil respons

Stapling är ett grundläggande koncept för att få din webbplats att bete sig som du vill ha den i olika skärmstorlekar (visningsformat). När du ställer in några rader i en behållare ställer du också in brytpunkten, vilket betyder storleksvyen där kolumnerna börjar stapla ovanpå varandra snarare än sida vid sida.

Tanken här är att det är svårt om inte omöjligt att läsa en webbplats med flera kolumner i en mindre visningsport, så kolumnerna staplar på varandra för att göra det lätt att läsa och bläddra igenom innehållet för webbplatsbesökaren.

Om du till exempel skapade en två-kolumnlayout i en behållare och ställde brytpunkten till sm, vilket innebär att för små (telefoner på liggande) och extra små enheter (ingår utan att anges eftersom extra liten är Bootstraps standard) skulle kolumnerna stapla en ovanpå varandra. För bärbara datorer och andra större enheter visas de två kolumnerna bredvid varandra.

Om du inte anger en brytpunkt kommer Bootstrap som standard att vara den extra lilla visningsområdet som brytpunkten (dvs. mobiltelefoner). Här är HTML för en två-kolumnlayout med en brytpunkt av liten (sm), som börjar stapla din två kolumnlayout för de som tittar på din webbplats med en telefon i liggande och mindre (xs).

staplingsexempel

Det tolvkolumniga rutnätet

Bootstrap delar upp sidan i ett 12-kolumns rutnät (liknande hur de flesta CSS-ramverk), vilket gör det enkelt att utforma din webbplats.

Du kan ändra layout och brytpunkter så att de passar dina behov och ange antalet på de tolv tillgängliga Bootstrap-kolumnerna som dina layoutkolumner ska spänna. Till exempel kan du ange en vänstra kolumn för att spänna åtta kolumner och den högra kolumnen för att spänna fyra kolumner, tillsammans med att specificera brytpunkten när de två kolumnerna ska börja stapla. Observera att 8 + 4 = 12. När du planerar din webbplats ska du se till att antalet kolumner lägger till 12.

12 kolumn rutnätkod

De två första kolumnerna tar upp två kolumner och den sista kolumnen tar upp 8 kolumner med Bootstraps 12 tillgängliga. Jag har skapat en gräns i mina egna stilar runt dessa kolumner för att göra kontrasten lättare att se.

Här är de tre kolumnerna på en stor skärm:

3 kolumner stor skärm

Och här är samma 3 kolumner som visas på en telefon (brytpunkten var inställd på “sm”), kolumnerna staplade varandra på varandra ovanpå den andra för att vara tillgängliga med en telefon eller surfplatta.

3 rader staplade responsivt

Navigeringsfält

Hörnstenen för de flesta webbplatser är navigeringsfältet. Vanligtvis placerar du huvudnavigeringsfältet för din webbplats högst upp på sidan. Det finns många alternativ för navigeringsfält, men vi kommer bara att fokusera på en enkel navigeringsfält här för att komma igång.

Här är en navigeringsfält baserad på ett exempel på webbplatsen Get Boot Strap. Den här navigeringsfältet innehåller en rullgardinsmeny som är tillgänglig för större skärmstorlekar (bärbara datorer och stationära datorer) och en så kallad “Hamburger-meny” som lätt kan användas från en mobil enhet. Det finns ett navigeringsfältmärke på vänster sida och ett inline sökformulär till höger (för besökare att söka på din webbplats).

navigationsstreckkod

Så här ser navigeringsfältet ut på stationära datorer.

stor navigationsfält

Och så ser denna navigationsfält ut på surfplattor och telefoner. En “hamburgermeny” ersätter navigeringen och alla objekt staplas för enklare åtkomst från en surfplatta eller telefonvy.

responsiv navigationsfält i mobilen

Bootstrap Typography

Bootstrap 4.0.0 har, som tidigare Bootstrap-versioner, standard typografistilar som du kan åsidosätta med ditt CSS.

Kropp text

Bootstrap 4 tillämpar en standardtekststil för HTML-elementet är 16px, tillämpar fontstorleken 1rem (lika med HTML-elementet) på bodyelementet.

Eftersom Bootstrap använder den ursprungliga teckensnittsstacken (standardteckensnitt för webbplatsbesökare) faller standardvärdena till Helvetica Neue, Arial och sans-serif.

HTML-rubriker

Bootstrap stöder .h1 (Semibold 36px) till h6 (Semibold 12px) som standard.

Displayrubrik

Bootstrap tar rubriker ett steg bortom vanliga HTML-rubriker med “Display-rubriker, avsedda att verkligen sticker ut från vanliga rubriker, och stöder fyra storlekar: .display-1, .display-2, .display-3 och .display-4.

Ledningen och Mark

Använd Bootstraps .lead-klass för att få dina “bly” -sättningar att sticker ut. Använd elementet för att markera viktiga punkter.

exempel på typografikod

typografi bly och märke

Blockquotes

Elementet är standard i HTML5, men du kan tillämpa Bootstraps styling på det med klassen .blockquote..

Du kan inkludera och och elementen i blockquote.

Exempel på blockquote-kod

Block citat

listor

Du kan använda Bootstraps .list-ostylerade klass för listor utan liststil och vänstermarginal. För att visa listor inline kan du använda .list-inline och .list-inline-item

listar kodexempel

Naturligtvis kan du använda vanliga ordnade och oordnade listor också antingen blockera eller inline.

formulär

För Boostrap-formulär ska du använda klassen .form-control med text och element. Den bästa praxisen för att få avståndet rätt är att linda in etiketter och kontroller i en med Bootstraps .formgruppsklass, men du kan använda en om du föredrar.

Det finns många formuläralternativ tillgängliga via Bootstrap 4.0.0 (se officiell dokumentation för alla alternativ), men genom att skapa ett enkelt inlineformulär får du en känsla av hur du skapar ett formulär med Bootstrap.

former kodeksempel

Det finns mycket mer att bilda. Se länken till Bootstraps omfattande dokumentation i resursavsnittet nedan.

Bootstrap 4: Nine Button Styles

Bootstrap 4 erbjuder nio knappstilar med klassen .btn följt av den specifika klassen. Här är alla nio knappstilar.

knappen skriver kod

bootstrap-knapptyper

Mobilkänsliga bilder

Bootstrap gör det enkelt att enkelt att ställa in bilder för att automatiskt skala på lämpligt sätt över alla enheter med hjälp av .img-fluid (ersätter Bootstrap 3: s .img-responsive) klass, med maxbredd: 100% och höjd: auto till bilden, skala bild för att skala till överordnade element.

responsiv bildkod

Här är den flytande bilden som visas på en stor skärm.

bilder på skrivbordet

Och här är bilden skalad på rätt sätt och återges på en liten skärm.

responsiva bilder skalade för mobil

Rundade hörn, cirklar och miniatyrer

Skapa rundade hörn eller cirklar med hjälp av .rounded- * verktygsklasserna, använd .img-miniatyrbild för att ge dina bilder en 1-pixel kant.

exempel på rundade hörn cirkelminiatyrbilder

rundade hörn cirkelminiatyrbilder

Bootstrap-komponenter

Bootstrap har några användbara komponenter för att lägga till funktionalitet och stil på din webbplats. Här täcker vi ett par exempel. Du hittar mycket mer i Bootstraps officiella dokumentation länkad till i resursavsnittet nedan.

Jumbotron

En Bootstrap Jumbotron är en stor utlysning som är avsedd att uppmärksamma din besökares webbplats. Webbutvecklare använder ofta Jumbotrons för uppmaningar på webbplatser och målsidor. Använd klassen .jubotron för att skapa en Jumbotron. Du kan också utforma det efter din smak.

exempel på jumbotronkod

jumbotron med knapp

kort

Kort är ett sätt att organisera innehåll för att sticker ut. Bootstrap erbjuder många stylingalternativ, men här visar vi ett grundläggande kort.

exempel på kortkod

bootstrap-kort

Avsnitt 4

Bootstrap Resources

Bootstrap har en stark gemenskap, utmärkt dokumentation och många högkvalitativa teman och mallar. Här är några användbara Bootstrap-resurser tillgängliga online:

Get Bootstrap – Den officiella platsen att få Bootstrap och den officiella Bootstrap-dokumentationen. Dokumentationen är utmärkt och omfattande.

Starta Bootstrap – En webbplats som ägnas åt att tillhandahålla gratis teman och mallar.

Bootsnipp – Ett bra ställe att hitta användbara kodavsnitt och designelement som du kan använda i dina egna Bootstrap-projekt.

Font Awesome – Denna ikonuppsättning och verktygssats som används i Bootstrap 4 ersätter Glyphicons som används i Bootstrap 3.

Theme Forest – Detta är ett bibliotek med teman och mallar, inklusive många för Bootstrap 4.0.0.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me