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

Hur skapar jag en användarprofilkort -widget med Bootstrap?

3

Bootstrap har kraftfullare komponenter än den tidigare versionen 3. Utan tvekan är kortkomponenten en av de snygga och mobilvänliga bland andra. I grund och botten kan du blanda och matcha korten för att skapa olika typer av widgets. I den här artikeln, låt oss diskutera hur man skapar en Bootstrap -användarprofilkort -widget. Vi använder Bootstrap version 4 och du kan ladda ner alla filer som behövs för denna widget här.

Hur det ser ut?

Nedan är hur widgeten kommer att se ut och du kan anpassa färgerna och se ut efter dina behov med standardfärgens egenskaper för bakgrunden.

Hur skapar jag en användarprofilkort -widget med Bootstrap?

Widgeten har följande delar:

  • Namn, profil, kompetens och plattformsinformation
  • Profilbild
  • Tre sociala profildetaljer (du kan också använda för olika ändamål)

Låt oss skapa widgeten

Nedan finns den fullständiga koden för widgeten.

<div class="container-fluid"> <div class="row"> <div class="col-12"> <div class="card card-inverse" style="background-color: #333; border-color: #333;"> <div class="card-block"> <div class="row"> <div class="col-md-8 col-sm-8"> <h2 class="card-title">Name: Stffanie Osterich</h2> <p class="card-text"><strong>Profile: </strong> Web Developer </p> <p class="card-text"><strong>Skills: </strong> Theme, plugin and website development </p> <p><strong>Platform: </strong> <span class="badge bg-primary">WordPress</span> <span class="badge bg-info">Weebly</span> <span class="badge bg-warning">Bootstrap</span> <span class="badge bg-success">Wix</span> </p> </div> <div class="col-md-4 col-sm-4 text-center"> <img class="btn-md" src="assets/images/card-image.png" alt="" style="border-radius:50%;"> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong> 5.2K </strong></h2> <p><small>Fans</small></p> <button class="btn btn-primary btn-block btn-md"><span class="fa fa-facebook-square"></span> Like </button> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong>1.4K</strong></h2> <p><small>Following</small></p> <button class="btn btn-success btn-block btn-md"><span class="fa fa-twitter-square"></span> Tweet </button> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong>3.8K</strong></h2> <p><small>Followers</small></p> <button type="button" class="btn btn-danger btn-block btn-md"><span class="fa fa-google-plus-square"></span> Follow </button> </div> </div> </div> </div> </div> </div> </div>

De tre första div-taggarna med "container-fluid", "row" och "col-12" krävs helst inte för en enda widget. Men vi brukade se till att widgeten kan infogas var som helst mellan Bootstrap-layouten med lämplig widget marginaler.

Huvuddelen av widgeten är i grunden en kortkomponent med undersektioner. Vi har använt standardkort med "invers-card" och använder inline-stil för att tilldela bakgrunds- och kantfärger som #333. Nästa är ett "kortblock" -avsnitt med ett "rad" -element uppdelat i rutnät som nedan:

Hur skapar jag en användarprofilkort -widget med Bootstrap?

I princip finns det 5 rutnät, ett med "col-md-8 col-sm-8" och de återstående är med "col-md-4 col-sm-4" klasser för att dela upp området. Den övre delen har 8+4 rutnät och den nedre sociala sektionen har 4+4+4 rutnät.

Observera att vi har använt "md" och "sm" i rutnätsklasserna som "col-md-8" och "col-sm-8". Detta skapar brytpunkterna på medelstora och små enheter för att få lyhördhet.

Nu är den grundläggande layouten klar och nästa steg är att lägga till innehåll och försköna det.

Övre sektion

  • Under det första kol-8-avsnittet kan du lägga till "kort-titel" och "kort-text" som namn och profilinformation. Plattformsdelen använder standardmärke -komponenten för att markera taggarna i olika färger.
  • Det andra col-4-avsnittet har en profilbild med storleken 128 × 128 pixlar.

Nedre sektionen

  • Nedre sektionen har tre "col-4" sektioner med sociala profillänkar och beskrivning.

Ytterligare CSS

Du bör inkludera CDN -länken till de fantastiska teckensnittsikonerna för att visa ikonerna på knapparna. Vi har också anpassat knappelementet med hjälp av ytterligare CSS:

<style> .btn{ border-radius: 0; } .btn-md { border-width: 0; outline: none; border-radius: 0; box-shadow: 2px 2px 2px rgba(0, 0, 0, .6); cursor: pointer; } </style>

Samma CSS-klass används med profilbildbild för att få skuggaeffekt och inline-stilen "kantradie: 50%" används på profilbilden för att ändra den till cirkelform.

Variationer

Du kan skapa olika stilar av användarprofilbilar genom att blanda och matcha färger och rutnätlayout. Nedan följer några av de möjligheter som visas till exempel:

Profilkort med vänster bild

Hur skapar jag en användarprofilkort -widget med Bootstrap?

Användarprofilkort med vit bakgrund

Hur skapar jag en användarprofilkort -widget med Bootstrap?

Profilkort med primär bakgrund (Du kan ställa in information, varning, fara eller framgångsfärger)

Hur skapar jag en användarprofilkort -widget med Bootstrap?

Användarkort med två kolumner

Hur skapar jag en användarprofilkort -widget med Bootstrap?

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