Sådan gør du ... Bootstrap

Kom i gang, lær nettet, komponenter, opbygning af temaer osv. ...

Lær Bootstrap 4!

Hvis du er her, har du bestemt hørt om "Verdens mest populære front-end-komponentbibliotek" ___ Bootstrap

Jeg har arbejdet meget med Bootstrap siden 2013-udgivelsen af ​​Bootstrap 3.0. Jeg har bidraget til Bootstrap-dokumenterne og rangeret først for Bootstrap i Stack Overflow. Jeg føler mig mere end forberedt på at fortælle dig alt hvad du har brug for at vide om det. Med denne artikel håber jeg at afmystificere Bootstrap på en klar og forståelig måde.

MEN Først skal vi tale om dig. Jeg håber, at hvis du læser dette, har du en god forståelse af HTML og CSS. Hvis du ikke har bygget nogen websteder, ved du ikke, hvad CSS-specificitet er, eller ved ikke forskellen mellem at bruge #abc og .abc i CSS, dette er IKKE artiklen for dig. I stedet skal du lære det grundlæggende i HTML og CSS.

”Jeg har prøvet at bruge Bootstrap, men det ser ud til at få noget til at arbejde er vanskeligt eller umuligt.”

Jeg hører dig. Du er ikke alene. Jeg har besvaret over 2.000 Bootstrap-relaterede spørgsmål om Stack Overflow, har set mange frustrerede Bootstrap-brugere. Gør dig selv en enorm fordel: Læs denne artikel, dokumentationen, og prøv ikke at tvinge tingene. Jeg vil vise dig, at Bootstrap er let, elegant og fornuftigt.

Hvad der er dækket af denne artikel:

  • Hvad er Bootstrap, og hvorfor skulle jeg bruge det?
  • Sådan kommer du i gang med Bootstrap
  • Sådan bruges Bootstrap CSS inklusive Navbar
  • Sådan bruges Bootstrap-gitteret
  • Sådan reagerer man på responsivt design med Bootstrap
  • Sådan bruges Bootstrap JavaScript-komponenter
  • Sådan tilpasses bootstrap

Herefter kan denne artikel læses efter behov. Du er velkommen til at rulle forbi sektioner, der er nybegynder nybegynder for dig, men glem ikke de vigtige detaljer, der hjælper dig med at bruge "Bootstrap den rigtige måde".

___________________________________________________________________

Hvad er Bootstrap? Hvorfor skulle jeg bruge det?

Bootstrap består af CSS- og JavaScript-filer. Det er en ramme (a.k.a - "bibliotek" eller "værktøjssæt"), der gør webstedsudvikling hurtigere og lettere.

Bootstrap hjælper med at oprette websteder, der er ...

Konsistent__ Bootstrap giver først og fremmest et ensartet, ensartet udseende og design. Med meget lidt indsats kan Bootstrap bruges til at omdanne et hodgepodge-site til et professionelt, visuelt tiltalende design.

Responsive__ Websteder oprettet med Bootstrap er designet til at se & fungere godt på enhver enhed inklusive desktops, laptops, tablets og smartphones. Bootstrap er "mobile-first", hvilket betyder, at designet til mindre mobile enheder overvejes før det, der gælder for større skærmenheder. Responsivhed er baseret på skærmbredde, ikke højde. Dette skyldes, at Bootstrap bruger bredde-baserede CSS Media Queries.

Compatible__ Bootstrap er en moden, testet kodebase, der helt er baseret på standarder og cross-browser-overholdelse. Websteder, der korrekt udnytter Bootstrap-tilbud, drager også fordel af denne kompatibilitet.

Hvis du ikke forstår, hvad jeg taler om, er det okay! Lad os se på et super simpelt Bootstrap-eksempel.

Et grundlæggende “før & efter” Bootstrap-eksempel.

Før bootstrap:

Efter Bootstrap:

Som du kan se, når Bootstrap er tilføjet, får websiden øjeblikkeligt et nyt look. Du refererer blot til nogen af ​​Bootstraps genanvendelige CSS-klasser i HTML-markeringen. I dette eksempel brugte jeg text-center ...

   

Hej Verden

   

   Der er Bootstrap 4 her.    

Selvfølgelig kunne jeg have udført det samme uden at bruge Bootstrap. Jeg kunne have oprettet mine egne CSS-klasser med samme effekt:

body {font-family: sans-serif;}
.text-center {text-align: center;}

Dette ville have været fint med dette enkle eksempel. Men for mere komplekse sider vil jeg gerne fortsætte med at skrive CSS-klasser for enhver stilændring, der er nødvendig? Ville den CSS være genanvendelig og testet på tværs af flere browsere? Vil jeg tilføje CSS-definitioner for at gøre designet “lydhør” for forskellige enhedsbredder? Det sandsynlige svar er ”Nej”, og det er derfor, jeg skriver her om den meget populære Bootstrap.

___________________________________________________________________

Sådan kommer du i gang med Bootstrap.

Nogle mennesker vil spørge eller forklare “Sådan installeres Bootstrap”. Nå, du "rigtig" installerer det ikke. Brug af Bootstrap handler om at henvise til de relevante CSS- og / eller JS-filer.

Du har muligvis en build-proces eller udviklingsmiljø, der bruger værktøjer som NPM eller Nuget, i hvilket tilfælde du vil læse dokumenterne om tilføjelse af Bootstrap og dets 'afhængigheder.

Til denne artikel behøver du kun at vide, hvordan du refererer til Bootstrap på CDN. Som vist i den officielle startskabelon kan der henvises til Bootstrap-filerne på BootstrapCDN. Bare tilføj linket til Bootstrap CSS i HTML -tagget til din webside (r) ...

Derefter føjes det valgfri Bootstrap Javascript til et

Hurtig start

Til denne artikel bruger jeg Bootstrap 4 på Codeply, da Bootstrap-filerne automatisk inkluderes i Codeplys editor. Dette er den hurtigste mulighed, hvis du ser hurtigt efter at komme i gang, lære det grundlæggende og prototype webdesign ved hjælp af Bootstrap.

___________________________________________________________________

Sådan bruges Bootstrap CSS.

Tidligere sagde jeg “Bootstrap består af CSS og JavaScript-filer”. For nu skal jeg fokusere på CSS-delen.

CSS er den mest væsentlige del af Bootstrap. Bootstrap CSS kan bruges alene uden Bootstrap JavaScript-komponenter. Generelt leverer Bootstraps CSS to ting ...

  1. Elementstilarter
    Knapper, skrifttyper, farver, badges, typografi, statuslinjer, alarmer osv…
  2. Bootstrap-gitteret
    Layouthjælpere med "rækker" og "kolonner".
Påmindelse: Hvis du ikke ved, hvad "CSS-specificitet" betyder, eller ikke ved forskellen mellem at bruge #abc og .abc i CSS, er dette IKKE artiklen for dig. I stedet skal du gå tilbage til det grundlæggende. Denne artikel viser dig "Sådan starter du bootstrap", men er ikke beregnet til at lære dig grundlæggende HTML og CSS.

Nu skal jeg udforske alle de "værktøjer", som Bootstrap leverer til "at gøre webstedsudvikling hurtigere og lettere".

Sådan bruges Bootstrap CSS “Styles”.

Kan du huske det enkle Bootstrap-eksempel, jeg viste dig tidligere?

Lad os forstå, hvad Bootstrap virkelig gør på websiden ...

________________________________________________________________

reboot

Først og fremmest inkluderer Bootstrap CSS Reboot, der "normaliserer" websidestilarterne. Webbrowsere har forskellige, lidt grimme stilarter, der som standard anvendes til websider.

Da hver browsers standarder er lidt forskellige, bruger Bootstrap Reboot til at tilsidesætte browserens standardindstillinger og give den samme "elegante, konsistente baseline", der skal bygges på, uanset browseren.

Dette betyder, at hvis websiden vises på Safari, Chrome, Firefox eller IE, vil den starte med de samme baseline CSS-stilarter.

Skrifttyper (skrifttype)

Tekstlæsbarhed og skala er en vigtig overvejelse i webdesign. Bootstrap tog dette i betragtning ved valg af den indbyggede skrifttypestabel til Bootstrap 4:

$ font-family-sans-serif:
  // Safari til OS X og iOS (San Francisco)
  -Apple-systemet,
  // Chrome <56 til OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Grundlæggende web-backback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji-skrifttyper
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"! Default;

Bootstrap CSS får teksten til at se sådan ud ...

Typografi i Bootstrap 4

farver

Ingen bliver for begejstrede for en webside, der mangler farve. Farve bruges ofte til at formidle mening og fremhæve specifikt sideindhold. Bootstrap giver 8 kontekstuelle farver, der let kan anvendes til HTML-elementer. Du kan se, at farver er navngivet for at give mening.

Bootstrap 4 kontekstuelle farver

Derudover kan Bootstrap CSS bruges til at style og formatere ethvert sideindhold, såsom tabeller, formularer, billeder og figurer.

komponenter

Se hurtigt de følgende eksempler på Bootstrap-komponenter. Dette er alle de "ting", der let kan "tilsluttes" til dine websider, når du bruger Bootstrap ...

AdvarslerBadgesBrødkrummerKnapperKort og listegrupperKarruselSkjul akkordeonrullemenuerneFormularer & inputInputgruppermodalsFanernavbarsPaginationpopoversScrollspy

Anvendelse

Det er meget let at bruge nogen af ​​disse Bootstrap-komponenter. Det er bare et spørgsmål om at henvise til den relevante Bootstrap CSS-klasse i HTML-markeringen. F.eks. Her bruger vi Bootstraps primære farvede knap på en webside ...

Forholdet mellem HTML & Bootstrap CSS

Som du kan se på billedet ovenfor, har "Primær" -knappen en anden farve end den normale Bootstrap-blå farve. Det skyldes, at denne webside også indeholder et "tema.css" -stilsark efter "bootstrap.min.css".

CSS-stilarter (eller regler), der er defineret i “tema.css” tilsidesætter standard Bootstrap CSS-stilarter, såsom definitionen af ​​.btn-primærfarve. Jeg vil forklare Bootstrap-tema og tilpasning lidt senere i denne artikel.

___________________________________________________________________

Lad os se lidt nærmere på, hvordan jeg brugte Bootstraps “Primære” knap.
HTML-markeringen er ...

 Primær 

Så knappernes stil kommer fra CSS-reglerne for .btn- og .btn-primære CSS-vælgere. Her er de relevante regler i Bootstrap CSS ...

.btn {
  display: inline-block;
  fontvægt: 400;
  tekstjustering: center;
  white-space: nowrap;
  lodret linje: midt;
  -webkit-user-select: ingen;
  -moz-user-select: ingen;
  -ms-user-select: ingen;
  bruger-vælg: ingen;
  kant: 1px solid transparent;
  polstring: 0,375rem 0,75rem;
  skriftstørrelse: 1rem;
  linjehøjde: 1,5;
  grænseradius: 0,25rem;
  overgang: farve 0,15s let-ind-ud, baggrund-farve 0,15s let-ind-ud, kantfarve 0,15s let-ind-ud, kasseskygge 0,15s let-ind-ud;
}
.btn-primær {
  farve: #fff;
  baggrund-farve: # 007bff;
  kantfarve: # 007bff;
}

Du spekulerer måske på ...

_Hvorfor har knappen 2 klasser: .btn + .btn-primary?

”Bootstraps komponenter er bygget med en basemodifikatorklasse-tilgang. Dette betyder, at hovedparten af ​​stylingen er indeholdt i en baseklasse (f.eks. .Btn), mens stilvariationer er begrænset til modifikationsklasser (f.eks. .Btn-fare). ”
 - Bootstrap-dokumentation

Denne basismodifiseringsmetode i Bootstraps CSS gør tilpasning af Bootstrap meget lettere, hvilket jeg vil forklare senere i denne artikel.

Lad os nu se på flere eksempler ved hjælp af Bootstrap-komponenter:

Badges

 Badge 
 Rundet badge 

Brødkrummer

Knapper

 Stor 
 Lille 

Kort

 
  

Kortoversigt

  

Med understøttende tekst.

   Knap  

Formularer & input

    
        

Jumbotron

    

Hej, verden!

    

    Dette er simpel jumbotron-komponent ...     

Pagination

Fremskridt

  
  

_Hvordan kender jeg den rigtige HTML-markering og struktur, der skal bruges til Bootstrap-komponenter?

Det er her, udvikling af Bootstrap kræver noget ”benarbejde”. CSS-værktøjssættet findes der ved dine fingerspidser, men du behøver at kende og bruge den rigtige HTML-struktur, når du bruger nogen af ​​Bootstrap-komponenterne.

Når du bruger komponenter som knappen tidligere (.btn .btn-primær), der er vist tidligere, er HTML-markeringen ligetil.

Men for andre komponenter som Navbar, Modal eller Carousel er bestemmelsen af ​​den rigtige HTML-struktur mere kompliceret og vil variere alt efter brugssag og den ønskede implementering.

Når du bruger disse mere komplekse Bootstrap-komponenter, skal du starte med eksempler. Den bedste ressource er den officielle Bootstrap-dokumentation. Dokumenterne har mange eksempler, og et afsnit "Sådan fungerer det" for hver komponent.

Der er også værktøjer som Codeply (det er den, jeg skrev), og Bootstrap.build, der inkluderer eksempler på Bootstrap-kodestykker, som du nemt kan drop i en editor og lege med. For eksempel er her Navbar valgt fra Codeply's Bootstrap 4 Komponenter liste ...

En nem måde at få Bootstrap-eksempel-markering på

Navbar

Mens de fleste af Bootstrap-komponenterne er selvforklarende og veldokumenterede, synes jeg Navbar kræver en fuldstændig forklaring. Sammen med gitteret er Navbar en af ​​de mest populære Bootstrap-komponenter.

Indhold, struktur og justering

Brug kun understøttet indhold inde i Navbar. Navbar kan indeholde:

  • Logo / brand
  • Nav-links, knapper eller dropdowns
  • Inlineformularer
  • Tekst

Brug ikke raster / kolonner i gitteret i Navbar. Der er virkelig ingen grund til, da Utility-klasser kan bruges til at justere Navbar-indhold. For eksempel bruges klassen ml-auto (venstre auto margin) til at justere 2. Nav til højre:

stoppunkter

Som standard er Navbar designet til mindre skærmbredder på mobile enheder. Derfor stikker Navbar lodret i en søjle, medmindre overstyret med en "udvid" klasse gør Navbar til at forblive vandret over specificerede brudpunktbredder. Der er 5 breakpoints ...

  • navbar-expand = altid udvidet (forbliver vandret)
  • navbar-expand-sm = udvides på sm-bredder> 576px
  • navbar-expand-md = udvides til md-bredder> 768px
  • navbar-expand-lg = udvides til lg-bredder> 992px
  • navbar-expand-xl = udvides til xl-bredder> 1200px

Tjek dette codeply for at se de forskellige Navbar-breakpoints.

Lys eller mørk baggrundsfarve

Navbar bruger klasserne navbar-lys og navbar-mørke til at bestemme forgrundsfarverne på mærket, links og toggler (hamburger) ikon. Sørg for at bruge de relevante klasser til at få vist Navbar-indholdet.

  • Brug navbar-dark til til mørkere farvede baggrunde
  • Brug navne-lys til til lysere baggrunde

For at give Navbar en baggrundsfarve skal du bruge en af ​​de kontekstuelle farver (f.eks. Bg-primær), ellers er Navbar gennemsigtig.

Læs mere om Bootstrap 4 Navbar

Hjælpeklasser

Selvfølgelig er Bootstrap den schweiziske hærkniv i webdesign- og udviklingsverdenen. Bootstrap omfatter mange almindeligt anvendte CSS-egenskaber i praktiske ”utility” -klasser. Dette fjerner behovet for at skrive den samme CSS igen og igen for at anvende stilarter på forskellige HTML-elementer. I mange kender det som D.R.Y.

Så i stedet for at skrive dette ...


Centreret tekst

Du bruger simpelthen Bootstraps justeringsklasse for tekstcenter, uanset hvor det er nødvendigt ...

Centreret tekst

Nu hvor du forstår det grundlæggende ved brug af Bootstraps stylingkomponenter, vil jeg næste forklare Bootstraps kraftfulde, lydhøre layoutkomponent__ Grid-systemet.

___________________________________________________________________

Hvad er Bootstrap “Grid”?

Bootstrap Grid System bruges til layout, specifikt Responsive Layouts. At forstå, hvordan det fungerer, er vigtigt for at forstå Bootstrap. Gitteret består af grupper af rækker og kolonner inde i 1 eller flere containere.

Bootstrap-gitteret kan bruges alene uden Bootstrap JavaScript og andre CSS-komponenter. Du skal bare downloade og henvise til “bootstrap-grid.css”, som indeholder klassen Grid og Flexbox. Mere information om kun brug af Bootstrap Grid CSS findes her i dokumenterne.

Her er det mest basale eksempel på brug af gitteret:

   
      
Jeg er dit indhold inde i gitteret!
   

Hvilket giver os en stor "søjle" vandret på tværs af udsigten ...

Bootstrap-enkelt kolonne Layout

2 kolonner ...

   
      
Venstre kolonne
      
Højre kolonne
   
Bootstrap Layout med 2 søjler

3 kolonner ...

   
      
Venstre kolonne
      
Centerkolonne
      
Højre kolonne
   
Bootstrap-layout med 3 søjler
Bemærk: De lysegrå kantlinjer omkring søjlerne i eksemplerne ovenfor blev tilføjet, så du kan visualisere konturen af ​​hver kolonne. Se arbejdslayouterne på Codeply.

Grundlæggende gitterkoncepter forstås hurtigt, men du spekulerer måske på, hvorfor al denne HTML-markering er nødvendig. Du har måske nogle spørgsmål som ...

__Hvorfor har jeg brug for en container?

__Kan jeg gøre en søjle bredere end den anden?

Jeg vil behandle netspørgsmål som disse om lidt. Men først vil jeg tage et skridt tilbage for at forklare noget meget vigtigt ved brug af nettet. Kan du huske den frustrerede Bootstrap-bruger tidligere, der sagde ...

”Jeg har prøvet at bruge Bootstrap, men det ser ud til at få noget til at arbejde er vanskeligt eller umuligt.”

Stol på mig. At forstå "Reglerne i gitteret" sparer dig meget tid og frustration. Læs dem omhyggeligt ...

___________________________________________________________________

Reglerne for gitteret:

  1. Kolonner skal være det umiddelbare barn i en række.
  2. Rækker bruges kun til at indeholde kolonner, intet andet.
  3. Rækker skal placeres inde i en beholder.

Disse regler er meget VIGTIGE. Rækkerne & kolonnerne fungerer altid sammen, og du skal aldrig have den ene uden den anden.

Dårlige ting vil ske, hvis du ikke følger nøjagtigt disse 3 enkle Grid-regler. Jeg har besvaret utallige Bootstrap-spørgsmål om Stack Overflow ved blot at anvende disse regler. Først lyder dette muligvis kompliceret, men det er virkelig let, når du forstår, hvordan nettet fungerer.

___________________________________________________________________

Sådan bruges Bootstrap-gitteret __Den rigtige måde.

Beholder

I det grundlæggende eksempel før har du måske bemærket, at jeg brugte .containeren til at pakke .row. Containeren er rodelementet (a.k.a: øverste niveau, yderste) af Bootstrap Grid.

   
      
Jeg er tilfreds inde i gitteret!
   

Containeren kan bruges til at indeholde ethvert element og ethvert indhold. Det bruges ikke kun til raster og kolonner i gitteret. For eksempel er dette perfekt gyldig Bootstrap-markering:

   

Min overskrift

   
      
Jeg er tilfreds inde i gitteret!
   

Først kan containeren virke triviel eller unødvendig, men det er meget vigtigt at kontrollere layoutets bredde. Containeren bruges også til at justere den venstre og højre kant af layoutet jævnt i browserens visningsport.

FYI: Viewport - Det synlige område inde i browservinduet.

Bootstrap 4 har 2 typer containere. I mine eksempler brugte jeg .container, men der er også fuldbredde .containervæske. Du kan bruge en af ​​disse:

1 - Container med fast bredde til at centrere dit layout i midten:

2 - Container i fuld bredde til et layout, der spænder over hele bredden:

.Containeren skaleres ned i bredden responsivt (da skærmbredden indsnævres), så den til sidst bliver fuld bredde som .containervæsken på mindre enheder.

Påmindelse: En container kan bruges til at indeholde ethvert indhold, ikke kun raster og kolonner i gitteret. Men hvis du bruger rutenet og kolonnerne i rutenettet, skal rækkerne placeres i en container. Prøv Container-demoen på Codeply

Når du bruger nettet, placeres der en række mere i containeren. Du kan have flere rækker i en container, og du kan have flere containere på en side. Det hele afhænger af det layout, du prøver at opnå, men bliv ikke for bekymret over det endnu.

Det er vigtigt, at en container bruges til at indeholde raster i rutenettet (.row).

Rækker har en negativ venstre / højre margin på -15px. Container-polstring på 15 px bruges til at modvirke de negative marginer på rækken. Hvis du ikke lægger en række i en container, rækker rækken den af ​​containeren, hvilket forårsager en uønsket vandret rulle.

Rækker & kolonner

I et stykke tid har jeg ønsket, at Bootstrap .row faktisk ikke blev navngivet "række". Navnet "række" er ofte vildledende og skjuler det faktiske formål med .row.

Når du tænker "række", tror du sandsynligvis en vandret linje, hvilket er okay, MEN, det er bedre at tænke på .row simpelthen som en overordnet kolonne.

Tænk på rækken som en gruppe af kolonner

Dette skyldes, at kolonner inde i .row ikke altid er anbragt vandret på tværs af visningen. Nogle gange ønsker vi, at søjlelayoutet skal være vandret, mens andre gange ønsker vi, at søjlerne skal layoutes lodret ned i visningsområdet. Begrebet horisontalt kontra lodret layout er essensen af ​​Responsive Design. Det eneste formål med "række" er at indeholde 1 eller flere "kolonner".

INDLÆG IKKE INDHOLD Direkte inden for række!

   Dette er meget dårlig, forkert måde, ingen bueno !!
   

Dette er også meget dårligt, den forkerte måde !!

   

Ingen overskrifter heller! Dette er den forkerte måde !!

Kolonner, og kun kolonner, er placeret inde i rækken.

Indhold placeres i kolonnerne.

   
Glad :-) Dette er den rigtige måde.

Det er også vigtigt at nævne, at .row vises: flex. Som Flexbox-børn er kolonnerne i hver række den samme højde. På grund af Flexbox kan vandret og lodret justering (juster højre, center, bund osv.) Let udføres ved hjælp af Bootstrap 4's Flex- og Auto-margin Utility-klasser.

Nu er det tid til at se dybere på Rækker og kolonner, og nøjagtigt hvordan de arbejder sammen. Der er forskellige "typer" af kolonner, og forskellige måder at bruge dem i dit layout. De er som magi.

Lykke er, kolonner ...

  • Opret vandrette opdelinger på tværs af visningen.
  • Kan have forskellige definerede bredder.
  • Kan ændres i bredden ved forskellige skærmbredder.
  • Layout vandret fra venstre til højre og derefter lodret op og ned.
  • Kan ændre position (ny ordre) i forhold til søskende i samme række.
  • Er i samme højde som andre søskende i samme række.
  • Kan "vokse" eller "skrumpe" i bredden.
  • Kan automatisk "pakkes" eller "stables" lodret efter behov eller med forskellige skærmbredder.
  • Kan indeholde flere rækker & kolonner__-indlejring.

Alt hvad du behøver at vide om Bootstrap-kolonner.

Bare glem ikke, at søjler skal være det direkte barn i en række.

Søjler skaber vandrette opdelinger på tværs af visningen. Mellemrummet mellem søjlerne kaldes "tagren".

3 kolonner på tværs

Det klassiske Bootstrap-gitter har 12 søjleenheder:

Bemærk til Dummies: Kolonner er faktisk ikke lyserøde. Det bruges kun til at se venstre / højre grænser for kolonnerne. I de fleste tilfælde vil du ikke bruge alle 12 individuelle kolonner som illustreret ovenfor. I stedet bruger du en kombination af de 12 til at indeholde sideindhold ...

Så kolonnerne kan fordeles jævnt op i faktorer på 12. F.eks. 6 kolonner (12/6 = 2):

Og du kan gøre matematikken ...

Kolonnerne kan opdeles ved hjælp af en hvilken som helst del af de 12 enheder. Og det er okay at bruge mindre end 12. Det er også okay at bruge mere end 12, som jeg vil vise dig senere.

Med al denne fleksibilitet er layoutmulighederne tilsyneladende uendelige ...

Men gitteret handler ikke altid om 12. Takket være Flexbox har Bootstrap 4 et nyt “Auto-layout” -søjle. Disse enhedsløse søjler giver dig endnu større fleksibilitet, når det kommer til design af layout.

Nu ved du, hvordan du bruger kolonner til at oprette et vandret layout. Men vent, der er mere! Lad os tale om nogle mere fancy ting, kolonner kan gøre.

Som du lige så ovenfor, kan kolonner have forskellige bredder:

Vidste du det, at kolonnebredde kan ændres afhængigt af skærmbredde?

Dette kaldes Responsive Design, og jeg vil fortælle dig nøjagtigt, hvordan det fungerer meget snart. Men først skal jeg først afslutte med at fortælle dig om kolonner. Husker du før, da jeg sagde ”Det er okay at bruge mere end 12 kolonner på række”?

Kolonner i det samme rækkelayout vandret på tværs, og stabl derefter lodret ned. Denne lodrette "stabling" eller "indpakning" forekommer, når søjlenhederne i en enkelt række overstiger 12. Dette er kendt som "Søjleindpakning" ...

Kolonner i samme række vikles til næste linje hver 12. enhed:

Kolonnebredde og "indpakning" kan styres ved hjælp af forskellige Responsive Grid Tiers (a.k.a "Grid Breakpoints"):

Kolonner kan ændre position (ny ordre) i forhold til søskende i samme række:

Kolonner kan indeholde babyrækker og kolonner. Dette kaldes "reden":

Søjler kan "vokse" eller "skrumpe" i bredden. Dette er autolayout-kolonner:

___________________________________________________________________

Sådan reagerer man på responsivt design med Bootstrap.

Grid Tiers, Media Queries og Breakpoints, Oh My!

Jeg er ikke færdig med at tale om rækker og kolonner endnu, fordi de er stjernens show, når det kommer til Responsive Design.

Det handler om bredde.

Bootstrap 4 har 5 responsive niveauer (f.eks. "Breakpoints"), som du måske har bemærket i nogle af de foregående kolonneeksempler (dvs. col-lg-4, col-md).

Responsive Breakpoints, baseret på skærmbredde:

  • (xs) - skærmbredde <576px (Dette er standardindstillingen)
  • sm - skærmbredde ≥ 576px
  • md - skærmbredde ≥ 768px
  • lg— skærmbredde ≥ 992px
  • xl - skærmbredde ≥ 1200px
Bortset fra: Hvorfor lagde jeg (xs) i parentes og ikke de andre breakpoints? Da xs (ekstra-lille) er standardbrudspunktet, bruges infix -xs, der blev brugt til Bootstrap 3.x, længere i Bootstrap 4.x. Så i stedet for at bruge col-xs-6, er det simpelthen col-6.

Bootstrap bruger CSS-medieforespørgsler til at etablere disse Responsive Breakpoints. De giver dig mulighed for at kontrollere kolonneadfærd på forskellige skærmbredder.

For eksempel: her er 2 kolonner, hver 50% bredde:

   
      
Kolonne 1
      
Kolonne 2
   

Col-sm-6 betyder brug af 6 af 12 kolonner brede (50%) på en typisk lille enhedsbredde (større end eller lig med 768 px):

På mindre end 768px bliver de to kolonner 100% bredde og stakkes lodret:

Dette skyldes (xs) som standard eller implicit breakpoint. Da jeg ikke angav en standardkolonnebredde, blev 50% bredden kun anvendt på 768px og bredere for sm-breakpoint.

Mobil-først!

Da (xs) er standardbrudspunktet, impliceres col-12. Så dette:

Kolonne

Fungerer på samme måde som dette:

Kolonne

Større breakpoints, tilsidesætter Mindre breakpoints.

xs (standard)>
tilsidesat af sm>
tilsidesat af md>
tilsidesat af lg>
tilsidesat af xl

Eller omvendt ...
xl> tilsidesætter lg> tilsidesætter md> tilsidesætter sm> tilsidesætter (xs)

Derfor betyder col-sm-6 virkelig 50% bredde på small-and-up. For den samme kolonnebredde på alle niveauer skal du bare indstille bredden for den mindste række, der ønskes. For eksempel:

..
er det samme som,

..

For en anden kolonnebredde på et større niveau skal du bruge det passende større brudpunkt for at tilsidesætte det mindre brudpunkt. For eksempel 3 kolonner brede på sm og 4 kolonner brede på md-og-op:

..

Bootstrap 4-auto-layout-kolonnerne fungerer også responsivt. På grund af deres enkelhed foretrækker jeg dem frem for de klassiske 12-enhedssøjler. Autolayout-kolonnerne er perfekte til alle layout-scenarier, hvor kolonner med samme bredde kræves. Men glem ikke, 12-enhedskolonnerne kan blandes ind efter behov.

Se på et par auto-layout Grid-eksempler ...

3 kolonner med samme bredde. "Cols" forbliver horisontale i alle bredder og stables ikke lodret, fordi xs-brudspunktet er standard:

   
      
1
      
2
      
3
   

3 kolonner med samme bredde (lydhør). I dette eksempel forbliver 'cols' horisontalt indtil sm-brytningspunktet på 576px og stables derefter lodret:

   
      
1
      
2
      
3
   

Husk, at du kan skifte sm, uanset hvilket brudpoint (md, lg, xl) er nødvendigt.

2 kolonner, venstre sidepanel og højre. Her er et eksempel på at kombinere de klassiske kolonner med defineret bredde med autolayout-kolonnerne. Den højre kolonne vokser automatisk for at udfylde bredden. Sidebjælken stables ovenpå ved sm-brydepunktet på 576px:

   
      
sidefelt
      
hovedindhold
   

Nøglepunkter i Breakpoints og kolonner:

  • Kolonner stables lodret (og bliver i fuld bredde) ved de mindre skærmbredder, medmindre du bruger en bestemt kolonne * -klasse i din HTML-markering. Brug en bestemt col- * for at forhindre den lodrette stabling.
  • De mindre gitterklasser gælder også for større skærme, medmindre de specifikt tilsidesættes for større skærmbredde. Så
    er faktisk det samme som
    . Derfor behøver du kun at bruge klassen til den mindste bredde, du vil understøtte.
  • Rækker vises: flex, og derfor er kolonner ens højde i den samme række. Brug auto-margener eller Flexbox-justeringselementer og retfærdiggør indhold til vandret eller lodret justering (centrering, bund, højre osv.).

___________________________________________________________________

Sådan bruges Bootstraps JavaScript.

Dernæst vil jeg fokusere på JavaScript-delen af ​​Bootstrap.

Bootstrap-dokumentationen har et meget stort “Komponenter” -afsnit, der indeholder de fleste af de stiliserede CSS-komponenter, som jeg forklarede før. Der er dog overlapning mellem Bootstrap CSS og JavaScript-komponenter. CSS bruges til at style komponenter, mens JavaScript bruges til at gøre komponenter funktionelle.

Nogle Bootstrap-komponenter indeholder kun CSS-drevet formatering og stil, så de ikke bruger JavaScript. Disse kun CSS-komponenter blev undersøgt tidligere i Bootstrap CSS-afsnittet: Badges, brødkrummer, knapper, kort, formindgange, Jumbotron, pagination.

Men de fleste komponenter har JavaScript-drevet opførsel:

  • modals
  • Alarmer (ingen konfigurationsindstillinger)
  • Karrusel
  • Falde sammen
  • rullemenuerne
  • Navbar
  • popovers
  • Scrollspy
  • værktøjsvink

Du ved muligvis også, at Bootstrap kræver jQuery. Dette skyldes, at alle Bootstrap JavaScript-komponenter implementeres som jQuery-plugins. Der er 2 måder at indstille indstillinger for (konfigurering) af Bootstrap JavaScript-komponenter på.

Dataattributter

Den foretrukne metode er at bruge Data Attributter. Denne metode kræver ikke, at du tilføjer yderligere JavaScript / jQuery-kode, da dataattributten kan bruges direkte i HTML-markeringen. For eksempel,

jQuery

Den anden måde at bruge Bootstraps JavaScript-komponenter på er jQuery. Brug den relevante jQuery-vælgerelementet og et objekt, der indeholder de relevante indstillinger til komponenten. Valgmulighederne for hver komponent er beskrevet i Bootstrap-dokumenter.

$ ( "# MyModal") modal ({kulisse: false}).

Som du kan se Komponentindstillingerne justeres med dataattributterne. De fleste komponenter initialiseres automatisk ved blot at bruge den relevante Bootstrap data-toggle = ”...” attribut og klasser. To undtagelser er Popover og Tooltip, der skal initialiseres manuelt med jQuery. For eksempel:

$ (funktion () {
  $ ( '[Data-skift = "popover"]'). Popover ()
  $ ( '[Data-skift = "tooltip"]'). Værktøjstippet ()
})

Brug af JavaScript-komponenter er tydeligt beskrevet i dokumentationen, som er den bedste reference og konstant vedligeholdes. Stol ikke på tredjepartsvejledninger og websteder som W3Schools, hvis de har en tendens til at blive forældede hurtigt, og du vil i sidste ende undre dig "Hvorfor fungerer min Bootstrap ikke?".

__________________________________________________________________

Sådan tilpasses bootstrap.

Først vil jeg adressere hvorfor, vil du tilpasse Bootstrap. Udviklere ønsker at tilpasse Bootstrap af en eller alle af disse grunde:

  1. Skift et aspekt af udseendet eller stilarterne__ farvepalet, skrifttyper, kantbredder osv.
  2. Skift nogle funktionelle aspekter__ ændre brudpunkter, øg rennen bredde, eller tilføj flere gitter kolonner.
  3. Udvid Bootstrap__ tilføj nye farver, breakpoints og udvid andre eksisterende Bootstrap klasser.

Generelt er der 2 metoder, der bruges til at tilpasse Bootstrap:

1. Enkel tilsidesættelse af CSS

For at kunne vedligeholde skal CSS-tilpasninger placeres i en separat custom.css-fil, så bootstrap.css forbliver umodificeret. Henvisningen til brugerdefineret.css følger efter bootstrap.css for overstyringerne til at arbejde ...


Bare tilføj de ændringer, der er nødvendige i den brugerdefinerede CSS. For eksempel siger jeg, at jeg ville fjerne afrundede rammer fra kort, knapper og formindgange. Jeg tilføjer CSS-reglen i brugerdefineret.css ...

/ * fjern afrunding fra kort, knapper og indgange * /
.card, .btn, .form-control {
   grænseradius: 0;
}

Med denne enkle CSS-ændring har kort, knapper og formindgange nu firkantede hjørner ...

Rundede kanter fjernes nu fra knapperne
Bemærk: Det er ikke nødvendigt at bruge! Vigtigt i den tilpassede CSS, medmindre du tilsidesætter en af ​​Bootstrap Utility-klasser. CSS-specificitet fungerer altid for, at én CSS-klasse tilsidesætter en anden.

2. Tilpas ved hjælp af SASS

Hvis du er bekendt med SASS (og du burde bruge denne metode), kan du tilpasse Bootstrap med din egen custom.scss. Der er et afsnit i Bootstrap-dokumenter, der forklarer dette, men dokumenterne forklarer ikke, hvordan man bruger eksisterende variabler i dine brugerdefinerede.scss.

Tilsidesættelsen og "tilpasning" er defineret i en tilpasset.scss-fil (du kan navngive den, hvad du vil), der er adskilt fra Bootstrap SASS-kildefiler. På denne måde påvirker ikke alle ændringer, du foretager, Bootstrap-kilden, hvilket gør fremtidige ændringer og opgraderinger meget lettere.

1. Overvej Bootstraps SASS-mappestruktur sammen med din brugerdefinerede.scss ...

| - \ bootstrap
| | - \ scss
| | | - \ mixins
| | | - \ hjælpeprogrammer
| | | - bootstrap.scss
| | | - variabler.scss
| | | - funktioner.scss
| | | - ... flere bootstrap scss-filer
| custom.scss

2. I din custom.scss skal du importere de Bootstrap-filer, der er nødvendige til tilsidesættelsen. (Normalt er dette kun variabler.scss. I nogle tilfælde, med mere komplekse cutomiseringer, kan du muligvis også få brug for funktionerne, mixins og andre Bootstrap-filer.). Foretag ændringerne, og @import derefter "bootstrap". Det er vigtigt at importere Bootstrap efter ændringerne.

Lad os for eksempel ændre kropsbaggrundsfarven til lysegrå #eeeeee og ændre den blå primære kontekstuelle farve til Bootstraps $ lilla variabel ...

/ * custom.scss * /

/ * importer de nødvendige Bootstrap-filer * /
@import "bootstrap / features";
@import "bootstrap / variables";

/ * ------- begynde tilpasning -------- * /

/ * blot tildele værdien * /
$ body-bg: #eeeeee;

/ * eller, brug en eksisterende variabel * /
$ tema-farver: (
  primær: $ lilla
);
/ * ------- sluttilpasning -------- * /

/ * Importer endelig Bootstrap for at indstille ændringerne! * /
@import "bootstrap";

2a (valgfrit). Du kan også udvide eksisterende Bootstrap-klasser efter @import "bootstrap"; at oprette nye tilpassede klasser. For eksempel er her en ny .row-dark-klasse, der udvider (arver) Bootstrap .row-klassen og derefter tilføjer en baggrundsfarve ...

/ * Opret eventuelt nye brugerdefinerede klasser fra eksisterende klasser * /
 .row-dark {
    @extend .row;
    baggrund-farve: # 333333;
    farve: #ffffff;
 }

3. Byg med SASS. CSS-output vil indeholde de tilpassede tilsidesættelser! Glem ikke at kontrollere includePaths, hvis din @import mislykkes. For en komplet liste over variabler, som du kan tilsidesætte, se filen variables.scss. Der er også disse globale variabler.

Husk, at med SASS skal du @import “bootstrap” efter tilpasningerne i custom.scss for at få dem til at fungere! Når SASS er samlet til CSS (dette gøres ved hjælp af en SASS-kompilator / processor på serversiden), er den resulterende CSS den tilpassede Bootstrap.

Sammendrag er det sådan, hvordan SASS-tilpasninger fungerer:

1_ Først når den tilpassede.scss-fil behandles ved hjælp af SASS, defineres! Standardværdierne i bootstrap / variables.scss.

2_ Dernæst indstilles vores brugerdefinerede værdier, der tilsidesætter alle variabler, der havde! Standardværdier indstillet i bootstrap / variables.scss.

3_ Endelig importeres Bootstrap (@import "bootstrap"), der gør det muligt for SASS-processoren (A.K.A.-compiler) at generere alle de relevante CSS ved hjælp af både Bootstrap-standarderne og den tilpassede tilsidesættelse. Tilpasning er vigtig, da ikke alle ønsker det alt for genkendelige Bootstrap-look.

__________________________________________________________________

Sådan oprettes tilpassede bootstrap-temaer.

Brugerdefineret tema Builder

Som jeg forklarede tidligere, er tilpasning af Bootstrap et spørgsmål om at finde de rigtige Bootstrap SASS-variabler, der skal tilsidesættes, og genopbygning af Bootstrap med en SASS-processor.

For at gøre Bootstrap-tilpasninger lettere, opbyggede jeg Themestr.app__ en brugerdefineret temabyger til Bootstrap 4. Hvis du vil oprette dine egne Bootstrap-temaer, men ikke kender SASS, kan du prøve det.

Hele ideen med Themestr.app er at gøre Bootstrap-tilpasningsprocessen lettere og give dig mulighed for at visualisere ændringer undervejs. Det inkluderer starttemaer til øjeblikkeligt at give dine projekter et unikt "ikke-Bootstrap" look. Du kan ændre skrifttyper, farver og mange andre tilpassede variabler baseret på Bootstrap SASS.

Når du er færdig, skal du hente det tilpassede SASS eller det komplette CSS til det tilpassede tema. Hvis du vælger at bruge SASS-tilpasningsmetoden, der er forklaret ovenfor, hvad Themestr.app producerer er custom.scss med alle de relevante SASS-variabeltilpasninger.

Se en video: https://www.youtube.com/watch?v=9XVGnyKTDwY

___________________________________________________________________

Nyttige Bootstrap værktøjer og ressourcer

Her er Bootstrap-værktøjerne nævnt i artiklen. Du vil markere denne liste med must-have Bootstrap-ressourcer.

Officiel Bootstrap-dokumentation

Codeply Bootstrap 4

Bootstrap CDN

Themestr.app

Bootstrap.build

Bootstrap 4 Cheatsheet

Bootstrap 4 Customizer

Bootstrap 4 på WDStack

Bootstrap 4 eksempeluddrag

Top 10 Bootstrap 4 svar

Der er mange andre Bootstrap-ressourcer derude, men de, jeg har nævnt ovenfor, er de mest nyttige, vedligeholdte og ajourførte. Pas på: Mange tutorials og artikler til Bootstrap 4, som dem på W3schools, er fulde af forkert information og dårlig vejledning.

Tag væk

Du har gjort det her! Tak for at du tog dig tid til at læse dette. Jeg håber, du lærte mere om “Sådan gør” Bootstrap. Jeg ser virkelig frem til at læse dine kommentarer. Denne artikel offentliggøres også på: bootstrap.themes.guide