Bootstrap -knappar Exempel

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.