Bootstrap-tutorial


bootstrap 4 tutorial


bootstrap er en front-end ramme, der hjælper dig med at opbygge mobile mobile websteder hurtigere og lettere. Først udviklet af Twitter, Bootstrap bruges nu til alt fra udvikling af webapplikationer til WordPress-temaer. Det er også helt gratis, alsidigt og intuitivt.

Med Bootstrap kan du trylle frem komplekse websider fra standard HTML og tilpasse dem til dine behov. Bootstrap leveres også med et antal jQuery-plugins, der kan give ekstra funktionalitet, såsom karrusler, knapper, værktøjstip og mere.

Sidst, men ikke mindst, giver det dig en masse genveje til at oprette websider, der sparer dig tid og energi. Alt hvad du behøver er en grundlæggende forståelse af HTML og CSS for at skabe, der er responsive, mobile-first og kompatible med alle moderne browsere.

P.S. Bootstrap er ikke en perfekt mulighed for komplette begyndere. Nogle HTML- og CSS-viden ville være nyttige. Alternativt kan du bruge webstedsbyggere eller WordPress til at oprette et websted.

Sådan opretter du et websted ved hjælp af Bootstrap (indholdsfortegnelse):

  1. Trin 1: Opsætning og oversigt
    1. Opret en HTML-side
    2. Indlæs Bootstrap via CDN eller vært det lokalt
    3. Medtag jQuery
    4. Indlæs Bootstrap JavaScript
    5. Sæt det hele sammen
  2. Trin 2: Design din destinationsside
    1. Tilføj en navigationslinje
    2. Medtag tilpasset CSS
    3. Opret en sideindholdsbeholder
    4. Tilføj baggrundsbillede og brugerdefineret JavaScript
    5. Tilføj et overlay
    6. Medtag en sidetitel og brødtekst
    7. Opret en CTA-knap
    8. Opsæt et tresøjlesektion
    9. Tilføj en kontaktformular
    10. Opret en sidefod med to søjler
    11. Tilføj medieforespørgsler
    12. Få dit websted live

Total tid til at oprette et websted ved hjælp af Bootstrap: 3-4 timer.
Færdighedsniveau: Begynder til mellemliggende

Trin 1: Opsætning og oversigt


For at bruge Bootstrap skal du først integrere det i dit udviklingsmiljø, også kendt som en webside. Til det har du to forskellige muligheder: indlæse det eksternt eller download og brug Bootstrap lokalt. For begge har du dog først brug for noget at indlæse det i.,

1. Opret en HTML-side

Som et første trin opretter vi en simpel HTML-skabelon som base, hvor vi vil bruge Bootstrap. Til det er den første ting, du vil gøre, at oprette en mappe på din computer eller server til projektfilerne. I dette tilfælde vil jeg blot kalde det bootstrap. Her skal du oprette en ny tekstfil og kalde den index.html. Åbn den med en teksteditor, du vælger (f.eks. notepad++) og indsæt derefter koden herunder i den.





Eksempel på Bootstrap-vejledning








Glem ikke at gemme din fil, før du går videre!

2a. Indlæs bootstrap via CDN

Som allerede forklaret består Bootstrap hovedsageligt af stilark og scripts. Som sådan kan de indlæses i overskriften og sidefoden på din webside som andre aktiver, såsom tilpassede skrifttyper. Rammerne tilbyder en CDN (indholdsleveringsnetværk) adgangssti til det. Du kan finde det på Bootstrap download-side, yderligere nedenfor.

For at få Bootstrap ind på din side skal du blot indsætte nedenstående kode på del af din skabelon.

Når du nu gemmer filen, indlæser enhver browser, der åbner den, automatisk Bootstrap-aktiverne.

Brug af fjernmetoden er en god idé, da mange brugere allerede har rammerne i cache i deres browser. Hvis det er tilfældet, behøver de ikke genindlæse det, når de kommer til dit websted, hvilket fører til hurtigere sideindlæsningstid. Som en konsekvens er dette den anbefalede metode til live-websteder.

Dog til eksperimentering og udvikling, eller hvis du vil være uafhængig af en internetforbindelse, kan du også få din egen kopi af Bootstrap. Dette er hvad jeg laver til denne tutorial, fordi det også resulterer i mindre kode at sende.

2b. Host Bootstrap lokalt

En alternativ måde at konfigurere Bootstrap er at downloade den til din harddisk og bruge filerne lokalt. Du finder downloadmuligheder på samme sted som linkene til fjernversionen. Her skal du sørge for at hente de kompilerede CSS- og JS-filer. Du behøver ikke kildefilerne.

Når du har gjort det, skal du pakke filen ud og kopiere dens indhold i det samme bibliotek som index.html. Derefter kan du indlæse Bootstrap CSS i dit projekt som dette:

Du vil bemærke, at dette inkluderer filstien, hvor Bootstrap-filen findes. I dit tilfælde skal du sørge for, at din sti svarer til din faktiske opsætning. For eksempel kan navnene på bibliotekerne variere, hvis du downloadede en anden version af Bootstrap.

3. Medtag jQuery

For at få den fulde funktionalitet af Bootstrap, skal du også indlæse jQuery-biblioteket. Også her skal du muligheden for at indlæse det eksternt eller være vært for det lokalt.

I det første tilfælde finder du linket til den seneste version af jQuery her. Du kan bruge det til at indlæse biblioteket på din side ved at anbringe kodelinjen nedenfor lige før, hvor det står på din side.

alternativt, download jQuery (højreklik> Gem link som…), pakkes ud, og læg den i projektmappen. Indsæt den derefter på samme sted som din fil på denne måde:

Kontroller igen, at stien svarer til din opsætning.

4. Indlæs Bootstrap JavaScript

Det sidste trin i opsætningen af ​​Bootstrap er at indlæse Bootstrap JavaScript-biblioteket. Disse er inkluderet i den downloadede version af rammen, og du finder også links til eksterne kilder på samme sted som før. Vi indlæser det imidlertid på et andet sted end typografiet. I stedet for overskriften går den ind i sidefoden lige efter opfordringen til jQuery.

Du kan kalde det eksternt sådan:

Eller lokalt sådan:

5. Sæt det hele sammen

Hvis du har fulgt ovenstående trin korrekt, skal du ende med en fil, der ser sådan ud til den eksterne løsning:

   Eksempel på Bootstrap-vejledning         

Alternativt, hvis du er vært for lokalt, skal din sideskabelon ligne koden herunder:

   Eksempel på Bootstrap-vejledning         

Hvis det er det, du har, og du gemte dit arbejde, er du nu klar til at gå videre til næste trin.

Trin 2: Design din destinationsside


Okay, det var ganske vist meget forberedelsesarbejde. Dog var det ikke meget hårdt, vel? Plus, nu begynder det sjove.

I øjeblikket, når du navigerer til dit eksempelwebsted, skal du blot se en tom side. Tid til at ændre det.

1. Tilføj en navigationslinje

Den første ting, vi vil gøre, er at tilføje en navigationslinje øverst på siden. Dette giver dine besøgende mulighed for at komme rundt på dit websted og opdage resten af ​​dine sider.

Til det vil vi bruge navbar klasse. Dette er en af standardelementer af Bootstrap. Det opretter et navigationselement, der som standard er responsivt og automatisk falder sammen på mindre skærme. Det tilbyder også indbygget support til tilføjelse af branding, farveskemaer, afstand og andre komponenter.

Vi vil bruge det som nedenfor og sende det lige under tag:

 Logo   

Nogle forklaringer på koden:

  • navigationslinjetype-udvide-md – Dette angiver, på hvilket tidspunkt navigationslinjen udvides fra lodret eller hamburgerikon til en vandret bjælke i fuld størrelse. I dette tilfælde har vi indstillet det til mellemstore skærme, som i Bootstrap er noget større end 768px.
  • navbar-mærke – Dette bruges til dit websteds branding. Du kan også medtage en logo-billedfil her.
  • navbar-toggler – Angiver skifteknappen for den sammenklappede menu. Stykket data-toggle = "sammenbrud" definerer, at dette vil vende sig til en hamburgermenu, ikke til rullelisten, hvilket er den anden mulighed. Det er vigtigt, at du definerer en data-target med et CSS-id (defineret af #) og indpakning a div med det samme navn omkring det faktiske navbar element.
  • navigationslinjetype-toggler-ikon – Som du sandsynligvis kan gætte, skaber dette ikonet, brugere klikker på for at åbne menuen på mindre skærme.
  • navbar-nav – Klassen for
      listeelement, der indeholder menupunkterne. Sidstnævnte er betegnet med nav-element og nav-link.

    Hvorfor forklarer jeg det så meget?

    Fordi det er pointen med Bootstrap. Du har alle disse standarder, der giver dig mulighed for hurtigt at oprette elementer med nogle HTML- og CSS-klasser. Du behøver ikke at skrive nogen CSS for at give styling, alt er allerede konfigureret i Bootstrap. Desuden er alt mobilt lydhørt ud af kassen! Begynder du at se, hvor nyttig dette er?

    Ovenstående er nok til at tilføje en navigationslinje til dit websted. Men i øjeblikket ser det stadig meget ud ud.

    bootstrap tutorial tilføje navigationslinje

    Det skyldes, at der ikke er meget styling knyttet til det. Mens du er i stand til at tilføje standardfarver (for eksempel ved at give navlen en klasse som bg-mørk navbar-mørk), vi vil i stedet tilføje vores egne.

    2. Medtag tilpasset CSS

    Heldigvis, hvis du ønsker at ændre standard styling, behøver du ikke vade gennem et stort bibliotek med typografiark og foretage ændringerne for hånd. I stedet for, ligesom med et WordPress-underordnetema, kan du tilføje dine egne CSS-filer, som du kan bruge til at overskrive eksisterende styling.

    For det skal du blot oprette en tom fil med din teksteditor og kalde den main.css. Gem det, og tilføj det derefter til hovedafsnittet på dit Bootstrap-sted på denne måde:

    Dette er koden for et typografiark, der findes i hovedmappen. Hvis du beslutter at placere din inde i css mappe, skal du sørge for at medtage den rigtige sti i linket.

    Herfra er du i stand til at tilføje tilpasset CSS til dit websted. For at style typisk navigationslinjen og dens elementer kunne du f.eks. Bruge markering som denne:

    krop { polstring: 0; margen: 0; baggrund: # f2f6e9; } /*--- navigations bar ---*/ .navbar { baggrund: # 6ab446; } .nav-link, .navbar-brand { farve: #fff; markør: markør; } .nav-link { margin-right: 1em! vigtigt; } .nav-link: hover { farve: # 000; } .navbar-kollaps { begrunde-indhold: flex-end; }

    Og her er resultatet:

    bootstrap tutorials stil navigationslinje

    Ser bedre ud end før, gør det ikke?

    3. Opret en sideindholdsbeholder

    Efter navigationslinjen er den næste ting, du ønsker, en container til sideindholdet. Dette er virkelig let i Bootstrap, da alt hvad du har brug for det, er dette under navbar-tagget:

    Bemærk! beholder-væske klasse. Dette er en anden af ​​disse standard Bootstrap klasser. Anvendelse af det på div element anvender automatisk en masse CSS til det.

    Det -væske del sørger for, at containeren strækker sig over hele skærmens bredde. Der er også bare en beholder, som har faste bredder anvendt på det, så der vil altid være plads på begge sider af skærmen.

    Men hvis du nu genindlæser siden, ser du stadig ikke noget (medmindre du bruger udviklerværktøjerne). Det skyldes, at du kun oprettede et tomt HTML-element. Dette begynder at ændre sig nu.

    4. Tilføj et baggrundsbillede og tilpasset JavaScript

    Som det næste trin i denne Bootstrap-tutorial, ønsker vi at inkludere et baggrundsbillede på fuld skærm til vores destinationssidehoved. Til det bliver vi nødt til at bruge nogle jQuery til at få billedet til at strække sig hele vejen over skærmen.

    Du gør det på samme måde som du inkluderer tilpasset CSS. Opret først en tekstfil med navnet main.js og placer det i din sidemappe. Derefter skal du ringe til det inden afslutningen mærke indeni index.html.

    Derefter kan du kopiere og indsætte dette stykke kode for at fremstille

    element strækker sig over hele skærmen:
    $ (Dokument) .ready (function () { $ ( 'Header') højde ($ (vindue) .height ()).; })

    Så er det eneste, der er tilbage, at indstille et baggrundsbillede. Du kan gøre det sådan indeni main.css:

    .header { baggrund-image: url ('images / header-background.jpg'); baggrund-størrelse: dækning; baggrundsposition: centrum; position: relativ; }

    Hvis du placerer et billede af tilstrækkelig størrelse på det sted, der er angivet af stien ovenfor, opnår du et resultat, der ligner dette:

    bootstrap-tutorial inkluderer baggrundsbilledet med header

    5. Tilføj et overlay

    For at gøre baggrundsbilledet ekstra stilfuldt tilføjer vi også et overlay. Til det opretter du et andet div-element inden for det, du lige har inkluderet tidligere.

    Derefter kan du tilføje følgende i din brugerdefinerede CSS-fil:

    .overlay { position: absolut; min-højde: 100%; min. bredde: 100%; venstre: 0; top: 0; baggrund: rgba (0, 0, 0, 0,6); }

    Dette skaber denne dejlige overlay til det billede, du indtastede tidligere:

    bootstrap tutorial tilføje overlay

    6. Medtag en sidetitel og brødtekst

    Nu vil du sandsynligvis tilføje en sidetitel i form af en overskrift plus noget brødtekst. På den måde ved dine besøgende straks, hvilket sted de er på, og hvad de kan forvente af det.

    For at oprette dem skal du blot tilføje dette uddrag inde i beholderen, du opsatte i det sidste trin, under overlayet:

    Velkommen til destinationssiden!

    Lorem ipsum dolor sidder amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, i pharetra sem ullamcorper.

    Føj derefter følgende markering til main.css.

    .beskrivelse { venstre: 50%; position: absolut; top: 45%; transform: oversætte (-50%, -55%); tekstjustering: center; } .beskrivelse h1 { farve: # 6ab446; } .beskrivelse p { farve: #fff; skriftstørrelse: 1.3rem; linjehøjde: 1,5; }

    Når du gør det, ser landingssiden nu sådan ud:

    bootstrap tutorial tilføje sidetitel og beskrivelse

    Det begynder virkelig at komme sammen, er det ikke?

    7. Opret en CTA-knap

    Ingen destinationsside er komplet uden opfordring til handling, oftest i form af en knap. Derfor ville vi være uhyggelige med ikke at medtage, hvordan man opretter en i denne Bootstrap-tutorial.

    Rammen tilbyder masser af værktøjer til at oprette knapper hurtigt og nemt. Du kan finde mange eksempler her. I mit tilfælde tilføjer jeg følgende markering lige under sideindholdet inde i beholder:

    Derudover tilføjer jeg denne CSS til main.css:

    .beskrivelse knap { kant: 1px solid # 6ab446; baggrund: # 6ab446; grænseradius: 0; farve: #fff; } .beskrivelse knap: hover { kant: 1px solid #fff; baggrund: #fff; color: # 000; }

    Efter at have gemt og genindlæst ser det sådan ud:

    bootstrap-tutorial føje opkald til handlingsknappen

    8. Opret et tresøjlesektion

    Jeg er allerede ganske tilfreds med, hvordan tingene formes op. Vi er dog ikke færdige med siden endnu. Herefter ønsker vi at oprette tre kolonner under hovedindholdet for yderligere information. Dette er en specialitet med Bootstrap, da den spiller til sin styrke: oprette et gitter. Sådan gør du i dette tilfælde:

    Lorem ipsum

    Lorem ipsum dolor sidder amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum

    Lorem ipsum dolor sidder amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Den første ting du vil bemærke er række element. Du har brug for dette, hver gang du opretter kolonner for at fungere som en beholder til gitteret.

    Hvad angår kolonnerne, har de alle flere klasser: col-Ig-4, col-md-4 og col-sm-12. Disse angiver, at vi har at gøre med kolonner og den størrelse, de vil have på forskellige skærme.

    For at forstå dette, skal du vide, at i et Bootstrap-gitter tilføjer alle kolonner i en række altid op til tallet 12. Så at give dem klasserne ovenfor betyder, at de vil tage en tredjedel af skærmen op på store og mellemstore skærme (12 divideret med 3 er 4), men hele skærmen på små enheder (12 ud af 12 kolonner).

    Det giver mening, gør det ikke?

    Du vil også bemærke, at jeg inkluderede billeder og tilføjede .billede-væske klasse til dem. Dette er for at gøre dem lydhøre, så de skalerer sammen med en skærm, som siden vises på.

    Derudover har du følgende styling inkluderet på det sædvanlige sted:

    .funktioner { margin: 4em auto; polstring: 1em; position: relativ; } .feature-title { farve: # 333; skriftstørrelse: 1.3rem; fontvægt: 700; margin-bund: 20px; tekst-transformation: store bogstaver; } .funktioner img { -webkit-box-skygge: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-skygge: 1 px 1 px 4 px rgba (0, 0, 0, 0,4); kasseskygge: 1 px 1 px 4 px rgba (0, 0, 0, 0,4); margin-bund: 16px; }

    Når det tilføjes under hovedindholdet og gemmes, ser det sådan ud:

    bootstrap tutorial tilføje søjle med tre kolonner

    9. Tilføj en kontaktformular

    Du vil bemærke, at et af de nye felter stadig er tomt. Dette var med vilje, fordi vi ønsker at tilføje en kontaktformular til den. Dette er en meget normal praksis for destinationssider for at give besøgende mulighed for at komme i kontakt.

    Det er ret let at oprette en kontaktformular i Bootstrap:

    Kom i kontakt!

    På nuværende tidspunkt skulle jeg ikke være nødt til at forklare markeringen for at oprette kolonner mere. Her er hvad resten af ​​markeringen betyder:

    • formular-gruppe – Bruges til at vikle omkring formularfelter til formatering.
    • formular-kontrol – Betegner formfelter som input, tekstområder osv.

    Der er meget mere, du kan gøre med formularer, som du kan finde ud af i dokumentation. Til demonstrationsformål er ovenstående dog nok. Placer den i den resterende tomme søjle, og tilføj derefter denne styling main.css:

    .funktioner .form-kontrol, .funktioner input { grænseradius: 0; } .funktioner .btn { baggrund-farve: # 589b37; kant: 1px solid # 589b37; farve: #fff; margin-top: 20px; } .funktioner .btn: hover { baggrundsfarve: # 333; kant: 1px solid # 333; }

    Når du gør det, får du en formular som denne:

    bootstrap-tutorial inkluderer kontaktformular

    10. Opret en sidefod med to søjler

    Okay, vi kommer nu mod slutningen af ​​Bootstrap-tutorial. Den sidste ting, du vil føje til din destinationsside, er en sidefodsdel med to kolonner. På nuværende tidspunkt bør dette ikke udgøre meget af et problem for dig længere.

    Yderligere Information

    Lorem ipsum dolor sidder amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum dolor sidder amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Kontakt

    1640 Riverside Drive, Hill Valley, Californien
    [Email protected]
    + 01 234 567 88
    + 01 234 567 89

    Udover den sædvanlige gittermarkering fremhæver dette afsnit et par muligheder for at ændre typografi med Bootstrap:

    • tekst-store bogstaver
    • font-weight-fed
    • tekst-center

    Det skal være ret tydeligt fra navnene på de klasser, de gør. Du kan finde mere information om Bootstrap og typografi her.

    Ud over ovenstående kan du bruge styling som denne:

    .sidefod { baggrund-farve: # 222; farve: #ccc; polstring: 60px 0 30px; } .footer-copyright { farve: # 666; polstring: 40px 0; }

    Dette resulterer i en smuk sidefod, der ser sådan ud:

    bootstrap-tutorial inkluderer sidefod

    11. Tilføj medieforespørgsler

    Siden er dybest set klar. Det er også fuldt ansvarligt. I mobilvisningen af ​​browseren kommer det øverste afsnit imidlertid ikke helt rigtigt endnu.

    bootstrap-tutorialfejl ved mobildesign

    Ingen bekymringer, du kan dog rette det ganske let med en simpel medieforespørgsel. Medmindre du bruger SASS til at komponere dit Bootstrap-sted, fungerer disse på samme måde som i andre tilfælde. Du skal bare huske på forudindstillede brudpunkter inkluderet i Bootstrap.

    Som en konsekvens af dette, kan du blot inkludere et stykke kode som dette for at rette ovenstående problem:

    @media (maks. bredde: 575,98px) { .beskrivelse { venstre: 0; polstring: 0 15px; position: absolut; Top 10%; transform: ingen; tekstjustering: center; } .beskrivelse h1 { skriftstørrelse: 2em; } .beskrivelse p { skriftstørrelse: 1.2rem; } .funktioner { margen: 0; } }

    Efter dette er alt som det skal:

    bootstrap-tutorial tilføj medieforespørgsel

    12. Upload dit websted til en webhost

    Hvis du har fulgt med, skal du nu have et færdigt websted, der også er på mobil og er helt lydhør.

    Men indtil videre er det ingen, men du kan se det. For at ændre det har du brug for en webhost og et domæne. På den måde kan folk indtaste din webstedsadresse i deres browserbjælke og derefter få adgang til dit nyligt præciserede Bootstrap-websted online.

    For at give dem mulighed for det, skal du uploade webstedet til din server. Du kan gøre det med en FTP-klient som FileZilla. Saml din FTP-hostadresse, brugernavn og adgangskode fra din hostingudbyder for at oprette forbindelse til din server eksternt. Når du gør det, skal du være i stand til at se de filer og mapper, der i øjeblikket findes der.

    upload bootstrap-websted til server via ftp

    Naviger til det bibliotek, dit domæne er henvist til (normalt rodkataloget). Når du har gjort det, skal du blot finde mappen med dine Bootstrap-filer på din harddisk, markere alle filerne indeni og derefter trække dem over til serveren for at starte uploaden. Processen vil tage et stykke tid at afslutte afhængigt af din forbindelseshastighed såvel som antallet og størrelsen på filer.

    Når det er gjort, når du har adgang til dit domæne, skal du imidlertid være i stand til at se det færdige sted i dit browservindue.

    bootstrap-tutorial færdig destinationsside

    Ikke dårligt for et par kodelinjer, ikke?

    Apropos, hvis du vil have hele koden til siden inklusive den tilpassede CSS og JavaScript, kan du downloade dem alle her. Med dette har du alt hvad du behøver for at oprette en destinationsside med Bootstrap.

    Konklusion

    Bootstrap er en open source, front-end udviklingsramme, som enhver kan bruge gratis. Det giver dig mulighed for hurtigt at prototype design, oprette websider og generelt ramme jorden.

    Som du har set i denne Bootstrap-tutorial for begyndere, behøver den kun grundlæggende viden om HTML, CSS og noget valgfrit jQuery. Selvom det ikke er så behageligt som at bruge WordPress, er Bootstrap stadig et gyldigt alternativ til at oprette et websted.

    På nuværende tidspunkt ved du, hvordan du opsætter og installerer Bootstrap og dets komponenter, skaber en enkel destinationsside, indeholder noget grundlæggende indhold og style det. Du kan oprette navigationsmenuer, indstille baggrundsbilleder, inkludere knapper, kolonner og kontaktformularer.

    Der er selvfølgelig mere at lære.

    Takket være denne grundlæggende tutorial til Bootstrap ved du nu nok til at komme videre selv. Hvis du vil dykke dybere ind i rammen, er et godt udgangspunkt W3Schools. Bortset fra det håber vi, at du kunne lide denne nybegyndervejledning og gerne vil høre dine tanker og oplevelser om det.

    Opdatering: Vi oprettede også et bootstrap snyderi til begyndere i .pdf og .png versioner.

    Har du nogen tanker om Bootstrap-tutorial ovenfor? Spørgsmål, kommentarer, anmodninger? Fortæl os det i kommentarfeltet nedenfor!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map