Skip to main content
Menu
Consulente SEO
17/03/2022T23:07:12+02:00 it-IT Francesco Adorno IT Francesco Adorno 175 175
Bootstrap

Stai cercando Snippet Bootstrap?

Bootstrap per WordPress

Componenti Bootstrap WordPress

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

Condividi

Codice PHP WordPress + Bootstrap


Esempi di badge Bootstrap con miglioramenti come il colore del badge personalizzato, lo stile del badge del contorno o persino il badge circolare con ombre colorate personalizzate.


Codice HTML Bootstrap



Condividi

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.

Scopri

Codice HTML Bootstrap

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Scopri
Condividi

Codice PHP WordPress + Bootstrap

 'post', 'posts_per_page' => 6, 'order' => 'ASC', 'orderby' => 'title' ) ); if ( $rand_posts ) { foreach ( $rand_posts as $post ) : setup_postdata( $post ); ?>



Un componente per scorrere immagini, video o diapositive di testo, come un carosello.


Codice HTML Bootstrap

Condividi

Codice PHP WordPress + Bootstrap

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.

Link con href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Codice HTML Bootstrap


  Link con href



Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Condividi

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(), ) ); ?>

Estendi facilmente i controlli dei moduli aggiungendo testo, pulsanti o gruppi di pulsanti su entrambi i lati degli input di testo, selezioni personalizzate e input di file personalizzati.

@

Codice HTML Bootstrap

@
Condividi

Codice PHP WordPress + Bootstrap


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
Condividi

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 ), ); } ?>

Crea etichette modulo meravigliosamente semplici che fluttuano sui campi di input.


Codice HTML Bootstrap

Condividi

Codice PHP WordPress + Bootstrap


Un interruttore ha il markup di una casella di controllo personalizzata ma utilizza la classe .form-switch per eseguire il rendering di un interruttore a levetta. Gli interruttori supportano anche l'attributo disabilitato.


Codice HTML Bootstrap

Condividi

Codice PHP WordPress + Bootstrap


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

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

Condividi

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




  
Condividi

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.

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.

Codice HTML Bootstrap

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

Codice PHP WordPress + Bootstrap


Ricerca personalizzata WordPress con Bootstrap


Codice HTML Bootstrap





Condividi

Codice PHP WordPress + Bootstrap

/** 
** Ricerca semplice con campo di testo
*/



/** 
** Ricerca personalizzata con selezione categoria prodotti Woocommerce
*/

Francesco Adorno