Esimerkkejä käynnistysnauhan painikkeista

Bootstrap on täydellinen kehys, joka sisältää kaikenlaisia ​​elementtejä, kuten painikkeita, lomakkeita, paneeleja jne. Elementtien väriä ja kokoa on helppo mukauttaa Bootstrap -teemamalleilla. Tässä artikkelissa esittelemme erilaisia ​​Bootstrap 3 -painikkeiden esimerkkejä. Tutustu Bootstrap 5 -painikkeiden uusimpaan artikkeliin .

Tarvitset seuraavat asiat lisätäksesi Bootstrap -painikkeet sivustoosi.

• Bootstrap CSS ja JS
• jQuery -käsikirjoitus
• Fontti mahtavia kuvakkeita
• Mukautetut CSS -tyylit
• HTML -koodi

Koodin saaminen

Kolme ensimmäistä komponenttia voidaan lisätä ilmaisten CDN -linkkien avulla. Voit ladata mukautetun CSS- ja HTML -koodin alla olevan painikkeen avulla. Zip -arkisto sisältää kaksi tiedostoa – yhden CSS: lle ja toisen HTML: lle. Voit ladata tässä artikkelissa käytetyt CSS- ja HTML -tiedostot täältä.

Koodin lisääminen sivullesi

Lopuksi koko koodin pitäisi näyttää alla kuvatulta. Voit lisätä mukautetun CSS -koodin verkkosivusi otsikko -osion tyylitunnisteisiin tai ladata .css -tiedoston ja linkin ulkoisena tyylitaulukkona. Jos sivustosi käyttää jo Bootstrapia, Font Awesomeia ja jQueryä, sinun ei tarvitse lisätä CDN -linkkejä.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
ADD CUSTOM CSS CODE HERE /* You can also link it as an external stylesheet */
</style>
ADD HTML CODE HERE
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Esimerkkejä Esittely

Esittelypainikkeet on jaettu eri ryhmiin:

• Ympyräkuvakkeen painikkeet

• Avattavat painikkeet

• Oletuspainikkeet

• Linjapainikkeet

• Suorakulmaiset painikkeet

• Ympyräpainikkeet

• Pyöristetyt kulmapainikkeet

• Litteät painikkeet

• Kaltevuuspainikkeet

• Kaltevuus- ja suorakulmio -painikkeet

• Litteät ja suorakulmaiset painikkeet

• Viiva- ja suorakulmionäppäimet

• Ympyrä- ja viivapainikkeet

• Ympyrä- ja kaltevuuspainikkeet

• Pyöristys- ja rivipainikkeet

• Suuret sosiaaliset painikkeet kuvakkeilla ja verkon nimellä

• Pienet sosiaaliset painikkeet vain kuvakkeilla

Alla on esimerkkejä Bootstrap -painikkeista.

Ympyräpainikkeet kuvakkeilla

Bootstrap Social Sharing -painikkeet

Bootstrap Simple Line -painikkeet

Bootstrap -pyöristetyt viivapainikkeet

Bootstrap -pyöristetyt väripainikkeet

Bootstrapin oletustyylin painikkeet

Jos käytät Bootstrap -kehyksen CSS- ja JS -tiedostoja sivustolla, joka ei käytä Bootstrap -mallia, varmista, että kaikki muut elementit ovat kunnossa ja eivät vaikuta niihin. Muussa tapauksessa sinun on ehkä purettava vain vaadittu CSS ja käytettävä sitä sivustossasi itsenäisesti Bootstrap -muokkaajalla.