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

Hur lägger jag till dragspelinnehållsreglage i Weebly?

4

Bootstrap -ramverket har många användarelement som också kan läggas till oberoende på din Weebly -webbplats genom att lägga till kod. Innehållsreglaget i dragspel- eller spoiler -stilelement är ett av Bootstrap -elementen som kallas för kollaps hjälper till att lägga till större innehåll inom ett begränsat utrymme. Även om vi redan hade förklarat CSS och Weebly App Center dragspel, erbjuder Bootstrap -stil ett annat sätt att lägga till dragspelinnehållsreglage på din Weebly -webbplats.

Dragspelinnehållsreglage för Weebly

Dragspelet har följande funktioner:

  • Mobil responsiv automatisk anpassning till visningsportarna på enheten som visas på.
  • Om du klickar på titeln öppnas innehållet i push -down -stil medan det öppna innehållet stängs i push -up -stil.
  • Som standard är den första bilden öppen när sidan laddas.
  • Du kan lägga till så många bilder som till ditt dragspel.
  • Alla HTML -element kan läggas till som en del av widgeten.
  • Innehållsområdet kan delas in i 12 kolumner med Bootstrap -nätstruktur.

Hur lägger jag till dragspelinnehållsreglage i Weebly?

Bootstrap dragspel för Weebly

Manus:

Lägg till nedanstående skript under sidfots kodavsnitt på din sida:

<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:

Länka nedanstående Bootstrap CSS under rubrikkodavsnittet på din sida:

<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 det här exemplet har vi använt tre reglage med följande detaljer:

  1. Första bilden med två kolumner. en med kortbild och en annan med kortblock. Det här avsnittet skapas med hjälp av kortgruppslayout.
  2. Den andra bilden har ett inverterat kort.
  3. Tredje bild med textelement inuti ett kortblock.

Se till att ersätta bildens webbadresser och dummy -textinnehåll 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 skjutreglagen markeras med kommentarer för att förstå syftet och du kan lägga till fler avsnitt genom att lägga till kodblocket och ändra id- och href -attributen i enlighet därmed. Kom ihåg att Bootstrap är ett ramverk som kan påverka andra element på Weebly. Du kan behöva justera CSS baserat på ditt Weebly -tema.

Inspelningskälla: www.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