1. Grundlæggende struktur :
- Start med at oprette et `
- Inde i denne beholder kan du placere forskellige inputfelter, såsom ``, `` eller endda brugerdefinerede komponenter såsom datovælgere. 2. Indtast gruppetekst : - For at tilføje en etiket eller yderligere information til din inputgruppe, skal du bruge ``-elementet med klassen `input-group-text`. - Placer dette element før eller efter inputfelterne, afhængigt af dit ønskede layout. 3. Indtast gruppeknap : - Hvis du vil inkludere en knap sammen med dit inputfelt, skal du bruge elementet `` med klassen `btn btn-outline-secondary`. - Placer denne knap før eller efter inputfeltet i inputgruppen. 4. Flere indgange : - Du kan have flere inputfelter i inputgruppen. Du skal blot placere dem en efter en inde i 'input-gruppe'-beholderen. - Hvert inputfelt skal have sine egne `input-group-text` og `btn`-elementer, hvis det er nødvendigt. 5. Yderligere klasser : - Bootstrap giver flere ekstra klasser til at ændre udseendet af din inputgruppe. For eksempel kan du bruge `input-group-sm` til en mindre inputgruppe eller `input-group-lg` for en større. Her er et eksempel på en simpel inputgruppe med en etiket, inputfelt og knap: HTML: ```html @ Knap ``` CSS: ```css /* Brugerdefinerede stilarter til inputgruppe */ .input-group { bredde:50%; } ``` Når du kører denne kode, vil du se en inputgruppe med en etiket, inputfelt og knap, alt sammen pænt organiseret i en container. Leg med forskellige klasser og layouts for at skabe forskellige typer inputgrupper, der passer til dine specifikke behov.
2. Indtast gruppetekst :
- For at tilføje en etiket eller yderligere information til din inputgruppe, skal du bruge ``-elementet med klassen `input-group-text`. - Placer dette element før eller efter inputfelterne, afhængigt af dit ønskede layout. 3. Indtast gruppeknap : - Hvis du vil inkludere en knap sammen med dit inputfelt, skal du bruge elementet `` med klassen `btn btn-outline-secondary`. - Placer denne knap før eller efter inputfeltet i inputgruppen. 4. Flere indgange : - Du kan have flere inputfelter i inputgruppen. Du skal blot placere dem en efter en inde i 'input-gruppe'-beholderen. - Hvert inputfelt skal have sine egne `input-group-text` og `btn`-elementer, hvis det er nødvendigt. 5. Yderligere klasser : - Bootstrap giver flere ekstra klasser til at ændre udseendet af din inputgruppe. For eksempel kan du bruge `input-group-sm` til en mindre inputgruppe eller `input-group-lg` for en større. Her er et eksempel på en simpel inputgruppe med en etiket, inputfelt og knap: HTML: ```html @ Knap ``` CSS: ```css /* Brugerdefinerede stilarter til inputgruppe */ .input-group { bredde:50%; } ``` Når du kører denne kode, vil du se en inputgruppe med en etiket, inputfelt og knap, alt sammen pænt organiseret i en container. Leg med forskellige klasser og layouts for at skabe forskellige typer inputgrupper, der passer til dine specifikke behov.
- Placer dette element før eller efter inputfelterne, afhængigt af dit ønskede layout.
3. Indtast gruppeknap :
- Hvis du vil inkludere en knap sammen med dit inputfelt, skal du bruge elementet `` med klassen `btn btn-outline-secondary`. - Placer denne knap før eller efter inputfeltet i inputgruppen. 4. Flere indgange : - Du kan have flere inputfelter i inputgruppen. Du skal blot placere dem en efter en inde i 'input-gruppe'-beholderen. - Hvert inputfelt skal have sine egne `input-group-text` og `btn`-elementer, hvis det er nødvendigt. 5. Yderligere klasser : - Bootstrap giver flere ekstra klasser til at ændre udseendet af din inputgruppe. For eksempel kan du bruge `input-group-sm` til en mindre inputgruppe eller `input-group-lg` for en større. Her er et eksempel på en simpel inputgruppe med en etiket, inputfelt og knap: HTML: ```html @ Knap ``` CSS: ```css /* Brugerdefinerede stilarter til inputgruppe */ .input-group { bredde:50%; } ``` Når du kører denne kode, vil du se en inputgruppe med en etiket, inputfelt og knap, alt sammen pænt organiseret i en container. Leg med forskellige klasser og layouts for at skabe forskellige typer inputgrupper, der passer til dine specifikke behov.
- Placer denne knap før eller efter inputfeltet i inputgruppen.
4. Flere indgange :
- Du kan have flere inputfelter i inputgruppen. Du skal blot placere dem en efter en inde i 'input-gruppe'-beholderen.
- Hvert inputfelt skal have sine egne `input-group-text` og `btn`-elementer, hvis det er nødvendigt.
5. Yderligere klasser :
- Bootstrap giver flere ekstra klasser til at ændre udseendet af din inputgruppe. For eksempel kan du bruge `input-group-sm` til en mindre inputgruppe eller `input-group-lg` for en større.
Her er et eksempel på en simpel inputgruppe med en etiket, inputfelt og knap:
HTML:
```html
@
Knap
```
CSS:
```css
/* Brugerdefinerede stilarter til inputgruppe */
.input-group {
bredde:50%;
}
Når du kører denne kode, vil du se en inputgruppe med en etiket, inputfelt og knap, alt sammen pænt organiseret i en container.
Leg med forskellige klasser og layouts for at skabe forskellige typer inputgrupper, der passer til dine specifikke behov.
Forrige ： Hvordan opretter man Bootstrap 5 Dropdowns?
