Eksempler på hjælpetekst til Bootstrap Block

Eksempler Pa Hjaelpetekst Til Bootstrap Block



Mens du opretter enhver applikation, forsøger udviklerne altid at gøre den brugervenlig. Mere specifikt har brugervenlige websteder mange faktorer, herunder effektiv navigation, enhedskompatibilitet, fejlhåndtering osv. Tilføjelse af hjælpetekst med forskellige komponenter er f.eks. en funktion, der hjælper brugeren i processen med at tilføje tekst i inputfelterne .

Dette indlæg vil guide dig om eksempler på blokhjælpetekster i Bootstrap.

Hvad er Bootstrap Block hjælpetekst?

Bootstrap-blokkens hjælpetekst kan oprettes ved at bruge ' .form-tekst ' klasse. I Bootstrap 3-versionen er ' hjælpe-blok ” klasse blev brugt til at tilføje hjælpetekst.







Typer af Bootstrap Block hjælpetekst

Disse angivne typer elementer kan bruges til at specificere hjælpeteksten:



Hvordan tilføjes Bootstrap Block hjælpetekst ved hjælp af blokelementer?

Elementerne på blokniveau, såsom '

', '

”, eller flere, kan bruges til at tilføje hjælpetekst. Til dette formål er ' form-tekst ” klasse bruges. Denne klasse har ' display: blok ” ejendom. Desuden indeholder den også topmarginegenskaben, der hjælper teksten med at blive vist på et eller andet sted fra andre inputfelter.



Eksempel

Se eksemplet nedenfor:





  • Tilføj '
    ” element for at oprette en formular.
  • For at inkludere en billedtekst i inputfeltet skal du tilføje en ' ' element.
  • Derefter tilføjes ' ' element med ' form-kontrol ' og ' input-felt ” for at oprette et inputfelt.
  • Tilføj derefter ' ' element med klasserne ' form-tekst ' og ' tekst-dæmpet ” for at tilføje en hjælpetekst:
< form >

< span > Indtast adgangskode < / span >

< input klasse = 'form-kontrol input-felt' type = 'adgangskode' >

< div klasse = 'form-tekst tekst-dæmpet' > Dit kodeord skal være på 8 tegn. < / div >

< / form >

Klasserne brugt i ovenstående kodestykke er beskrevet her:

  • form-kontrol ”-klassen indeholder en vis global stil for input-elementerne.
  • form-tekst ” klasse tilføjer typografier til hjælpeteksten.
  • tekst-dæmpet ” tilføjer generelle stilarter til hjælpeteksten.

Produktion



Hvordan tilføjer man Bootstrap Block-hjælpetekst ved hjælp af inline-elementer?

De inline-elementer som ' ' eller ' ” kan bruges til at tilføje hjælpetekst til websiden.

Eksempel

Eksemplet nedenfor viser brugen af ​​' ' inline element for at angive hjælpeteksten:

< form klasse = 'form-inline' >

< div klasse = 'form-gruppe' >

< span >Indtast dit navn< / span >

< input klasse = 'form-kontrol input-felt' type = 'adgangskode' >

< lille klasse = 'tekst-dæmpet' >Skal udfyldes.< / lille >

< / div >

< / form >

Det kan ses, at hjælpeteksten er blevet tilføjet med succes:

Det hele handler om hjælpeteksten til Bootstrap-blok.

Konklusion

For at tilføje hjælpetekst i Bootstrap, ' form-tekst ” klasse bruges til at tilføje hjælpeteksten på blokniveau. Det ' tekst-dæmpet ” klasse bruges til at skabe inline hjælpetekst. I Bootstrap 3 er ' hjælpe-blok ” klasse bruges. Mere specifikt kan hjælpeteksten specificeres med inline- eller blokniveauelementerne. Dette indlæg har forklaret, hvordan du tilføjer hjælpetekst i Bootstrap ved hjælp af eksempler.