Come codificare elementi di pagina Web di base con Bootstrap - dummies

< Oltre ai puri layout, Bootstrap può anche creare componenti di pagine Web presenti in quasi tutti i siti web. L'idea qui è la stessa di quando si lavora con i layout - invece di ricreare la ruota ogni volta progettando il proprio pulsante o barra degli strumenti, sarebbe meglio usare il codice precostruito, che è già stato testato su più browser e dispositivi.

Gli esempi seguenti mostrano come creare rapidamente componenti Web comuni.

Progettazione pulsanti

I pulsanti sono un elemento base su molte pagine Web, ma in genere possono essere difficili da configurare e creare stile. Come mostrato qui, i pulsanti possono avere vari tipi e dimensioni.

Codice Bootstrap per la creazione di pulsanti

Attributo

Prefisso classe	Descrizione	Tipo pulsante
btn-defaultbtn-primarybtn-successbtn-danger	Tipo di pulsante standard con effetto hover	Pulsante blu con effetto hover Pulsante verde con effetto hover Pulsante rosso con effetto hover Dimensione pulsante
btn-lgbtn-defaultbtn-sm	Pulsante grande size	Dimensione del pulsante di default Dimensione del pulsante piccolo Per creare un pulsante, scrivere il seguente codice HTML:

Iniziare con il pulsante

1. Elemento HTML. Nel pulsante di apertura << > il tag
2. include type = "button" . Includere l'attributo class con il valore dell'attributo class btn
3. e aggiungere prefissi di classe aggiuntivi in ​​base all'effetto desiderato. Per aggiungere altri stili, continua ad aggiungere il nome di prefisso
4. della classe nell'attributo HTML HTML. Il seguente codice combina il tipo di pulsante e la dimensione del pulsante:

Pulsante principale grande

Pulsante predefinito grande

Pulsante Successo predefinito

Pulsante predefinito predefinito

Pulsante di pericolo piccolo

Piccolo pulsante predefinito

Tipi e dimensioni dei pulsanti Bootstrap.

Controlla il tipo di pulsante aggiuntivo, le dimensioni dei pulsanti e altre opzioni dei pulsanti.

Navigando con le barre degli strumenti

le pagine Web con più pagine o viste di solito hanno una o più barre degli strumenti per aiutare gli utenti nella navigazione. Ecco alcune opzioni della barra degli strumenti.

Codice Bootstrap per la creazione di barre degli strumenti di navigazione

Attributo

Prefisso classe

Descrizione	Tipo di barra degli strumenti	schede di navigazione
nav-pills	Barra di navigazione a schede Pillola, o barra degli strumenti di navigazione pulsanti solidi	Tipo pulsante barra degli strumenti menu a discesa
menu a discesa caret	Pulsante o scheda come menu a discesa Icona menu a discesa freccia giù	menu a discesa voci di menu Per creare una pillola o una barra degli strumenti di navigazione con un pulsante solido, scrivere il seguente codice HTML: Iniziare un elenco non ordinato utilizzando l'elemento

ul

1. . Nel tag di apertura , includi
2. class = "nav nav-pills"
   . Crea pulsanti usando il tag . Includere
   • class = "active"
   • in un tag di apertura per indicare quale scheda sulla barra degli strumenti principale dovrebbe apparire come visivamente evidenziata quando il mouse passa sopra il pulsante. Per creare un menu a discesa, annidare un elenco non ordinato. Vedi il codice accanto a "Altro" con i prefissi di classe
   • "dropdown"
   • , "caret" e "menu a discesa" . È possibile collegare ad altre pagine Web nel menu a discesa utilizzando il tag .

     Il codice seguente crea una barra degli strumenti utilizzando Bootstrap: Linea temporale

Informazioni su

• Foto
• Amici
• Altro
• Luoghi

• Sport

  • Musica
  • Barra di avvio con menu a discesa.
  • Il

menu a discesa e il data-toggle = "dropdown" attributo e valore funzionano insieme per aggiungere menu a discesa a elementi come i collegamenti. Scopri le opzioni aggiuntive della barra degli strumenti. Aggiunta di icone Le icone sono usate frequentemente con i pulsanti per aiutare a trasmettere un certo tipo di azione. Ad esempio, il tuo programma di posta elettronica probabilmente utilizza un pulsante con un'icona del cestino per eliminare le email. Le icone comunicano rapidamente un'azione suggerita agli utenti senza molte spiegazioni.

Queste icone sono denominate

glifi, e Glyph Icons fornisce i glifi usati in Bootstrap. Bootstrap supporta più di 200 glifi, che è possibile aggiungere ai pulsanti o alle barre degli strumenti usando il tag. Il seguente codice di esempio crea tre pulsanti con un glifo stella, graffetta e cestino.

Stella Allega

Cestino

Pulsanti di avvio con icone.

Controlla qui i nomi di tutti i glifi Bootstrap.