Componente di notifica che mostra la finestra di messaggio di avviso sull'azione dell'utente. Include la transizione di eliminazione animata con icona e pulsante di chiusura.
Codice PHP WordPress + Bootstrap
Le Bootstrap Card sono costruite con il minor numero possibile di markup e stili, ma riescono comunque a fornire un sacco di controllo e personalizzazione. Costruiti con flexbox, offrono un facile allineamento e si combinano bene con altri componenti Bootstrap. Non hanno margini per impostazione predefinita, quindi usa le utilità di spaziatura secondo necessità.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
ScopriCodice HTML Bootstrap
Condividi![]()
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Scopri
Codice PHP WordPress + Bootstrap
'post', 'posts_per_page' => 6, 'order' => 'ASC', 'orderby' => 'title' ) ); if ( $rand_posts ) { foreach ( $rand_posts as $post ) : setup_postdata( $post ); ?>
Crea barre laterali nascoste nel tuo progetto per la navigazione, i carrelli della spesa e altro ancora con alcune classi e il nostro plug-in JavaScript.
Offcanvas
Codice HTML Bootstrap
Link con hrefCondividiOffcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Codice PHP WordPress + Bootstrap
/** ** Se utilizzi Bootstrap e hai implementato WP_Bootstrap_Navwalker */ /** ** Copia il codice seguento ed incolla dentro il tag */ 'main-menu', 'container' => '', 'menu_class' => 'navbar-nav ms-auto text-uppercase align-items-md-center', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker(), ) ); ?>
Bootstrap List Group (gruppi di elenchi) sono un componente flessibile e potente per la visualizzazione di una serie di contenuti. Modificali ed estendili per supportare praticamente qualsiasi contenuto all'interno.
- An active item
- A second item
- A third item
- A fourth item
- And a fifth one
Codice HTML Bootstrap
- An active item
- A second item
- A third item
- A fourth item
- And a fifth one
Codice PHP WordPress + Bootstrap
/*** CATEGORIE WORDPRESS DINAMICHE CON BOOTSTRAP LIST GROUP ****/'name', 'order' => 'ASC') ); $current_category = is_category() ? get_queried_object_id() : false; foreach ( $categories as $category ) { printf( '%s %s', esc_url( get_category_link( $category ) ), selected( $category->term_id, $current_category, false ), esc_html( $category->name ), esc_html( $category->count ), ); } ?>
Usa la gamma di input personalizzata per uno stile coerente su più browser e personalizzazione integrata.
Default
Crea controlli personalizzati con .form-range. La traccia (lo sfondo) e il pollice (il valore) hanno entrambi lo stesso stile in tutti i browser. Poiché solo Firefox supporta il "riempimento" della loro traccia dalla sinistra o dalla destra del pollice come mezzo per indicare visivamente i progressi, attualmente non lo supportiamo.
Min and max
Gli input di intervallo hanno valori impliciti per min e max, rispettivamente 0 e 100. È possibile specificare nuovi valori per coloro che utilizzano gli attributi min e max.
Steps
Per impostazione predefinita, l'intervallo inserisce "snap" su valori interi. Per cambiarlo, puoi specificare un valore di passo. Nell'esempio seguente, raddoppiamo il numero di passaggi utilizzando step="0.5".
Codice HTML Bootstrap
CondividiDefault
Crea controlli personalizzati con .form-range. La traccia (lo sfondo) e il pollice (il valore) hanno entrambi lo stesso stile in tutti i browser. Poiché solo Firefox supporta il "riempimento" della loro traccia dalla sinistra o dalla destra del pollice come mezzo per indicare visivamente i progressi, attualmente non lo supportiamo.
Min and max
Gli input di intervallo hanno valori impliciti per min e max, rispettivamente 0 e 100. È possibile specificare nuovi valori per coloro che utilizzano gli attributi min e max.
Steps
Per impostazione predefinita, l'intervallo inserisce "snap" su valori interi. Per cambiarlo, puoi specificare un valore di passo. Nell'esempio seguente, raddoppiamo il numero di passaggi utilizzando step="0.5".
Codice PHP WordPress + Bootstrap
Gli elenchi di dati consentono di creare un gruppo di opzioni a cui è possibile accedere (e completare automaticamente) da un input. Sono simili agli elementi select, ma presentano più limitazioni e differenze di stile del menu. Sebbene la maggior parte dei browser e dei sistemi operativi includa un supporto per gli elementi datalist, il loro stile è nella migliore delle ipotesi incoerente.
Codice PHP WordPress + Bootstrap
/*** *** Con questo form personalizzato suggeriamo all'utente di potere pre-selezionare uno dei corsi presenti nel sito web. Cliccando sul pulsante con icona, verrà reindirizzato nella pagina di ricerca WordPress con il filtro dei post type "Corsi" attivo. ****/
Costruisci fisarmoniche a collasso verticale in combinazione con il plugin JavaScript Collapse.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
Codice HTML Bootstrap
Condividi
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body
, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body
, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body
, though the transition does limit overflow.