TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak dodać suwak zawartości akordeonu w Weebly?

3

Framework Bootstrap zawiera wiele elementów użytkownika, które można również niezależnie dodać na swojej stronie Weebly, dodając fragment kodu. Suwak zawartości w elemencie stylu akordeonu lub spoilera jest jednym z elementów Bootstrap nazywanych jako zwinięcie, które umożliwiają dodawanie większej zawartości w ograniczonej przestrzeni. Chociaż wyjaśniliśmy już CSS i akordeon Weebly App Center, styl Bootstrap oferuje inny sposób na dodanie suwaka zawartości akordeonu w witrynie Weebly.

Suwak zawartości akordeonu dla Weebly

Akordeon posiada następujące cechy:

  • Reagujące na urządzenia mobilne automatyczne wyrównywanie do portów widoku urządzenia, na którym jest oglądane.
  • Kliknięcie tytułu spowoduje otwarcie treści w stylu push down, a zamknięcie otwartej treści w stylu push up.
  • Domyślnie pierwszy slajd jest otwarty po załadowaniu strony.
  • Do akordeonu możesz dodać dowolną liczbę slajdów.
  • Jako część widżetu można dodać dowolny element HTML.
  • Obszar zawartości można podzielić na 12 kolumn za pomocą struktury siatki Bootstrap.

Jak dodać suwak zawartości akordeonu w Weebly?

Akordeon Bootstrap dla Weebly

Scenariusz:

Dodaj poniższy skrypt w sekcji kodu stopki na swojej stronie:

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

Połącz poniższy kod Bootstrap CSS w sekcji kodu nagłówka swojej strony:

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

W tym przykładzie użyliśmy trzech suwaków z następującymi szczegółami:

  1. Pierwszy slajd mający dwie kolumny. jeden z wizerunkiem karty, a drugi z blokiem karty. Ta sekcja jest tworzona przy użyciu układu grup kart.
  2. Drugi slajd ma odwróconą kartę.
  3. Trzeci slajd z elementem tekstowym wewnątrz bloku kart.

Upewnij się, że adresy URL obrazów i fikcyjna treść tekstowa zostały zastąpione własnymi.

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

Trzy sekcje suwaka są wyróżnione komentarzami w celu zrozumienia celu. Możesz dodać więcej sekcji, dodając blok kodu i odpowiednio zmieniając atrybuty id i href. Pamiętaj Bootstrap to framework, który może wpływać na inne elementy Weebly. Może być konieczne dostosowanie CSS na podstawie motywu Weebly.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów