Introduzione al layout del modulo Bootstrap

HTML e CSS sono le lingue di base per la progettazione di moduli di siti Web. Tutti i modelli di base realizzati da HTML, ma dobbiamo progettare e creare file CSS separatamente unici quindi necessari. Questo metodo è complicato a causa dei riferimenti di classe e ID. Per superare tutti i problemi nei file HTML e CSS arriva bootstrap. Bootstrap è una tecnica avanzata per il web design. Per la convalida e il formato richiesto del modulo, bootstrap ha una propria classe per Textarea, input e altri controlli come controllo del modulo, gruppo di input, ecc. Usando il layout bootstrap possiamo decidere il formato del modulo. Possiamo facilmente creare formati in forma verticale, orizzontale e in linea usando bootstrap.

Tipi di layout del modulo Bootstrap

Il layout del modulo Bootstrap crea un diverso tipo di modulo. effettua progettazione e validazione senza file CSS e JavaScript. A causa del layout del modulo, ridurre la codifica e le complicazioni. Bootstrap ha una propria classe per superare tutti i codici CSS e JavaScript complessi.

Bootstrap ha tre tipi di layout del modulo.

  • Forma verticale
  • Forma orizzontale
  • Modulo in linea

Vediamo questi tre tipi in dettaglio:

1. Forma verticale

Nel layout dei moduli verticali, l'etichetta e gli elementi testuali sono verticali e ogni gruppo di moduli è verticale. Il modulo verticale è il modulo predefinito nel bootstrap. Non esiste una regola aggiuntiva per il formato modulo verticale.

2. Forma orizzontale

Nel layout dei moduli orizzontale, l'etichetta e gli elementi testuali sono orizzontali ma ogni gruppo di moduli è verticale . Aggiungi due classi principali per la forma orizzontale.

Aggiungi la classe nell'elemento modulo.

Aggiungi la classe negli elementi etichetta.

3. Modulo in linea

Nella forma in linea, l'etichetta e gli elementi sono in linea e allineati a sinistra. Le finestre hanno almeno 768 pixel di larghezza. Aggiungi una classe per il modulo in linea.

Aggiungi la classe agli elementi del modulo.

Il layout del modulo Bootstrap ha una classe predefinita per la convenzione del modulo menzionata di seguito:

  • .form-group: questa classe utilizzata per la spaziatura dei moduli e per associare l'etichetta. È flessibile per associare i messaggi di convalida del modulo, e altro per il modulo.
  • . controllo della forma: questa classe utilizzata per tutti gli elementi testuali e lo spazio per la forma, ecc. Viene utilizzata per tutti gli stili come dimensione, messa a fuoco.
  • .form-control-lg e .form-control-sm sono usati rispettivamente per le dimensioni degli elementi di input grandi e piccole.

Elemento e classe supportati

Alcuni elementi e classi supportati per la convalida del modulo Bootstrap senza JavaScript. Semplifica e supera molta codifica lato server.

1) .form-control-file: questa classe viene usata per aggiungere un file come pdf, Docx, ecc. Invece di usare il controllo della forma della classe, nei dati di file in cui questa classe sta usando.

Esempio:

2) Sola lettura: si tratta di un attributo booleano utilizzato per gli elementi di input. In questo attributo, l'utente non può modificare il valore e disabilitare il cursore per scrivere.

Esempio:

3) .form-control-plaintext: questa classe funziona come sola lettura ma viene fornita con margine e riempimento corretti.

Esempio:

Esempio di layout del modulo Bootstrap

Gli esempi forniti sono riportati di seguito:

1. Esempio di modulo verticale (modulo predefinito)


Name:

Email:

  • Il modulo verticale è semplice e predefinito nel bootstrap.
  • L'esempio sopra ha due campi di input e un pulsante di accesso in verticale con l'etichetta.
  • Utilizzando solo il modulo modulo di classe e il controllo modulo di classe, il modulo verticale creato.
  • È possibile modificare la dimensione degli elementi di input senza regolazione della dimensione del file CSS. L'utente ha bisogno solo di una classe che sia .form-control-lg e .form-control-sm rispettivamente per dimensioni grandi e piccole.

2. Esempio di forma orizzontale

class=”form-horizontal”>
Name:


Email:


  • Usando la classe forma-orizzontale, l'utente crea una forma orizzontale. L'etichetta e l'elemento di input sono in linea ma il gruppo di moduli di classe è verticale. Classe "control-label col-sm-2" e = "col-sm-10" utilizzata per colonna divisa. Assegnazione a due colonne per etichetta e dieci colonne assegnano per elementi di input.
  • Classe "col-sm-offset-2 col-sm-10" utilizzata per il pulsante Login. Offset utilizzato per lo spazio, col-sm-offset-2 utilizzava spazi a due colonne da sinistra in una forma.
  • Vedi l'esempio di forma orizzontale e il suo output per comprendere il layout. Il nome visualizzato e il testo di input sono in una riga, quindi l'e-mail e gli elementi in un'altra riga.
  • Sullo schermo grande e medio, la forma appare orizzontale ma sullo schermo piccolo (767 px e inferiore) la forma sembra verticale.
  • La forma orizzontale è complicata usando il metodo tradizionale, ma il layout bootstrap aiuta a semplificare l'uso del controllo delle classi e delle etichette.

3. Esempio di modulo incorporato

class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>
 class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>

  • In forma in linea, tutte le etichette e gli elementi sono in una riga. Tutti i gruppi di moduli sono in un'unica riga. La classe in-line è l'impostazione predefinita per questo layout. L'utente ha inserito questa classe in. Il modulo in linea utilizzato di più per i pulsanti di opzione, i pulsanti di controllo e così via.
  • Questo modulo funziona principalmente su un viewport di almeno 576 pixel dopo che viene visualizzato come modulo predefinito. Nell'etichetta, usata solo per la classe sr. Questa classe è un'utilità per la lettura dello schermo, utilizzata per nascondere l'etichetta e mostra l'unico elemento.
  • Se l'elemento di input in forma incorporata, l'utente deve venire con un segnaposto in un elemento di input per riconoscere l'elemento.

Conclusione - Bootstrap dal layout

Per comprendere la tecnologia Bootstrap, l'utente deve conoscere HTML, CSS e JavaScript. Il modulo bootstrap è il modo più semplice per lavorare con il formato standard. Ha le proprie classi per rimuovere la codifica e non è necessario CSS e JavaScript file diverso. Utilizzando il modulo Bootstrap, l'utente accelera la codifica ed evita il design e lo stile della codifica a blocchi. Bootstrap è un framework per il web design front-end leggero e auto-implementato.

Articoli consigliati

Questa è una guida al layout del modulo Bootstrap. Qui discutiamo l'introduzione al layout del modulo Bootstrap insieme ai tipi e agli esempi. Puoi anche consultare i nostri altri articoli suggeriti per saperne di più–

  1. Tipografia Bootstrap
  2. Layout Bootstrap
  3. Bootstrap Grid System
  4. Componenti Bootstrap

Categoria:

Sviluppo software