Bootstrap är ett komplett ramverk som innehåller alla slags element som knappar, formulär, paneler etc. Det är enkelt att anpassa färg och storlek på element med Bootstrap -temamallar. I den här artikeln kommer vi att visa upp olika typer av Bootstrap 3 -knappar. Kolla in den senaste artikeln för Bootstrap 5 -knappar.
Du behöver följande för att kunna lägga till Bootstrap -knapparna på din webbplats.
- Bootstrap CSS och JS
- jQuery -skript
- Teckensnitt fantastiska ikoner
- Anpassade CSS -stilar
- HTML -kod
Få koden
De första tre komponenterna kan läggas till med gratis CDN -länkar. Du kan ladda ner den anpassade CSS- och HTML -koden med knappen nedan. ZIP -arkivet innehåller två filer – en för CSS och en för HTML. Du kan ladda ner CSS- och HTML -filer som används i den här artikeln här.
Lägga till koden på din sida
Slutligen ska hela koden se ut som visas nedan. Du kan lägga till den anpassade CSS -koden i stiltaggar i rubriksektionen på din webbsida eller ladda upp .css -filen och länka som ett externt formatmall. Om din webbplats redan använder Bootstrap, Font Awesome och jQuery behöver du inte lägga till CDN -länkarna.
<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>
Exempel Showcase
Vitrinsknapparna är kategoriserade i olika grupper:
-
Cirkel ikon knappar
-
Nedrullningsknappar
-
Standardknappar
-
Linjeknappar
-
Rektangelknappar
-
Cirkelknappar
-
Avrundade hörnknappar
-
Platta knappar
-
Gradientknappar
-
Gradient- och rektangelknappar
-
Platta och rektangelknappar
-
Linje- och rektangelknappar
-
Cirkel- och linjeknappar
-
Cirkel- och lutningsknappar
-
Rundare och linjeknappar
-
Stora sociala knappar med ikoner och nätverksnamn
-
Små sociala knappar endast med ikoner
Nedan följer några exempel på Bootstrap -knappar.
Cirkelknappar med ikoner
Bootstrap Social Sharing -knappar
Bootstrap Simple Line -knappar
Bootstrap rundade linjeknappar
Bootstrap rundade färgknappar
Bootstrap Standard Style -knappar
Om du använder Bootstrap -ramens CSS- och JS -filer på webbplatsen som inte använder Bootstrap -mallen, se till att alla andra element är fina och inte påverkas. Annars kan du behöva extrahera endast den nödvändiga CSS och använda den på din webbplats oberoende med hjälp av Bootstrap -anpassare.