TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä harmonikan sisällön liukusäädin Weeblyyn?

4

Bootstrap -kehyksessä on paljon käyttäjäelementtejä, jotka voidaan myös lisätä itsenäisesti Weebly -sivustoosi lisäämällä koodikappale. Sisältöä liukusäädintä harmonikan tai spoileri tyylielementissä on yksi Saapasraksi elementtejä kutsutaan romahtaa apua lisätä suurempia sisältöä rajatussa tilassa. Vaikka olimme jo selittäneet CSS: n ja Weebly App Centerin harmonikan, Bootstrap -tyyli tarjoaa toisen tavan lisätä harmonikan sisällön liukusäädin Weebly -sivustoosi.

Harmonikan sisällön liukusäädin Weeblylle

Harmonikalla on seuraavat ominaisuudet:

  • Mobiilireagoiva automaattinen kohdistaminen katseltavan laitteen näyttöportteihin.
  • Otsikon napsauttaminen avaa sisällön push down -tyyliin ja sulkee avoimen sisällön push up -tyyliin.
  • Oletuksena ensimmäinen dia on auki, kun sivu ladataan.
  • Voit lisätä harmonikkaasi jopa dioja.
  • Mikä tahansa HTML -elementti voidaan lisätä osana widgettiä.
  • Sisältöalue voidaan jakaa 12 sarakkeeseen Bootstrap -ruudukkorakenteen avulla.

Kuinka lisätä harmonikan sisällön liukusäädin Weeblyyn?

Bootstrap -harmonikka Weeblylle

Käsikirjoitus:

Lisää alla oleva komentosarja sivusi alatunnisteen alle:

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

Linkitä alla oleva Bootstrap CSS sivusi otsikkokoodiosioon:

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

Tässä esimerkissä olemme käyttäneet kolmea liukusäädintä, joissa on seuraavat tiedot:

  1. Ensimmäinen dia, jossa on kaksi saraketta. toisessa korttikuva ja toisessa korttilohko. Tämä osio luodaan käyttämällä korttiryhmäasettelua.
  2. Toisessa diassa on käänteinen kortti.
  3. Kolmas dia, jossa on tekstielementti korttilohkon sisällä.

Muista korvata kuvan URL -osoitteet ja nukketekstisisältö omilla.

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

Kolme liukusäädintä on korostettu kommenteilla ymmärryksen vuoksi, ja voit lisätä osioita lisäämällä koodilohkon ja muuttamalla id- ja href -määritteitä vastaavasti. Muista, että Bootstrap on kehys, joka voi vaikuttaa muihin Weeblyn elementteihin. Saatat joutua säätämään CSS: ää Weebly -teemasi perusteella.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja