TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Bootstrap -knappar Exempel

4

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.

Bootstrap -knappar Exempel

Cirkelknappar med ikoner

Bootstrap -knappar Exempel

Bootstrap Social Sharing -knappar

Bootstrap -knappar Exempel

Bootstrap Simple Line -knappar

Bootstrap -knappar Exempel

Bootstrap rundade linjeknappar

Bootstrap -knappar Exempel

Bootstrap rundade färgknappar

Bootstrap -knappar Exempel

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.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer