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.