TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan legge til glidebryter for trekkspillinnhold i Weebly?

6

Bootstrap -rammeverket har mange brukerelementer som også kan legges til uavhengig av hverandre på ditt Weebly -nettsted ved å legge til en bit kode. Innholdsglidebryter i trekkspill- eller spoiler -stilelement er et av Bootstrap -elementene som kalles kollaps, og bidrar til å legge til større innhold på et begrenset område. Selv om vi allerede hadde forklart trekkspillet CSS og Weebly App Center, tilbyr Bootstrap -stil en annen måte å legge til glidebryter for trekkspillinnhold på ditt Weebly -nettsted.

Trekkspillinnholdsglidebryter for Weebly

Trekkspillet har følgende funksjoner:

  • Mobilresponsiv automatisk tilpasning til visningsportene på enheten sett på.
  • Hvis du klikker på tittelen, åpnes innholdet i push -down -stil mens du åpner det åpne innholdet i push -up -stil.
  • Som standard er det første lysbildet åpent når siden er lastet inn.
  • Du kan legge til så mange som lysbilder i trekkspillet ditt.
  • Ethvert HTML -element kan legges til som en del av widgeten.
  • Innholdsområdet kan deles inn i 12 kolonner ved hjelp av Bootstrap -rutenettstruktur.

Hvordan legge til glidebryter for trekkspillinnhold i Weebly?

Bootstrap trekkspill for Weebly

Manus:

Legg til skriptet under bunntekstdelen på siden din:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

CSS:

Koble Bootstrap CSS nedenfor under overskriftskodedelen på siden din:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

HTML:

I dette eksemplet har vi brukt tre glidebrytere med følgende detaljer:

  1. Første lysbilde med to kolonner. en med kortbilde og en annen med kortblokk. Denne delen er opprettet ved hjelp av kortgruppeoppsett.
  2. Det andre lysbildet har et omvendt kort.
  3. Tredje lysbilde med tekstelement inne i en kortblokk.

Sørg for å bytte ut bildens nettadresser og tekstinnholdet med ditt eget.

<div id="accordion" role="tablist" aria-multiselectable="true"> <!-- First Section --> <div class="card"> <div class="card-header" role="tab" id="Firstheading"> <h5 class="mb-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Section 1 with Card Image and Card Block </a> </h5> </div> <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading"> <div class="card-group" style="margin:20px;"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> </div> <div class="card"> <div class="card-block"> <h4 class="card-title">Card Title</h4> <p class="card-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut..."</p> </div> </div> </div> </div> </div> <!-- Second Section --> <div class="card"> <div class="card-header" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Section 2 with Inverse Card </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card card-inverse" style="background-color: #333; margin:20px;"> <div class="card-block"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a card with inverse color and background is set as black.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> </div> </div> <!-- Third Section --> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Section 3 with Text Inside Card Block </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-block"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div> <!-- Add More Sections Here --> </div>

De tre glidebryterdelene er uthevet med kommentarer for å forstå formålet, og du kan legge til flere seksjoner ved å legge til blokkblokken og endre id- og href -attributtene tilsvarende. Husk Bootstrap er et rammeverk som kan påvirke andre elementer på Weebly. Du må kanskje justere CSS basert på Weebly -temaet.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon