Tento článok vás poučí:
- Ako vytvoriť tlačidlá v Bootstrape?
- Ako vytvoriť tlačidlá obrysu v Bootstrape?
- Ako upraviť veľkosť tlačidiel bootstrapu?
- Ako vytvoriť tlačidlo na úrovni bloku v Bootstrape?
- Ako vytvoriť tlačidlá aktívneho stavu v Bootstrape?
- Ako vytvoriť tlačidlá zakázaných stavov v Bootstrape?
Ako vytvoriť tlačidlá v Bootstrape?
Bootstrap“ btn ” sa používa na vytváranie tlačidiel. Ak chcete pridať štýlové tlačidlá, môžete použiť „ btn “trieda s triedou farieb, ako napríklad “ btn-úspech ” na vytvorenie zeleného tlačidla.
V HTML je „
Pre jasný koncept si pozrite príklad nižšie.
Príklad
V súbore HTML postupujte podľa krokov na vytvorenie tlačidiel pomocou rôznych značiek:
- Pridať “
“ a „ 'prvky a priraďte im' btn “ a „ btn-primárne “triedy. - Potom pridajte „
” tag s typom “ tlačidlo “. Priraďte mu „ btn “ a „ btn-úspech ” pre úpravu prvých dvoch tlačidiel ako modrých a tretieho ako zeleného:
< a trieda = 'btn btn-primary' href = '#' > OTVORENÉ < / a >
< vstup typu = 'tlačidlo' trieda = 'btn btn-úspech' hodnotu = 'Vyhľadávanie' >
Výkon
Ako vytvoriť tlačidlá obrysu v Bootstrape?
Ak chcete pridať obrysy tlačidiel, Bootstrap “ btn-outline-* ” používa sa trieda. Vo svojej syntaxi,“ * “ tu predstavuje farbu obrysu. Napríklad „ btn-outline-danger “ umiestni červený obrys, “ btn-outline-primary “ nastaví modrý obrys a ďalšie.
Analyzujte kód uvedený nižšie:
< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-outline-primary' >Ďalej< / tlačidlo >< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-outline-danger' >Zrušiť< / tlačidlo >
< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-osnova-úspech' >Úspech< / tlačidlo >
Dá sa pozorovať, že „ Ďalšie tlačidlo “ má modrý obrys, “ Zrušiť 'tlačidlo s červeným obrysom a ' Úspech Tlačidlo ” má zelený obrys:
Ako upraviť veľkosť tlačidiel bootstrapu?
Niektoré triedy Bootstrap sa používajú na úpravu veľkosti tlačidiel, ako napríklad:
- “ btn-lg ” sa použije na vytvorenie veľkého tlačidla. Táto trieda môže zväčšiť veľkosť písma a výplň.
- “ btn-md ” vytvorí tlačidlo strednej veľkosti.
- “ btn-sm “ vytvorí malé tlačidlo.
Príklad
Teraz vytvoríme tri tlačidlá s rôznymi veľkosťami a samovysvetľujúcimi názvami:
< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-sekundárny btn-lg' >Veľký< / tlačidlo >< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-varovanie btn-md' >stredne< / tlačidlo >
< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-nebezpečenstvo btn-sm' >Malý< / tlačidlo >
Výkon
Ako vytvoriť tlačidlo na úrovni bloku v Bootstrape?
Tlačidlá na úrovni bloku sú tie, ktoré majú veľkosť v plnej šírke. Ak chcete vytvoriť tlačidlá na úrovni bloku, „ btn-blok ” sa používa nasledovne
< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-warning btn-block' > tlačidlo< / tlačidlo >< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-sekundárny btn-blok' >tlačidlo< / tlačidlo >
Výkon
Ako vytvoriť tlačidlá aktívneho stavu v Bootstrape?
Tlačidlá aktívneho stavu odkazujú na tlačidlá, ktoré sú aktuálne aktívne. Tieto tlačidlá sú o niečo tmavšie ako normálne. Na vytvorenie takýchto tlačidiel použite Bootstrap “ aktívny ” trieda sa používa.
Príklad
Nižšie uvedený kód vytvára dve tlačidlá. Prvý je v normálnom stave, zatiaľ čo druhý je aplikovaný pomocou „ aktívny ' trieda:
< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-úspech' >Úspech< / tlačidlo >< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-success active' >Úspech< / tlačidlo >
Výkon
Ako vytvoriť tlačidlá zakázaných stavov v Bootstrape?
Tlačidlá vypnutého stavu označujú tlačidlá, na ktoré sa nedá kliknúť a ktoré sa nedajú použiť. V aplikácii Bootstrap je „ zdravotne postihnutých ” sa používa na vytvorenie tlačidla vypnutého stavu. ' zdravotne postihnutých Na tento účel možno použiť aj atribút ”.
Príklad
Pozrite si príklad uvedený nižšie:
- Prvé tlačidlo nie je v deaktivovanom stave.
- Druhý využíva „ zdravotne postihnutých ” na vytvorenie tlačidla vypnutého stavu.
- Tretí používa „ zdravotne postihnutých ” atribút:
< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-úspech vypnutý' >Úspech< / tlačidlo >
< tlačidlo typu = 'tlačidlo' trieda = 'btn btn-úspech' vypnuté>Úspech< / tlačidlo >
Výkon
Zaoberali sme sa rôznymi aspektmi týkajúcimi sa tlačidiel Bootstrap a ich štýlu v CSS.
Záver
' btn Trieda ” sa používa na vytváranie tlačidiel Bootstrap s jednoduchým dizajnom. Ak chcete vytvoriť farebné a obrysové tlačidlá, „ btn-* “ a „ btn-outline-* “ triedy sa používajú tam, kde „ * “ symbolizuje akúkoľvek farebnú triedu. Napríklad „ btn-varovanie “ vytvorí žlté tlačidlo, “ btn-outline-warning ” vytvorí žlté ohraničené tlačidlo a mnoho ďalších. Aby boli tlačidlá aktívne alebo deaktivované, použijú sa triedy „aktívne“ a „vypnuté“. Tento príspevok poskytol komplexného sprievodcu tlačidlami Bootstrap.